How to how to optimise svg icon libraries in large design systems
- Step 1Audit your icon library — Run: find ./icons -name '*.svg' | xargs grep -l '<defs>' to find all SVGs with definition blocks. Then count how many defs are actually referenced.
- Step 2Batch purge unused defs — Run the Unused Defs Purger on the entire icons folder. Record the before/after file sizes to quantify the improvement for your engineering blog or design system docs.
- Step 3Add to the icon contribution workflow — Document that all new icon contributions must pass through the defs purger before PR review. Add it as a CI check so contributors get immediate feedback.
Frequently asked questions
How often should I run the purger on an active icon library?+
Run it as part of every icon update PR. Make it a required check in CI so unused defs never accumulate between releases.
Does cleaning defs affect icon versioning or changelogs?+
Removing unused defs doesn't change any visible aspect of the icon. In semantic versioning terms, it's a patch — the icon's visual output is unchanged.
Our icons are in a monorepo — can I purge a subtree?+
Yes. Target a specific path: node scripts/purge-defs.js ./packages/icons/src. The script only processes files in the specified directory tree.
What tools do large design systems use for SVG optimisation?+
Most large design systems (Carbon Design System, Material Icons, Radix) combine SVGO in the build pipeline with custom ESLint rules for SVG consistency. The JAD purger adds the unused defs check that SVGO's default config omits.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.