A production icon library with 786 custom SVGs, no index, no naming system, and 80 near-duplicates scattered across two source sections. Most design system work starts with a blank canvas. This one started with a junk drawer. Here is how I turned it into 240 named components across 23 semantic categories.
The Audit
I scripted the audit — the same kind of scripting-heavy design work I reach for Claude Code to handle. Pull every asset from Figma, split vector from raster, dedupe by base name, and rebuild the file into 23 semantic categories. The script caught 80 near-duplicates. Icons that were visually identical but had been placed independently across the file. Nobody knew they existed because nobody had ever counted.
Semantic categories emerged from the data: navigation, action, status, file-type, device, payment, and so on. The naming convention was mechanical enough to apply across all 240 surviving components because the dedupe pass had already collapsed the noise.
The stroke system: a 20px icon in a 24px container at 1.5px stroke, scaling on a clean one-sixteenth-of-container ratio so every size lands on a round number.
The Math
After the audit, a second pass grouped the icons into 35 variant clusters. An arrow icon might have four directions, two states (default and active), and a filled variant. That is eight visual states from one concept. A checkmark might have three: default, circled, and filled.
The question before componentizing was: how many visual states does each icon concept actually need? You cannot design a component API by eyeballing 760 icons. You can design one by counting. Thirty-five clusters collapsed into component specifications with explicit variant props: direction, state, style. Instead of 240 individually named one-offs.
The Handoff
The final developer handoff grid in Figma held 240 new icons converted to named components, each old icon paired with its replacement, rotations and all. I recolored 659 vectors to a single hex in one operation. No more hunting for stray fills.
The stroke system that holds it together: a 20px icon lives in a 24px container, drawn at 1.5px stroke. Scale it on a one-sixteenth-of-container ratio and every size lands on a round number. Sixteen, twenty, twenty-four, thirty-two, forty-eight. No fractional pixel outputs. I wrote that rule into the design system vault so the next person does not have to reverse-engineer it from the component properties panel.
What stuck
The ratio is what made the handoff clean. One component per semantic concept, variants as props, not separate files. When an engineer asks “which arrow do I use,” the answer is one component with a direction prop, not a directory of 30 arrow SVGs with names that made sense to nobody but the person who named them. The audit found the mess. The math made it maintainable.
