Ícones

Lucide, com tamanho pelo contexto e cor vinda do texto.

Regras

Ícone é sempre do Lucide. Ícone que o Lucide não tem é proposto para a lib, no mesmo traço.

size-4 · 16px
Botão, item de menu, campo pequeno
size-4.5 · 18px
Botão só de ícone, campo, cabeçalho
size-6 · 24px
Estado vazio, destaque
  • A cor vem do texto em volta (currentColor) ou de um token de ícone: text-icon, text-icon-subtle, text-icon-strong, text-icon-brand.
  • Traço padrão do Lucide (2). No menu lateral, 1,8, que o próprio item já aplica.
  • Ícone sozinho, sem texto ao lado, precisa de nome acessível: use IconButton, que exige o rótulo.
  • Bandeira de pagamento não é ícone: é arte de marca e vem dos tokens (veja Marca e pagamento).
import { Trash2 } from "lucide-react";

// Dentro de um componente da lib, o tamanho e a cor já vêm certos:
<Button tone="danger" icon={<Trash2 />}>Excluir</Button>

// Solto na tela, use a escala e deixe a cor vir do texto:
<Trash2 className="size-4 text-icon" aria-hidden />

Galeria do Lucide

1688 ícones. Clique para copiar o import.

Mostrando 240 de 1688. Digite para encontrar os outros.