What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Add Icons to Navigation Menus in WordPress

How to Add Icons to Navigation Menus in WordPress

Adding custom icons to navigation menus is a great way to make the design of your WordPress site shining. If you are working with the default Twenty Fifteen theme, you will probably have a deep feeling about the opinion. Usually, graphic icons are more visually appealing to visitors than plain words.

There are multiple ways for adding icons to a navigation menu, so we have prepared three solutions, all for beginners although the second solution requires knowledge about CSS. We will introduce the manual methods first so that you can have a better understanding and learn some new skills. If you do not want to deal with any code, then you can just skip to the plugin section.

Adding Menu Icons Manually by Using Genericons

Actually, this method is neither difficult nor time-consuming. You do not have to edit much CSS to make things effective. Of course, in the case that what you need is advanced customization, you will have to, but that is not what we want to discuss here.

If you are using Twenty Fifteen, things can be more than easy as the theme comes with support for Genericons (an icon library) by default which means that no manual uploading of icons is required. Follow the steps below to add a Genericons icon to the navigation menus of Twenty Fifteen.

Step 1: Create a child theme.
The purpose of using a child theme for the customization is allowing you to add your own customizations without affecting the current design of the original theme. If you have no idea about where to start, follow this tutorial: how to create child theme in WordPress.

Step 2: Get the icon on Genericons.
Visit Genericons and find the icon you need. You can browse through all available icons, or just search the keyword using the filter on the page. Once you click on the icon, it will appear on the upper left of the page. Next to the icon there are three options for you to get the image, so now you should click on “Copy HTML”.

Genericons Icon

Then copy the HTML in the text box and paste it in a text editor like Notepad++. Repeat the actions until you find all icons required for your menu. Leave a note for each line of code to prevent confusion in future use.

Copy HTML for Icon

Step 3: Add icons to navigation menus.
Log into WordPress dashboard and go to Appearance > Menus. Select the menu you’d like to edit. Under the Menu Structure, you can see all the items included in the menu. Now, click on the arrow of each item to open the customization options and paste the HTML copied before in the text box under Navigation Label. If you need a text for the item, put the text after the HTML.

Edit Menu Item

After finishing the editing, click on the “Save Menu” button. Refreshing the frontend of the website gets us a menu like this.

Navigation Menu with Icons

Step 4: Customize the display of icons.
Find that something is wrong, right? The icons are on the left of the menu items, but they are much higher than the texts and too small in size. That’s OK because you can make adjustments by adding the following code inside the HTML of icons.

style="font-size:larger; vertical-align:middle"

So the complete HTML that should be inserted in the Navigation Label field should be in the format below. Remember to change the name of the icon.

<span class="genericon genericon-home" style="font-size:larger; vertical-align:middle"></span>

After stylizing the icons, we finally get them displayed in the right places with the right sizes.

Adjusted Menu Icons

In addition, it is also possible to change the colors. Just add the code below into the icon HTML and replace #FF6600 to whichever color you like.


Adding Menu Icons with CSS

This solution allows you to upload your own icon images and adding CSS. It might sound a little bit difficult for beginners, but if you want to learn some new skills, you can have a try. Again, we want to remind you to use a child theme.

Step 1: Upload the icon images to the media library.
First of all, you have to download some icons from the web or design your own ones and upload them to your WordPress site. Pay attention to the size of the icons. If you are not sure which is the right size, prepare several different sizes.

Step 2: Add CSS classes to menu items.
In Appearance > Menus, when you open a menu item, you can see a field for CSS classes. If the field is not shown, you have to open the screen options on the upper right of the screen and have CSS Classes checked. Now add a class name for the item.

Add CSS Classes

Step 3: Add CSS to your theme.
The last step is to add CSS to the style.css file of your child theme to combine an icon with the class you created. The file can be found in Appearance > Editor. Below is the sample code. You must change the CSS class and the image URL before inserting the code. The position and padding can also be customized to meet your needs.

.home {
background-image: url('/images/home.png');
background-position: left;
padding-left: 8px;
background-repeat: no-repeat;

The step 2 and step 3 are only for adding the icon for one menu item. After modifying the CSS above to achieve a perfect match, repeat the two steps for any other menu item you want to add an icon to.

Adding Menu Icons with a Plugin

Being afraid of breaking the site due to insufficient knowledge, some beginners may not choose the edit CSS or other code manually. Instead, they want a safer and easier way. If you are one of them, the menu icons plugin is prepared for you. It is an easy-to-handle option with which you do not need to touch a single line of code. Using the plugin, you have hundreds of options of the icon design.

After installing and activating the plugin, go to Appearance > Menus, and you will find that a “Select” link has been added in each menu item. To set up an icon for a menu item, click on the link. As the plugin has integrated several widely used icon libraries, you can make a choice from more than one thousand options. The “Image” link, however, allows you to upload your own icon from the local computer.

Icon Library

When clicking on an icon, there will be a preview on the right side of the page, along with several options you can use for customizing the icon position, size and the vertical alignment. Make the customizations based on your needs.

Icon Preview & Modification

After selecting an icon for each menu item, save the changes and refresh your site to enjoy a better design. You can also go back to the dashboard to make modifications if there is anything improper with the size or alignment.

New Menu Icons


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.