icon-design

SKILL.md

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

Icon Design

Select the right icon for the job. Maps concepts to icons, provides templates, prevents common mistakes.

Quick Reference (Top 20 Concepts)