Recolouring an SVG usually means opening an editor, hunting through the markup by hand, or uploading the file to a converter you do not trust with an icon you are about to ship. The Icon Studio in OnePassApps does it in the tab you are already in: you drop the SVG in, pick the colour you want to replace, type the new one, and take the file back out.
I work on OnePassApps, and this is what the tool actually does.
The three steps in the panel
The Recolour SVG tab is laid out as three stages, the same way the rest of the Studios are:
- 01 Source - "No SVG yet. Drop one on the stage or browse for it. SVG up to 5 MiB and 25,000 elements."
- 02 Solid SVG paints - "The solid fill and stroke colours of your SVG appear here as swatches."
- 03 Result - "The recoloured SVG and how many paints changed."
Before you load anything the panel says "Add an SVG to start. Your original stays untouched." The page itself notes that files stay in your active browser tab and that processing stays in this browser.
What happens when a file lands
Drop an SVG on the stage and the Source stage names it and reads its dimensions and size. The panel then reports how many solid colours it found, and every one of them turns into a swatch you can click.
I dropped in a 387-byte SVG with a rounded indigo rectangle and a white circle on top. The panel said:
Found 2 solid fill/stroke colours.
and the two swatches were the indigo #4F46E5 and the white #FFFFFF. A second file with three colours in it - a blue rect with a dark stroke and a red circle - reported "Found 3 solid fill/stroke colours."
So you are not guessing at hex codes by eye. The studio reads the colours that are actually in the file and hands them to you as swatches.
Choosing the colour to replace
Click a swatch and the Colour to replace field fills in with that hex value. Next to it is the Replacement colour (HEX) field, where you type the new value. The panel reminds you what will not be touched:
Paints set to none, gradient references, opacity attributes and unrelated colours are kept.
That line matters more than it sounds. If your icon uses a gradient, an opacity attribute or a paint set to none, recolouring one solid value does not rewrite the rest of the file. Colours you did not pick stay as they were.
The result
With the white circle selected to be replaced and #16a34a typed as the new colour, the result stage came back with:
- Before 387 B SVG
- After 323 B SVG
- Paints replaced 1
- File name probe-recoloured.svg
- Created in 0.1 s
The banner under it read "Replaced 1 matching #ffffff paint value." and there was a Download SVG button next to the new file. The same run with the dark stroke colour selected reported "Replaced 1 matching #0f172a paint value."
I read the downloaded file to be sure the change was real and not just a claim in the panel. The circle's fill changed from #ffffff to #16a34a, and the rectangle kept its original #4f46e5 fill. Only the paint you asked for moved.
There is also a dark and light preview next to the result, so you can see a pale icon against a dark background and the same icon against a light one before you download anything.
Where it fits
Recolour SVG is one of eight tabs in the Icon Studio - SVG to PNG, PNG to ICO, Favicon pack, App icons, Resize set, Optimize SVG, Recolour SVG and Trim / padding - so recolouring an icon and then turning it into a PNG or a favicon set happens in the same place.
The whole thing runs on the Standard plan, which is free right now at $0 a month with 100,000 credits every 30 days, no end date set and no card required. There is no automatic paid subscription.
You can open the tool here: Recolour SVG in the Icon Studio. If you would rather read how the other tabs fit together, the guides walk through the Studios one by one.
I work on OnePassApps, the team behind app.onepassapps.com. Every file in this post was processed in the browser tab, and the downloaded SVG is what I read back above.
Top comments (0)