How to Easily Add Icons to Menus in WordPress

Have you ever found yourself wanting to spice up the navigation menus on your site by adding icons? Typically, you’d have to edit the CSS of a theme but thanks to a new plugin, you don’t have to. Menu Icons is a plugin for WordPress that makes it easy to add icons to menus without having to touch any code.

Built With Simplicity In Mind

Dzikri Aziz handles most of the development work and is responsible for the initial idea of the plugin. Aziz helped create the plugin because most of the other solutions involve editing CSS classes or other complicated measures. “Most of the existing plugins force you to assign the icons blindly, and make you enter some classes and/or markup into the menu items. This didn’t seem very user-friendly to me. Also, I wanted to get better at developing with the media library,” Aziz told the Tavern.

Once Menu Icons is activated, browse to Appearance > Menus. You should notice a new meta box on the left hand side labeled Menu Icons Settings. From here, you can select which icon sets are available to choose from as well as configure the default placement settings of each icon.

The new meta box on the left with the link to select an icon on the right
The new meta box on the left with the link to select an icon on the right

As you can see, four of the most popular icon fonts are available out of the box. The image option enables you to use the WordPress media library to upload an image or use one that’s already available. Although it’s not listed, Menu Icons supports Fontello Font packs thanks to Joshua Rountree. The Menu Icons FAQ contains information on how to install and select Fontello Icons.

After clicking on the Select Icon link within the menu item, a modal window is displayed with icons to choose from.

Plenty Of Icons To Choose From
Plenty Of Icons To Choose From

When an icon is selected, the right side of the model presents you with some options to alter its display. The global settings are used by default.

Settings To Alter The Display Of Icons
Settings To Alter The Display Of Icons

One of my favorite features is the ability to use icons from different packs. If a pack doesn’t have the icon you’re looking for, chances are, one of the other three does. It only took five minutes to find the right icons for my menus. Without modifying the default settings, this is what my menus looked like on the front end of the site.

The End Result
The End Result

The icons become part of the link, just like the text, and they blend in seamlessly. Can you tell which packs these icons belong to? If the icons don’t look like they’re aligned correctly, you’ll need to override the styles in the theme’s CSS file or use the Simple Custom CSS plugin to apply the correct style attributes. In most cases however, the icons should look fine in your theme.

Simple Yet Effective

Menu Icons is a great, effective plugin. I wish it existed five years ago when I really could have used it. It’s the easiest way I’ve come across to add icons to navigation menus in WordPress without having to edit CSS. If you know something easier, let us know in the comments. Also, how many of you plan on using this for client projects?


20 responses to “How to Easily Add Icons to Menus in WordPress”

  1. I tend to keep my menus looking pretty simple but if I decide to add icons this looks like the perfect plugin.

    As you say Jeff “Simple Yet Effective”

    • None at all because I think it’s using an icon from an icon font, not an actual image. I’ll ping the developer to see if he can respond.

    • For the icon font sets, the only possible impact would be the additional loading of their css and font files. This is why I provided the settings meta box so you can disable the icon sets you don’t need and their associated css and font files won’t be loaded on your site.

      As for the “Image” type (the latest & most requested feature so far), well, there will be extra HTTP request for each image :)

  2. Thank you for introducing Menu Icons to the world Jeff! I really enjoy developing it and am hoping people would enjoy using it too!

  3. Oh, pretty slick plugin!! Nice addition to my WPcore collection. Thanks so much!! :)

  4. This is very cool, something that makes a lot of sense for theme authors to support. I wonder how hard it would be to auto-sprite the image icons (1 http request for tiny a image is kind of expensive) and also manage dpi-dependent sizes.

  5. Thanks for this review about Menu Icons Jeff. However, while it works for some themes, I observed a glitch with it when activated on Divi Elegantthemes. I noticed that the native WP post/page area was disrupted (not loading stylesheet) when the plugin is activated. Aside this, the plugin works well but I need to deactivate it whenever I need to work with WordPress post/page area!

    • That’s weird. I’m happy to debug this issue, but since the theme is not freely available, I’m afraid there’s nothing much I can do.

  6. This is a really nice plugin. I remember once trying to add icons to the menu and it didn’t goo too well. This is super easy and looks great. One question though, what’s the best icon to use for “About Me”?

    • I’d use the “user” icon. Dashicons, Genericons, Font Awesome and Elusive have it.

  7. mine only seems to show up when i am logged in as admin. is there a way to let everyone who visits my site see these icons? i have it all set up, im just not sure how to modify the visibility. :(

    Any help would be greatly appreciated. (Great Plugin :) )

    • The plugin doesn’t do any user check. Please try deactivating all other plugins to see if there’s a conflict. Also try with the default theme :)


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: