Add icons to the left of menu item?

Elements How do I…
1

Title says it all. Thanks for your input.

Cleanshot - Who is Numeric Citizen@2025-06-30@19.19.34@2x
Cleanshot - Who is Numeric Citizen@2025-06-30@19.19.34@2x1920×398 275 KB

2

In the page setting there is an image well next to the page name.

3

Yeah, thanks, I got those configured and set with the proper icon… yet, in the menu, they don’t show up.

4

let’s see if @elementsbot can bring some answers here…

5

Hey @numericcitizen! Great question—it’s one of those little touches that can really make a navigation sing. :smiling_face_with_sunglasses:

Here’s where things stand with Elements:

Can you add icons to the left of menu items in Elements navigation?

Short answer:
At the moment, the built-in navigation/Menu component doesn’t display page icons alongside text in the menu—those icons set in the page settings are (for now) mostly for page identification and admin use inside the app, not for live site display.

But!
The Elements team is super aware of how useful this feature would be (a lot of folks want icon-enhanced menus!), and it’s very likely to appear in a future update. You can add your voice (and an upvote) in the Feedback section to boost the priority.

Workarounds & Power User Ideas

:wrench: Manual/Custom nav:
If you’re feeling adventurous, you could create a custom navigation bar using the HTML or Inner Blocks component, then insert SVGs or icon fonts (like Heroicons or FontAwesome). This approach lets you have total control over the look, but it’s more hands-on.

Example:

<nav class="flex space-x-6">
  <a href="/home" class="flex items-center">
    <svg class="w-4 h-4 mr-2">...</svg> Home
  </a>
  <a href="/news" class="flex items-center">
    <svg class="w-4 h-4 mr-2">...</svg> News
  </a>
  <!-- etc -->
</nav>

Replace the <svg>...</svg> part with your preferred icon markup or image.

TL;DR:

  • Native menu icons: not just yet (but coming!).
  • Custom nav: totally doable now if you want to roll your own.

Let me know if you want a step-by-step for the custom navbar approach, or if you’d like to see a live example. And don’t forget: you can @elementsbot with anything Elements-related!

Power of Elements, right? :rocket:

6

I’d just like to add my two cents worth to the conversation about menu icons. If you use the Top Pages component it can make use of the icons placed in the menu item icon well.

I use this on one of my sites for an additional navigation bar.

CleanShot 2025-06-30 at 16.23.54@2x
CleanShot 2025-06-30 at 16.23.54@2x1450×106 31.9 KB

The steps in front of the item text are icons that were added using the icon well for links, which were used to build this menu with the Top Pages folder option.

7

Great spot, @handshaper! This is exactly the “Power of Elements” in action—sometimes a feature’s already lurking in the toolbox, just not where you first expect it. :smiling_face_with_sunglasses:

To recap for anyone following along:

  • The standard Menu/Navigation component does not (yet!) show your page icons in the site menu.
  • However, the Top Pages component does support displaying the icons you set in the page or link’s icon well. That means if you want an icon-enhanced navigation bar, simply use the Top Pages component and set your icons there. Perfect for step-by-step guides, process menus, or—honestly—any nav bar you want to jazz up.

How to use icons in a menu with Top Pages:

  1. Set the icon for each page or link using the icon well in the page/link settings.
  2. Add the Top Pages component to your layout.
  3. Configure it to display your chosen pages/links. The icons should now appear alongside the text in your menu.

:light_bulb: TIP: You can use multiple navigation components on the same site—mix and match for different sections or vibes.

If you want even more control, or to have icons in a custom-designed menu, you can always build your own nav with HTML and SVGs—see my previous post for a ready-made snippet!

Shout if you want a step-by-step walkthrough or more creative ideas for menu icons. And as always, the Elements team love feedback (and feature requests)—so keep sharing your wishes in the Feedback category.

Happy icon-ing! :rocket:
— @elementsbot

P.S. You can always @elementsbot for advanced Elements tips, tricks, and workarounds!

8

https://www.w3schools.com/charsets/ref_emoji_places.asp

9

Currently the Menu component doesn’t support page icons , whereas the Top Pages component does.

That said, I’ve added page icon support for the Menu to our internal list of improvements. I can’t give a timeline just yet, as we’re focusing on a number of other higher-priority features and fixes, but it’s definitely on our radar.

1 Like