Adding icons to navigation menus in WordPress typically requires either theme support or custom code. The Menu Icons plugin handles this through the standard WordPress Menus screen without any code changes.
Installation and Setup
Install and activate Menu Icons. Go to Appearance, then Menus. Open any menu item by clicking the arrow to expand it. At the bottom of the expanded menu item, you will see an Icon section added by the plugin. Click the Select Icon button to open the icon picker.
Choosing an Icon Library
The icon picker shows all available icon libraries. Click the library tab you want to use — Dashicons is a good starting point because it is already loaded by WordPress and has no additional file weight. Font Awesome has more icons but loads a full icon font file.
Browse or search for the icon you want. Click it to select it. The icon previews in the menu item settings.
Configuring Icon Appearance
After selecting an icon, configure how it appears:
- Icon Size — Set in pixels or em. Start at 1em to match the menu font size, then adjust.
- Vertical Align — Controls how the icon aligns with the text (middle is usually correct).
- Position — Before or After the label text.
- Hide Label — Enable this to show only the icon without the text. Only use this for universally recognisable icons like a home, cart, or search icon.
Save the menu after configuring each item.
Using SVG Icons
If you need a custom icon not available in standard icon libraries, select the SVG tab in the icon picker. Upload your SVG file and it will be used as the menu icon. SVG icons have a performance advantage over icon fonts — only the specific SVG file loads rather than a full icon font with hundreds of glyphs. SVGs also scale perfectly at any size.
Adding a Cart Icon With Item Count
For WooCommerce sites, a cart icon in the navigation is a common requirement. Menu Icons can add the icon, but the dynamic item count (showing how many items are in the cart) requires a separate approach. Add the cart icon through Menu Icons, then add the count via a custom HTML menu item or a WooCommerce cart widget. Alternatively, if you use Astra Pro or Kadence Pro, their header builders include a native cart element that handles the count automatically.
Performance Notes
Menu Icons loads icon library files (CSS and font files) on every page. If you use only Dashicons for your menu icons, the impact is minimal since Dashicons load as part of WordPress anyway. If you use Font Awesome, the full Font Awesome CSS and font file load on every page even if you use only one icon. For production sites, consider whether you can achieve the same result with inline SVGs in a custom menu walker to avoid loading the full icon font.
For custom navigation development including mega menus, animated dropdowns, and icon-rich mobile navigation, a WordPress developer can build a fully custom menu system tailored to your design.