Menu Icons in WordPress: How to Add Them to Your Navigation (Classic and Block)

A plain text menu works for most WordPress sites… But it doesn’t always stand out enough. Icons can change that. They make each link easier to spot. You can use icons to guide visitors, highlight key pages, or simply make your navigation look sharper.

In this post, I’ll show you two clear ways to add custom icons to otherwise standard WordPress menus. You’ll see each step with screenshots so nothing feels confusing and you won’t need to guess your way around this.

⚠️ 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

You’re one plugin away from being able to add custom icons to your menus. The plugin’s:

The usage is super simple and follows the native procedure of how creating menus works in WordPress.

Below, we’ll show you how to set everything up:

Install plugin

Note: We’re assuming that you already have a WordPress menu configured. If that’s not the case, go to this article to learn how to set up your first WordPress menu.

To start, go to the WordPress dashboard and click on Plugins → Add New Plugin. Then use the search bar to find “Orbit Fox” 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.

Next, go to the Orbit Fox settings and enable the Menu Icons feature:

Once that’s done, you can start adding icons to your menus!

How to quickly add your first menu icon

Go to Appearance → Menus in your WordPress dashboard. You should be able to see your configured menu(s) there.

Select the menu that you want to work with (if you have more than one), and then take a look under the Menu Structure header. What you’ll see are all the links that have been added to your menu so far. What you’ll also see are those “+” buttons next to each menu item.

Those buttons are how you’re going to add icons to your menu. Click on any one of them and you’ll see a panel where you’re going to be able to pick an icon that fits:

You can go through your menu – item by item – and either pick icons for all of them, or just the select few that you want to highlight.

Once done, click the Save Menu button at the bottom.

View the new icon on your live site

This is basically it.

All you need to do now is just verify that the icons show up in your menu. Here’s mine:

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.

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 your site (as a regular visitor would) and clicking on Edit Site in the top bar:

⚠️ 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.

Once you’re inside the editor, click on your menu until you see the navigation options:

How to add menu icons to the navigation menu inside block menus

Begin by clicking on whatever menu item you’d like to add an icon to. In the example below, I clicked on Team. 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:

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.

Save the menu

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

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

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

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.

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:

(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, make sure to set your menu to appear in the Primary Menu location. Tap Save Menu 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:

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. You’ll see your original menu there. Click it:

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

This should result in you seeing your icons on the frontend. However, not all block themes will support this ability (Neve FSE does). For a safer, always-works approach of adding menu icons to block themes, use the Otter Blocks method described earlier.

We are done!

Luckily, it’s easy to do for both classic WordPress themes and for newer block themes. For the former, the Orbit Fox plugin makes it easy to implement icons in classic menus. 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.

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

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