How to get an SVG icon for WordPress without an icon subscription

You find the right icon on the fourth page of results. The PNG downloads immediately. The SVG is behind a subscription, and you need one icon.

For a flat, single-colour icon this is one of the few paywalls with an honest way around it, because a flat icon is very nearly the only kind of image that traces back into vectors faithfully. There are no gradients to approximate and no photographic detail to invent. There is a shape, and the shape is all the file was ever meant to contain.

Why the PNG is free and the SVG is not

It is a pricing decision rather than a technical one. Both formats are exported from the same source artwork by the same click. The PNG is positioned as the preview and the SVG as the deliverable, which means that for a great many people the thing behind the subscription is not the design at all — it is the file format.

Why you want the SVG rather than the PNG

• It stays sharp at any size. One file covers a 16px menu item and a 96px feature block, on a normal screen and a retina one.
• It is small. A traced icon is usually under a kilobyte, against 5-30KB for the PNG set you would otherwise need.
• Your site sets its colour. Not just once — on hover, in dark mode, in the active state of a menu, per section.
• You stop maintaining a folder of near-identical PNGs. No icon-blue.png, icon-white.png, icon-blue@2x.png.

The third one is what people underestimate until they have lived with it. A PNG icon locks its colour at export time, so every design change that touches colour becomes a round trip through an image editor. An SVG that takes its colour from CSS is changed by changing the CSS.

Getting the SVG

1. 1Download the icon as a PNG at the largest size the set offers. 512px is common and is plenty; take 1024px if it is there.
2. 2Open Icon to SVG and drop the PNG in. Nothing is uploaded — the tracing runs in your browser.
3. 3Download the result. It will be black, and that is deliberate.

There are no settings to choose. The threshold that separates the icon from its background is measured from your own image rather than guessed, and a transparent PNG makes it unambiguous: the shape is already recorded in the alpha channel, so there is nothing to decide. A control sits behind a disclosure for the occasional icon that comes out too heavy or too thin.

Why it comes out black, and why that is the feature

This is the part that surprises people, so it is worth being precise. In CSS, a colour written onto an element beats a colour the element inherits from its surroundings. That rule is what makes the whole cascade work, and it is also what breaks recolourable icons.

When your theme colours an icon, it almost always does it by setting a colour on the wrapper around the SVG and letting that flow inwards. If the shapes inside your file each state their own fill, they are not inheriting anything — they already have an answer — so the colour your theme is offering never reaches them. The colour control moves and the icon does not.

So the file this tool writes states no colour at all. Its shapes are set to currentColor, which is CSS for whatever colour this element has been told to be. On its own, with nothing to inherit from, that resolves to black. Inside a button that has been coloured, it is that colour. The icon has no opinion, so it never argues with your theme.

Getting it into WordPress

WordPress refuses SVG uploads out of the box, and the reason is real: an SVG is code, not a picture, and a hostile one can carry a script that runs when the file is viewed. That is a genuine attack route on a site with multiple authors. Your file cannot do this — it was written from path coordinates and contains nothing but shapes — but WordPress has no way to know that about any given upload, so it blocks the whole format.

The route that always works

Open the SVG in a text editor, copy everything, and paste it into a Custom HTML block. No plugin, no settings, no upload. It also happens to be the version with the fewest things that can go wrong, because the markup is unambiguously in the page and every CSS rule on your site can reach it.

Uploading it to the media library

If you need the icon in a menu, a widget or a reusable block, it has to be a real file. Two normal ways to allow that: a plugin that permits SVG uploads and sanitises them on the way in, or — if you are already running Elementor — Elementor's own setting for unfiltered uploads, which applies its own sanitiser. Either is fine. What is not fine is pasting a snippet from a forum that simply adds SVG to the allowed MIME types with no sanitising, because that removes the block without addressing the thing the block was there for.

Using it in Elementor's Icon widget

1. 1Turn on SVG uploads in Elementor's advanced settings, if you have not already.
2. 2Add an Icon widget and open the icon library. There is an upload option alongside the built-in sets.
3. 3Upload your SVG and select it.
4. 4Set the colour in the Style tab. It will change. Set a different hover colour and that will work too.

Elementor writes uploaded SVG icons directly into the page rather than linking to them as images, which is the condition every recolourable icon depends on. That is why the colour control works on a custom icon at all, and it is why the same file placed with the Image widget instead will sit there stubbornly black no matter what you do to it.

Which icons trace well

• Best case, and it is very good: a flat single-colour icon on a transparent background at 512px or more. Outline icons keep their holes; solid icons come back as one clean shape.
• Fine: the same icon on a solid white background. There is a hard edge to find, so the trace is nearly as good.
• Workable: a two- or three-colour flat icon, which will be flattened into a single silhouette. Sometimes that is exactly what you wanted and sometimes it destroys the design.
• Poor: anything with a gradient, a drop shadow or a soft glow. There is no edge to follow, so the tracer invents bands and lumps.
• Hopeless: a photograph, or an icon under 32px. The detail is not in the file, and nothing can put it back.

If your result looks wrong, the source is the first place to look rather than the settings. There is a fuller account of what makes a good source image in why your traced SVG looks wrong.

If the icon has colours worth keeping

A brand mark, an illustration, a crest — anything where the colours are the design rather than decoration — wants the other tool. PNG to SVG separates the artwork into its colours and traces each one into its own editable group, so a two-tone logo stays two-tone and can be edited colour by colour in Illustrator, Inkscape or Figma. The trade is that a file which names its colours is a file your theme cannot recolour, which is fine for a logo and wrong for an interface icon. The comparison of all three tracing tools goes through the choice properly.

Common questions

Is converting an icon set's PNG to SVG allowed?

That depends entirely on the licence the PNG came under, and converting it changes nothing about that licence. Most free tiers permit commercial use with attribution and forbid redistributing the icon as a standalone asset — under those terms, converting a PNG you were entitled to download and using it on your own site is within scope, and you still owe the attribution. Read the terms rather than assuming, particularly if the icon is going into something you sell.

Why is my icon black when I uploaded a coloured one?

Because that is what makes it recolour. Any colour written into the file would override the colour your theme applies, so the file names none and resolves to black on its own. Put it on your page and set the colour there. If you need a file that keeps its own colours, use PNG to SVG instead.

Do I need a plugin?

Only if you want the icon in the media library. Pasting the SVG code into a Custom HTML block needs nothing installed and works on every WordPress site, including ones where you cannot change upload settings.

Will this work outside Elementor?

Yes, in anything that puts the SVG markup into the page: the Gutenberg Custom HTML block, a block theme template, a React or Vue component, Webflow's embed, Shopify's Liquid, a plain HTML site. The requirement is never the platform, it is that the markup is in the page rather than loaded as a separate image file.

My icon is two colours. What happens to it?

It becomes one solid silhouette, because that is what an interface icon needs to be. If the second colour carries meaning — an outline plus a coloured accent, say — trace it with PNG to SVG in full colour mode instead, which keeps each colour as its own group.

Is my PNG uploaded anywhere?

No. The tracer, Potrace included, is compiled to WebAssembly and runs inside your browser. Once the page has loaded you can disconnect from the network and it still works — which is worth knowing when the icon belongs to a brand that has not launched yet.