What is Menu Icons plugin?
Menu Icons is a WordPress plugin developed by ThemeIsle that adds icon support to WordPress navigation menus. It integrates with the Appearance, then Menus screen in the WordPress admin, adding an icon picker to each menu item. You can select icons from popular libraries including Dashicons, Font Awesome, Genericons, and others, and configure icon size, position, and visibility settings per item.
Without this plugin, adding icons to WordPress menu items requires either theme support for menu icons, custom CSS with background-image, or editing theme template files. Menu Icons eliminates the need for custom code by handling icon rendering automatically through a meta box on each menu item.
The plugin is most useful for sites where navigation clarity benefits from visual icons — eCommerce menus with a cart icon, navigation with a home or search icon, or any menu where icon cues help users identify sections quickly.
Need Help With Menu Icons Setup, Troubleshooting, or Customization?
Need help with Menu Icons? Whether you are dealing with errors, broken functionality, styling problems, plugin conflicts, or advanced customization, we can help you fix the issue and get the plugin working properly on your WordPress site.
Get Menu Icons Expert HelpKey Features
- Icon picker integrated into WordPress Menus screen
- Supports Dashicons, Font Awesome, Genericons, and other icon libraries
- Per menu item icon configuration
- Icon size and position settings
- Hide label option to show icon only
Pros & Cons
Pros
- No coding required to add icons to menu items
- Works with the existing WordPress Menus interface
- Free with no premium version needed
Cons
- Icon font loading adds HTTP requests and CSS weight
- Some icon libraries load the full icon font file rather than only used icons
Free vs Premium
Menu Icons is completely free with no premium version. All supported icon libraries and configuration options are included at no cost.
Common Problems & Fixes
Icons I selected in Menu Icons are not showing on the front end.
If icons are configured but not visible, the most common cause is that the icon font CSS is not loading. Check your browser developer tools Network tab to see if the icon font stylesheet is being requested. Some caching plugins or minification setups strip or defer stylesheets that prevent icon fonts from loading. Also check for CSS conflicts where your theme overrides the icon display. Try viewing the page with all caching disabled to rule out caching as the cause.
Menu Icons is not showing the icon settings on my menu items.
The icon settings appear as a collapsible meta box inside each menu item in Appearance, then Menus. If you do not see it, click the arrow on a menu item to expand it and look for the Icon settings at the bottom. If still not visible, go to Screen Options in the top right corner of the Menus screen and ensure the relevant options are checked. If using a block theme with the Navigation block, Menu Icons may not be compatible with that navigation approach.
Menu Icons is slowing down my site by loading large icon font files.
Icon font libraries like Font Awesome load a stylesheet that references a font file. The full Font Awesome font file is large. Menu Icons is designed to only load icon fonts when they are actually used in menus, but the full font file for the chosen library loads regardless of how many icons you use. If performance is a concern, use Dashicons instead of Font Awesome since Dashicons are already loaded by WordPress for admin and are often already cached in the visitor browser.
Customization & Developer Notes
How do I show only the icon without the menu item text label?
In the icon settings for the menu item, look for the Hide Label option and enable it. This visually hides the text label while keeping it in the markup for accessibility — screen readers will still read the menu item text. Use this option carefully and only when the icon alone is clearly recognisable to users, such as a universally understood icon like a shopping cart or search magnifying glass.
Can I use custom SVG icons instead of icon font libraries?
Menu Icons supports SVG icons through its built-in SVG icon type option. In the icon picker, select the SVG source and upload your SVG file. SVG icons have a performance advantage over icon fonts because only the specific SVG file is loaded rather than a full icon font with hundreds of glyphs. Custom SVGs also give you precise control over icon appearance and colour.
Frequently Asked Questions
Does Menu Icons work with Elementor or other page builder navigation menus?
Menu Icons works with WordPress navigation menus registered through the standard register_nav_menus function and assigned through Appearance, then Menus. If your page builder creates its own navigation widget or element that does not use the standard WordPress menu system, Menu Icons will not apply to it. Elementor navigation elements that use WordPress registered menus will work; Elementor custom nav widgets that bypass the menu system will not.
Which icon library should I use with Menu Icons?
Dashicons are the most performance-friendly choice because they are already loaded by WordPress and are likely cached in returning visitors browsers. Font Awesome has the largest icon selection but adds a full font file load. For most sites, Dashicons cover common navigation icons well. If you need icons that Dashicons does not include, Font Awesome Free is the next best option.
Does Menu Icons work with block themes and Full Site Editing?
Menu Icons was built for the classic menu system (Appearance, then Menus) and may not be compatible with block themes that use the Navigation block for menus. Block themes handle navigation differently and the classic Menus screen may not be available or may not render in the same way. For block themes, consider using SVG icons directly in the Navigation block or a block plugin that adds icon support to navigation blocks.
Can I use Menu Icons on mobile navigation without showing icons on desktop?
Menu Icons does not have built-in responsive visibility controls per device type. To show icons only on mobile, you would need to use CSS to hide the icons above a certain breakpoint using media queries. Add the CSS to Appearance, then Customise, then Additional CSS, targeting the icon element class that Menu Icons adds and setting display: none above the breakpoint where you want icons hidden.