Icon System

An icon set without shared rules decays one icon at a time: each new glyph is drawn against a slightly different grid, stroke, or metaphor, and within a year the product carries three visual dialects that no single redraw can fix cheaply. This skill produces the spec that makes every icon - including ones drawn by future contributors - feel like one family, and the audit checklist that catches drift before it ships.

Operating procedure

Follow the order: the grid constrains the stroke, the stroke constrains the drawing rules, and naming/export only matter once the drawing rules are fixed. Changing the grid after 200 icons exist means redrawing 200 icons.

Step 1: Gather inputs

Collect before drawing anything. Label assumptions as guesses.

1. Rendering sizes in product (commonly 16, 20, 24px). The smallest real size drives detail decisions.
2. Style direction: outline, filled, or both. If both, they are two coordinated sets, not one.
3. Existing icons to keep - an audit target - or a greenfield set.
4. Platform constraints (web currentColor inheritance, iOS/Android asset pipelines).
5. Who will draw future icons - the spec must be executable by someone who was not in the room.

Step 2: Define the grid and keylines