Icons are the last thing you document and the first thing that breaks consistency.
Most design systems ship with icons pulled from three different libraries, sized at 16px here and 24px there, with stroke weights that don’t match the UI they sit in.
Nobody planned it that way — it just happened one component at a time.
The fix isn’t finding the perfect icon library. It’s building a grid, a token set, and a decision to pick one source and stay there.
A 24×24px base grid with a 2px stroke standard means every icon in your system lives on the same optical baseline.
Token names like –icon-size-sm, –icon-size-md, and –icon-size-lg get you consistent sizing without hard-coding values across 40 components.
Using currentColor for the fill means icons inherit text color automatically — your dark mode comes for free.
When you treat icons as a subsystem instead of a collection of SVG files, they stop being a maintenance problem and start behaving like everything else in the system: predictable, swappable, and easy to audit.io
