skills.rest
yyong008
yyong008COMMUNITY
Explore all skills by this author →
GitHub

icons

Integrate SeekSaaS icons from @workspace/custom-icons with React and Tailwind CSS.

Updated Aug 27, 2026
Search Tags:#react#design system#frontend development#icons#svg#ui components
One-click install
npx skills add https://github.com/yyong008/seeksaas-template-react-router-v0.1 --skill icons-yyong008
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: icons
Source: https://github.com/yyong008/seeksaas-template-react-router-v0.1/tree/main/.claude/skills/icons
Command: npx skills add https://github.com/yyong008/seeksaas-template-react-router-v0.1 --skill icons-yyong008

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @workspace/ui, class-variance-authority, react-icons, and includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide to using the SeekSaaS icon system, enabling consistent and efficient visual representation across applications.

Core Features & Use Cases

  • Icon Library: Access to a wide range of general-purpose and AI-specific icons.
  • Usage Examples: Demonstrates how to import and use icons with various customization options (size, color, props).
  • Use Case: Developers can quickly find and implement the correct icon for UI elements, branding, or feature representation, ensuring a cohesive design language.

Quick Start

Import the Icons or AiIcons components from the @workspace/custom-icons package to use them in your React components.

Frequently Asked Questions about icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate custom SVG icons into a React design system using Tailwind CSS?▼

You can customize icon size and color by passing props to the imported Icons or AiIcons components from the @workspace/custom-icons package, utilizing Tailwind CSS classes for consistent styling across your application.

What is the best way to add AI-specific icons to a frontend UI component?▼

The SeekSaaS icon system includes general-purpose and AI-specific icons, enabling consistent and efficient visual representation across applications by using the @workspace/custom-icons package.

Does the @workspace/custom-icons package support accessibility best practices?▼

Yes, the @workspace/custom-icons package supports accessibility best practices by providing guidelines for icon usage, ensuring visual elements are properly labeled and accessible within your React components.

How do I create icon buttons and badges with React UI components?▼

When adding new icons, consider performance best practices by optimizing SVG assets and utilizing the @workspace/custom-icons package efficiently to maintain fast load times and rendering within your React application.

Can I use class-variance-authority and react-icons to manage icon variants?▼

Yes, you can use class-variance-authority alongside react-icons and the @workspace/custom-icons package to manage icon variants, ensuring cohesive styling and consistent design language across your UI components.

Related Skills

Explore More Software Engineering Skills→
IntellifillIntellifill
1

ui-components

Generates reusable React components styled with TailwindCSS and CVA variants for IntelliFill's frontend.

Official
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic
fusenginefusengine
22

component-variants

Generate CVA-based multi-style UI components with Glass, Outline, and Flat variants.

Community
Intermediate
cfardevcfardev

react-icons

Render SVG icons in React/Next.js by importing from react-icons.

Community
Basic