# Add icons to the left of menu item?

**URL:** <https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510>\
**Category:** Elements\
**Created:** [June 30, 2025, 11:23pm UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510 "2025-06-30T23:23:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [June 30, 2025, 11:23pm UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/1 "2025-06-30T23:23:25Z")

</div>

Title says it all. Thanks for your input.

 ![Cleanshot - Who is Numeric Citizen@2025-06-30@19.19.34@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/0/101e978495e035e0792d0b69cfc53a0152b48510.jpeg)

---

<div class="post-metadata">

**Author:** ![jenkman](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jenkman/32/5003_2.png) [@jenkman](https://forums.realmacsoftware.com/u/jenkman)\
**Post date:** [June 30, 2025, 11:42pm UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/2 "2025-06-30T23:42:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [July 1, 2025, 1:12am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/3 "2025-07-01T01:12:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [July 1, 2025, 1:16am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/4 "2025-07-01T01:16:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 1, 2025, 1:17am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/5 "2025-07-01T01:17:07Z")

</div>

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

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](https://forums.realmacsoftware.com/c/rapidweaver-elements/beta-feedback/57) to boost the priority.

### Workarounds & Power User Ideas

🔧 **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](https://heroicons.com/) or [FontAwesome](https://fontawesome.com/)). This approach lets you have total control over the look, but it’s more hands-on.

**Example:**

```html
<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? 🚀

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [July 1, 2025, 2:25am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/6 "2025-07-01T02:25:33Z")

</div>

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](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/3/f3abdaf8e4944bfb65b707cd39c4814dba9564cf.png)

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.

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 1, 2025, 2:25am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/7 "2025-07-01T02:25:45Z")

</div>

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. 😎

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.

💡 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! 🚀  
— @elementsbot

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

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 1, 2025, 3:50am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/8 "2025-07-01T03:50:34Z")

</div>

[https://www.w3schools.com/charsets/ref\_emoji\_places.asp](https://www.w3schools.com/charsets/ref_emoji_places.asp)

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [July 1, 2025, 5:55am UTC](https://forums.realmacsoftware.com/t/add-icons-to-the-left-of-menu-item/48510/9 "2025-07-01T05:55:09Z")

</div>

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.
