icon-design
Installation
Summary
Map concepts to semantically appropriate icons across Lucide, Heroicons, and Phosphor libraries.
- Provides a quick reference table of 20 common concepts with icon names across all three libraries, plus a decision tree for selecting icons when uncertain
- Covers sizing rules (16px inline to 64px decorative), consistency patterns (no style mixing, no emoji), and tree-shaking best practices to avoid bundling unused icons
- Includes semantic mapping, React/HTML templates, and library comparison resources to guide library selection based on project needs
- Enforces explicit icon maps over dynamic imports to preserve tree-shaking and maintain bundle efficiency
SKILL.md
Icon Design
Select the right icon for the job. Maps concepts to icons, provides templates, prevents common mistakes.
Quick Reference (Top 20 Concepts)
| Concept | Lucide | Heroicons | Phosphor |
|---|---|---|---|
| Award/Quality | Trophy |
trophy |
Trophy |
| Price/Value | Tag |
tag |
Tag |
| Location | MapPin |
map-pin |
MapPin |
| Expertise | GraduationCap |
academic-cap |
GraduationCap |
| Support | MessageCircle |
chat-bubble-left-right |
ChatCircle |
| Security | Shield |
shield-check |
Shield |
| Speed | Zap |
bolt |
Lightning |
| Phone | Phone |
phone |
Phone |
Mail |
envelope |
Envelope |
|
| User/Profile | User |
user |
User |
| Team | Users |
user-group |
Users |
Related skills
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Ktanstack-query
|
2.5Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktailwind-theme-builder
>
2.2Kfastapi
|
2.0Kcolor-palette
>
1.9K