Apresentação · Ícones

Ícones

8.113 ícones de três bibliotecas, com busca em português. Só o lucide entra no bundle; o resto é carregado sob demanda.

Bibliotecas incorporadas

Cada provedor cobre um papel diferente — e define a notação do id que a aplicação persiste.

— · ISC

Base de interface do ecossistema: traço consistente, cobertura ampla de ações e objetos, e já presente no bundle de toda aplicação.

Ids:: nome não qualificado (PascalCase)
Exemplo:: AirVent

Font Awesome Free

— · CC-BY-4.0 / MIT

Vocabulário mais conhecido do mercado e o melhor acervo de metáforas “de negócio” (documentos, transporte, saúde, sinais) que o lucide não cobre.

Ids:: prefixos da própria biblioteca: fas- sólido, far- regular, fab- marca, fa- genérico
Exemplo:: fab-algolia

Simple Icons

— · CC0-1.0

Logos oficiais de marcas e produtos, com o hex oficial de cada uma — é o que habilita integrações, provedores de login e listas de tecnologias.

Ids:: prefixo qualificador provider:name
Exemplo:: simple:1password
Extra:: cor oficial de marca via brandColor

IconPicker — catálogo completo

Padrão do componente: sem busca mostra a lista curada de "populares" (prop `popular`, zero rede); ao digitar, consulta os três provedores com chips de filtro. Aceita nome lucide ("trash") ou termo pt-BR ("lixeira", "gráfico", "carrinho"). Re-resolva o valor com <UttaraIcon icon={value} />.

Uso padrão. Sem termo digitado, mostra a lista curada de populares (zero rede); ao buscar, consulta o catálogo completo dos três provedores com chips de filtro por biblioteca.

Valor armazenado

simple:figma

tsx

<IconPicker value={icon} onChange={setIcon} />

// restringindo provedores:
<IconPicker value={icon} onChange={setIcon} providers={["lucide", "simple"]} />

IconPicker — lucide only

Mesmo componente com `remote={false}`: busca client-only nos 1.777 nomes lucide já presentes no bundle, sem nenhuma requisição.

Para telas que só devem oferecer o vocabulário lucide: busca client-only nos 1.777 nomes já presentes no bundle, sem nenhuma requisição.

Valor armazenado

Folder

tsx

<IconPicker value={icon} onChange={setIcon} remote={false} />

Galeria completa

Todos os ícones com nome visível, busca com sinônimos pt-BR, filtro por biblioteca (inclusive "Todas") e por letra inicial, e clique-para-copiar o id. Paginação de 120 por página; corpos SVG baixados por fatia.

Carregando catálogo…

Carregando ícones…