Change the colors of an SVG
Recolor an icon or illustration without opening a design tool. Every color the file uses — fills, strokes, gradient stops and colors in its styles — is listed with how often it appears. Pick a replacement for any of them and the preview updates instantly.
How to use it
- 1
Drop an SVG or paste its code — every color it uses is listed.
- 2
Pick a new color for any of them; the preview updates as you go.
- 3
Download the recolored SVG or copy its code.
Questions
Which colors are found?
Hex and rgb() colors in fill, stroke, stop-color and color attributes, in inline styles, and in the file's <style> rules. Colors given by name (like "red") are listed too.
Is the rest of the file changed?
No. Only the colors you replace change; shapes, gradients and structure are left exactly as they were.
How do I make an icon follow my text color?
Replace its color with currentColor in the SVG code. It then takes the CSS color of whatever it sits in.
Is my SVG uploaded?
No. Everything happens in your browser.
More free SVG tools
Need more than one change?
The Splice editor edits SVGs visually — shapes, text, colors, layers — across many files at once, with the code in sync.
Open the editor