Recolor one icon or a whole set consistently — every fill, stroke and gradient stop mapped exactly, with live preview.
SVG files or a whole folder · every colour is detected across all files · or paste SVG code
No size limit · files are processed on your device and never uploaded · how it works
Advanced settings (optional)
Recolor options
Mode
Pick a new colour for any swatch above. Unmapped colours are left as they are.
Runs in your browser. Files are never uploaded — you can go offline after the page loads.
How to use the SVG Color Changer
Click “Choose Files” or drop your SVG files into the box above. Whole folders work too.
Adjust the Advanced settings if you need to, then click “Download”.
When the row shows Done, click “Download” — or “Download all” for a ZIP.
Easy to use
Drop files, pick options, download. Whole folders at once, no signup, no daily limit.
Best quality
The same engines the professionals use — SVGO, resvg, MozJPEG, libwebp, libavif — compiled to run in your browser.
Private & secure
Files are processed on your device and never uploaded. Close the tab and nothing remains anywhere.
How the SVG color changer works
Drop one SVG or a whole folder. The tool scans every file for colour values — attributes like fill="#1a73e8",
inline styles like style="stroke: red" and rules inside <style> blocks — and builds one
palette across all of them, sorted by how often each colour appears. Different spellings of the same colour are merged, so
#F00, red and rgb(255,0,0) show up as one swatch. Pick a new colour for any swatch and
every file updates live. Files are edited as text on your device and never uploaded.
Three ways to recolor
Map each colour — the default. Assign a replacement for any colour you want changed and leave the rest. Right for multi-colour illustrations and two-tone icon sets.
Replace all with one colour — every fill and stroke becomes a single colour. The quickest way to turn a downloaded icon pack into your brand colour.
Convert all to currentColor — fills and strokes become currentColor, so the icon inherits whatever CSS color its container has. This is how you make an icon themeable, hoverable and dark-mode-ready with a single file.
In every mode, fill="none", gradient references (url(#…)) and existing currentColor are
left alone, and gradient stop-colors are treated as ordinary colours you can map.
What stays the same
Only colour values are touched. Element structure, ids, classes, transforms, comments and formatting are preserved exactly,
so the recoloured file diffs cleanly against the original and anything that referenced ids or classes keeps working. If you
want the file smaller too, run the output through the SVG Optimizer; to get PNGs of the new
colours, use SVG to PNG.
Tips for icon sets
Drop the whole set at once — the palette shows how many files each colour appears in, which immediately reveals stray
off-brand shades (a #231f20 among #000000s is the classic Illustrator export artefact). Map the
strays to the intended colour, download the ZIP, and the set is consistent. For icons you will use inline in HTML, convert
to currentColor and control colour from CSS instead of shipping one file per colour.
Frequently asked questions
Which colours does it find?
Every colour literal used for fill, stroke, stop-color, flood-color, lighting-color and the color property — whether written as an attribute (fill="#f00"), an inline style (style="fill:red") or a rule inside a <style> block. Equivalent spellings (#f00, #ff0000, red, rgb(255,0,0)) are recognised as one colour so a single mapping covers all of them. Values such as none, url(#gradient) and currentColor are listed separately and never changed.
What is currentColor and when should I use it?
currentColor is the SVG keyword that means "use the CSS color of the surrounding element". An icon converted to currentColor takes its colour from the page: color: white in a dark header, color: #333 in body text, a hover colour on a button — with one icon file. It is the standard way icon libraries ship single-colour icons. Multi-colour illustrations should keep their explicit colours and use the per-colour mapping instead.
Will it change anything except colours?
No. The tool edits colour values in place and leaves everything else byte-for-byte as it was: element structure, ids, classes, transforms, comments, whitespace and attribute order. If you also want a smaller file, run the result through the SVG Optimizer afterwards.
Can I recolor a whole icon set to my brand colour?
Yes — drop the folder, pick "Replace all with one colour" and enter your brand hex. Every fill and stroke in every file becomes that colour while none and gradients are left intact, and the ZIP keeps the original file names. For two-tone sets, use "Map each colour" and assign each detected colour individually; the mapping applies across all files at once.
Why do some icons show no colours?
Shapes with no fill attribute render black by default and already follow currentColor, so there is nothing to list. Icons that get their colour purely from an external stylesheet or CSS variables (fill: var(--icon)) are also not editable here because the colour is decided outside the file.
Most online converters upload your file to a server. InfyTool ships the actual encoders to your browser as WebAssembly instead, so processing happens inside your tab — faster for batches, and nothing to delete afterwards.
No upload, ever. Turn off Wi-Fi after the page loads and every tool keeps working.
No limits. No file-size cap, no queue, no watermark, no account.
Runs on your CPU. Batches use several cores in parallel; nothing is throttled.