How to Use Custom Icons for Elementor

Every Elementor widget that has an icon field lets you choose from Font Awesome, which is the default Elementor icon library. The icon picker shows categories like arrows, social media logos, interface icons, and symbols. For most sites, Font Awesome covers everything you need.

The main limitation is that Font Awesome is a general-purpose library, so it does not include industry-specific icons. A legal firm, a medical practice, or a construction company may need icons that represent their specific services rather than defaulting to generic alternatives. Custom icon sets solve this by letting you build a font that contains only the icons you actually need.

Custom icon sets also improve page performance. Font Awesome loads hundreds of icons even if your site only uses five of them, which adds unnecessary weight to every page load. A focused custom icon font with 20 icons is significantly smaller.

Other reasons to use custom icons for Elementor:

• Brand consistency: Icons that use the same visual style as your logo and design system instead of a generic default
• Niche industries: Specific icons for your services that do not exist in Font Awesome
• Performance: Load only the icons your site actually uses instead of the full Font Awesome library
• Uniqueness: Your icon set looks different from every other site using Font Awesome defaults

Elementor Pro supports three services for building custom icon fonts: Fontello, IcoMoon, and Fontastic. Each outputs a zip file that Elementor can import directly. The process for each service is covered below, followed by the steps to install the font set in Elementor.

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.