Identidade
Iconografia
Todo ícone de interface e toda marca gráfica direcional.
Seta
"Ver mais", seta de CTA, marcador
Linha de setas
Avanço, divisória, carregamento de marca
Colchetes
Software sob medida, contexto de código
Clique para baixar o SVG. Ícones de função (busca, menu, fechar) são Lucide, nunca a seta.
Especificação
Duas famílias, cada uma com seu papel:
| Família | Uso |
|---|---|
| Lucide | Ícones de função: busca, configurações, upload, calendário, status, menu |
| Setas da marca | O que é direcional ou de marca: "ver mais", seta de CTA, badge de avanço, divisória de seção |
Lucide: tamanhos 16px (item de menu, tabela, dentro de texto), 20px (header e botão), 24px (destaque). Traço de 1,75px. Cor sempre herdada do texto ao lado.
Setas, três famílias em seis cores (azul_claro, azul_escuro, cinza, cinza_claro, marfim, preto):
| Arquivo | Forma | Uso |
|---|---|---|
| seta_ |
Uma seta | Marcador, "ver mais", seta de botão |
| seta_linha_ |
Quatro setas em linha | Badge de avanço, divisória, carregamento de marca |
| seta_colchetes_ |
Par de colchetes < > | Desenvolvimento sob medida, contexto de código |
Comportamento
- Botão só com ícone tem rótulo para leitor de tela e tooltip.
- A seta pode fazer uma única animação: deslizar devagar para a direita, em badge de destaque ou indicador de status. Não em toda página.
Faça
- Ícone ao lado de texto alinhado pela linha de base, com 8px de distância.
- Seta da marca no lugar de setas genéricas de ícone quando o sentido é "avançar" em material de marca.
Não faça
- Misturar bibliotecas de ícone na mesma tela.
- Redesenhar a seta: use sempre o SVG oficial.
- Emoji, em qualquer lugar. Nem » como seta; use o SVG.