---
title: "Personalizar los iconos de tu menú de navegación"
description: "Cuando estás configurando tu menú de navegación, puedes mostrar iconos en tu menú.  Estos iconos pueden ser visibles en tus accesos directos, o en tu naveg"
canonical_url: "https://es.goodbarber.com/help/personalizar-la-navegacion-el-inicio-y-el-encabezado-r88/personalizar-los-iconos-de-tu-menu-de-navegacion-a167/"
lang: es
---

# Personalizar los iconos de tu menú de navegación

Source: https://es.goodbarber.com/help/personalizar-la-navegacion-el-inicio-y-el-encabezado-r88/personalizar-los-iconos-de-tu-menu-de-navegacion-a167/

Cuando estás configurando tu [menú de navegación](https://es.goodbarber.com/help/personalizar-la-navegacion-el-inicio-y-el-encabezado-r88/configurar-y-disenar-el-menu-de-navegacion-a251/) , puedes mostrar iconos en tu menú.
Estos iconos pueden ser visibles en tus accesos directos, o en tu navegación principal, dependiendo de la plantilla de menú que hayas elegido.

Para cambiar estos iconos:
1. Haz clic en **Mi app > Estructura > Menú**
2. Haz clic en **el icono** que deseas cambiar, el bloque se desplegará
3. Haz clic en "**Modificar el icono**"

![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034922-27892099.jpg?v=1783497062.5932977)

En este punto, tienes varias opciones:
- Elige uno de los **iconos predeterminados** que ofrece GoodBarber en la pestaña **Colecciones**.
o
- Importa tu **propio icono/imagen** en el panel de administración desde la pestaña **Iconos personales**.

## 1. Las colecciones de iconos predeterminadas

En las pestañas de la colección, encontrarás diferentes conjuntos de iconos y varios estilos.
También dispones de una barra de búsqueda en la colección de Material Icons Design para ayudarte a encontrar iconos más fácilmente.

1. Ajusta el tamaño de la vista previa* (16, 32 o 64) para modificar cómo se muestran los iconos.
2. Selecciona el icono que prefieras; este reemplazará automáticamente al icono actual.

**El tamaño de la vista previa solo afecta a cómo se muestran los iconos en el panel de administración. No afecta a su tamaño real en la aplicación.*

![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034922-27892101.jpg?v=1783497062.613298)

## 2. Iconos personales

1. Haz clic en la pestaña **Iconos personales**
2. Selecciona **Icono**
3. Haz clic en **Examinar** para subir tu icono.

⚠️ Para garantizar que tu icono se adapte correctamente al diseño de tu app (colores y texturas), debe cumplir estrictamente los siguientes requisitos:
- **Formato**: .png
- **Tamaño**: 260 × 260 px
- **Color: 100 % blanco (#FFFFFF) únicamente**
(sin otros colores, tonalidades ni variaciones de transparencia, ni siquiera a nivel de píxel)
- **Fondo**: transparente. Si no se cumplen estos requisitos, el icono no se adaptará a los colores definidos en el diseño de tu app.

Una vez cargados, tus iconos aparecerán a continuación en la sección **Colección personal**.

![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034922-27892103.jpg?v=1783497062.625298)

## 3. Imágenes personales

La opción Imagen permite subir**imágenes a color**.
1. Haz clic en la pestaña **Iconos personales**.
2. Selecciona **Imagen**.
3. Haz clic en **Examinar** para subir tu icono.

⚠️ Para asegurar que tu icono se adapte correctamente al diseño de tu app (colores y texturas), debe cumplir estrictamente los siguientes requisitos:
- **Formato**: .png
- **Tamaño**: 260 × 260 px

Una vez subidos, tus iconos aparecerán a continuación en la sección **Colección personal**.

![](https://cmsphoto.ww-cdn.com/superstatic/291634/art/default/28034922-27892104.jpg?v=1783497062.6372979)