Trent Stromkins

<p>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.</p>
<p><strong><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></strong> — test the plugin instantly in your browser, no installation required.</p>
<p><strong>Recommended Companion Plugin:</strong> 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.</p>
<h4>Key Features</h4>
<p><strong>Icon Selection</strong><br />
* Browse and select from a curated collection of WordPress icons<br />
* Upload and use custom SVG icons from your media library<br />
* Paste custom SVG code directly for complete flexibility</p>
<p><strong>Icon Positioning</strong><br />
* Position icons before or after navigation link text (left/right)<br />
* Space between justification for full-width layouts<br />
* Vertical alignment options (top, center, bottom) for multi-line menu items<br />
* Fine-tune icon position with vertical offset (supports px, %, em, rem units)</p>
<p><strong>Icon Styling</strong><br />
* Adjust icon dimensions with a slider control (supports px, em, rem units)<br />
* Control the gap between icon and text (supports px, em, rem units)<br />
* Choose from theme colors or set a custom color<br />
* Support for stroke-based icons with “No Fill” option (e.g., Lucide icons)</p>
<p><strong>Navigation Block Default Settings</strong><br />
Set default icon settings at the Navigation block level that apply to all child navigation items:<br />
* Configure size, spacing, color, position, vertical alignment, offset, and styling once for the entire navigation<br />
* Individual navigation items can inherit defaults or use custom settings<br />
* Works seamlessly with multiple and nested Navigation blocks<br />
* Applies to both inline navigation items and dynamically loaded WordPress menus</p>
<p>This feature streamlines icon management for large navigation menus by eliminating repetitive configuration while maintaining flexibility for individual items.</p>
<p><strong>Ollie Menu Designer Integration</strong><br />
Full support for the Ollie Menu Designer plugin’s mega menu dropdown items:<br />
* Add icons to Ollie mega menu dropdown navigation items<br />
* Same icon selection and styling options as standard navigation items<br />
* Works seamlessly with Ollie themes and the Menu Designer plugin</p>
<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>
<p>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.</p>


Enable Navigation Icons

Easily add icons to Navigation Block items in WordPress.

Evan Buckiewicz

<p><a href="https://subtleblocks.com/icons" rel="nofollow ugc">Subtle Icons</a> is a lightweight plugin that brings thousands of icons directly into the WordPress block editor and Advanced Custom Fields (ACF).</p>
<p>Stop enqueuing heavy FontAwesome stylesheets. Subtle Icons generates clean, inline SVG code natively in the editor, keeping your frontend free of external scripts and font files.</p>
<h3>The Ultimate WordPress Icon Picker</h3>
<p>Powered by the massive <a href="https://icon-sets.iconify.design/" rel="nofollow ugc">Iconify</a> ecosystem, easily search and insert icons from dozens of popular open-source libraries without leaving the WordPress editor. Supported libraries include:</p>
<ul>
<li>Lucide Icons</li>
<li>Material Design Icons</li>
<li>Heroicons</li>
<li>FontAwesome</li>
<li>Bootstrap Icons</li>
<li>Phosphor Icons</li>
<li>…and dozens more, or upload your own custom SVGs!</li>
</ul>
<h3>Four Native Gutenberg Icon Blocks</h3>
<ul>
<li><strong>Icon Button Block:</strong> Prompt visitors to take action with a native-feeling button block supporting leading and trailing icons.</li>
<li><strong>Icon List Block:</strong> Create clean lists with icons that match your theme and improve scanability.</li>
<li><strong>Icon + Text Block:</strong> Pair an icon with text for notices, callouts, and feature highlights.</li>
<li><strong>Icon Block:</strong> A standalone SVG icon block with sizing, thickness, and color controls.</li>
</ul>
<h3>Advanced Custom Fields (ACF) Integration</h3>
<p>Bring icons to your structured content. Subtle Icons adds a fully integrated Icon Picker field to ACF. Add icons to taxonomies, repeaters, options pages, and custom blocks seamlessly.</p>
<h3>Built for Developers & Custom Integrations</h3>
<p>Take full control of the icon workflow. Use our lightweight filters and actions to tailor the experience for your clients and custom builds.</p>
<ul>
<li>Filter or restrict available icon collections</li>
<li>Configure default block icons globally</li>
<li>Robust developer documentation and more extensibility coming soon!</li>
</ul>
<h3>Development</h3>
<p>The complete source code for this plugin, including all uncompiled JavaScript and CSS, is available at this <a href="https://github.com/skysarwer/subtle-icons" rel="nofollow ugc">public GitHub repo</a>.</p>
<p>Build requirements: Node.js and npm.</p>
<p>To build from source:</p>
<ol>
<li>Clone the repository: <code>git clone https://github.com/skysarwer/subtle-icons</code></li>
<li>Install dependencies: <code>npm install</code></li>
<li>Compile assets for production: <code>npm run build</code></li>
<li>Or start a development watcher: <code>npm start</code></li>
</ol>
<h3>External Services</h3>
<p>This plugin uses the <a href="https://iconify.design/" rel="nofollow ugc">Iconify</a> API to power the Icon Picker. The API is never called on the public frontend; it only runs in the WordPress admin when actively used by a logged-in user with post-editing capabilities. No personally identifiable information (PII) is transmitted.</p>
<p>For more details, see <a href="#how%20is%20data%20sent%20to%20iconify%3F" rel="nofollow ugc">“How is data sent to Iconify”</a> in our FAQs.</p>


Subtle Icons – SVG Icon Block Suite, Icon Picker & ACF Field

Add 100k+ SVG icons (Lucide, Material, FontAwesome) directly to Gutenberg blocks and Advanced Custom Fields. A native, zero-bloat icon picker.

Enable Navigation Icons vs Subtle Icons – SVG Icon Block Suite, Icon Picker & ACF Field