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.

Joris van Montfort

Add icons to any rich text field in the WordPress block editor. Insert icons inline in paragraphs, headings, lists, buttons, or use the dedicated single icon block.
<h4>Features</h4>
<ul>
<li>Icon picker – Select icons from a searchable popup in the block editor toolbar.</li>
<li>Font Awesome included – Ships with Font Awesome 4.7, 5.x and 6.x. Choose your preferred version from the settings.</li>
<li>Custom SVG icon set – Upload your own SVG icons via a drag & drop uploader in the plugin settings. This is the recommended approach for the best performance.</li>
<li>Single icon block – A dedicated block with font size, color, alignment and spacing options.</li>
<li>ACF integration – Adds a “JVM Icon” field type for Advanced Custom Fields.</li>
</ul>
<a href="https://nl.wordpress.org/plugins/jvm-rich-text-icons/?preview=1" rel="nofollow ugc">See it in action</a>
<h4>How it works</h4>
Pick an icon from the toolbar while editing any rich text field. The plugin inserts a small HTML tag that gets styled by the chosen icon set.
<h4>Why use a custom SVG icon set?</h4>
When you use a custom SVG icon set, the plugin defaults to inline SVG rendering. This is a great choice for performance! Google PageSpeed Insights will thank you.
<ul>
<li>Better page speed – No render-blocking CSS or font files to download. Icons are part of the HTML itself.</li>
<li>Only loads what you use – Unlike Font Awesome which loads CSS for hundreds of icons, inline SVG only includes the icons that are actually on the page.</li>
<li>No external requests – Everything is served inline, so there are no extra HTTP requests for font or CSS files.</li>
<li>Inherits text color – Icons automatically use the surrounding text color, no extra CSS needed.</li>
<li>Fully reversible – The stored content in the database is not modified. You can switch between render technologies at any time from the plugin settings if you want to.</li>
</ul>
Alternative render technologies (CSS masks, ::before / ::after pseudo-elements) are also available for custom SVG icons if your use case requires it.
<h4>For developers</h4>
The plugin provides several filter hooks to customize its behavior. You can load your own icon set, CSS file, or change the icon class prefix.
Load a custom icon set file
<pre><code>add_filter( 'jvm_richtext_icons_iconset_file', function($file) {
 return get_stylesheet_directory() . '/path_to_my/icons.json';
});
</code></pre>
Load a custom CSS file
<pre><code>add_filter( 'jvm_richtext_icons_css_file', function($cssfile) {
 return get_stylesheet_directory_uri() . '/path_to_my/cssfile.css';
});
</code></pre>
To disable the default CSS file entirely:
<pre><code>add_filter( 'jvm_richtext_icons_css_file', '__return_false');
</code></pre>
Change the icon class prefix
<pre><code>add_filter( 'jvm_richtext_icons_base_class', function() {
 return 'my-custom-css-class-name';
});
</code></pre>
Disable the settings screen
<pre><code>add_filter( 'jvm_richtext_icons_show_settings', '__return_false');
</code></pre>
Please note that if you are loading a custom icon set with the plugin hook: <code>jvm_richtext_icons_css_file</code>, you should make sure the plugin is not set to My SVG uploads as this setting does not load any CSS file.

JVM Rich Text Icons

Thank you so much for the plugin, Joris! I am using a modded version of this plugin to insert a custom icon pack that I created. It was so easy to configure.

You have my utmost respect for this amazing plugin.

Incredible and Highly Extensible

Even though the plugin could not be activated due to a syntax error (which I fixed it - to be more accurate - bypassed it), it eliminates the need for me to create a similar block with ACF Pro for my projects, so thank you for this plugin.

Does one job, and does it well.

I can imagine something like this becoming part of core. Very well developed essential addon for the block editor

great gutenberg addon

Insert icons anywhere in your content — inline in text, headings, buttons, or as a standalone block.

Enable Navigation Icons vs JVM Rich Text Icons