How to Use IcoMoon Icons in Elementor (Custom Icons)

Step 1 — Build and name your set in the app

Open icomoon.io/app and click the icons you want from the 491-icon free library, or hit Import Icons to add your own SVGs. Naming matters more here than in a normal web project: the glyph name is exactly what you will type into Elementor's icon-picker search box later. On the Generate Font screen, rename anything cryptic — uniE900 tells a page builder nothing, arrow-left does. If the app is new to you, the app walkthrough covers the selection and export screens in detail.

Step 2 — Download the zip and leave it alone

Click Download and keep the archive exactly as it arrives. Elementor reads selection.json inside the zip to map names, codes and classes. If you unzip it to poke around and then re-compress, make sure selection.json and the fonts folder sit at the top level of the new archive — zipping the enclosing folder instead nests everything one level down, and that nested structure is the most common cause of Elementor rejecting the upload as an invalid file.

Step 3 — Upload it under Elementor → Custom Icons

In wp-admin, go to Elementor → Custom Icons → Add New, drag the zip into the upload box, give the library a name your editors will recognize, and publish. The screen lists every glyph it found, so you can confirm the count matches what you selected. This admin screen is part of Elementor Pro — see the honest Free-vs-Pro rundown two sections down, and Elementor's own Custom Icons help page for the official reference.

Step 4 — Place icons in your widgets

Edit any page and drop in a widget with an icon control — Icon, Icon Box, Icon List, Button. Open the icon picker and your library appears in the left-hand list under the Font Awesome sets. Search matches the glyph names you cleaned up in step 1. Because the set is a font, every icon inherits the widget's color, size and hover controls like a built-in — no image editing, no per-icon styling.

Elementor Free vs Pro: what actually differs

The Custom Icons upload screen ships with Elementor Pro, not the free plugin. On free Elementor you still have two workable paths. First, most icon controls offer Upload SVG, so you can use individual icons one at a time — grab per-icon SVG files from our download page (the free set is © Keyamoon, GPL/CC BY 4.0, source on GitHub); WordPress will ask you to enable unfiltered file uploads under Elementor → Settings → Advanced first. Second, you can enqueue the export's stylesheet in a child theme and place glyphs through HTML widgets — it works, but you lose the visual picker entirely. If your sites lean heavily on icons, this one screen is a fair chunk of the Pro upgrade's value.

Updating a set without breaking existing pages

There is no update-in-place: adding icons later means uploading a fresh zip. Two rules keep that painless. One — never rebuild your selection from scratch. Import the selection.json from your previous export back into the app, add the new glyphs, and regenerate, so every existing name and code stays stable. Two — after uploading the refreshed library, spot-check pages that used the old one before you delete it; any glyph you renamed or removed will render blank in placed widgets and needs re-picking by hand. And if the live site still shows old or wrong icons afterwards, purge your caching plugin — stale font files are the usual culprit.

Imported SVGs look hollow or distorted?

Icon fonts cannot render strokes — the app warns about this at import. Outline strokes to fills in your design tool before importing, then regenerate.