colour tool
Recolour an SVG icon
Drop in an SVG icon, choose a new colour, and every fill and stroke in it is swapped while the shapes stay exactly as they were. Download the result as an SVG, or as a transparent PNG at the width you need.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Choose the SVG
Pick a file or drop it on the box. To use markup copied from an icon site, open Paste the markup instead and press Read this markup.
- 2
Pick the new colour
In One colour mode, set the colour with the swatch or type a hex code. Switch to Colour by colour to give each colour the file uses its own replacement.
- 3
Choose what changes
Leave Recolour fills and Recolour strokes both ticked, or untick one to keep, say, a dark outline around a recoloured shape. Before and After update as you go, on a checker, white or black backdrop.
- 4
Download
Download SVG keeps the file as vectors. For a PNG, set the width in pixels and press Download PNG; the height follows the icon's own proportions.
How an SVG icon carries its colour
An SVG icon is a list of shapes, and each shape is painted with a fill, a stroke or both. The colour can be written in four places: a fill or stroke attribute on the shape, a style attribute on the shape, a rule in a style block inside the file, or nowhere at all. A shape with no fill anywhere up its tree is painted black by default. Outline icon sets such as Lucide use a fifth route, currentColor, which takes the colour of the surrounding text. This tool reads every one of those, lists the colours it finds and how often each is used, and replaces them in place.
One colour or colour by colour
Most icons are a single colour, and One colour mode is built for them: every fill, stroke, gradient stop and currentColor becomes the colour you choose, and shapes left to the black default are given it too. A logo mark or a two tone illustration needs more care, so Colour by colour lists each distinct colour with a swatch, and you change only the ones you want. Transparent areas, fills set to none and pattern references are never touched, so holes in an icon stay holes.
SVG or PNG
Keep the SVG whenever the place you are putting the icon accepts it: it stays sharp at every size and is usually a few hundred bytes. Choose PNG for tools that only take pictures, such as some email builders and older slide software. The PNG is drawn from the recoloured SVG at the width you type, from 16 to 4096 pixels, with a transparent background, so render it at the size it will be shown or larger rather than scaling a small one up. The file is read and redrawn in this tab; nothing is uploaded and nothing is stored, ever.
Icons on a flyer
The flyer builder in OneCraft has its own icon picker: 135 featured icons before you search, then the whole Lucide set. Use this tool when you have a specific icon from somewhere else, such as a client's own symbol, and need it in an exact brand colour before placing it as an image.
Limits worth knowing
Embedded raster pictures keep their colours, because they are pixels rather than shapes. Colours set through CSS variables, filters or masks are not rewritten, and a file that relies on a stylesheet outside itself shows black wherever that stylesheet would have painted. Gradients flatten in One colour mode. Markup that is not valid XML is refused with a message rather than guessed at.
Limits
- SVGs that embed raster images are only partly recoloured: the embedded picture is pixels, so it keeps its colours, and the page tells you so.
- SVGs that use CSS classes for colour are only partly recoloured: values written in the file's style block are replaced, but colours that arrive through CSS variables or a stylesheet outside the file are not.
- In One colour mode every gradient stop takes the new colour, so a gradient becomes flat.
What it does not do
- It does not recolour JPG, PNG or WebP images. The image colour changer does that.
- It does not edit the shapes, resize the artwork inside the file or remove unused markup.
- It does not upload the icon or keep a copy of it.
Questions people ask
Why did part of my icon stay black?
Usually because that part gets its colour from somewhere the file does not hold, such as a CSS class defined on the website the icon came from. Inside the file there is no colour to replace, so the shape falls back to black. Paste the icon's markup together with its style rules, or use Colour by colour to set the default black entry.
Can I make an icon white for a dark background?
Yes. Type #FFFFFF as the new colour and switch the preview backdrop to Black to check it. A white icon looks empty on the checker backdrop, which is normal. If the icon has a white inner detail, such as an eye in a face, use Colour by colour instead so that detail can become dark.
What does currentColor mean in an SVG?
It tells the shape to use the colour of the surrounding text, so one icon matches whatever text it sits beside. That is handy on a website and useless in a standalone file, where it falls back to black. Recolouring replaces currentColor with a fixed colour, which is what you want for a file going into a flyer or slide.
Will recolouring make the SVG file bigger?
Barely. Colours are rewritten where they already are, so the file grows only by the few characters a longer colour code takes, plus a fill attribute on shapes that had none. The tool does not minify or reformat the markup, so comments and editor metadata from the original stay in the download.
What PNG width should I export for a slide or flyer?
Export at least as wide as the icon will be shown, and double that for sharp results on high density screens and in print. An icon that sits 120 pixels wide on a 1920 pixel slide is safe at 256 or 512. For a printed flyer, work out the width at 300 pixels per inch of the printed size.
Put the icon on a flyer
Take what you made here into flyers.
Create a flyer with OneCraftMore tools like this
- SVG to PNGRasterise an SVG at any size in your browser. It reads the declared width, height and viewBox, and warns about the fonts and links that will not survive.
- Image colour changerTap a colour in the image, pick its replacement, and see a mask of exactly which pixels change. Runs on your device, so the artwork is never uploaded.
- Font pairing toolA font pairing tool that previews a heading and body font together at flyer, slide and document sizes, then gives you the Google Fonts CSS to copy.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Favicon generatorDrop one image and see your favicon in a browser tab, a bookmarks bar, a Google result and a phone home screen, then download the ICO, PNGs and manifest.
Background reading: the question page on this.
Built with DOMParser and XMLSerializer (browser built in) (Web standard), Canvas API (browser built in) (Web standard).
Written and checked by the OneCraft team. Last checked .