Trent Stromkins

Enable Navigation Icons makes it simple to add and customize icons for your WordPress Navigation Block items. Whether you’re building a simple menu or complex mega menu navigation, this plugin provides intuitive controls for adding beautiful icons to your navigation links.
<a href="https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/bmx269/enable-navigation-icons/main/blueprint.json" rel="nofollow ugc">Try it in WordPress Playground</a> — test the plugin instantly in your browser, no installation required.
Recommended Companion Plugin: Use the <a href="https://wordpress.org/plugins/icon-block/" rel="ugc">Icon Block</a> plugin to add custom icon sets and expand your icon library options. Icon Block is a powerful companion that allows you to register additional icon libraries for use with Enable Navigation Icons.
<h4>Key Features</h4>
Icon Selection 
* Browse and select from a curated collection of WordPress icons 
* Upload and use custom SVG icons from your media library 
* Paste custom SVG code directly for complete flexibility
Icon Positioning 
* Position icons before or after navigation link text (left/right) 
* Space between justification for full-width layouts 
* Vertical alignment options (top, center, bottom) for multi-line menu items 
* Fine-tune icon position with vertical offset (supports px, %, em, rem units)
Icon Styling 
* Adjust icon dimensions with a slider control (supports px, em, rem units) 
* Control the gap between icon and text (supports px, em, rem units) 
* Choose from theme colors or set a custom color 
* Support for stroke-based icons with “No Fill” option (e.g., Lucide icons)
Navigation Block Default Settings 
Set default icon settings at the Navigation block level that apply to all child navigation items: 
* Configure size, spacing, color, position, vertical alignment, offset, and styling once for the entire navigation 
* Individual navigation items can inherit defaults or use custom settings 
* Works seamlessly with multiple and nested Navigation blocks 
* Applies to both inline navigation items and dynamically loaded WordPress menus
This feature streamlines icon management for large navigation menus by eliminating repetitive configuration while maintaining flexibility for individual items.
Ollie Menu Designer Integration 
Full support for the Ollie Menu Designer plugin’s mega menu dropdown items: 
* Add icons to Ollie mega menu dropdown navigation items 
* Same icon selection and styling options as standard navigation items 
* Works seamlessly with Ollie themes and the Menu Designer plugin
<h4>Supported Blocks</h4>
<ul>
<li><code>core/navigation</code> – Navigation block (for setting default icon settings)</li>
<li><code>core/navigation-link</code> – Standard navigation links</li>
<li><code>core/navigation-submenu</code> – Submenu/dropdown navigation items</li>
<li><code>ollie/mega-menu</code> – Ollie Menu Designer dropdown menu items (requires Ollie Menu Designer plugin)</li>
</ul>
<h4>Credits</h4>
This plugin was inspired by and incorporates code and ideas from the <a href="https://github.com/ndiego/enable-button-icons" rel="nofollow ugc">enable-button-icons</a> project. Special thanks to @ndiego for his excellent work on button icon functionality, which served as a foundation for implementing navigation icon features.

Enable Navigation Icons

Easily add icons to Navigation Block items in WordPress.

Michael Bourne

Enables the user to add their own custom icons to the built in Elementor icon controls and elements, thereby removing the reliance on FontAwesome and providing a better opportunity for branding with custom icon sets on your websites. Works exclusively through the use of Fontello’s free icon font service.
<h4>Plugin Features</h4>
<ul>
<li>Add unlimited icons to your website via Fontello font packs</li>
<li>View the icons in each uploaded pack, delete individual packs if desired</li>
<li>Use icons anywhere you would normally with the default Elementor icon selectors</li>
</ul>
Please note, this plugin requires the Elementor Page Builder to be installed and active. <a href="https://en-ca.wordpress.org/plugins/elementor/" rel="nofollow ugc">Elementor is a free plugin</a>.
This plugin relies on a third party service for it’s functionality provided by <a href="http://fontello.com" rel="nofollow ugc">Fontello</a>. No private information is sent to their server, rather their provided webfont downloads are what’s used to add fonts to this plugin.
Looking for a video tutorial? <a href="https://youtu.be/Rnu9XVD8AdI" rel="nofollow ugc">Here it is!</a>
<h3>Plugin Removal</h3>
Removing this plugin will render your custom icons to be deleted. Take care to un-select them from your icon elements prior to plugin removal.
<h3>Copyright</h3>
Custom Icons for Elementor is a plugin for WordPress that enables you to add custom icon fonts to the built in Elementor controls. 
Copyright (c) 2018 Michael Bourne.
The Custom Icons for Elementor Plugin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License or (at your option) any later version.
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
You should have received a copy of the GNU General Public License along with this program. If not, see <a href="http://www.gnu.org/licenses/" rel="nofollow ugc">http://www.gnu.org/licenses/</a>
You can contact me at michael@michaelbourne.ca

Custom Icons for Elementor

It does what it advertises. Pretty straighforward. And for those among us who value a little helper tool which helps to get additional custom icons in the icon selector drop downs from elementor, then this fits just perfect. It's lightweight and relatively easy to setup. I prefer to package my icons as fontello package and use it the way this plugin offers, instead of manually fiddeling around with additional markup and css.

Just one thing to keep in mind (which is also a suggestion). Do not regenerate the css if not really needed. It unfortunately swipes away your whole config then and you're forced to setup all icons again by going into every element on every page and re-selecting your icons. A simple JS Alert would have been helpful to warn me upfront about that :D

Very nice helper tool

Add custom icon fonts to the built in Elementor icon controls

Enable Navigation Icons vs Custom Icons for Elementor