Our Lighthouse score had been sliding for weeks and nobody could point to why. Bundle analysis kept flagging the same culprit: assets/icons/. Turns out four different contributors had each imported their own icon set over eighteen months, and nobody noticed because visually the icons looked fine. Under the hood, we were shipping the same "close" icon in three slightly different SVGs, each with its own embedded block, redundant <defs>, and inconsistent viewBox values.</p>
<p>Here's roughly what I found when I actually opened the files:</p>
<p>html</p>
<!-- icon version 1, from a Figma export -->
<p><svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><br>
<style>.a{fill:#1a1a1a;}
Same icon. Two completely different markup footprints, neither of them minimal. Multiply that across a hundred-plus icons and you get a genuinely embarrassing chunk of dead weight in the bundle.
The fix wasn't clever engineering — it was consolidating to one source with clean, consistent output. I ended up rebuilding the icon set from Free SVG Icons, mainly because every icon came out of the same export pipeline instead of five different designers' Figma files, which meant no more guessing whether stroke-width was going to be 1.5 on one icon and 2 on the next.
A few things that actually mattered for the cleanup:
Consistent viewBox and no inline styles. Every icon we pulled from the outlined icon collection came through with the same viewBox="0 0 24 24" and used currentColor instead of hardcoded hex fills, so we could finally theme icons through CSS instead of maintaining color variants as separate files.
Editing markup before it ever hit the repo. For icons that needed tweaking — stroke weight, a rounded cap, whatever — I used the SVG code editor to clean the paths up in-browser rather than round-tripping through a design tool just to fix a stroke-linecap.
Actually measuring the savings. Running the old and new icon sets through the image compressor before/after gave me real numbers to put in the PR description instead of "this should be smaller, trust me." That comparison was what got the refactor approved without a fight.
Fallbacks for older render paths. A couple of legacy email templates in the codebase still needed PNG fallbacks since some clients don't render inline SVG. Batch-converting through SVG to PNG instead of hand-exporting each one from Figma turned a half-day task into about ten minutes.
End result: bundle size on the icon chunk dropped from 460KB to 61KB, and Lighthouse's "Reduce unused CSS/JS" flag on that route finally cleared. None of it was algorithmic — it was just refusing to keep shipping four versions of the same arrow icon because nobody wanted to do the consolidation work.
If your icon folder has grown organically over a few years with multiple contributors, I'd bet money you have the same problem. Worth an afternoon to check before you start blaming anything else for your bundle size.
Top comments (0)