Stop Hardcoding SVGs in Your Components. Here's a Better Workflow.

If your React/Vue/Svelte codebase has more than a handful of icons, I'd bet money at least three of them are duplicated
The cost isn't really aesthetic. It's maintenance. When design wants to switch your icon weight from outline to filled across the app, you're now doing a find-and-replace across a dozen files instead of swapping one prop.

The fix is boring: pick one source of truth before you write a single icon component.

*## Here's the pattern I've settled on for most projects now.
*
*1. Source from one consistent icon set, not several
*
Mixing icon libraries is the root cause of 90% of "why does this icon look slightly off" bugs. I pull from Free SVG Icons because everything in the set shares the same grid and stroke logic, so swapping between outlined and filled variants later doesn't break visual rhythm — they're built on the same underlying paths, not two unrelated icon packs.

*2. Build a single component, not inline SVGs everywhere
*
jsxfunction Icon({ name, size = 24, color = "currentColor" }) {
return (



);
}
This is where format choice actually matters. If you're sprite-sheeting, you want clean SVG exports, not PNGs with baked-in dimensions. Grab the raw SVGs in bulk rather than screenshotting icons from a webpage (yes, people do this).

*3. Compress before you commit
*
SVGs from icon libraries often carry unnecessary metadata, comments, or precision you don't need at 24px. Before they go in the repo, I run them through an image compressor — it's saved real bytes on projects with 100+ icon sprites, which matters more than people assume once you're shipping to mobile networks.

*4. If you need a quick visual tweak, don't reopen Figma for a 2px stroke change
*
For small adjustments — recoloring, adjusting stroke width, resizing the artboard — there's a browser-based SVG editor that's faster than round-tripping through a design tool for something trivial.

*5. If your team lives in Figma, close the loop with a plugin
*
Designers exporting icons and Slacking them to devs is a workflow smell. The Figma plugin pulls icons directly into the file, so design and dev are referencing the same source instead of two slightly-out-of-sync copies.

The actual point

None of this is about which icon pack is "prettiest." It's about treating icons as a system instead of a folder of loose assets. Once you centralize the source, swapping styles, fixing inconsistencies, or scaling to a new platform (web → mobile → design system) stops being a multi-day refactor and becomes a config change.
If you're mid-refactor on this right now: rip out the inline SVGs first. Everything else is easier once that's done.