Icon to SVG
Turn an icon PNG into an SVG your site can recolour. Whatever colour goes in, black comes out — and that is what lets your theme's colour apply. Traced in your browser, no upload.
- ProcessingOn your device
- Uploaded to a serverNothing
- InternetNot needed
Don't take our word for it. Turn off your Wi‑Fi, then use this tool. It will work exactly the same, which is only possible because your file never goes anywhere.
Worth knowing
The result is always black. That is the point rather than a limitation — the file names no colour, so your theme's colour is free to apply. If you want an SVG that keeps a colour of its own, use PNG to SVG instead.
Colour in the original is discarded. A multi-coloured icon becomes one solid shape, which is what an interface icon needs to be.
Detail below about 32 pixels across cannot be traced faithfully, because it was never in the file. Small icons come out slightly softened.
An SVG placed with an <img> tag cannot be recoloured by anything, here or elsewhere. CSS cannot reach inside a separately-loaded file — it has to be in the page.
WordPress blocks SVG uploads by default. Elementor has its own setting for it; otherwise a plugin that permits and inlines SVGs does the job.
Why the answer is black
It looks like a limitation and it is the entire reason this works. An SVG that states a colour wins against the colour your theme is trying to apply, because a colour set on the file itself beats one inherited from the button or block around it. The moment the file has an opinion about its colour, your site loses the argument.
So this file has no opinion. It says fill="currentColor" and names nothing. Opened on its own there is no colour to inherit, so it draws black. Dropped into a page, it takes whatever colour that page gives it — including on hover, including in dark mode, without you touching the file again.
That is also why there is no colour picker on this page. Choosing a colour is the one thing that would stop the file doing its job.
The case this was built for
Icon sets hand out the PNG and charge for the SVG. That is a reasonable business and it leaves a lot of people with a 512-pixel PNG and a button that needs to be white on hover.
A flat icon PNG is the easiest thing there is to trace: transparent background, one shape, clean edges, no gradients. What comes back is real path data at any size, which is what you needed the SVG for. Check the licence covers what you are doing — converting a format does not change the terms the file came under. The full walkthrough covers the WordPress side end to end.
Space around the icon
The one thing worth choosing, because it depends on where the icon is going rather than on the icon itself.
Set to None, the file is trimmed tight to the artwork — the shape fills its own box exactly, with nothing around it. That is what you want when your layout is already doing the spacing, or when the icon has to line up against something.
The other settings leave room around it, which is how icon sets are normally drawn. A Material icon is a 24-pixel box with the glyph inside 20 of it, so an icon trimmed tight and dropped in beside one sits noticeably larger than its neighbours. Normal matches that proportion; Generous gives more.
Only the viewBox moves — the window onto the artwork — so nothing is redrawn and switching between them costs nothing.
If there is still space above and below
This one catches people out, and the file is not the cause. Set to None, the box really is trimmed to the artwork — you can check by opening the SVG on its own, where it will sit edge to edge with nothing around it.
What adds the space is where you put it. An icon widget gives every icon a square slot, because icons are square, and it sizes that slot with one number. A wide logo inside a square slot is centred, with empty space above and below. A 394 by 122 file rendered in a 270-pixel slot draws at 270 by 84, leaving 93 pixels top and bottom — the slot, not the file.
Two fixes, both on your side. Use an image or logo block rather than an icon one, which is the right widget for a wordmark anyway. Or keep the icon widget and add a CSS rule setting the SVG's height to auto, which lets it keep its own proportions instead of being forced square.
There is nothing else to set up
Drop the icon in and the result appears. The threshold that separates artwork from background is measured from your own image rather than guessed at, and a transparent PNG makes it unambiguous — the shape is already recorded in the alpha channel, so there is nothing left to decide.
Two controls sit behind a disclosure marked “Not coming out right?”, for the icon that comes back too heavy, too thin, or empty. Edge moves the threshold by hand. The other tells the tracer your icon is light on a dark background, which is the one case detection can genuinely get wrong. Most people never open it.
What happens to a colourful icon
It becomes one solid shape, and that is deliberate. An interface icon is a silhouette: one colour, set by whatever it sits in. Keeping four colours would mean four fills in the file, and four fills are four separate arguments with your theme.
How the shape is worked out depends on the background. A transparent icon is read from its transparency, so the colours inside it never matter and holes stay open — an outline icon stays an outline rather than filling in solid. An icon sitting on a solid background is read as outline-and-fill instead, because a coloured icon on white splits under a brightness test, with the pale parts joining the background.
The background of the result is transparent either way. There is no white box behind the shape and never was — the chequered squares in the preview are this page showing you where the file is empty.
Getting it into WordPress
WordPress refuses SVG uploads out of the box, and the reason is sound: an SVG is code and one from a stranger can carry a script. Yours contains path data and nothing else, built on your own machine. Elementor has its own setting to allow SVG uploads; otherwise a plugin that permits and inlines them does the job.
Once it is in, Elementor's Icon widget treats it like a built-in icon — the colour control works, hover states work, dark mode works. That is because Elementor puts the SVG into the page rather than linking to it, which is the condition every recolourable SVG depends on.
The rule that catches people is the same everywhere: an SVG loaded through an img tag cannot be recoloured by anything. CSS on your page cannot reach inside a separately-loaded file. It is not a fault in the icon and no setting fixes it — the SVG has to be in the page, and pasting the code into a Custom HTML block always works. If yours still will not change colour, there are five causes and this is only one of them.
When you want a different tool
This one throws colour away on purpose. If you are converting a logo or an illustration and you want its colours kept as separate, editable groups, PNG to SVG traces each colour on its own and writes your chosen colour into the file. If your source is a JPG sitting on a white rectangle, JPG to SVG is the same engine with the compression problems spelled out. Same tracing underneath, different decision about colour in each case.
Going the other way, SVG to PNG exports at any size with the transparency intact.
Questions people ask
I chose None but there is still space above and below it.
The file is trimmed — open the SVG on its own and it will sit edge to edge. The space is being added by whatever you put it in. An icon widget gives every icon a square slot and sizes it with a single number, so a wide logo is centred inside that square with empty space above and below: a 394×122 file in a 270px slot draws at 270×84 and leaves 93px top and bottom. Use an image or logo block instead, which is the right widget for a wordmark, or add a CSS rule setting the SVG's height to auto so it keeps its own proportions.
Can I have space around the icon, or none at all?
Both, and it is the one setting on the page. None trims the file tight to the artwork, so the shape fills its own box exactly — right when your layout is doing the spacing, or when the icon has to line up against something. Normal leaves the proportion an icon set uses, which stops a traced icon sitting visibly larger than the built-in ones beside it, and Generous leaves more. Only the viewBox changes, so switching between them costs nothing.
Why is my icon black? I uploaded a coloured one.
Because that is what makes it recolour. An SVG that states a colour overrides the one your theme applies — a colour declared on the file beats a colour inherited from the button or block around it, so the moment the file has an opinion, your site loses the argument. This one names no colour at all: black on its own, and whatever colour your page gives it once it is there. If you want a file that keeps a specific colour, PNG to SVG does that instead.
Will the colour control in Elementor work on it?
Yes. Upload it to the media library, pick it in the Icon widget, and the colour control behaves as it does for a built-in icon, including on hover and in dark mode. Elementor puts the SVG into the page rather than linking to it, which is the condition every recolourable SVG depends on.
How is this different from PNG to SVG?
PNG to SVG is for artwork: it can keep several colours, each editable, and it writes your chosen colour into the file. This is for interface icons, where the right answer is one shape and no colour, so the site decides. Same tracing underneath, opposite decision about colour.
Can I use icons downloaded from an icon set?
That is the case this was built for. Icon sets often paywall the SVG while giving the PNG away, and a 512-pixel PNG of a flat icon traces almost perfectly — transparent background, one colour, clean edges. Check the licence covers what you are doing with it; converting the format does not change the terms it came under.
Why will WordPress not let me upload it?
WordPress blocks SVG uploads by default, for a real reason: an SVG is code and can carry a script. Yours cannot, because it was built here from path data and contains nothing but shapes. Elementor has a setting to allow SVG uploads; failing that, a plugin that permits and inlines them works, and pasting the code into a Custom HTML block always works.
Is my icon uploaded anywhere?
No. The tracer, including the Potrace engine, runs in your browser. Once the page has loaded it works with your network disconnected.
How to use it
How-to guides · 21 August 2026 · 7 min
How to get an SVG icon for WordPress without an icon subscription
Icon sets give the PNG away and charge for the SVG. For a flat icon that is a solvable problem: trace the PNG back into a vector and it recolours in Elementor exactly like a built-in icon.
How-to guides · 21 August 2026 · 8 min
Your SVG icon will not change colour: five causes and the fix for each
You uploaded an SVG, the colour control does nothing, and the icon sits there black. It is almost always one of five things — four of them inside the file, and all five identifiable in under a minute.