Which icon libraries are supported by this skill?

The skill provides specific guidance and templates for Lucide (recommended), Heroicons, and Phosphor Icons.

Can it help me choose the right icon for a specific feature?

Yes, it includes a semantic decision tree and concept-to-icon mapping for common needs like security, speed, communication, and location.

Is this skill compatible with Tailwind CSS?

Yes, it includes standardized Tailwind classes for various contexts, such as inline text (w-4 h-4) or large feature cards (w-8 h-8).

How does this skill improve web performance?

It provides 'Tree-Shaking' patterns that prevent entire icon libraries from being bundled, ensuring only the icons you actually use are included in your final build.

Does it support React projects?

Absolutely. It includes React/HTML templates and specific implementation patterns for React-based icon libraries like lucide-react.

Icon Design System

Name: Icon Design System
Author: evolv3ai

byevolv3ai

0•

设计工具

Streamlines icon selection and implementation using modern libraries like Lucide and Heroicons while enforcing design consistency and performance.

The Icon Design skill provides a comprehensive framework for selecting semantically appropriate icons for web projects, mapping abstract business concepts to specific components in libraries like Lucide, Heroicons, and Phosphor. It eliminates guesswork by providing standardized Tailwind CSS sizing rules, style consistency patterns, and critical implementation guides for tree-shaking. Whether building feature grids, navigation menus, or contact sections, this skill ensures your UI remains professional, performant, and visually cohesive without relying on non-standard emojis.

主要功能

01Support for Lucide, Heroicons, and Phosphor icon libraries

020 GitHub stars

03Optimized implementation patterns to prevent tree-shaking issues in React

04Style enforcement rules to prevent mixing solid and outline icons

05Standardized Tailwind CSS sizing and styling rules for consistency

06Semantic mapping for 20+ common UI concepts to specific icon components

使用场景

01Optimizing React bundles by implementing explicit icon mapping for tree-shaking

02Developing feature sections and service grids with consistent visual language

03Standardizing UI components like navigation, contact forms, and status indicators

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add evolv3ai/claude-skills-archive icon-design

For use in Claude.ai and ChatGPT

Download Skill