Buscador de Ícones

Sobre a biblioteca Lucide

O Lucide é uma biblioteca open-source com mais de 1300 ícones SVG, nascida como fork do Feather Icons e distribuída sob licença ISC. Cada ícone vem traçado com precisão e já otimizado.

Os ícones desta página carregam sob demanda. No botão de copiar você pega o markup SVG ou só o nome, que dá para usar no React via lucide-react.

Se for levar para o seu projeto, vale instalar pelo npm com npm i lucide.

Lucide: a evolução do Feather Icons

Lucide é um fork comunitário do Feather Icons, o conjunto que Cole Bemis criou em 2013. Quando o Feather parou de receber atualizações por volta de 2020, um grupo de contribuidores assumiu o trabalho, rebatizou o projeto como Lucide e manteve a estética original, levando o catálogo de cerca de 280 ícones para mais de 1.700 hoje. A busca desta página roda em cima do pacote oficial lucide-static, então o que você copia aqui bate com o que está no projeto upstream.

Todo ícone Lucide obedece às mesmas regras: canvas de 24x24 pixels, traço de 2px, cantos e junções arredondados, e currentColor como valor do traço. É justamente essa disciplina compartilhada que faz a diferença. Coloque qualquer ícone no seu layout e ele carrega o mesmo peso de linha, o mesmo equilíbrio óptico e a mesma personalidade do resto do conjunto, sem destoar. O projeto sai sob a licença ISC, permissiva e gratuita para uso pessoal e comercial, e vem com bindings para React, Vue, Svelte, Solid, Preact, Angular, Astro, React Native, Flutter e Web Components puros.

Por que SVG, e não fontes de ícones ou PNGs

SVG (Scalable Vector Graphics) é um formato vetorial baseado em XML e padronizado pelo W3C. PNG e JPG guardam pixels; o SVG guarda instruções geométricas, e por isso continua nítido em qualquer resolução, seja num favicon de 16px ou numa impressão em outdoor. Posto lado a lado com fontes de ícones (Font Awesome 4, Glyphicons e afins), o SVG leva vantagem em vários pontos:

• Multi-cor e gradientes reais com fill, stroke inline ou variáveis CSS.
• Acessibilidade: um SVG aceita role, aria-label e um elemento filho <title>. Fontes de ícones se apoiam em pseudo-elementos que leitores de tela às vezes pulam.
• Sem FOIT/FOUT: o ícone pinta junto com o HTML; não há arquivo de fonte para esperar.
• Animação via CSS: anime stroke-dasharray, transform e o que mais precisar.
• Payloads menores: um ícone Lucide fica em torno de 300-500 bytes não comprimidos, bem abaixo de qualquer subset de fonte.

Como integrar o Lucide no seu projeto

1. Copiar e colar o SVG bruto

O jeito mais rápido: ache o ícone acima, clique para copiar e jogue o markup direto no seu HTML. Não tem bundler nem build. Como ele usa stroke="currentColor", o SVG puxa a cor da propriedade CSS color do elemento pai.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="m12 5 7 7-7 7"/>
</svg>

2. Pacote npm (recomendado para SPAs)

O Lucide publica um pacote por framework. Em React, cada ícone é um componente tree-shakable, então só os ícones que você importa entram no bundle.

npm install lucide-react

import { ArrowRight, Search } from 'lucide-react'

export default function CTA() {
  return <button>Comprar agora <ArrowRight size={18} strokeWidth={2} /></button>
}

3. CDN drop-in (sem build)

<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="camera"></i>
<script>lucide.createIcons();</script>

4. Web Component

Quando você quer algo independente de framework, o Lucide traz um Custom Element que entra em qualquer página HTML ou design system.

<script type="module" src="https://cdn.jsdelivr.net/npm/lucide-web@latest/+esm"></script>
<lucide-icon name="heart" color="crimson" size="32"></lucide-icon>

Comparação com outras bibliotecas

Escolher um conjunto de ícones depende quase sempre da estética e de quantos ícones você ganha. Em resumo:

