Neste artigo:
Na seção a seguir, você aprenderá como encontrar ícones, adicioná-los ao seu projeto e formatar seu tamanho e estilo. Você também aprenderá como agrupá-los na página e organizá-los de forma rápida e eficaz usando o Painel de Camadas.
Os ícones desempenham um papel essencial em ajudar os usuários a navegar em uma interface. Se você é novo no design, a maneira mais fácil de entender seu papel e propósito únicos é imaginar a sinalização de um aeroporto internacional.
A iconografia do aeroporto precisa ser universal, inclusiva e independente de idioma. Os viajantes precisam conseguir identificar, de relance, onde devem ir para bagagem, informações, alimentação, banheiros, alfândega, chegadas, partidas, táxis, ônibus, entre outros.
Por isso, os ícones não só precisam ser claros e inequívocos, mas também precisam fazer parte da mesma "família" e estilo — para que você saiba imediatamente que está lidando com a sinalização oficial do aeroporto. Eles precisam ter uma linguagem gráfica própria, e é por isso que normalmente são aplicados em grupos de estilo.
A iconografia de aeroportos permite que dezenas de milhares de usuários naveguem simultaneamente pela arquitetura complexa dos aeroportos, minimizando o caos e a confusão, e os levando a seus voos no momento certo.
Da mesma forma, os ícones dentro da sua UI permitem que milhões de usuários naveguem perfeitamente, fornecendo direções simples, rápidas e claras.
Devido à importância e utilidade fundamentais dos ícones, eles têm sua própria aba dedicada.
Para localizar a Biblioteca de Ícones, vá para a Barra Lateral Esquerda e clique na Aba de Ícones. A aba ficará azul e abrirá o Painel de Ícones.
Nossa Biblioteca de Ícones contém vários Kits de Ícones: Material Design, Font Awesome, Bootstrap, Feather, Hawcons, Amazon AWS, Azure Services, Kubernetes, Google Cloud, Cisco, RPG Awesome e Emoji. E muitos desses conjuntos incluem uma variedade de temas; por exemplo, nosso pacote Material Design agora inclui as variações Filled, Outlined, Rounded, Sharp, Two-Tone e Community.
Os ícones podem ser ajustados e estilizados como qualquer outro objeto — mas trabalhar com ícones é diferente em dois aspectos principais:
- Como você Pesquisa ícones
- Como você pode aproveitar o recurso único de Substituição
Abordaremos ambos os tópicos nos artigos subsequentes desta seção.