iconography
Drawing and Choosing Icons
Default posture: one icon set for the whole product, one effective stroke weight per surface, matched to the weight of the text it sits beside, and a label on anything whose metaphor the platform has not already taught. Icons change size by changing cut, not by scaling a single drawing — a 24px outline mark shrunk with CSS keeps detail that was never meant to survive at 12px, and its stroke lands off the pixel grid. This skill owns the structural constraint that makes one icon able to become another — matched primitive counts, the three-line budget, rotation groups — while the duration, curve and interruption behaviour of that morph belong to transitions, and whether it animates at all is decided by the frequency gate before either skill is loaded. Photographs, illustration, avatars and device frames are imagery.
Read which set the project already installs before drawing or importing anything. Check package.json for lucide-react, @radix-ui/react-icons, @phosphor-icons/react, @heroicons/react, material-symbols, or a local components/icons directory, and stay inside it. Adding a second set is the fastest way to make an interface look assembled rather than designed: two sets differ in grid, stroke, corner radius and terminal style, and those differences compound across a card grid until every row reads slightly wrong for a reason nobody can name.
Quick Reference
| Open this | When |
|---|---|
| icon-sets.md | You need a set's grid, default stroke or size cuts, or you are matching a new icon to an existing set's weight. |
| morphing.md | One icon must become another — menu to close, chevron rotation, play to pause — and you need the shape constraints that make it possible. |