Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
View on GitHubskills/icon-design/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/brendadeeznuts1111/tier-1380-omega/blob/main/skills/icon-design/SKILL.md -a claude-code --skill icon-designInstallation paths:
.claude/skills/icon-design/# 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` | | Email | `Mail` | `envelope` | `Envelope` | | User/Profile | `User` | `user` | `User` | | Team | `Users` | `user-group` | `Users` | | Settings | `Settings` | `cog-6-tooth` | `Gear` | | Home | `Home` | `home` | `House` | | Search | `Search` | `magnifying-glass` | `MagnifyingGlass` | | Check/Success | `Check` | `check` | `Check` | | Close/Cancel | `X` | `x-mark` | `X` | | Menu | `Menu` | `bars-3` | `List` | | Calendar | `Calendar` | `calendar` | `Calendar` | | Clock/Time | `Clock` | `clock` | `Clock` | | Heart/Favourite | `Heart` | `heart` | `Heart` | ## Library Selection | Library | Best For | Package | |---------|----------|---------| | **Lucide** | General use, React projects | `lucide-react` | | **Heroicons** | Tailwind projects, minimal style | `@heroicons/react` | | **Phosphor** | Weight variations needed | `@phosphor-icons/react` | **Default recommendation**: Lucide (1,400+ icons, excellent React integration) See `references/library-comparison.md` for detailed comparison. ## Icon Style Rules ### Sizing | Context | Tailwind Class | Pixels | |---------|----------------|--------| | Inline with text | `w-4 h-4` or `w-5 h-5` | 16-20px | | Feature cards | `w-8 h-8` | 32px | | Hero sections | `w-10 h-10` or `w-12 h-12` | 40-48px | | Large decorative | `w-16 h-16` | 64px | ### Consistency Rules 1. **Never mix style