Menu Icons in WordPress: How to Add Them to Your Navigation

Curious about adding icons to your menus in WordPress? WordPress menu icons add a visual element to your site and incorporate relevant icons to further guide your users to the pages they need to go.

In short, a menu icon is a simple, non-invasive way to make your website look more professional, while subtly providing an extra nudge to your users by indicating exactly what they can expect when they click on a menu tab.

⚠️ Before you start: There are two separate tutorials presented below. One is for classic theme users and the other for block theme users. If you’re unsure which type you’re using, you can easily check via the WordPress dashboard. Using the lefthand side menu, go to Appearance and then look at the submenu options. If you see an option for Editor then you have a block theme activated. If not, you’re on a classic theme. You can use the table of contents below to skip to the section that’s relevant to you.

How to add WordPress menu icons to navigation buttons in a classic theme

To easily add WordPress menu icons, you can use the free Menu Icons by Themeisle plugin. It’s by far the easiest plugin to achieve the desired result, and you receive an impressive range of icon sets to choose from, including options from Font Awesome, Fontello, and Genericons.

Below, we’ll show you how to set up the plugin.

How to quickly add your first menu icon

We’ll get into more industry-specific icons further down in the article, but right now it’s time to add instant icons to a few tabs in your menu.

Note: We’re assuming that you already have a WordPress menu configured. If that’s not the case, go to this article (or this one for multi-level dropdown menus) to learn how to set up your WordPress menu.

The plugin documentation from Themeisle provides a quick guide on how to add menu icons if you’re interested. We’ll also cover it here in a bit more depth.

To start, go to the WordPress dashboard and click on Plugins → Add New Plugin. Then use the search bar to find “menu icons” and wait for the results to auto-populate. Make sure you see the correct plugin and click Install Now. Then wait a few moments and the same button should now say Activate. Click it again and wait another few seconds.

Assuming everything went well, you’re ready to start using it.

Go to Appearance → Menus in your WordPress dashboard:

You should be able to see your menu items under the Menu Structure header. If you have multiple menus, then you’ll have to select the one you want to edit. There’s also a module on the left called Add Menu Items, which allows you to make menu tabs from pages, posts, custom links, and more.

Find the right menu and add an icon

To add WordPress menu icons, select any of the menu items you already have created.

Locate the Icon: Select link. Click on that to navigate to the section to add an icon to that particular menu item.

By default, the Menu Icons by Themeisle plugin reveals icon options from the Dashicons collection. Feel free to scroll through the list and choose an icon that fits with the actual menu title.

For instance, the Customizer (pen/quill) icon would be relevant as a menu icon for a Blog.

You can also search for icons by keyword or use the category filter to find different types of icons.

Configure the menu icon settings

Click on the icon you’d like to use for the menu item. This highlights the icon and puts a checkmark next to it.

On the right side, you’ll see several settings to configure before activating the icon.

These include:

• Hide Label – Removes the text label and only keeps the icon (great for social media icons).
• Position – Shifts the icon’s location in relation to the text.
• Vertical Align – Moves the icon’s vertical location.
• Font Size – Enlarges or shrinks the icon’s size.

There’s a Preview area that provides an example of what the menu item looks like as you adjust the settings. For instance, increasing the font size and moving the icon’s position to “After” results in a new preview.

Make sure the icon you want is still highlighted, then click the Select button to add it to your menu.

Be sure to click Save Menu in order for the icons to activate.

If you want to change something, you can always select the Remove link to start over.

View the new icon on your frontend menu

Check to see if the icon actually shows up on your site.

Viewing the live website allows you to see if it looks presentable, or if there’s any need to adjust the icon settings any further.

Troubleshooting

If you can’t see the icon or some of your menu items, make sure the Menu Settings are configured properly. The most important part is to have the Display Location assigned for that menu, like assigning it to the Primary Menu location.

It’s also essential to check the Manage Locations tab in the Menus section, as you may find that a different menu is assigned to the Primary Menu. This will typically happen if you install a pre-made starter site from a theme, as the starter site will come with its own pre-built menu. Just replace it by choosing Main Menu.

