Icons on menu items serve a real purpose: they give visitors a visual anchor that helps them scan navigation faster than reading text alone. For long menus or menus with many similar-sounding items, icons can significantly reduce the cognitive load of navigating.
The challenge has traditionally been that adding icons to WordPress menu items requires either a specialized plugin or custom CSS — neither of which is accessible to non-technical users.
Ruby Mega Menu includes a built-in icon picker that lets you assign icons to any menu item from the menu builder, with no CSS required.
How to assign an icon
In the WordPress menu builder, expand a menu item. In the Ruby Mega Menu settings for that item, you’ll see an icon selection field. Click it to open the icon picker.
The picker shows the full available icon set. Browse or search for the icon you want, click it, and it’s assigned to the menu item. The icon appears in the menu builder preview, and on the front end when you save.
Positioning: before or after the label
By default, icons appear before the menu item label. You can change this to after the label if your design calls for it — some layouts, particularly right-aligned items, look better with the icon on the right.
Icon-only items
For items where the icon alone is sufficient — a home icon for the homepage, a search icon for a search trigger — you can hide the text label and show only the icon. This works well for the rightmost items in a navigation bar where screen space is limited.
Sizing and color
Icon size and color are inherited from the menu item’s typography settings by default. You can override these with CSS if you need icons at a different size or color from the label text.
For most setups, matching the icon color to the menu link color and setting the icon size to approximately match the font size produces the cleanest result.
Using icons for categories in mega menu panels
Icons are particularly useful inside mega menu panels. When a panel contains multiple column headings — representing different subcategories — adding a distinct icon to each heading helps visitors identify sections at a glance. This is a subtle improvement that pays off in usability for content-rich panels.
What icons are available
Ruby ships with a curated icon set covering common navigation needs: home, search, cart, user, settings, categories, arrows, and a range of content-type icons. If you need an icon that isn’t in the set, you can add custom icons via CSS using any icon font or SVG icon system.
Icons are a small detail that adds up. A navigation bar with well-chosen icons looks more intentional than one without, and the usability benefit is real — particularly on mobile, where screen space is limited and visual landmarks matter more.