# Como alterar os ícones da interface do usuário do Home Assistant!

**URL:** <https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717>\
**Category:** Lovelace\
**Created:** [2 Novembro , 2020 23:05 UTC](https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717 "2020-11-02T23:05:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeandroIssa](https://forum.cpha.pt/user_avatar/forum.cpha.pt/leandroissa/32/11213_2.png) [@LeandroIssa](https://forum.cpha.pt/u/LeandroIssa)\
**Post date:** [2 Novembro , 2020 23:05 UTC](https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717/1 "2020-11-02T23:05:39Z")

</div>

Acredito que muitos querem personalizar os ícones dos dispositivos da interface do usuário, então vamos lá!

Existe uma forma que é nas configurações do dispositivo!

Clicando no dispositivo e clicando na engrenagem para entrar nas configurações!

 ![1](https://forum.cpha.pt/uploads/default/original/2X/1/13c29989de36e8b27624ee6995a81cb3454ac29f.jpeg)

Temos a opção para sobrescrever ícone!

 ![2](https://forum.cpha.pt/uploads/default/original/2X/c/c1651a078c9ab0fcd663657d340243f970cfec1d.jpeg)

Então é só colocar o ícone seguindo o modelo!

> mdi:lightbulb

Para sabermos qual o nome do ícone correto existe um site com o catálogo de todos os ícones!

> **[@mdi/font CDN by jsDelivr - A free, fast, and reliable Open Source CDN](https://cdn.jsdelivr.net/npm/@mdi/font@5.4.55/)**
>
> @mdi/font CDN by jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub

 ![3](https://forum.cpha.pt/uploads/default/original/2X/7/7ec89b012b06f0be8b07987296b26e67b446683c.png)

Colocando o nome certinho o ícone irá aparecer!

Mas existem alguns dispositivos que não aparece a opção para troca do ícone, como esse aqui:

![4](https://forum.cpha.pt/uploads/default/original/2X/7/71bf455b5bb8c3c2923562b56777949cb9ba4fee.jpeg)

 ![5](https://forum.cpha.pt/uploads/default/original/2X/b/bdf0a9c54cb48a7dc57c22ed06002c5532114050.jpeg)

Como iremos trocar o ícone?

Então, vamos lá!

Primeiro precisamos habilitar o Modo Avançado! Clique no seu perfil no canto esquerdo e habilite o Modo Avançado!

 ![6](https://forum.cpha.pt/uploads/default/original/2X/b/be14b9e44ec9f4037990874f5a5b48769a98328e.jpeg)

Com ele habilitado, em Configurações irá aparecer as opções de Customizações! Nessa opções podemos trocar nomes de entidades, ícones e outras opções!

 ![7](https://forum.cpha.pt/uploads/default/original/2X/9/9b25ae1a0a9965f838f7c54cb9919aad017decc7.jpeg)

Em Entidade vamos achar o dispositivo que queremos trocar o ícone. Com ele selecionado vamos clicar em Escolha um atributo para sobrescrever.

 ![8](https://forum.cpha.pt/uploads/default/original/2X/2/2cbb85c83a76025443f9b5d25990257775da2d8b.jpeg)

Escolha a opção Icon.

 ![9](https://forum.cpha.pt/uploads/default/original/2X/1/1500aab1b8d153d71884ce2e137d7333ec8b99a2.jpeg)

Em Icon vamos escrever o nome do ícone que queremos!

 ![10](https://forum.cpha.pt/uploads/default/original/2X/6/6e74f2143281a1e7f408c03d1cdf996e26ef5590.jpeg)

No meu caso quero o ícone da lampada, então escrevi mdi:lightbulb e clicar em Save.

 ![11](https://forum.cpha.pt/uploads/default/original/2X/5/574033feff4721dfcfee234b65dbee75a894d198.jpeg)

Pronto! Agora o ícone da luz mudou!

![12](https://forum.cpha.pt/uploads/default/original/2X/8/81fa6c8f4ec79a318d860b7fa20248272a211991.jpeg)

Espero ter ajudado, um abraço!

---

<div class="post-metadata">

**Author:** ![carlos\_elmano](https://forum.cpha.pt/letter_avatar_proxy/v4/letter/c/d2c977/32.png) [@carlos\_elmano](https://forum.cpha.pt/u/carlos_elmano)\
**Post date:** [6 Novembro , 2020 00:31 UTC](https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717/2 "2020-11-06T00:31:50Z")

</div>

Olá. Obrigado pelas dicas mas como posso adicionar um ícone a cada estado? Tipo o sensor de porta ter um ícone para quando estiver aberto e um outro para quando estiver fechado.É possivel  
Obrigado.

---

<div class="post-metadata">

**Author:** ![LeandroIssa](https://forum.cpha.pt/user_avatar/forum.cpha.pt/leandroissa/32/11213_2.png) [@LeandroIssa](https://forum.cpha.pt/u/LeandroIssa)\
**Post date:** [6 Novembro , 2020 01:23 UTC](https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717/3 "2020-11-06T01:23:38Z")

</div>

Olá, provavelmente existe um jeito de ser feito mas eu não tenho ideia, as vezes alguém pode ajudar e compartilhar conosco!

---

<div class="post-metadata">

**Author:** ![Encarnacao](https://forum.cpha.pt/user_avatar/forum.cpha.pt/encarnacao/32/2031_2.png) [@Encarnacao](https://forum.cpha.pt/u/Encarnacao)\
**Post date:** [6 Novembro , 2020 15:37 UTC](https://forum.cpha.pt/t/como-alterar-os-icones-da-interface-do-usuario-do-home-assistant/5717/4 "2020-11-06T15:37:04Z")

</div>

podes por exemplo usar o `card mod`  
[https://github.com/thomasloven/lovelace-card-mod](https://github.com/thomasloven/lovelace-card-mod)

```auto
  - entity: light.sala
    name: Sala
    style: |
      :host {
        --paper-item-icon-color: green;
        --paper-item-icon-active-color: red;
        }  

```