SVG Cleaner & Optimizer

Optimize SVGs for Web Use

Swap the hard-coded colours in SVG icons for currentColor, remove the fixed width and height, and minify the code, so each icon takes its colour and size from your CSS. Your files are cleaned in your browser, never uploaded.

Drop your SVG files here

Icons and logos, as many as you like. They never leave your device.

Colours become currentColor, the width and height go and the code is minified. Change it below.

Optimized for Elementor

Filename Options

Convert to SEO-friendly slug

Prefix

Suffix

Guide by Ashley Whitehair, web designer at Norwich Website Design

How to clean an SVG

Add your SVGs
Drop one or more SVG files onto the box above, or click it to choose them.
Check the settings
The defaults suit a one-colour icon: hard-coded colours become currentColor, the width and height go and the code is minified. Then press Process. The arrow on a result shows the original and cleaned icons side by side.
Download
Use the download button on a result, or Download ZIP for all of them in cleaned_svgs.zip. If you change a setting, press Rerun with new settings.

What the SVG Cleaner does

Icons exported from Figma, Illustrator or Inkscape carry their colour and size inside the file, which gets in the way when an icon should follow your site’s colours or scale with its text. The cleaner rewrites those parts and leaves the shapes alone. Here’s a star exported from Figma, before and after cleaning with the default settings:

<!-- Before -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15 9H22L16.5 13.5L18.5 21L12 16.5L5.5 21L7.5 13.5L2 9H9L12 2Z" fill="#1E1E1E"/>
</svg>

<!-- After -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2L15 9H22L16.5 13.5L18.5 21L12 16.5L5.5 21L7.5 13.5L2 9H9L12 2Z" fill="currentColor"/></svg>

Why currentColor matters for icons

currentColor is a CSS keyword meaning “the text colour of this element”. When an icon’s shapes use it, the icon takes the colour of the text around it: one file works in a dark header, a light footer and a hover state. Page builders such as Elementor recolour uploaded SVG icons the same way.

It only works when the SVG is part of the page, pasted inline or inlined by your page builder. An SVG shown with an img tag or as a CSS background can’t see your page’s CSS, so currentColor draws black there.

What each option does

Option	Default	What it does
Remove width/height	On	Deletes the fixed size, so the icon takes the size you give it in CSS. If there’s no viewBox, one is made from the width and height first, so it still scales.
Process fill colors	On	Turns every fill colour into currentColor: in attributes, style attributes and style blocks. fill="none" is kept, so outlines stay hollow.
Use currentColor	On	Untick it to delete the colours instead, leaving them to your CSS fill and stroke.
Process remaining strokes	On	Does the same for stroke colours. Stroke widths, line caps and joins are kept.
Outline strokes	Off	Turns strokes into filled shapes, like Outline Stroke in Figma, for tools that can only colour fills.
Flatten & merge paths	Off	Joins overlapping shapes of the same colour into one path.
Minify output	On	Removes comments and the whitespace between tags.
Filename options	Off	Makes an SEO-friendly name and adds a prefix or suffix: with the slug ticked and the prefix icon-, “My Icon (1).svg” becomes icon-my-icon-1.svg.

Using the cleaned SVG on your site

Paste the SVG into your HTML, add a class, and set its size and colour in CSS. This icon follows the link’s colour, including on hover:

<a class="link" href="/favourites/">
  <svg class="icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 2L15 9H22L16.5 13.5L18.5 21L12 16.5L5.5 21L7.5 13.5L2 9H9L12 2Z" fill="currentColor"/></svg>
  Favourites
</a>

<style>
  .icon { width: 1em; height: 1em; }
  .link { color: #1d4ed8; }
  .link:hover { color: #1e3a8a; }
</style>

Always give the icon a size: without its width and height, an inline SVG can grow to fill the space available. aria-hidden="true" stops screen readers announcing an icon that sits next to its own label.

If you unticked Use currentColor, set fill (and stroke for outline icons) instead, such as .icon { fill: #1d4ed8; }. Until you do, a Figma export shows nothing, because its svg element says fill="none".

In WordPress, upload the cleaned file as a custom SVG icon in Elementor’s Icon widget. WordPress doesn’t accept SVG uploads by default, so you may need to allow them in Elementor’s settings or with a plugin first.

What it doesn’t do

It makes one-colour icons. Every colour becomes the same currentColor, so white details on a coloured shape disappear into it. For logos and multi-colour artwork, untick Process fill colors.
Gradients and patterns are replaced with a flat colour as well.
It isn’t a full optimiser. It doesn’t simplify path data or remove editor data such as Inkscape’s metadata. The XML declaration and anything before the svg tag are always dropped; title and desc elements are kept.
Outline strokes and Flatten & merge paths rebuild the file with the Paper.js library, which adds a clipping path and a wrapper group, so small icons usually get bigger.
Broken files are refused. A file that isn’t an SVG, or has an XML error, is listed with “Invalid SVG” instead of being cleaned.

Your files never leave your device

Your SVGs are cleaned by your browser, on your own device, so they’re never uploaded: useful when they’re an unreleased logo or a client’s icon set.

You can check this yourself: open your browser’s developer tools, watch the Network tab and clean a file. The only requests are anonymous usage counts, described in our privacy policy.

Frequently asked questions

Is this SVG cleaner free?

Yes. There’s no sign-up, no watermark and no limit on how many files you clean.

How do I make an SVG icon change colour with CSS?

Clean it with the default settings, so its fills and strokes use currentColor. Then paste it inline in your HTML and set the color property on the icon or its parent, for example .icon { color: #1d4ed8; }.

What does fill="currentColor" mean?

It tells the shape to use the current text colour, the value of the CSS color property on that element or the nearest parent that sets one. Change the text colour and the icon changes with it.

How do I remove the fill from an SVG?

Untick Use currentColor and keep Process fill colors ticked: the fill colours are deleted instead of replaced, so your CSS fill property decides the colour. fill="none" is kept, so hollow shapes stay hollow.

Why is my cleaned SVG black in an img tag?

An SVG in an img tag or a CSS background can’t read your page’s CSS, so currentColor falls back to black. Paste the SVG inline instead, or keep its colours by unticking Process fill colors and Process remaining strokes.

Should I remove width and height from an SVG?

For icons, yes: the viewBox keeps the proportions, and you set the size in CSS, so one file works at any size. If you show the SVG with an img tag, give the img a width and height instead.

Does it work with Illustrator and Inkscape SVGs?

Yes. Colours set in style attributes (as Inkscape does) and in CSS classes (as Illustrator can) become currentColor too, and stroke widths are kept. Editor metadata stays in the file.

Will it make my SVG smaller?

Usually a little, because minifying removes whitespace and comments. It doesn’t rewrite path data, so don’t expect big savings, and Outline strokes or Flatten & merge paths can make a file larger.