Ícones

Regras de uso

• Stroke único 1.5px em todo ícone. O token --icon-stroke vale para todos os glifos da mesma tela. Nenhum ícone usa espessura diferente de outro na mesma superfície — é a consistência de stroke que faz a grade de ícones ler como sistema, não como coleção.
• viewBox="0 0 24 24" fixo — sempre. Todos os ícones vivem no mesmo grid 24×24. O tamanho renderizado varia via width / height (16, 24 ou 32px), nunca pela escala do viewBox.
• currentColor no stroke — herança de cor por contexto. O ícone não declara cor própria. Herda do container: --color-ink-primary em contexto padrão, --color-functional-success em estado de sucesso, e assim por diante. Isso elimina tokens de cor redundantes e garante que ícone e texto do mesmo container sempre rimem.
• Zero preenchimento ilustrativo. Exceção: estado ativo com fill="currentColor". Ícone de estado — coração cheio versus contornado, favorito marcado versus desmarcado — pode usar fill="currentColor" para sinalizar a mudança. O stroke permanece único e o fill é sempre currentColor, nunca cor literal. Gradiente interno não tem exceção.
• Zero gradiente interno. Gradiente em ícone é violação dupla: dispara anti-patterns.md §4 (ícone ilustrativo) e anti-patterns.md §2 (gradiente colorido em chrome de UI). O ícone é sinal funcional — gradiente transforma sinal em ornamento.
• aria-hidden="true" + focusable="false" quando decorativo; role="img" + aria-label quando carrega significado. Ícone ao lado de label de texto é decorativo: use aria-hidden="true". Ícone sozinho como único indicador de ação ou estado precisa de role="img" + aria-label descrevendo o que comunica. Regra simples: se retirar o ícone o usuário perde informação, ele precisa de rótulo.