Icon

Icon renderiza um glifo Lucide sem dependência de rede. Escolha um name verificado do registro para símbolos comuns; passe icon apenas quando o glifo estiver ausente e decida se ele é decorativo ou conteúdo significativo.

Exemplos

Registro curado

Os nomes do registro usam kebab-case e são finitos de propósito, para manter ícones comuns tree-shakable. Um name desconhecido não renderiza nada e avisa em desenvolvimento, em vez de adivinhar um símbolo.

Tamanho e rótulo acessível

Use 16px inline e 24px para ênfase. Sem title, Icon é decorativo; dê título apenas quando o glifo carrega informação ausente no texto próximo.

Quando usar

Use Icon para reforçar um rótulo próximo ou fornecer o conteúdo visual de um IconButton. Para um glifo fora do registro, a prop icon aceita um componente Lucide e vence name.

Prefira outro componente quando:

O controle não tem texto visível — use IconButton e dê a seu label obrigatório um nome claro de ação.
O símbolo precisa ser uma logo ou marca de produto — use o ativo de marca aprovado.
Um status precisa de palavras e também de cor — use Badge ou um rótulo de texto explícito.

Acessibilidade

Sem title, Icon emite aria-hidden="true"; use isso em glifos decorativos ao lado de texto visível.
Com title, ele emite role="img" e aria-label com esse título exato. Mantenha-o conciso e evite repetir texto adjacente como “Buscar” perto de um ícone de busca.
Um Icon dentro de IconButton normalmente é decorativo. O label do botão, não o título do glifo, fornece o nome acessível do controle.
Um Icon isolado não é interativo nem recebe foco. Coloque-o em link ou botão semântico quando disparar algo.

API e código

Nome	Tipo	Obrigatória	Descrição
`name`	`IconName`	—	Curated registry key in kebab-case, e.g. `"arrow-right"`, `"search"`, `"layout-dashboard"`.
`icon`	`LucideIcon`	—	Escape hatch (D-03): a lucide-react component. Wins over `name` when both are given.
`size`	`number`	—	Side length in px. Default `20` (16 inline, 24 for emphasis).
`color`	`string`	—	CSS color. Defaults to `currentColor` (lucide's native default — D-06).
`title`	`string`	—	Accessible label. With it the icon is `role="img"`; without it the icon is decorative.
`className`	`string`	—
`style`	`CSSProperties`	—

Icon renderiza um SVG. O componente React também emite .lyra-icon como hook de seleção, mas não há regra de stylesheet para ela; por isso o HTML puro não precisa de classe Lyra:

html

<svg
  aria-hidden="true"
  width="20"
  height="20"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
>
  <path d="m9 18 6-6-6-6" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
</svg>

<svg role="img" aria-label="Projeto em destaque" width="24" height="24" viewBox="0 0 24 24"></svg>

<lyra:icon> Gerado do lyra-ds/blade v0.10.0.

Prop	Padrão	Obrigatória	Valores de exemplo
`name`	`null`	—	`check`
`size`	`20`	—	—
`color`	`null`	—	—
`title`	`null`	—	—

blade

<lyra:icon name="check" :size="20" title="Done" />