Key Takeaways
- Elementor’s Icon Library popup shows only Font Awesome by default, in Regular, Solid and Brands sets, and every widget with an icon field opens that same popup.
- The quickest way to add custom icons in Elementor is the Upload SVG button on the icon field; if the file is rejected, turn on Enable Unfiltered File Uploads under Elementor > Settings > Advanced.
- Elementor Pro’s Custom Icons screen imports a whole icon font from a Fontello, IcoMoon or Fontastic .zip file and lists it under My Libraries in the Icon Library popup.
- Elementor Pro also connects Font Awesome Pro: paste your Kit ID under Elementor > Settings > Integrations and click Validate Kit ID to add the Pro styles to the picker.
- The Master Addons Icon Library extension adds 8 icon packs with 5,344 icons to the same popup, and Feather Icons, Remix Icon and Teenyicons in that set require Master Addons Pro.
You can add custom icons in Elementor three ways: upload an SVG into any icon field, import your own icon font with Elementor Pro, or switch on extra icon packs from Master Addons. All three end up in the same Icon Library popup, which only offers Font Awesome until you add something to it.
This guide walks through each method with the exact settings to click, then compares them in one table so you can pick the right one. After that it covers styling (color, size and hover) and the problems people hit most often, like icons that show up as empty squares.
Table of Contents
Three ways to add custom icons in Elementor
The method that fits depends on how many icons you need and whether you already have them as files.
- For one or two icons, such as a logo mark, upload the SVG straight into the icon field (Method 1).
- For your own brand set, import it as an icon font with Elementor Pro’s Custom Icons (Method 2).
- For a big choice of ready-made icons with nothing to upload, switch on the icon packs in Master Addons (Method 3).
You can mix all three on one page. An uploaded SVG, a Custom Icons set, Font Awesome and a Master Addons pack can all sit on the same page, because each one is just another source for the same icon field.
Method 1: Elementor’s built-in Icon Library and SVG upload
Every Elementor widget with an icon field opens the same Icon Library popup, whether it’s Icon, Icon Box, Icon List, Button or Social Icons. Out of the box that popup lists Font Awesome in three sets: Regular, Solid and Brands.
- Add an Icon widget, or any widget with an icon, to your page.
- In the Content tab, hover over the icon preview. Two buttons appear: Icon Library and Upload SVG.
- Click Icon Library to pick a Font Awesome icon, or Upload SVG to use your own file.
Upload SVG is the fastest way to add a single custom icon, like a client’s logo mark. WordPress blocks SVG uploads by default, so if Elementor refuses the file, turn on Enable Unfiltered File Uploads under Elementor > Settings > Advanced. Only do that if you trust everyone who can upload files to the site, since an SVG can carry code.
Each SVG is its own upload, with no set to browse or search later. Elementor’s Icon Library help article also notes that Accordion and Toggle widgets use small inline icon controls instead of the usual preview, but they open the same popup. Once you need more than a handful of icons, the next two methods save time.
Need more than Font Awesome? The Elementor icon library in Master Addons adds 5,344 icons in 8 packs to the picker you already use, with one switch per pack.
Method 2: Upload an icon set with Elementor Pro Custom Icons
Elementor Pro can load your own icon font into the picker as a separate tab. It accepts .zip files exported from Fontello, IcoMoon or Fontastic, so you can build a set from your brand’s SVGs and keep it in one place.
- Build your set in Fontello, IcoMoon or Fontastic and download it as a .zip file.
- In WordPress, open Elementor’s Custom Icons screen. In Elementor 4 there’s a shortcut to it on the Elementor home screen.
- Click Add New Icon Set, drop in the .zip file, name the set and publish it.
- Open any icon field in the editor. Your set appears under My Libraries in the Icon Library popup.
Elementor’s own Custom Icons guide lists the export steps for each service, including the unique CSS prefix every set needs. The catch with this route is upkeep: you create or buy the set first, and upload it again every time it changes.
Connect Font Awesome Pro
Elementor Pro also connects a Font Awesome Pro subscription. Go to Elementor > Settings > Integrations, paste your Font Awesome Pro Kit ID and click Validate Kit ID. The Pro families then show up in the picker next to the standard Font Awesome sets.
Method 3: Add 8 icon packs with Master Addons
The Master Addons icon library extension adds eight complete icon packs, 5,344 icons in total, to the Icon Library popup. Nothing gets uploaded: you switch a pack on, and its icons appear in every icon field on the site.
| Pack | Icons | Style |
|---|---|---|
| Remix Icon (Pro) | 2,271 | Line and fill pairs |
| Google Material Icons | 1,144 | Filled |
| Teenyicons (Pro) | 600 | Small outline |
| Elementor Icons (eicons) | 398 | Elementor’s interface glyphs |
| Iconic Font (iconmonstr) | 300 | Solid |
| Feather Icons (Pro) | 272 | Light line |
| Simple Line Icons | 189 | Thin line |
| Linearicons | 170 | Line |
Setup takes three steps:
- Go to Master Addons > Settings > Extensions, click the Icon Library filter, switch on the packs you want and click Save Changes.
- Open any icon field in Elementor and click Icon Library. The new packs sit under My Libraries, each with a small “M” badge.
- Click a pack to browse it, or type in Filter by name to search every pack at once. Select an icon and click Insert.
Elementor’s own icon font (eicons) isn’t in the default picker. Master Addons adds all 398 eicons as a tab, which helps when you want icons that match the Elementor interface. Feather Icons, Remix Icon and Teenyicons come with Master Addons Pro.
Use Remix Icon for open and closed states
Most Remix Icon shapes come in a line version and a fill version. That makes it a good match for widgets with two icon states: in the Advanced Accordion widget, or Elementor’s own Accordion and Toggle, set the outline as the closed icon and the filled shape as the open icon.
Setup details, the CSS class prefix for each pack and fixes for common problems are in the Icon Library settings docs.
Which method should you use?
The right method depends on what you already have.
| If you need | Start with | What it takes |
|---|---|---|
| One or two custom icons, like a logo mark | Upload SVG (Method 1) | An SVG file and unfiltered uploads switched on |
| Your brand’s own icon set | Custom Icons (Method 2) | Elementor Pro and a Fontello, IcoMoon or Fontastic .zip |
| Font Awesome Pro styles | Font Awesome Pro integration (Method 2) | Elementor Pro and a Font Awesome Pro Kit ID |
| Lots of ready-made icons in different styles | Master Addons icon packs (Method 3) | Master Addons, one switch per pack |
| Icons inside your own custom widgets | Master Addons Widget Builder | An Icons control in the widget |
The last row is for people who build their own widgets. The Icons control in the Widget Builder opens the same popup, so custom widgets can use every pack you’ve switched on.
How to style icons in Elementor
Icons from all of these sources use the widget’s normal style controls. Open the Style tab, expand the Icon section and set the primary color, size and rotation. Switch to the Hover tab to change the color when a visitor points at the icon.
Font icons take whatever color you set. That covers Font Awesome, Custom Icons sets and the Master Addons packs. An uploaded SVG only changes color if its paths don’t carry a fixed fill of their own, so strip hard-coded fill values from the file before you upload it.
The same controls show up in other icon widgets too. The Info Box widget pairs an icon with a title and text, and our guide to animated buttons in Elementor shows how to place an icon inside a button and give it its own hover color.
Troubleshooting Elementor icons
Most icon problems come down to a font file that isn’t loading or a setting that wasn’t saved.
Icons show as empty squares
The icon font isn’t loading. Clear Elementor’s cache under Elementor > Tools > General (Clear Files & Data), then clear your caching plugin and CDN. If your fonts load from a CDN on another domain, check that it allows cross-origin requests for font files.
Elementor won’t accept my SVG
Turn on Enable Unfiltered File Uploads under Elementor > Settings > Advanced, then try the upload again. If it still fails, open the SVG in a text editor and check that it’s a real SVG file and not a PNG with an .svg extension.
A Master Addons pack is missing from the picker
Check that the pack’s switch is on under Master Addons > Settings > Extensions > Icon Library and that you clicked Save Changes, then reload the editor. Feather Icons, Remix Icon and Teenyicons also need Master Addons Pro with an active license.
Icon fonts slow the page down
Every icon font is one more file for the browser to download. Stick to one or two packs for a consistent look, and read our guide to speeding up Elementor websites, which covers Elementor’s Inline Font Icons option for rendering icons as SVG instead of font files.
Frequently asked questions
How do I add icons in Elementor?
Add an Icon widget, or any widget with an icon field, then hover over the icon preview in the Content tab and click Icon Library. Pick an icon from Font Awesome or any icon set you’ve added, then click Insert. To use your own file instead, click Upload SVG.
Can I use SVG icons in Elementor?
Yes. Click the Upload SVG button on any icon field and choose your file. WordPress blocks SVG uploads by default, so if Elementor rejects it, turn on Enable Unfiltered File Uploads under Elementor > Settings > Advanced and try again.
Do I need Elementor Pro to add custom icons?
Not for single SVG uploads or the Master Addons icon packs. Importing a whole icon font from a Fontello, IcoMoon or Fontastic .zip through Custom Icons, and connecting Font Awesome Pro, are Elementor Pro features.
How do I change an icon’s color on hover in Elementor?
Select the widget, open the Style tab and expand the Icon section. Switch from Normal to Hover and set the hover color there. Font icons take the color straight away; an uploaded SVG only changes color if its paths have no fixed fill.
Where can I find the CSS class for an icon?
Elementor outputs font icons as an <i> tag with the set’s class names, which you can see with your browser’s inspect tool. For the Master Addons packs, each prefix is listed in the Icon Library docs, for example jltma-ri- for Remix Icon.
Final thoughts
Adding custom icons in Elementor comes down to where your icons start. A single SVG goes straight into the icon field. A brand icon font goes in through Elementor Pro’s Custom Icons, next to Font Awesome Pro if you have a kit. And if you’d rather pick than upload, the eight Master Addons packs put 5,344 more icons in the same popup.
To see every pack with samples and icon counts before you switch anything on, browse the Elementor icon library page.
Related reading
- Icon Library settings: switches, CSS prefixes and troubleshooting for all eight packs
- Icons control in Widget Builder: use the packs in your own custom widgets
- How to add a Font Awesome icon to a Contact Form 7 submit button
- All Master Addons widgets and extensions
