icon-designlisted

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.
citedy/skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill citedy/skills

# 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/