SVG Color Editor · Free online SVG editor

SVG Color Editor:
change SVG colors online.

Change the colours of any SVG online, free and with no sign up. Drop an SVG illustration, icon or logo, or paste its code, and the editor lists every fill, stroke and gradient colour as a swatch. Click one, pick or type a new colour, watch the artwork change, then download the same SVG with the new colours or a PNG at any size.

Start editing below ↓

Drop an SVG here, or paste its code

Every fill, stroke and gradient colour is found for you

No file at hand?

Choose Color

Load an SVG first

Its colours appear here, ready to change

SVG File

Colours found · click one to change it

PNG Size

Custom size

Export Files

Edit new SVG

Want more illustrations like this?
Browse 40K+ premium SVGs, every one with editable colours. Explore the library →

Every colour found fills, strokes, gradients, styles
Live preview the canvas follows every pick
SVG or PNG out the same file, or any size
No install it runs in your browser

Recoloured in the editor

Four illustrations, three colours swapped

Pieces from the Humano Icons pack, each recoloured in the editor and nothing else touched. Move your mouse over a pair: both sides zoom in on the same spot, the original on the left and the recolour on the right. The chip is the swap it ran.

Award ribbon from the Humano Icons pack, the original colours — Award ribbon Humano Icons

Award ribbon recoloured in the SVG Color Editor: navy → ink · blue → lime — Award ribbon Humano Icons

Envelope and letter from the Humano Icons pack, the original colours — Envelope and letter Humano Icons

Envelope and letter recoloured in the SVG Color Editor: navy → plum · blue → pink — Envelope and letter Humano Icons

Idea bulb from the Humano Icons pack, the original colours — Idea bulb Humano Icons

Idea bulb recoloured in the SVG Color Editor: navy → forest · blue → amber — Idea bulb Humano Icons

Turntable from the Humano Icons pack, the original colours — Turntable Humano Icons

Turntable recoloured in the SVG Color Editor: navy → charcoal · blue → orange — Turntable Humano Icons

What it does

What the SVG Color Editor does, for free

One job, done properly: it reads the colours out of an SVG, wherever they hide, and lets you change them without opening a design tool. The file you download is the file you loaded, with the new colours written in place; paths, groups and ids are untouched.

Finds the colours for you
Fills and strokes, gradient stops, inline style colours, colours inside patterns, and the black or inherited colour on shapes that have none of their own. Each one becomes a swatch you can click.
Live preview
The canvas follows every pick and every drag of the picker; nothing to apply, nothing to save first.
Preset swatches
24 swatches in the picker: bright hues, greys from white to black, and a few reds, pinks and golds.
Common colour formats
Full hex and the #rgb shorthand, rgb() and rgba(), and common CSS names like navy or teal, all read and shown as hex.
Drop, browse or paste
Drag a file onto the canvas, pick one from disk, or paste SVG code straight from your editor.
SVG and PNG out
Download the recoloured SVG, still editable in Figma or Illustrator, or a PNG at the size you type in. Copy the SVG code to paste into a page or a component.
Copy the code
One click puts the recoloured SVG markup on your clipboard for inline use in HTML or React.
Reset any time
Back to the original colours in one click, or load another file and start again.
Look closer
Zoom, pan, rotate and flip the canvas to check a detail before you export.
Any SVG
Library illustrations, icon sets, Figma and Illustrator exports; if it is valid SVG, it loads.

How it works

How to change SVG colors online, step by step

Six steps, though most files only need you for three of them: drop, click, download.

1
Drop or pasteDrag an SVG onto the canvas, choose one from disk, or paste its code anywhere on the page.
2
Colours are foundEvery fill, stroke, gradient stop and style colour appears as a swatch in the panel.
3
Click a swatchA colour picker opens next to it, with a colour square, a hue slider, a hex field and 24 preset swatches.
4
Watch it changeEvery shape that used the colour updates as you drag. Type a brand hex for an exact match.
5
Check the detailZoom, pan, rotate or flip the canvas; Reset brings the original colours back at any point.
6
Download or copyThe recoloured SVG, a PNG at any size, or the SVG code straight to your clipboard.

Edit an SVG now ↑ Free. No account, no install, no watermark.

What you can edit

What this online SVG editor can and can't edit

It does one job: the colours. That keeps it fast and keeps your file clean, but it helps to know where the edges are before you start.

Changes in a click

Fill and stroke colours, set as attributes or inline styles
Gradient stop colours
Colours inside patterns
Shapes with no colour of their own, which draw black or take their parent's colour
The view: zoom, pan, rotate and flip to check a detail, never saved into the file

