---
title: "Como personalizar os ícones do seu menu | Tutoriais - GoodBarber"
description: "Ícones do menuNo seu menu de navegação, cada seção pode ter um ícone. As barras de abas e o modelo Grid sempre exibem os ícones; com Swipe ou"
canonical_url: "https://pt.goodbarber.com/tutorials/design/como-personalizar-os-icones-do-seu-menu/"
lang: pt
---

# Como personalizar os ícones do seu menu | Tutoriais - GoodBarber

[Voltar](https://pt.goodbarber.com/tutorials/)

# Como personalizar os ícones do seu menu

## Ícones do menu

No seu menu de navegação, cada seção pode ter um ícone. As barras de abas e o modelo Grid sempre exibem os ícones; com Swipe ou "Little Swipe", ative "Display icons" nas configurações do menu.

Abra a estrutura do app e clique em Menu.

## Trocar um ícone

Em Layout, clique em um link para abri-lo.

Depois, clique em "Edit the icon". O estado selecionado usa o mesmo ícone, a menos que você também o troque.

Em "Personal icons", envie o seu: um PNG branco com fundo transparente, de 260 × 260 pixels, para que ele assuma as cores do app. A opção Image mantém as cores originais.

Ou abra Collections: vários conjuntos e estilos, com busca. Clique em um ícone… e a aba mostra o ícone na hora.

## Cores dos ícones

Para as cores dos ícones, abra Settings.

Em "Tab bar items", escolha uma cor para as abas e outra para a aba selecionada.

Todas as abas mudam de cor.

## Uma aba em destaque

Para destacar uma aba, abra-a em Layout e ative "Modify this link style"… depois, dê ao ícone uma cor própria.

Só esta aba muda.

## Publicar

Para que seus usuários vejam as mudanças, publique a atualização do seu app pelo menu Publish.

## Vídeos semelhantes

[DesignComo configurar seu cabeçalho](/tutorials/design/como-configurar-seu-cabecalho/)

![Como configurar seu cabeçalho](https://portal.ww-cdn.com/portal_static/images/videos1.c14acaebb684.jpg)

[DesignComo configurar o estilo do seu aplicativo](/tutorials/design/como-configurar-o-estilo-global-do-seu-aplicativo/)

![Como configurar o estilo do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos2.7fa910b14581.jpg)

[DesignComo personalizar a tela de lançamento do seu aplicativo](/tutorials/design/como-personalizar-a-tela-de-lancamento-do-seu-aplicativo/)

![Como personalizar a tela de lançamento do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos3.667f4857c54e.jpg)

[DesignComo configurar o menu de navegação do seu aplicativo](/tutorials/design/como-configurar-o-modo-de-navegacao-do-seu-aplicativo/)

![Como configurar o menu de navegação do seu aplicativo](https://portal.ww-cdn.com/portal_static/images/videos4.e9c3404b35cf.jpg)

[DesignComo criar o design das suas seções](/tutorials/design/como-criar-o-design-das-suas-secoes/)

![Como criar o design das suas seções](https://portal.ww-cdn.com/portal_static/images/videos6.a0a8271792bd.jpg)

[DesignComo copiar o design de uma seção](/tutorials/design/como-copiar-o-design-de-uma-secao/)

![Como copiar o design de uma seção](https://portal.ww-cdn.com/portal_static/images/videos7.8952466a8027.jpg)

[DesignComo personalizar o design das categorias de uma seção](/tutorials/design/como-personalizar-o-design-das-categorias-de-uma-secao/)

![Como personalizar o design das categorias de uma seção](https://portal.ww-cdn.com/portal_static/images/videos8.fc945e8b95fd.jpg)

[DesignComo configurar sua página inicial (home) do seu aplicativo movel](/tutorials/design/como-configurar-sua-pagina-inicial/)

![Como configurar sua página inicial (home) do seu aplicativo movel](https://portal.ww-cdn.com/portal_static/images/videos9.49f835842cd5.jpg)

[DesignComo escolher o tamanho do seu cabeçalho ?](/tutorials/design/como-escolher-o-tamanho-do-seu-cabecalho/)

![Como escolher o tamanho do seu cabeçalho ?](https://portal.ww-cdn.com/portal_static/images/videos_design_header.a341dbbe5c74.jpg)