Icons

Pulso usa Lucide React para ícones funcionais e um pequeno vocabulário de glyphs para risco e origem de IA. Ícone complementa texto; nunca substitui estado, consequência ou rótulo.

Biblioteca


import { AlertTriangle, CheckCircle, Info, Shield } from "lucide-react";
 
<AlertTriangle className="size-4" style={{ color: "var(--risk-attention-text)" }} />
<CheckCircle className="size-4" style={{ color: "var(--risk-stable-text)" }} />
<Info className="size-4 text-muted-foreground" />
<Shield className="size-4 text-primary" />

Tamanhos

Classe	Uso
`size-3` / 12px	Inline com metadado
`size-4` / 16px	Default em texto e controles
`size-5` / 20px	Botões com ícone
`size-6` / 24px	Empty states pequenos
`size-8` / 32px	Destaque ou placeholder
`size-10` / 40px	Empty state grande
`size-12` / 48px	Ilustração simples

Risk glyphs v3

Glyph	Nível	Uso
`●`	`critical`	Ação imediata
`◆`	`high`	Escalada provável
`◐`	`attention`	Atenção necessária
`○`	`monitor`	Monitoramento
`■`	`stable`	Estado estável

Os glyphs são uma signature shape. Combine com label textual: ◐ attention, não apenas ◐.

Origem de IA

Para conteúdo da Cris, use monograma/glyph + kicker + borda de origem:


<p className="font-mono text-xs uppercase tracking-[var(--tracking-kicker)]">
  ◐ Escrito com Cris
</p>

Diretrizes

Ícones decorativos usam aria-hidden="true".
Ícones funcionais exigem nome acessível.
Não use cor como único indicador.
Mesmo ícone deve representar a mesma ação em todo o produto.
Evite ícones ambíguos em decisões críticas; prefira texto direto.