SVG Color Replacer

How to use

1. 1Paste your SVG into the input, or click Open .svg file to load a file from your device. Use Load sample to try the tool on a built-in icon.
2. 2The Colors found panel lists every unique color the SVG uses, with a swatch, kind (HEX, RGB, HSL, keyword), and how many times the color appears.
3. 3For each color, pick a new hex with the color picker, type any CSS color into the text field, or use the currentColor, transparent, and none presets. Click Undo to drop a single replacement, or Reset changes to drop them all.
4. 4Switch the preview background (checker, dark, light, white, black) to confirm the recolored SVG looks right against the surface it will live on.
5. 5Click Copy SVG to put the recolored markup on your clipboard, or Download .svg to save it as recolored.svg.

About this tool

SVG Color Replacer reads any SVG you paste and lists every concrete color it uses, drawn from fill, stroke, stop-color, flood-color, lighting-color, and any color, fill, or stroke declaration inside an inline style attribute. Each unique color is normalised (3-digit hex expands to 6, rgb and hsl strings collapse their whitespace, named colors lowercase) so that #FFF, #ffffff, and white group as the same color and report a single combined usage count. You can remap any color with a native browser hex picker, a free-form text field (accepts hex, rgb, rgba, hsl, hsla, and CSS named colors), or one-click presets that set the color to currentColor (so the icon inherits the surrounding text color), transparent, or none. A second one-click action remaps every concrete color to currentColor in one step, which is the standard way to turn a multi-color icon into a single-color icon that follows your theme. The recolored SVG renders live in a sandbox preview with switchable backgrounds (checker, dark, light, white, black) so you can confirm the result against whatever surface the icon will live on. Parsing uses DOMParser (image/svg+xml) and serialization uses XMLSerializer; the picker walks the parsed tree once with a TreeWalker so even deeply nested gradient stops are collected. Safety: every script element and every on* event handler attribute is removed before the SVG is mounted in the preview or copied to the clipboard, and javascript: hrefs are cleared. Useful for matching a Heroicons or Lucide icon to your brand palette, recoloring a Figma export so it matches a dashboard chart, building a one-color icon set that follows the surrounding text color, or just trying out a new accent color on an existing illustration. Output is paste-ready SVG that you can drop into a .svg file, a React component, or an HTML page; a Download button saves it as recolored.svg.

Free to use. Works in your browser. No signup, no login.