What is Icon Library Settings? The Icon Library extension in Master Addons adds eight icon packs to Elementor's Icon Library popup. This guide covers turning the packs on, picking and styling an icon in a widget, and fixing common problems. For an overview of every pack and what each one…
The Icon Library extension in Master Addons adds eight icon packs to Elementor’s Icon Library popup. This guide covers turning the packs on, picking and styling an icon in a widget, and fixing common problems. For an overview of every pack and what each one suits, see the Elementor icon library page.
Before you start #
You need Elementor and Master Addons installed and active. Feather Icons, Remix Icons and Teeny Icons are Pro packs, so they appear only when Master Addons Pro is active with a valid license.
Step 1: Turn on the icon packs #
- In your WordPress dashboard, go to Master Addons > Settings.
- Open the Extensions tab.
- Click the Icon Library filter to show only the icon packs.
- Switch on the packs you want. The Enabled All switch turns all eight on or off at once.
- Click Save Changes.
The settings card calls one pack “Ionic Font”. In the Elementor popup the same pack is listed as “Iconic Font Icons”. It is the Iconic Font set by iconmonstr.
Only switch on the packs you plan to use. A pack that is off does not appear in the popup, and its font files are not loaded in the editor.
Step 2: Open the Icon Library in a widget #
- Edit a page with Elementor.
- Add any widget that has an icon field, such as Icon, Icon Box, Icon List, Button or Social Icons.
- In the Content tab, hover over the icon preview and click Icon Library.
Step 3: Choose a pack under My Libraries #
The popup lists Elementor’s Font Awesome sets at the top. The Master Addons packs sit below them under My Libraries, and each one has a small “M” badge. Click a pack to browse its icons.
Step 4: Search across every pack #
Click All Icons and type a word in the Filter by name box. The results include Font Awesome and every Master Addons pack you have switched on. Searching for “rocket”, for example, returns icons from Font Awesome, Simple Line Icons, Iconic Font Icons, Linear Icons and Remix Icons.
Step 5: Insert the icon #
Click the icon you want so it is selected, then click Insert. The icon appears in the widget straight away.
Step 6: Style the icon #
Icons from these packs use the widget’s normal style controls. Open the Style tab and expand the Icon section to set the primary color, size and rotation. Use the Hover tab to change the color on hover.
The example below uses one icon from each pack in Icon Box widgets with the same color and size.
Icon pack reference #
| Name in settings | Name in the popup | Icons | CSS class prefix | Plan |
|---|---|---|---|---|
| Elementor Icons | Elementor Icons | 398 | eicon- | |
| Simple Line Icons | Simple Line Icons | 189 | icon- | |
| Ionic Font | Iconic Font Icons | 300 | im- | |
| Linear Icons | Linear Icons | 170 | lnr- | |
| Material Icons | Material Icons | 1,144 | jltma-material-icon- | |
| Feather Icons | Feather Icons | 272 | jltma-feather-icon- | Pro |
| Remix Icons | Remix Icons | 2,271 | jltma-ri- | Pro |
| Teeny Icons | Teeny Icons | 600 | jltma-ti- | Pro |
Each icon is output as an <i> element with the pack class and the icon class, for example <i class="jltma-ri jltma-ri-rocket-2-line"></i>. You can target these classes in custom CSS.
What each pack looks like #
Elementor Icons #
Elementor’s own icon font: the 398 glyphs the Elementor editor uses for text formatting, layout and widget symbols. Pick it when you want icons that match the Elementor interface.
Simple Line Icons #
189 thin outline icons for people, phones, maps, navigation and other everyday symbols. The light stroke works well in minimal layouts.
Iconic Font Icons #
iconmonstr’s Iconic Font, with 300 solid icons. Arrows, angles and carets make up a large part of the set, most in both a plain and a circled version.
Linear Icons #
170 line icons from Linearicons, including home, cloud, lock, cog and heart.
Material Icons #
Google’s Material Icons: 1,144 filled icons in the Material Design style, covering alerts, media controls and common interface actions.
Feather Icons (Pro) #
272 icons drawn on a 24 px grid with a light, even stroke and rounded ends.
Remix Icons (Pro) #
The largest pack, with 2,271 icons. Most shapes come in a line version and a fill version, so you can switch from outline to solid on hover or to mark an active item.
Teeny Icons (Pro) #
600 small, minimal outline icons designed to stay clear at small sizes.
Using the packs in Widget Builder #
The same packs are available in the icon picker of Widget Builder’s Icons control. See Icons control in Widget Builder for setup.
Troubleshooting #
A pack is missing from the popup #
Check that its switch is on under Master Addons > Settings > Extensions > Icon Library, click Save Changes, then reload the Elementor editor.
Feather, Remix or Teeny Icons are missing #
These packs need Master Addons Pro with an active license. Check the license under Master Addons > Account.
Icons show as empty squares or do not appear on the page #
Go to Elementor > Tools > General and click Clear Files & Data under Elementor Cache. Then clear any caching plugin and your CDN. If your fonts are served from a CDN on another domain, make sure it allows cross origin requests for font files.
Turning a pack off #
Before you switch a pack off, check that no page uses icons from it.
Video walkthrough #
Related #
- Elementor icon library by Master Addons: all eight packs and what each one suits
- Icons control in Widget Builder
