SVG Color Editor · Free online SVG editor

Recolour any SVG.
Right here, free.

Drop an SVG illustration or icon, or paste its code. The editor finds every fill, stroke and gradient colour, lets you swap each one with a live preview, and hands back the same file with the new colours, or a PNG at any size. No signup, no install.

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 every colour
Fills and strokes, gradient stops, inline styles, CSS classes and the colours an element inherits from its parent. Each one becomes a swatch, with a count of the shapes that use it.
Live preview
The canvas follows every pick and every drag of the picker; nothing to apply, nothing to save first.
Preset palettes
Warm tones, cool tones, neutrals and accents in the floating picker for one-click theming.
Any colour format
Hex, #rgb shorthand, rgb(), rgba(), hsl(), hsla() and CSS names, all read and normalised to 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

Six steps, and most files need three

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 swatchThe floating picker opens next to it: presets, a hex field and a full colour wheel.
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.

Exports

What you get back

Everything renders in your browser and downloads straight from the page.

Format	What you get	Best for
SVG	Your file with the new colours written in; paths, groups, ids and gradients untouched	Design tools, websites, anything that must stay vector
PNG	A raster render at the file's own size, or the width and height you type in	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, emails

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. An illustration from the library fits your palette in a minute.

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.

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.

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

Is this SVG color editor really free?

Yes, completely free: no signup, no credit card, no hidden fees. The editor runs in your browser and will always be free to use.

What color formats are supported?

Hex colours (#rrggbb and the #rgb shorthand), RGB and RGBA, HSL and HSLA, and CSS named colours such as red, blue or darkgreen. Every format is detected and normalised to hex for editing.

Can I use this with any SVG file?

Yes. The editor works with any valid SVG: illustrations from GetIllustrations, icons from other libraries, or files you drew yourself in Figma, Adobe Illustrator or Inkscape.

Does it change anything besides the colours?

No. Paths, groups, ids and gradients stay exactly as they were; only the colour values you change are rewritten, so the file opens in your design tool the same way it did before.

Can I undo color changes?

Yes. The Reset button restores every colour to its value from when the file was first loaded, and Load another SVG starts over with a new file.

What are the preset color palettes?

The floating picker carries curated swatches, warm tones, cool tones, neutrals and vibrant accents, next to a hex field, so you can type an exact brand colour as easily as picking one.

Can I export a PNG at a specific size?

Yes. Tick Custom size in the panel, type a width and height in pixels, and Download PNG renders the recoloured SVG at exactly that size.

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

More free design tools