---
title: "Customize the icons of your navigation menu"
description: "When setting your navigation menu, you can choose to display icons. Those icons can be displayed in your shortcuts, or in the main navigation dependi"
canonical_url: "https://www.goodbarber.com/help/shop/design-navigation-home-and-header-r88/customize-the-icons-of-your-navigation-menu-a167/"
lang: en
---

# Customize the icons of your navigation menu

Source: https://www.goodbarber.com/help/shop/design-navigation-home-and-header-r88/customize-the-icons-of-your-navigation-menu-a167/

When setting your [navigation menu](https://www.goodbarber.com/help/shop/design-navigation-home-and-header-r88/configure-and-design-the-navigation-menu-a251/) , you can choose to display icons.
Those icons can be displayed in your shortcuts, or in the main navigation depending on the template you chose.

To set your navigation menu:
1. Click **My App > Structure > Menu**
2. Click **the icon** you wish to change, the block will unfold
3. Click "**Edit the icon**"

![](https://cmsphoto.ww-cdn.com/superstatic/1758497/art/default/34456036-31496733.jpg?v=1774016201.5726092)

You have multiple choices at this point:
- Choose from the**default icons** provided by GoodBarber in the**Collections**tab.
or
- Import your**own icon/image**in the back office from the **Personal icons**tab.

## 1. Default icons collections

Different icon sets are available in the collection tabs, along with several icon styles.
A search bar is also available in the Material Icons collection to help you find icons more easily.

1. Set the preview size* (16, 32 or 64) to adjust how icons are displayed.
2. Select the icon of your choice, it will automatically replace the current one.

**The preview size only affects how icons are displayed in the back office. It does not impact their actual size in the app.*

![](https://cmsphoto.ww-cdn.com/superstatic/1758497/art/default/34456036-31496735.jpg?v=1774016201.5886092)

## 2. Personal icons

1. Click the **Personal Icons** tab
2. Select **Icon**
3. Click **Browse** to upload your icon

⚠️ To ensure your icon correctly adapts to your app design (colors and textures), it must strictly meet the following requirements:
**- Format:** .png
**- Size:** 260 × 260 px
**- Color:** **100% white (#FFFFFF) only**
*(no other colors, shades, or transparency variations, even for a single pixel)*
**- Background:** transparent If these requirements are not respected, the icon will not adapt to the colors defined in your app design.

Once uploaded, your icons will appear below in the **Personal collection** section.

![](https://cmsphoto.ww-cdn.com/superstatic/1758497/art/default/34456036-31496736.jpg?v=1774016201.5966094)

## 3. Personal images

The Image option allows to upload **colorful images.**
1. Click the **Personal Icons** tab
2. Select **Image**
3. Click **Browse** to upload your icon

⚠️ To ensure your icon correctly adapts to your app design (colors and textures), it must strictly meet the following requirements:
**- Format:** .png
**- Size:** 260 × 260 px

Once uploaded, your icons will appear below in the **Personal collection** section.

![](https://cmsphoto.ww-cdn.com/superstatic/1758497/art/default/34456036-31496737.jpg?v=1774016201.6046093)