How to activate all supported icon packs in the plugin

The Menu Icons by Themeisle plugin comes with support for the following icon packs:

• Dashicons
• Elusive
• Font Awesome
• Foundation
• Genericons
• Images
• SVG

By default, the plugin settings only show Dashicons, but you can activate additional icon sets if desired. However, you should try to limit the number of icon sets you load because each additional icon set will have a small effect on your site’s performance.

To activate all, or some, of the icon types, go to Appearance → Menus in the dashboard.

Choose the Menu Icons Settings tab.

Turn on all menu icon collections/sources

You’ll see various Icon Types under the Global tab:

Check the icon sets you want to add as options.

Click the Save Settings button to Continue.

Decide on a menu item for which you’d like to add a new icon.

Click the Select button for that item.

Explore the icons from other sources

You should now see a list of several icon categories on the left side of the window.

Note: If you don’t see the new icon categories, try refreshing your page or saving your menu.

Now, if you type “Shop” into the search field, you’ll see some different icons from each icon collection.

For instance, the Foundation collection provides two icons for that search, one that’s a shopping bag and another that’s a shopping cart.

With the exact same search term, Font Awesome delivers three more icons, all a little different from the Foundation collection.

Just like the tutorial from above, choose an icon and click Select to add it to your menu.

Remember to hit the Save Menu button.

Now the menu has both the Blog icon from before and the Shop icon, but this time from a different icon source.

How to add image attachments and SVG attachments

The plugin also allows for SVG (vector) and image file uploads.

This means that you can make your own image or vector icon and upload it, or you may find a cool image icon from elsewhere online.

Again, go to Appearance → Menus, then click on the Select link for the menu item of your choice.

One thing that’s different about SVG and image files is that you typically need to make them the perfect size before uploading to WordPress; otherwise, the image may be far too big or small, throwing off the menu design.

To proceed, upload a very small image (this depends on your theme, but 50×50 px is a good starting point), highlight that image, and click Select.

You should see the image icon show up on the backend of the menu.

And it appears alongside the previous icons, except as a far more unique image. Now obviously in real life you would make it look better than this example but the point is to show you how it can be done.

Okay, now that we’ve got the classic theme tutorial out of the way, let’s show you how to do add menu icons in a WordPress block theme next.

How to add WordPress menu icons to navigation buttons in a block theme

Block themes are the newer generation of WordPress themes. Unlike classic themes which rely on the WordPress Customizer to make edits to a website, block themes use something called full site editing (FSE for short) instead. FSE is extremely versatile (more so than the Customizer) and lets you tweak almost every aspect of your website.

Having said that, it does not currently offer custom menu icons for your navigation menu as a default feature. However, you can still easily get the job done with our Otter Blocks plugin. It comes with an extensive library of icons that you can use in conjunction with FSE to add menu icons to your navigation menu.

How to access the full site editor

If you’re using a block theme (and after you’ve installed Otter Blocks) you can get started by going to Appearance → Editor.

⚠️ For reference, we are using Neve FSE for this tutorial. Depending on which block theme you are using, the placeholder website content will look different, as will the lefthand side menu. The good thing is that absolutely none of that matters because WordPress lets you bypass the menu entirely. You can go directly into the editor by clicking anywhere on the screen to the right of the menu:

Once you’re inside the editor, simply click again to wherever you see the menu options:

How to add menu icons to the navigation menu inside FSE

Begin by clicking on whatever menu item you’d like to add an icon to. In the example below, we clicked on Patterns. For confirmation that the correct menu item is selected, you can look over to the righthand side menu where you should see the identical name under Settings and TEXT:

From here you want to find the Menu Icons item in the pop-up menu. It looks like four mini emojis put together into a 2×2 square:

Click on it and you’ll get a drop-down menu that lets you browse the full library of icons by alphabetical order or search for icons by name. In this example we searched for “paint” and got two options as a result:

