How to make custom icons for WordPress and Elementor Pro

Why convert custom icons into a webfont

The free version of Elementor already lets you upload an SVG, so why go to the trouble of making a font? The biggest advantage is the ability to change the color on the fly. Instead of keeping a separate SVG file for every color you might need, one font-based icon recolors instantly through Elementor's settings or a line of CSS.

There are more upsides. A font icon renders at a consistent size between the editor and the live page, it will not have its color overwritten unexpectedly, and it sidesteps the compatibility conflicts that some plugins cause with uploaded SVG files. The one catch is the final step: uploading a custom icon set to WordPress needs the custom icon library, which is an Elementor Pro feature. Elementor also bundles Pro differently than it used to, including inside its own hosting plans, which I have reviewed separately.

Design the icon in Illustrator, then use Compound Path

I work in Adobe Illustrator, but any vector program that exports clean SVG works the same way. Start on a large canvas, around 1000 by 1000 pixels, which makes it easier to scale and refine the fine details. The golden rule of icon design for a font is that the finished icon must be a single, solid shape.

So do not stack multiple filled elements unless they genuinely add to the overall shape. A good check is to fill everything with one color, like black, so you can immediately see if anything is sitting in space it should not be. Then comes the step most tutorials skip and the one that makes this work: Compound Path.

Found under the Object menu, Compound Path merges multiple paths into one, cutting and removing overlaps in the process. A square placed on top of a circle becomes a circle with a square hole punched through it. A square overlapping only the edge of a circle cuts just that overlap away. Stack three or more shapes and you can carve intricate outlines, which is exactly how you build roundels or icons with a background.

Convert your SVGs into a webfont with Fontello

Fontello does double duty: it hosts a big ready-made icon library, and it converts your own SVGs into a webfont. That WOFF format is what lets the icon scale and recolor cleanly across modern browsers, essentially turning your artwork into a font the browser can read.

1. Drag and drop your SVG files onto the Fontello page. On a successful upload they appear under the Custom Icons header. If an icon shows as just a square outline, the SVG has an error, almost always a missing Compound Path.
2. Add details to each icon by clicking it: a name, a hex code, and keywords. Pick a consistent naming convention if you are adding several.
3. Name the font in the top right using only lowercase letters, dashes, and underscores. Be descriptive but succinct so you and anyone else using the font know what to expect.
4. Download the webfont. The button shows the total icon count, which should match the number you added.

Upload the webfont to Elementor Pro's Custom Icons

The zip you downloaded from Fontello has everything WordPress needs. Getting it into Elementor takes four steps:

1. Log in to WordPress and open the Elementor menu.
2. Select Custom Icons, then Add New.
3. Name the set with something descriptive but concise. This is the name that shows up in the icon library later.
4. Upload the Fontello zip by dragging it into the drop area. Once it processes, the icons appear on screen and you can publish right away.

To use them, open the editor and drop in any widget that takes an icon. Your custom sets appear below the stock libraries, listed under the name you gave them. Pick your icon and it loads onto the page, where you can recolor it, resize it, swap it, and apply every other standard Elementor control, exactly like a built-in icon.

Your own icons, treated like first-class ones

Once you have done it once, this is a fast pipeline: design as a single compound path, convert with Fontello, upload to Elementor Pro. The payoff is custom icons that behave exactly like the stock ones, recoloring and resizing without a pile of duplicate SVG files to manage. It is one small piece of the wider WordPress build workflow and toolbox I lean on for every project.

The only real discipline is planning the set before you build the font, since you cannot add to it later. Get that right and your brand's icons slot straight into the Elementor icon picker, ready to use across the whole site.