F3.8 · Fundações

Iconography

Conjunto único, traço fino, grade base 24px, sem emojis. SVG obrigatório. Ícone serve à compreensão — não preenche espaço.

Especificação técnica

Atributo	Valor
Conjunto canônico	Lucide (alternativa: Phosphor regular).
Espessura de traço	1.5px
Grade base	24px
Tamanhos comuns	16, 20, 24, 32px
Junções	Arredondadas (round caps + round joins).
Cor padrão	`currentColor` — herda da fonte.

Regras de uso

<!-- Ícone inline, herda cor -->
<svg width="20" height="20" viewBox="0 0 24 24"
  fill="none" stroke="currentColor"
  stroke-width="1.5" stroke-linecap="round"
  stroke-linejoin="round" aria-hidden="true">
  <path d="M5 12h14M12 5l7 7-7 7" />
</svg>

Faça

Use ícone com label sempre que o significado não for trivial.
Marque ícones decorativos com aria-hidden="true".
Mantenha tamanho proporcional ao texto vizinho (16px com body 14, 20px com body 16).

Não faça

Sem emojis em produto, marketing ou docs internos.
Sem símbolos Unicode soltos como ícone (✓, ★, ♥).
Sem misturar conjuntos (Lucide + Material no mesmo produto).

Acessibilidade

Ícone único acionável (sem label visível) recebe aria-label descritivo.
Ícone com label adjacente recebe aria-hidden="true" — o label fala por ele.
Nunca codifique informação só na cor do ícone — texto sempre acompanha.