Quick workflow for recoloring SVG icons

Design Resources
1

I’ve been working through a bunch of icon files recently and kept running into the same small annoyance: SVGs from different packs often have hard-coded fills and strokes, so a quick color swap turns into opening Illustrator or digging through the markup.

I made a small browser page for that workflow: svg recolor

It lets you load an SVG, see the colors it finds, change fills/strokes, preview it, and download the updated file. Nothing fancy, just meant for quick icon cleanup before dropping assets into a site or UI mockup.

Curious how other people here handle this. Do you usually clean SVGs by hand, use Illustrator/Figma, or keep small browser tools around for quick edits?

2

That sounds useful for those quick SVG jobs where opening a full design app feels like overkill.

One thing I usually watch for with recoloring SVGs is that not every visible color comes from a simple fill or stroke. Some icons use CSS classes, inline styles, opacity, masks, or gradients, so a tool that can identify those cases would be especially helpful.

For basic flat icons, though, being able to preview the changes and download the cleaned SVG directly could save quite a bit of repetitive work. I’d definitely keep something like this in the toolbox for batch icon cleanup.

1 Like
3

I wrote a script for indesign that allows you to swap colours directly in indesign.

You can do it pretty easily in Illusrator as the objects are selectable. But with SVGs that are placed, it’s awkward.

Put it in the InDesign scripts folder and away you go.

I never did finish it off but it worked for what I needed at the time.

1 Like
4

Nice!

5

I’m at something of a loss as to any practical use for this tool.

6

Well for what I was doing, I had a SVG with fill and stroke, and then each page changed colour, so the SVG changed colour, so instead of opening and resaving it and relinking it, I figured, why not do it directly in InDesign, it’s just SVG code, so it’s changing lines of code and making a new file and relinking it.

It was also required to use the same InDesign swatches, so it just remaps fills and strokes to available swatches in InDesign.

It worked for what I wanted, will I ever do it again. Nope.