Pular para o conteúdo

Uma biblioteca só, com a mesma linha da borda de card.

Cada biblioteca de ícones tem uma voz visual própria, definida por raio de canto, espessura e nível de detalhe; misturar duas produz aquela sensação de "ícones baixados de lugares diferentes da internet", mesmo quando cada um é bem desenhado isoladamente.

A escolha
Biblioteca principalFeather Icons
Estiloline, traço uniforme
Espessura1.5px
LicençaMIT · uso comercial livre

Line minimalista é a família que mais se aproxima da superfície chapada da marca: sem sombra, sem gradiente, sem forma orgânica. Baixe a biblioteca completa com os 287 ícones padronizados em 1.5px.

Baixar 287 Ícones (.zip)
Por que 1.5px

É a mesma espessura da borda de card e de campo do sistema.

1.5px · harmonia
2.5px · pesado

Com isso, ícone e componente compartilham uma única linha visual. Um ícone de traço 2px ao lado de uma borda de 1,5px cria um desencontro que ninguém nomeia mas todo mundo percebe como "algo está pesado demais aqui".

Dois tamanhos, dois papéis
24px · inline
48px · estado vazio

24px em botão, campo e navegação. 48px só em estado vazio; bloco de benefício é foto ou texto. Não use um terceiro tamanho: se o ícone parece pequeno demais a 24px, o problema é o espaço em volta.

Todos os ícones, com o ajuste na hora.

As duas bibliotecas oficiais num lugar só: Sistema, para site, app e Central, e Peças, para posts, anúncios e impressos. Mude tamanho, traço, cor e fundo e veja o resultado em todos os ícones. Os controles só vão até onde a marca permite, e o aviso diz quando a combinação sai da regra. Clique num ícone para selecionar; em Detalhes, baixe o SVG ou o PNG, ou copie o código.

Vinte ícones cobrem o produto inteiro.

Este é o conjunto funcional de uma locadora: buscar, escolher data e local, pagar, confirmar, pedir ajuda. Se uma tela nova precisar de um ícone que não está aqui, pegue na mesma biblioteca, nunca de outra.

search
calendar
map-pin
clock
user
credit-card
check
alert-circle
help-circle
phone
message-circle
shield
chevron-right
chevron-down
arrow-right
x
menu
package
download
star

Contorno para inativo, preenchido só para marcar estado.

Contorno vs. preenchido
inativo
ativo

O item ativo muda de forma e de cor. Dois sinais em vez de um: se a única pista fosse a cor, quem tem dificuldade de percebê-la perderia o estado por completo. Isso vale sobretudo na tab bar do app.

A exceção da marca

O ícone de perfil é o único ícone que não vem da biblioteca: é a asa branca sobre vermelho cheio, a 66% de largura. É ele que garante reconhecimento no círculo de 40px da busca do Google, e é um dos dois únicos lugares onde a asa aparece sem o wordmark.

Nunca
Misturar bibliotecas na UI funcionalquebra a voz visual
Ícone colorido de marca fora do perfilestoura o teto de vermelho
Ícone sozinho como único rótulo de açãoprecisa de texto ou aria-label
Escalar a arte de 24px para 48pxtraço fica desproporcional

Um ícone puramente decorativo leva aria-hidden="true". Um ícone que é a própria ação (o X de fechar, por exemplo) precisa de rótulo acessível, mesmo sem texto visível.

Ícone não substitui foto
card de veículo · especificação em uma linha
  • 5 lugares
  • 2 malas
  • manual
Bloco de benefíciofoto real (.asa-figure) ou texto
Especificação no card de veículouma linha de texto · .asa-speclist--text
Ícone por atributosó na página do carro
Trio ícone + título + textonunca
Ícone de 48pxsó estado vazio (.asa-emptystate)
Foto que ainda não existehachura .asa-photo + legenda dizendo qual falta

Foto é conteúdo e ícone é sinal de função; nenhum dos dois é decoração. Seis cards de vitrine com três ícones cada são dezoito ícones repetidos numa tela, sem dizer nada que uma linha de texto não diga. Onde cabia um ícone grande "para ilustrar", cabe uma foto do saguão ou nada. Ver 06 · Componentes.

Como declarar
<svg class="asa-icon" viewBox="0 0 24 24" aria-hidden="true"> <circle cx="11" cy="11" r="8"/> <line x1="21" y1="21" x2="16.65" y2="16.65"/> </svg> /* .asa-icon já resolve preenchimento, traço e cor: fill: none · stroke: currentColor · stroke-width: 1.5 O ícone herda a cor do texto ao redor: nunca fixe cor no SVG. */
Anterior← 04 · Tipografia Próxima seção06 · Componentes →