Designs or audits an icon set so every glyph shares one grid, stroke weight, corner language, naming convention, and export pipeline, and delivers the written icon spec engineering builds against.
Designs or audits an icon set so every glyph shares one grid, stroke weight, corner language, naming convention, and export pipeline, and delivers the written icon spec engineering builds against. Use when someone asks "our icons look inconsistent", "set up an icon grid", "how should we name icons", "audit this icon set", "prep our SVGs for handoff", or is commissioning new icons and needs the rules first. Do NOT use for a single logo mark - use logo-brief-writer instead; for delivering full design specs beyond icons, use design-handoff-doc.This is the skill's description: the text your AI reads to decide when the skill applies.
icon-system/SKILL.md
---
name: Icon System
description: Designs or audits an icon set so every glyph shares one grid, stroke weight, corner language, naming convention, and export pipeline, and delivers the written icon spec engineering builds against. Use when someone asks "our icons look inconsistent", "set up an icon grid", "how should we name icons", "audit this icon set", "prep our SVGs for handoff", or is commissioning new icons and needs the rules first. Do NOT use for a single logo mark - use logo-brief-writer instead; for delivering full design specs beyond icons, use design-handoff-doc.
---
# 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
… load the full skill through Skill MeClick to play with sound.