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 · destaque

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

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 barra de navegação do aplicativo.

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 de ícones na mesma peçaquebra a voz visual
Ícone colorido de marca fora do perfilestoura o teto de vermelho
Ícone sozinho como único rótulo de uma açãoprecisa vir sempre com texto
Escalar a arte de 24px para 48pxtraço fica desproporcional

Um ícone puramente decorativo não precisa de descrição. Já um ícone que representa uma ação sozinho (o X de fechar, por exemplo) precisa vir acompanhado de uma palavra ou legenda que qualquer pessoa entenda, mesmo sem enxergar bem os detalhes do desenho.

A regra do traço

Todo ícone da biblioteca é desenhado só com contorno, e só é preenchido para marcar um estado ativo (ver acima). O traço tem sempre a mesma espessura, e a cor do ícone acompanha a cor do texto ao redor: nunca use uma cor fixa e isolada só para o ícone.

Anterior← 04 · Tipografia Próxima seção06 · Componentes →