SVG editor
Recolour an SVG and adjust stroke weight, without opening a design app.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your file never leaves your browser during processing
How it works
To change the colour of an SVG, drop the file onto this page — every colour it uses is listed as a swatch, including ones written inside style attributes and CSS blocks, and replacing one updates the whole file, with before and after previews side by side.
This is not a drawing application, and that is the point. The common task is not redesigning an icon, it is changing one hex code in a file someone else exported — and doing that today means either installing a design tool or hand-editing XML and hoping you found every occurrence.
Finding every occurrence is the actual difficulty. Colour hides in four different places in a real SVG: fill and stroke attributes, a style attribute holding CSS on a single element, stop-color inside gradient definitions, and rules inside a style block at the top of the file. Design tools mix these freely — Figma tends toward attributes, Illustrator often writes a CSS block with classes — so a find-and-replace on hex codes gets most of them and leaves one shape stubbornly the old colour. The palette here is read from all four, with a count of how many times each colour appears, and replacing a swatch rewrites all of them together.
The currentColor option replaces flat colours with the currentColor keyword, so the icon inherits the CSS text colour of whatever contains it. That is what makes one icon file work on a light and a dark background without a second copy. It leaves gradients and none untouched, since neither is a colour that can be inherited, and it overrides the individual swatches while it is on.
Stroke weight is scaled proportionally rather than set to one value, so an icon that deliberately mixes thick and thin strokes keeps that relationship. Files that are filled rather than stroked have no stroke widths to scale, and the tool says so instead of appearing to do nothing.
FAQ
Why do some colours in my file not appear in the list?
Gradient and pattern references — values like url(#gradient) — are not flat colours, so they cannot be swapped for one. The colour stops inside the gradient are listed instead, since those are editable.
What does currentColor do?
It makes the icon take the CSS colour of whatever element contains it. One file then works in any colour context. Note it only applies when the SVG is inline in your page — an SVG in an img tag or a CSS background is isolated and cannot inherit.
Can I edit paths or move shapes here?
No. This changes colour and stroke weight only. Editing geometry needs a vector editor; if you just need the code, the SVG viewer keeps the markup editable with a live preview.
Does it work on icons exported from Figma or Illustrator?
Yes. Those exporters put colour in different places — attributes in one case, a CSS block with classes in the other — and both are read and rewritten here.
Is the file uploaded?
No. Parsing, editing, and preview all happen in your browser. The network monitor beneath the tool stays at zero bytes uploaded during processing.