Change SVG & image icon colours instantly.

Recolour SVG & Icon Files in Your Browser

Upload an SVG, PNG, JPG or WebP icon and instantly change all non-transparent pixels to a new colour. Perfect for matching icons to a brand palette or dark mode, with all processing done locally in your browser.

  • 🎨 Recolour SVG icons by changing all non-transparent fills and strokes
  • 🖼 Recolour PNG/JPG/WebP icons to a single flat colour
  • 🔒 100% client-side — no uploads to a server
  • ⚙ Ideal for UI icons, logos, and simple illustrations
Start recolouring icons

Recolour SVG & Raster Icons

Use this icon recolour tool to quickly change the colour of simple icons, logos, and glyphs. Upload an SVG or raster image, choose a new colour, and all non-transparent pixels will be replaced with that colour. Ideal for mono-colour icon sets and UI assets.

1. Upload your icon

Supports SVG, PNG, JPG and WebP. For best results, use icons or images with clear shapes and transparency.

No file selected

Type: —

2. Choose your new colour

All non-transparent pixels (for SVG fills/strokes or raster pixels with alpha) will be replaced with this colour.

Tip: Use your brand primary or a neutral colour like white, black, or grey for flexible icon sets.

3. Apply recolour

Click “Apply colour” to recolour the icon. Changes are instant and stay in your browser.

Preview

The preview shows your recoloured icon. For PNG/JPG/WebP images, all visible pixels are recoloured. For SVGs, fills and strokes that are not transparent are changed.

Original

Original icon preview

Recoloured

How This Icon Recolour Tool Works

This icon colour changer uses different strategies for vector and raster images, but everything runs directly in your browser using JavaScript and HTML5 canvas.

  1. Upload your icon file. SVG, PNG, JPG and WebP are supported.
  2. Pick a new colour. This becomes the uniform icon colour.
  3. For SVG icons: The tool parses the SVG markup and updates all non-transparent fill and stroke colours to your selected value.
  4. For PNG/JPG/WebP icons: The image is drawn to a canvas, and every pixel with a non-zero alpha channel is recoloured to your chosen colour.
  5. Download the updated icon. SVGs are exported as updated SVG files, and raster icons are exported as PNG with your new colour applied.

Because everything is processed locally in the browser, your assets never leave your device, making this tool ideal for quick UI tweaks, design systems, and privacy-sensitive workflows.

Frequently Asked Questions

Which file types does this support?

You can upload SVG, PNG, JPG and WebP icons. SVG files are recoloured by editing their vector attributes, while raster formats are recoloured via pixel processing.

Does this respect transparency?

Yes. Only non-transparent pixels are recoloured. Fully transparent areas are preserved so your icons still work on different backgrounds.

Can I use this for multi-colour illustrations?

This tool is designed for mono-colour or simple icons. Complex multi-colour illustrations will be flattened to a single colour, which may not be what you want for detailed artwork.

Is it safe to use for brand assets?

Yes. All processing is done client-side, meaning your icons are never uploaded to any server. It’s suitable for internal design systems and brand libraries.