Themeisle Docs

Appearance

How to Add Icons to Menu Items ​

This guide walks you through adding an icon to a navigation menu item using the Menu Icons plugin — from opening the menu editor to verifying the icon appears on the front end.

📝 Note: The Menu Icons plugin must be installed and activated before you can follow these steps. See Getting Started with Menu Icons if you have not done this yet.

Adding an Icon to a Menu Item ​

Step 1: Choose an Icon Type ​

  1. In your WordPress admin, go to Appearance > Menus. Under Add menu items a new Menu Icons Settings panel is located.
  2. Under Icon Types select the icon libraries you want to use: Dashicons, Genericons, Font Awesome, SVG etc.

💡 Tip: Dashicons are loaded by WordPress by default and do not add any extra page weight. Choose another library only if you need icons not available in Dashicons.

Step 2: Open the Menu Editor ​

  1. In your WordPress admin, go to Appearance > Menus.
  2. Select the menu you want to edit from the Select a menu to edit dropdown, then click Select.

Step 3: Expand a Menu Item ​

  1. In the menu editor, find the menu item you want to add an icon to.
  2. Click the arrow on the right side of the menu item panel to expand it.

An Icon section appears below the standard fields (Navigation Label, Title Attribute, etc.).

Step 4: Select an Icon ​

  1. From Actions choose the library of your choice.
  2. Click on the icon you want to use. It will be highlighted to confirm your selection.
  3. Click Select to apply the icon.

📝 SVG Icons: If you select the SVG icon type, you will be prompted to upload an SVG file from your computer or select one from the Media Library instead of browsing a grid of icons.

Step 5: Configure Icon Options ​

After selecting an icon, several display options appear in the Icon section of the menu item:

  • Size — Controls the display size of the icon. You can enter a value in pixels or choose from preset sizes.
  • Vertical Alignment — Controls how the icon aligns vertically with the menu label text (top, middle, bottom, or a custom offset).
  • Hide Label — When enabled, the menu item's text label is hidden and only the icon is shown. Useful for icon-only navigation designs.
  • Position — Controls whether the icon appears before or after the menu label text.

Adjust these options to match your site's design.

Step 6: Save the Menu ​

  1. After configuring the icon options, scroll to the bottom of the Menus page.
  2. Click Save Menu.

Your changes are saved and the icon is now assigned to the menu item.

Verifying the Icon on the Front End ​

  1. Open your site in a browser (or click Visit Site in the WordPress admin bar).
  2. Navigate to the page where the menu is displayed.
  3. Confirm that the icon appears next to the correct menu item in the expected position and size.

💡 Tip: If you do not see the icon on the front end, try clearing your browser cache and any WordPress or hosting-level cache before troubleshooting further.

Troubleshooting ​

The icon does not appear on the front end ​

  • Confirm the menu is assigned to a menu location. Go to Appearance > Menus, select the Manage Locations tab, and check that your menu is assigned to an active theme location.
  • Clear any caching plugins or server-side cache and reload the page.
  • Check that the plugin is active at Plugins > Installed Plugins.

Icons are not showing in the icon picker modal ​

If the icon grid is empty after selecting an icon type, try deactivating and reactivating the plugin. If the issue persists, check your browser console for JavaScript errors, which may indicate a conflict with another plugin or theme.