Not in this tool

Moving, reshaping or deleting paths
Editing text or adding new shapes
Colours set in a style block or a CSS class
hsl() colours and currentColor
Turning a PNG or JPG into an SVG

To add text and shapes around an SVG, upload it to our Design Studio. To reshape paths, open it in a desktop vector editor such as Inkscape, Figma or Illustrator. Starting from a PNG or JPG? Trace it into a layered SVG in Vectorizer Lab first, then bring it back here to recolour it.

Exports

What happens to your SVG file

The editor rewrites only the colour values you change, and everything else in the file stays as it was. Each export renders in your browser and downloads straight from the page.

Format	What you get	Best for
SVG	Your file with each changed colour written back where it was found, as an attribute or inside a style. Paths, groups, ids and gradients stay as they were, and the zoom, rotation and flip you used to look closer are not saved.	Design tools, websites, anything that must stay vector
PNG	A render at the size set by the file's viewBox, or at the width and height you type in. The artwork is scaled to fit and centred, never stretched, on a transparent background.	Slides, documents, social posts, quick previews
SVG code	The recoloured markup on your clipboard in one click	Inline SVG in HTML, React and Vue components

Changed your mind? Reset colours puts every colour back to how the file arrived, and Load another SVG starts again with a new file.

Use cases

Where a quick recolour saves the day

Match your brand

Type the exact hex from your brand guide and every shape that used the old colour follows. No palette yet? Build one on the color theory wheel first.

Dark-mode variants

Swap the light fills for dark ones and the ink for a pale tone, then download a second SVG for the dark theme.

Recolour a whole set

Packs share a palette, so the same three swaps make every piece match. Do one, note the hexes, repeat. Try it on a pack from our free illustrations.

Icons for a UI theme

Turn a black icon set into your interface colour, or make an active and an inactive state from one file. Our icon packs come as SVG.

Campaign colourways

Seasonal, regional or A/B variants of the same artwork without going back to the designer.

Straight into code

Paste an SVG from your codebase, recolour it, copy the markup back. No file round trip.

Need the illustrations too?

40K+ illustrations and icons, every one recolourable

All Access covers the whole library, unlimited projects and every new pack as it launches. Recolour any of it right here.

See the plans → Browse the library

One-time payment · instant access · 14-day money-back guarantee

FAQ

Questions about the free SVG editor

How do I change the color of an SVG online?

Drop the SVG on the editor at the top of this page, or paste its code. Every colour it finds shows up as a swatch, so click the one you want to change, pick or type the new colour, and download the SVG or a PNG.

Is this SVG editor free, and do I need to sign up?

It's free, with no account, no install and no watermark on anything you download.

Which colors does the editor find?

Fill and stroke colours set as attributes or in inline styles, gradient stop colours, colours inside patterns, and the black or inherited colour on shapes that have none of their own. It reads hex, the #rgb shorthand, rgb() and rgba(), and common CSS colour names, and shows them all as hex.

Why didn't some colors in my SVG change?

The colour is probably set somewhere the editor doesn't rewrite: a style block or a CSS class inside the file, an hsl() value, or currentColor, which takes its colour from the page around the SVG. Export the file again with its colours written as fill and stroke attributes and they will show up as swatches.

Can I edit shapes, paths or text in an SVG here?

No, this editor changes colours only. To add text or shapes around an SVG, upload it to our Design Studio. To reshape paths, open it in a desktop vector editor such as Inkscape, Figma or Illustrator.

Does the downloaded SVG stay editable?

Yes. Only the colour values you changed are rewritten. Paths, groups, ids and gradients stay as they were, so the file opens in Figma, Illustrator or Inkscape just like before.

Can I export a PNG at a specific size?

Yes. Tick Custom size, type a width and height in pixels, and Download PNG renders the artwork at exactly that size, scaled to fit and centred on a transparent background.

Can I undo color changes?

Yes. Reset colours puts every colour back to how it was when the file loaded, and Load another SVG starts over with a new file.

How do I recolor a PNG or JPG?

Turn it into an SVG first. Vectorizer Lab traces a PNG or JPG into a layered SVG in your browser, and you can then drop that SVG here and change its colours one by one.

Can I use this with any SVG file?

Yes. It opens any valid SVG: illustrations from GetIllustrations, icons from other libraries, or files you drew yourself in Figma, Adobe Illustrator or Inkscape.

What are the preset colors in the picker?

The picker has 24 preset swatches next to a colour square, a hue slider and a hex field, so you can type an exact brand colour as easily as you can pick one.

Edit an SVG, it's free ↑ View all FAQs

More free design tools