How to Use Custom Icons for Elementor

The default icon library in Elementor is Font Awesome, which covers a wide range of general-purpose icons. It works well for most sites, but it comes with trade-offs. Font Awesome loads hundreds of icons even if your site uses only five of them, which adds unnecessary weight to your pages. It also means your icons look the same as every other site using the same library.

Custom icon sets solve both problems. You build a font that contains only the icons you actually need, which keeps file size small. Because you choose and name the icons yourself, the set reflects your brand rather than a generic default. This matters especially for:

• Niche industries icons that match your specific services (legal, medical, construction, etc.) rather than defaulting to generic alternatives
• Brand consistency icons that use the same visual style as your logo and design system
• Performance a focused icon font with 20 icons is significantly smaller than loading the full Font Awesome library
• Uniqueness your site does not look like it was built from the same template as everyone else

Elementor Pro supports three services for building custom icon fonts: Fontello, IcoMoon, and Fontastic. Each one outputs a zip file that Elementor can import directly. The steps for each service are covered below.

Fontello is a free web-based tool that lets you bundle icons from multiple open-source icon libraries into a single downloadable font. You can also upload your own SVG icons to include alongside the library icons.

1. Go to fontello.com in your browser. You will see a large grid of icons from multiple libraries.
2. Browse the icon sets and click any icon you want to include. Selected icons turn orange. You can select icons from multiple libraries in the same session.
3. Upload your own SVG if needed by dragging an SVG file onto the Fontello page. Your custom SVG will appear alongside the library icons.
4. Open the settings panel by clicking the wrench icon at the top. Set a unique CSS class prefix for your icon set (e.g., mybrand-) to avoid conflicts with Font Awesome or other libraries.
5. Give your font set a name in the Name field inside the settings panel. Use something descriptive so you can identify it inside Elementor later.
6. Click “Download webfont” at the top of the page. Fontello generates and downloads a zip file containing the font files and CSS.

Tip: The zip file Fontello produces is already structured the way Elementor expects. You do not need to unzip or modify it before uploading to WordPress.

IcoMoon is a browser-based icon font generator that is particularly useful when you need to upload your own SVG files. It supports mixing icons from its built-in library with custom SVGs in the same font.

1. Go to icomoon.io/app in your browser. You will land on the IcoMoon App, which shows the default icon library.
2. Add icons from the library by clicking them, or import your own SVG files using the “Import Icons” button at the top.
3. Select the icons you want by clicking them. Selected icons are highlighted in orange. You can mix built-in library icons and imported SVGs in the same selection.
4. Click “Generate Font” at the bottom of the screen. IcoMoon moves you to the font preview page.
5. Open the settings panel by clicking the gear icon on the Generate Font page. Set a unique Class Prefix and give the font a name.
6. Click “Download” to get the zip file. The zip contains the font files and a CSS file ready for Elementor.

Tip: If your custom SVGs are not rendering correctly after upload, the most common cause is that the SVG paths use strokes instead of fills. IcoMoon works with filled paths. Use a vector editor to convert strokes to fills before importing.

Fontastic is a web-based icon font service that stores your icon sets in your account rather than generating a one-time download. A free account comes with a limit on the number of icons per set, so check the current limits before starting a large project.

1. Create an account at fontastic.me if you do not already have one. Log in to access your dashboard.
2. Create a new icon set by clicking the “Add More Icons” button on your dashboard. Upload SVG files or browse available icons to add to your set.
3. Set a unique CSS class prefix for the icon set. This prefix must not conflict with Font Awesome or any other icon library on your site.
4. Name the font so it is easy to identify when you import it into Elementor.
5. Click “Publish” to finalize the set, then click “Download” to get the zip file.

Note: Fontastic’s free tier has a limit on how many icons you can include in a single set. If you need more icons, you will need to upgrade your plan or split your icons across multiple sets.

Once you have the zip file from Fontello, IcoMoon, or Fontastic, the upload process in WordPress is the same for all three.

1. Go to your WordPress dashboard and navigate to Elementor > Custom Icons in the left sidebar. This option only appears if you have Elementor Pro installed and activated.
2. Click “Add New” at the top of the Custom Icons page.
3. Drag and drop your zip file into the upload area, or click to browse for the file. Elementor will validate the zip and show a preview of the icons if the upload is successful.
4. Enter a name for the icon set. This name appears in the icon picker inside Elementor, so use something you will recognize.
5. Click “Update” or “Save” to finish the import.

Using your icons: Open any Elementor widget that has an icon option (Icon Box, Button, Heading, etc.) and click the icon picker. Your custom icon set appears as a separate tab next to Font Awesome.

Common issues:

• Icons not appearing after upload – Clear your Elementor CSS cache from Elementor > Tools > Regenerate CSS, then reload the editor.
• Wrong icons showing – Your CSS class prefix is conflicting with another icon font. Re-export with a more specific prefix and re-upload.
• Upload error – Make sure you are uploading the original zip file from the icon service without modifying or re-zipping its contents.