# Can I add a menu item icon

**URL:** <https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316>\
**Category:** Website Builder\
**Tags:** cms\_presets, cms\_menu\
**Created:** [June 11, 2021, 6:44pm UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316 "2021-06-11T18:44:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charlie\_Moss](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Charlie\_Moss](https://community.sitejet.io/u/Charlie_Moss)\
**Post date:** [June 11, 2021, 6:44pm UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/1 "2021-06-11T18:44:58Z")

</div>

Is it possible to add an icon to the menu items like in the screenshot?

> **[2021.06.11-19\_43\_15-screenshot-ballucci.co.uk - Nimbus Capture](https://wordspressed.nimbusweb.me/s/share/5673299/qb5iwfiyzhhtze16s17a)**
>
> Nimbus Screenshot. Communicate & provide feedback faster!

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 12, 2021, 5:57am UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/2 "2021-06-12T05:57:48Z")

</div>

Hi! I don’t see a direct way to add icons in the Menu item from a Menu element.  
But, it can be done by adding some custom CSS.

---

<div class="post-metadata">

**Author:** ![Charlie\_Moss](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Charlie\_Moss](https://community.sitejet.io/u/Charlie_Moss)\
**Post date:** [June 12, 2021, 8:20am UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/3 "2021-06-12T08:20:03Z")

</div>

Hi Lucian,

Would you have such a snippet to save me time?

Thanks

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 12, 2021, 9:42am UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/4 "2021-06-12T09:42:26Z")

</div>

Hi! … Sure … but, this will be a bit advanced.

Here is how you can add icons to Menu items from a **Menu** element, so you can go from:

 ![Screenshot 2021-06-12 at 12.32.14](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/57528c27ace754a3177265397f162d0fd9e8de0f.png)  
to:  
 ![Screenshot 2021-06-12 at 12.33.19](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/3660b7f5127b68709a3c0c6e68fca2698c37bc05.png)

1. Attach a custom class to your Menu element let’s say “menu-with-icons”. To do this, select your Menu element, go to the Style → ID&Class and add the “menu-with-icons” class
2. Then, in the CSS editor add the following scss code:

```auto
.menu-with-icons {
  > ul {
    > li {
      //common link properties
      a {
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 24px !important; //left space
      }

      //first link icom
      &:nth-child(1) {
        a {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16px' height='16px' viewBox='0 0 16 16'%3E%3Cg transform='translate(0, 0)'%3E%3Cellipse fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' cx='8' cy='12.5' rx='7.5' ry='3' data-cap='butt'%3E%3C/ellipse%3E%3Cpath fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='M15.5,12.5 c0-1.961-1.181-3.697-3-4.792V5c0-2.485-2.015-4.5-4.5-4.5S3.5,2.515,3.5,5v2.708c-1.819,1.095-3,2.831-3,4.792' data-cap='butt'%3E%3C/path%3E%3Cpath fill='none' stroke='%23444444' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' d='M10.5,11.5 c0,1.105-1.119,2-2.5,2s-2.5-0.895-2.5-2' data-cap='butt' data-color='color-2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
        }
      }

      //second link icon
      &:nth-child(2) {
        a {
          //add bg here for the second menu items
        }
      }
    }
  }
}

```

1. Let’s see what all this scss means.

- The selector `> li > a` sets the common properties for all the links, in our case we are interested to leave some space on the left of the item using the `padding-left` property
- We are adding individual icons as a background images (SVG B64 encoded) for each menu item, so the selector `&:nth-child(1)` targets out first menu item, we can target the second one with the `&:nth-child(2)` selector, and so on for the rest of the menu items
- The `background-image` value is an SVG in B64 encoding format, you can use this on-line tool. to convert any SVG to a `background-image` B64 encoded value [URL-encoder for SVG](https://yoksel.github.io/url-encoder/)

I hope all this, makes any sense. Done.

---

<div class="post-metadata">

**Author:** ![Charlie\_Moss](https://avatars.discourse-cdn.com/v4/letter/c/c77e96/32.png) [@Charlie\_Moss](https://community.sitejet.io/u/Charlie_Moss)\
**Post date:** [June 12, 2021, 9:55am UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/5 "2021-06-12T09:55:20Z")

</div>

Thank you Lucian,

This is excellent 🥰

Charlie

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 20, 2021, 3:38pm UTC](https://community.sitejet.io/t/can-i-add-a-menu-item-icon/316/6 "2021-10-20T15:38:39Z")

</div>