SVG editor
Change an SVG’s colours and line thickness, no design app needed.
Using toolbook means you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your files stay on your device
How to use it
Drop an SVG here to see every colour it uses as a swatch. Change one and the whole file updates, with before and after previews. Your file stays private.
Need an icon in your brand colour? No need to install a design app or dig through code. Drop the SVG onto the box above and every colour it uses appears as a swatch, with how many times each is used.
Click a swatch, pick a new colour, and the whole file updates. Before and after previews sit side by side so you can check it.
Use the slider to make lines thicker or thinner — thick and thin lines keep the same balance.
Building a website? “Replace every colour with currentColor” makes the icon take on the text colour around it, so one file works on light and dark backgrounds.
FAQ
Why are some colours missing from the list?
Gradients aren’t single colours, so they can’t be swapped as one. Their individual colour stops are listed instead.
What does currentColor do?
It makes the icon match the text colour around it — but only when the SVG code is placed directly in your page.
Can I move shapes or edit paths?
No, this changes colours and line thickness only. For the code itself, try the SVG Viewer.
Does it work on Figma and Illustrator exports?
Yes. Both store colours differently, and both are handled.
How it worksFor the curious
Colour hides in four places in a real SVG: fill and stroke attributes, inline style attributes, stop-color in gradient definitions, and rules in a style block. Figma tends towards attributes, Illustrator towards a CSS block with classes, so find-and-replace misses some. The palette is read from all four and a swatch change rewrites every occurrence.
currentColor replaces flat colours with the currentColor keyword. Gradients (url(#…)) and none are left alone, since neither can be inherited. It only takes effect when the SVG is inline in the page — an img or CSS background is isolated.
Stroke widths are scaled proportionally rather than set to one value. Files that are filled rather than stroked have no stroke widths to scale, and the tool says so.