Once you’ve found an icon you like, click on it. You’ll see it immediately added to the menu item in real time:

Repeat this same process for as many navigation links as you’d like:

Troubleshooting

You might notice an automatic font change happen to the specific menu item that you apply the menu icon to. This occurs if the default typography (font) settings of the theme you’re using have different values for text and for links.

If that’s the case and this happens to you, it’s a simple fix to make it look normal.

First, click on the half-black, half-white circle icon on the top right of the editor to open up the Styles menu. Then tap on Typography:

Next, scroll down until you see the Elements section. Here is where you can set your font for all of the various types of text on your site. For the purposes of troubleshooting this issue, you’ll want to ensure that whatever font is selected for Text, is also selected for Links.

They’ll both be set to “default” but remember that this is what’s causing the problem – the default is different for each one of them. So instead of leaving them on default, choose a font you like from the menu and apply that same font to both. The menu will then look normal:

If you don’t like any of the font options on the list, then see this tutorial to import the Google Fonts library into the full site editor (for free). It’ll give you access to more fonts than you can possibly imagine. Once you’ve imported and/or selected the font you like, you can move on to the next step.

Remove icons from the navigation menu

If you accidentally add an icon you don’t want or you simply change your mind, you can easily remove it. Just click on the navigation menu link you want to remove the icon from. You’ll notice that the previous default icon for Menu Items will instead be showing as the icon you chose for that navigation menu link.

In our example, a paint brush.

Click on it and the drop-down menu will once again appear, but this time with a Remove Icon choice. Tap it and then start the process again to choose a different icon.

Finalize the menu

When everything looks the way you want it, click Save on the top right:

You’ll be asked to confirm the changes to the templates that your changes will affect. Click Save again:

Remember that for this example we also did some troubleshooting with the typography. That’s why you’re seeing the Global Styles in the confirmation above, but if you don’t end up needing to do that, then you’ll only see Header and Navigation Menus there (assuming you don’t make any other changes).

Finally, check the front end of your site and if all went well, you should see the menu icons:

(Optional) How to import a classic menu into the full site editor

The full site editor isn’t terribly difficult to use but it does take some time to get used to. If you recently started using a block theme and come from a background of using classic themes then you might be wondering if there’s a way you can fuse the best of both worlds.

The answer is that with some elements there is, and menus happen to be one of those elements. You can, in fact, build a classic menu in the WordPress dashboard and then import it into FSE to add your menu icons as we did above. Here’s how to do it:

Create your classic menu

First, go to Appearance → Menus:

This should look familiar to you. Add whatever pages you want to be a part of your main navigation menu and then click Create Menu as you normally would.

Afterward, click on Manage Locations and make sure your menu is selected as the Primary Menu. Tap Save Changes when you’re finished:

Import your classic menu into FSE

This is where the magic happens. Go back into the full site editor using the same steps described previously. Once you’re inside, click anywhere on the navigation menu to highlight it. Then tap the compass icon on the far left of the pop-up menu:

This will change the righthand side menu to essentially mirror what’s in the navigation menu. You’ll also notice three vertically stacked dots next to the word Menu. Click on them:

You’ll now see a drop-down menu with the option to IMPORT CLASSIC MENUS. Click it:

And just like that, your menu will transform into the one you created in the WordPress dashboard:

You can then repeat the same process discussed above to add your menu icons and when you’re done, you should achieve a similar result:

Start using WordPress menu icons today

Luckily, it’s easy to do for both classic WordPress themes and for newer block themes.

For the former, the Menu Icons by Themeisle plugin makes it easy to implement icons, images, and SVG icons, all with a few clicks. For the latter, the Otter Blocks plugin integrates smoothly with the full site editor to give you a large library of menu icons that’ll jazz up your navigation menu.

If you’d like some other ways to enhance your WordPress menus, check out these guides:

• How to create a WordPress mega menu
• Best menu plugins for WordPress
• How to create custom menus in WordPress

If you have questions about WordPress menu icons, let us know in the comments.