SVG Recolor
Remap the colors of an SVG icon — swap specific colors with from→to pairs, or recolor everything to a single tint. Matching is format-insensitive (#fff, #ffffff, rgb(), named). Path data is never rewritten. Runs in your browser; nothing is uploaded.
About this tool
SVG Recolor rewrites the colors of an SVG icon or illustration without touching its shapes, paths or layout.
There are two ways to use it:
-
Swap specific colors — fill the Color map with
from=>topairs, one per line or comma-separated:#000000 => #ffffff red => #00ff00Each source color is matched no matter how it's written in the file —
#fff,#ffffff,#ffffffff(with alpha) andrgb(255, 255, 255)all match a source of#ffffff, and named colors likeredwork too. -
Recolor everything (monochrome) — put a single color in the Monochrome field to tint the whole graphic one color, e.g. to turn a multi-color logo into a single-color glyph. This overrides the color map when set.
It rewrites colors wherever SVG puts them:
- presentation attributes —
fill,stroke,stop-color,color,flood-color,lighting-color,solid-color; - inline
style="fill:…;stroke:…"declarations; - rules inside
<style>blocks.
It's intentionally safe:
- Path data, geometry and structure are never changed — only color values are rewritten.
none,transparentandcurrentColorare preserved — they aren't real colors, so they're left as-is.- Colors you don't map are left untouched.
Everything runs locally in your browser via WebAssembly — your SVG is never uploaded.
FAQ
Do I have to write the color exactly as it appears in the file?
No. Colors are compared by their canonical RGB(A) value, so a map entry of
#ffffff => #000000 also rewrites occurrences written as #fff, #FFFFFF,
#ffffffff or rgb(255, 255, 255). Named colors work too — the tool knows the
16 basic SVG/HTML names plus common extras like orange, gold, indigo and
violet; an unrecognized name is treated as a non-color and left alone.
What separators does the color map accept?
Each pair can use =>, ->, : or = between the source and target color,
and pairs can be separated by newlines, commas or semicolons — so
#000=>#fff, red -> #00ff00 and one-pair-per-line both parse. An entry with a
missing separator or an unparseable color on either side is reported as an
error instead of being silently skipped.
Why didn't monochrome mode recolor every part of my icon?
Monochrome replaces every real color, but none, transparent and
currentColor are keywords, not colors, so they're preserved — an element with
fill="none" stays unfilled. References like fill="url(#gradient)" are also
left in place, though the gradient's own stop-color values are recolored.
Note the monochrome field overrides the color map whenever it's non-empty.
Will the output change anything besides colors?
Only matched color values are rewritten (in canonical lowercase hex like
#ff0000). Path data, geometry, structure, whitespace and every other
attribute pass through byte-for-byte, and the whole rewrite happens locally in
your browser — the SVG never leaves your machine.
Developer & Automation Access
Run it from the terminal
Same engine as this page, headless — via the gizza CLI:
gizza tool svg-recolor '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="#000000" d="M12 2L2 22h20L12 2z"/>
</svg>'New to the CLI? Get gizza →
Open it by URL
Pre-fill and auto-run this tool with query parameters — the names match the API/CLI:
https://gizza.ai/tools/svg-recolor/?svg=%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M12%202L2%2022h20L12%202z%22%2F%3E%0A%3C%2Fsvg%3E&mapping=%23000000%20%3D%3E%20%23ffffff%0Ared%20%3D%3E%20%2300ff00&to=%233366ffMachine-readable descriptor: tool.json — title + parameters JSON Schema for agents.