• Lucide — 1.700+ ícones, um único estilo em outline, strokeWidth ajustável. Padrão sólido para dashboards modernos e UIs baseadas em shadcn/ui, a uns 0,5 KB por ícone gzipped.
• Heroicons — 292 ícones curados à mão em outline (24px), solid (24px) e mini (20px). A equipe Tailwind Labs cuida deles, e o casamento com o Tailwind UI é exato.
• Phosphor — 7.700+ ícones em seis pesos (thin, light, regular, bold, fill, duotone). A maior amplitude da lista, e a escolha quando você quer duotone ou linhas finas.
• Feather — o conjunto original de 287 ícones. Trabalho bonito, mas travou em 2020; comece projetos novos no Lucide.
• Material Symbols — set oficial do Google (3.400+ ícones), baseado em fonte variável (weight, fill, grade, optical size). Encaixa direto no Material 3.

Performance: tree-shaking, lazy loading e sprite sheets

Não faz sentido carregar os 1.700 ícones quando sua página renderiza uma dúzia. Algumas abordagens mantêm o payload enxuto:

• Tree-shaking: importe os ícones um a um (import { Search } from 'lucide-react') e deixe o bundler descartar o resto. Imports ESM são o que faz isso funcionar; barrel exports como import * as Icons acabam com o tree-shaking.
• SVG inline: cole o markup direto no HTML. Nenhuma requisição HTTP extra e controle total via CSS, ao custo de uns bytes a mais no documento.
• Sprite sheets SVG: junte os ícones em um arquivo só com <symbol id="..."> e puxe cada um via <use href="#...">. Cacheado uma vez e reutilizado sempre, o que compensa quando o mesmo ícone aparece dezenas de vezes.
• Lazy loading: empurre para chunks assíncronos os ícones que só aparecem em rotas secundárias. Em React, React.lazy ou dynamic imports dão conta.
• SVGO: rode os ícones pelo SVGO uma vez para tirar metadados, comentários e atributos não usados, o que corta 10-30% do tamanho.

Checklist de acessibilidade

• Ícones decorativos (ao lado de texto visível): adicione aria-hidden="true" e focusable="false", já que o rótulo está no próprio texto.
• Ícones com significado (botões só com ícone): dê a eles role="img" mais aria-label="...", ou aninhe um elemento <title>. De qualquer forma o leitor de tela recebe um nome para ler.
• Contraste: a WCAG 2.2 quer pelo menos 3:1 para componentes de UI não-textuais contra o fundo. Um ícone cinza claro sobre branco costuma falhar, então puxe para #525252 ou mais escuro.
• Área de toque: um ícone interativo precisa de um alvo de pelo menos 24x24 pixels CSS, e no iOS a recomendação é 44x44. Envolva ícones pequenos em botões com padding.
• Não dependa só da cor: reforce ícones de status (sucesso, alerta, erro) com texto ou uma forma que se leia diferente.

Perguntas frequentes

Posso usar os ícones Lucide comercialmente?

Sim. O Lucide usa a licença ISC, que na prática se comporta como a MIT. Você pode usar comercialmente, modificar e redistribuir, desde que o aviso de licença continue nas suas distribuições de código.

Como mudo a cor de um ícone?

Os ícones Lucide carregam stroke="currentColor", então assumem a propriedade CSS color do que estiver ao redor. Ponha color: #ef4444 no botão e o ícone fica vermelho sozinho.

Posso pedir um ícone novo?

Sim. O repositório do Lucide no GitHub aceita issues e pull requests. O que você enviar tem que seguir as regras de design (grid 24x24, traço de 2px, cantos arredondados), e a documentação traz um guia de contribuição que detalha isso.

Lucide é melhor que Heroicons?

Nenhum vence de forma absoluta; eles atendem a necessidades diferentes. Heroicons (292 ícones) se sai melhor em projetos focados em Tailwind que querem acabamento acima de quantidade. Lucide (1.700+) é a escolha quando você precisa de amplitude e de ajustar o traço. A diferença de bundle size entre os dois mal aparece.

Por que meu ícone fica borrado?

Os ícones Lucide são desenhados para tamanhos múltiplos de 24px. Renderize um a 17px ou 23px e o traço pode cair em fronteiras de meio-pixel. Alinhe para 16/24/32/48, ou defina shape-rendering="geometricPrecision" para suavizar o antialiasing.