Auditing a drifting icon library, screen by screen

The setup

Six hundred screens, and a design file nobody trusted

Who

Maya, a design systems engineer brought in to unify the component library of a five-year-old fintech dashboard.

Stack

React, an internal icon package, Figma, Storybook. Icons were a mix of inline <svg>, a couple of old sprite sheets and a few stray <img> tags.

The job

Audit every icon actually shipping in the app, find the duplicates and near-duplicates, and reconcile them against the design library before a rebuild.

The wall

The rendered app was the only source of truth — and none of those icons could be right-clicked and saved.

What wasn't working

“The Figma library had drifted years ago. Three ‘settings’ gears, two ‘close’ crosses at different stroke weights, an ‘export’ arrow that had been quietly redrawn in 2022 but never updated in the design file. I couldn't audit against Figma because Figma was part of the problem. The truth was in the DOM.”

Maya's first pass was the manual one every front-end person knows: open DevTools, find the <svg> node, copy the outer HTML, paste it into a scratch file, add the xmlns by hand so it would actually render, repeat. “About forty icons in, on a Tuesday, I admitted this was going to eat my whole week and I'd still make transcription mistakes.”

The switch

Instead of copying nodes one at a time, Maya ran SVG Downloader on each major screen. The popup walks the DOM and reports a count — 0 → 24 SVGs found — then hands over every one as a real file, namespace repaired so it opens straight into Figma and VS Code.

detect

“The count was the first thing that helped. A screen I thought had eight icons reported fourteen — six were decorative backgrounds set in CSS that never showed up in any inventory. Then Download All as ZIP gave me the whole screen's set, de-duplicated and numbered, in one go.” Diffing standalone files is trivial; diffing a running app is not.

The result

• ~40near-duplicate icons found and collapsed to a canonical set
• 1 afternooninstead of the week the manual copy-paste pass was tracking toward
• 0hand-typed xmlns fixes — every file opened first try

What did the work

Inline SVG detection for the components, CSS background catch for the decorative ones, and Download All as ZIP per screen.

Why not DevTools

Copying nodes by hand loses the xmlns, misses CSS and sprite sources entirely, and doesn't scale past a few icons. See extract SVG icons.

Privacy

Proprietary dashboard, so it mattered: nothing left the machine. No upload, no account, no analytics.

Composite story — an illustrative but representative workflow. The person and company are fictional; the extension's behaviour described here is real. More stories →