CleanorTools
SVG

SVG Color Replacer

Details

How to use SVG Color Replacer

What the tool does, how to run it, and what to expect from the result.

How to replace colors in an SVG

To replace SVG colors, upload an SVG file or paste its markup, and the tool lists each distinct fill and stroke color it finds. Pick the colors you want to change, set the new values, and export the updated SVG, all within your browser.

You can swap one color everywhere it appears or target specific fills and strokes, which is ideal when only part of an icon needs to change. Because it runs locally, the SVG markup never leaves your device.

  • Upload an SVG or paste the markup
  • See each detected color
  • Replace fills and strokes globally or selectively
  • Export the updated SVG locally

Where SVG recoloring helps most

SVG color swaps come up constantly in icon systems, branding refreshes, and design-to-development handoff. This tool keeps the job fast and focused instead of forcing you into a full vector editor for a simple recolor.

It is well suited to matching icons to a new brand palette, creating light and dark variants of an asset, or aligning a graphic to a UI theme in seconds.

Tips

Getting a better result out of SVG Color Replacer

Specific settings and thresholds, not general advice.

  • The tool scans the fill, stroke, and stop-color attributes on every element, plus the same three properties written inside an inline style attribute. Colors declared in a <style> block or applied through a CSS class inside the SVG are not detected, so an icon that colors itself with .cls-1 { fill: #333 } will show zero colors here.
  • Every color is normalized through the browser's own color parser before it is listed, so red, #f00, #ff0000, and rgb(255,0,0) all collapse into one swatch with a combined use count. You never end up recoloring the same color three times.
  • Because stop-color is scanned, gradient stops are editable even though a fill="url(#grad)" reference is skipped. That is the correct behaviour: recolor the gradient at its stops and every element pointing at it updates.
  • currentColor is deliberately left untouched. That keyword is how an inline icon inherits its color from the surrounding CSS, and rewriting it to a hex would hard-code the icon and break theming.
  • Replacement is global by color, not per element. Every element painted #1a1a1a changes together. If two shapes share a color but need to diverge, change one of them in a vector editor first, then bring the file here.
Limits

What SVG Color Replacer does not do

The honest boundary, so you do not lose time finding it yourself.

  • Colors defined in a <style> block or via CSS classes are not detected or replaced.
  • Only the first 24 detected colors get a swatch in the grid.
  • Output colors are hex only. The picker cannot produce rgba, hsl, or a named color, so you cannot set partial alpha this way.
  • No per-element targeting. Swaps apply to every element that uses that color.
At a glance

Who SVG Color Replacer is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Frontend teams, designers, and founders adapting icon packs and brand assets to new color systems.

Ideal for

Changing fill and stroke colors in one SVG without opening a broader design tool.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

Is the SVG Color Replacer free?

Yes. It is free and runs entirely in your browser, with no account required.

Does it upload my SVG?

No. Color detection and replacement happen locally, so the SVG markup never leaves your device.

Can I upload a file or paste markup?

Yes. Both file upload and paste-first workflows are supported.

Does this edit gradients?

Gradient editing is not the focus; the main workflow is replacing direct fill and stroke colors.

Can I change just one color?

Yes. You can replace a single color selectively or swap colors globally across the whole SVG.

The tool says zero colors detected. Why?

Almost always because the SVG paints itself from a <style> block using classes, which is what Illustrator produces when you export with the CSS styling option. The scanner only reads fill, stroke, and stop-color as attributes or inline styles. Re-export with presentation attributes, or paste the file into the SVG Optimizer first, which converts inline styles to attributes.

Can I recolor a gradient?

Yes, through its stops. Each <stop stop-color="..."> is detected as its own color and appears as a swatch. The fill="url(#gradientId)" reference on the shape itself is skipped, which is correct, because that is a pointer rather than a color.

Why is currentColor not in the list?

It is skipped on purpose. currentColor means the icon takes its color from the CSS color property of whatever element it sits inside, which is how a well-built icon system does theming. Replacing it with a hex would freeze the icon to one color everywhere it is used.

Can I make a color transparent?

No. The picker is a hex color input, so it cannot express an alpha value or the none keyword. To remove a fill entirely, set fill="none" in the markup yourself, or delete the element in a vector editor.

Is the SVG sent anywhere?

No. The markup is parsed, sanitized, scanned, and rewritten inside your browser. Nothing is uploaded, which makes this safe for brand assets that have not been announced yet.

How do I recolor a whole icon set at once?

This page handles one SVG at a time, so a large set is better handled in your build with a script or an icon component that uses currentColor. Use this tool for one-off swaps, brand refreshes on a handful of assets, and checking what a palette change looks like before you commit to it.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

SST
UtilitySVG

SVG Stroke to Fill Converter

SVG

Paste SVG markup and convert stroked shapes to filled equivalents, then copy the result. Free, in your browser, nothing is uploaded.

CODE
UtilitySVG

Inline SVG Cleaner

Clean inline SVG

Clean pasted SVG markup for inline frontend use, strip editor junk, and export a safer snippet.

SVG
UtilitySVG

SVG Blob Generator

Generate SVG blobs

Generate smooth, organic SVG blob shapes with adjustable points and contrast. Free, in your browser, copy the SVG.

SIZE
UtilitySVG

SVG Dimensions Checker

Inspect SVG geometry

Inspect one SVG for width, height, viewBox, intrinsic ratio, and missing geometry warnings.

GRID
UtilitySVG

SVG Icon Sizing Tool

Normalize SVG icons

Normalize one SVG icon to a clean 16, 20, 24, or 32 grid with tighter bounds and cleaner scaling.

SVGO
UtilitySVG

SVG Optimizer

Optimize SVG markup

Optimize one SVG locally, remove editor junk, and export cleaner markup with a smaller file size.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing