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
Email Mail envelope Envelope
User/Profile User user User
Team Users user-group Users
Related skills
Installs
434
GitHub Stars
776
First Seen
Jan 20, 2026