Melhores bibliotecas de ícones grátis: Lucide vs Heroicons vs Phosphor vs Tabler | We.Inc
13 bibliotecas de ícones SVG grátis lado a lado: os mesmos ícones em cada uma, licenças reais conferidas em cada pacote, contagem de ícones, estilos, pacotes React e Vue e como usá-los de forma acessível.
Bibliotecas de ícones SVG grátis comparadas
Lucide, Heroicons, Phosphor e Tabler são os conjuntos de ícones grátis mais práticos para sites: todos têm licenças permissivas (ISC ou MIT), e todos oferecem pacotes React que incluem só os ícones que você importa. O Tabler tem mais ícones, o Phosphor tem mais pesos e o Heroicons é o conjunto menor e mais enxuto.
Escolha rápida
Se você quer
Experimente
Um conjunto de contorno grande e consistente
Lucide ou Tabler
Vários pesos do mesmo ícone
Phosphor
Um conjunto pequeno que combina com o Tailwind UI
Heroicons
Logos de marcas
Simple Icons (confira as regras de marca registrada)
O visual do Google, peso variável
Material Symbols
Os mesmos oito ícones do dia a dia desenhados por seis bibliotecas, para você comparar o estilo diretamente, e depois uma tabela completa de treze bibliotecas com licenças lidas do arquivo LICENSE de cada pacote, contagens de ícones a partir dos arquivos publicados e os pacotes para instalar.
Compare a grade. Cada linha é uma biblioteca desenhando as mesmas oito ideias: início, busca, usuário, configurações, coração, excluir, e-mail e notificações.
Confira a coluna de licença antes de escolher. A maioria é MIT ou ISC, mas o Remix Icon agora tem licença própria e o Font Awesome Free exige atribuição.
Instale o pacote do seu framework pela coluna React ou Vue, ou copie arquivos SVG individuais para o seu projeto.
Siga as notas de acessibilidade abaixo para que ícones decorativos fiquem em silêncio para leitores de tela e os que têm significado recebam um rótulo.
Escolha uma biblioteca e fique com ela. Misturar conjuntos com espessuras de traço e estilos de canto diferentes deixa a interface com cara de inacabada.
Importe os ícones um a um (import { Search } from 'lucide-react') em vez de importar a biblioteca inteira, para que seu bundle carregue só o que você usa.
Defina a cor do ícone com currentColor para que os ícones sigam a cor do texto de botões e links, inclusive no hover e no modo escuro.
Dê aos botões só com ícone um nome acessível com aria-label no botão, e esconda o próprio svg com aria-hidden="true".
Confira a licença de novo quando atualizar. O Remix Icon passou do Apache 2.0 para uma licença própria na versão 4.9.0, lançada em janeiro de 2026.
Perguntas frequentes
Posso usar esses ícones em projetos comerciais?
Sim, nas treze bibliotecas listadas, dentro das suas licenças. MIT, ISC e Apache 2.0 permitem uso comercial se você mantiver o aviso de licença junto com as cópias. O Font Awesome Free exige atribuição, que os arquivos dele já contêm. O Remix Icon permite o uso em produtos, mas proíbe vender os ícones como pacote ou usá-los como logo.
O Lucide é o mesmo que o Feather?
O Lucide começou como um fork comunitário do Feather quando as atualizações do Feather diminuíram. Ele mantém o visual do Feather, tem muito mais ícones e é mantido ativamente. Os ícones que vieram do Feather continuam sob a licença MIT do Feather; o resto do Lucide é ISC.
Heroicons ou Lucide?
O Heroicons é um conjunto menor dos criadores do Tailwind CSS, com versões sólidas e pequenas que combinam, o que se encaixa em interfaces feitas com Tailwind. O Lucide tem várias vezes mais ícones, então é menos provável que faltem. Os dois têm licenças permissivas e pacotes React.
Devo usar uma fonte de ícones ou SVG?
SVG, na maioria dos casos. SVG inline ou um pacote de componentes renderiza com nitidez, pode ser estilizado por path, entrega só os ícones que você usa e funciona com leitores de tela. Fontes de ícones podem carregar uma fonte inteira por causa de poucos ícones e falhar sem aviso se a fonte for bloqueada.
Como deixo os ícones acessíveis?
Decida se o ícone carrega significado. Ícones decorativos ao lado de texto recebem aria-hidden="true". Um ícone que é o único conteúdo de um botão ou link precisa de uma alternativa em texto, geralmente aria-label no botão ou um texto visualmente oculto dentro dele.
Três formas de colocar um ícone na página
Pacotes de componentes como lucide-react ou @heroicons/react são os mais fáceis em um projeto React ou Vue. Cada ícone é um componente, você importa só os que usa, e as props definem tamanho, cor e espessura do traço.
SVG inline significa colar a marcação svg diretamente no seu HTML. Não precisa de pacote nem de requisição, e o CSS pode estilizar cada parte, mas a marcação se repete em todo lugar onde o ícone aparece.
Um sprite SVG coloca todos os ícones em um arquivo como elementos symbol, e cada uso aponta para um deles com <use href="/icons.svg#search">. O navegador guarda o arquivo em cache uma vez, o que combina com sites com muitos ícones em páginas HTML simples.
Como conferimos as licenças
Cada licença da tabela vem do arquivo LICENSE dentro da versão do pacote listada, não dos metadados do pacote. Isso importa: a página do Remix Icon no npm ainda diz Apache 2.0, enquanto o arquivo LICENSE da versão 4.9.1 é a nova Remix Icon License v1.0. As contagens de ícones são o número de arquivos SVG que o pacote traz na pasta indicada.
Licenças podem mudar entre versões. Antes de publicar, abra o arquivo LICENSE da versão que você instalar.
Bibliotecas de ícones grátis comparadas (versões e contagens conforme publicadas no npm, conferidas em 13 de outubro de 2026)
Biblioteca
Licença
Ícones
Estilos
React
Vue
Lucide 1.55.0
ISC
Contorno (espessura do traço ajustável)
Heroicons 2.2.0
MIT
324 (cada um em 4 estilos)
Outline 24, solid 24, mini 20, micro 16
@heroicons/react
@heroicons/vue
Phosphor 2.1.1 (core)
MIT
1,512 (cada um em 6 pesos)
Thin, light, regular, bold, fill, duotone
@phosphor-icons/react
@phosphor-icons/vue
Tabler Icons 3.49.0
MIT
5,184 de contorno, 1,054 preenchidos
Contorno (traço ajustável), preenchido
@tabler/icons-react
@tabler/icons-vue
Bootstrap Icons 1.13.2
MIT
2,078 arquivos (muitos têm um gêmeo -fill)
Variantes de contorno e preenchida
react-bootstrap-icons (comunidade)
Nenhum oficial; use SVG ou a fonte de ícones
Material Symbols 0.48.0 (@material-symbols/svg-400)
Apache 2.0
3,929 símbolos
Outlined, rounded, sharp; eixos de preenchimento, peso e grade
Use a fonte do Google Fonts ou os pacotes SVG
Use a fonte do Google Fonts ou os pacotes SVG
Remix Icon 4.9.1
Remix Icon License v1.0
1,539 (line e fill)
Line, fill
@remixicon/react
@remixicon/vue
Font Awesome Free 7.3.1
CC BY 4.0 (ícones), SIL OFL 1.1 (fontes), MIT (código)
2,001 solid, 273 regular, 609 de marcas
Solid, regular (parcial), marcas
@fortawesome/react-fontawesome
@fortawesome/vue-fontawesome
Ionicons 8.1.0
MIT
1,357 arquivos
Filled, outline, sharp
Web component (ion-icon)
Web component (ion-icon)
Iconoir 7.12.1
MIT
1,383 regular, 288 solid
Regular (traço), solid
@iconoir/vue
Radix Icons 1.3.2
MIT
Um estilo, desenhado em uma grade de 15 × 15
@radix-ui/react-icons
Nenhum oficial
Feather 4.29.2
MIT
Contorno
react-feather (comunidade)
vue-feather-icons (comunidade)
Simple Icons 16.35.0
CC0 1.0 (os arquivos SVG)
3,466 logos de marcas
Marcas de uma só cor
@icons-pack/react-simple-icons (comunidade)
Use SVG
ISC
Os ícones vindos do Feather também estão sob MIT. Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
Apache 2.0
Inclua o texto da licença com as cópias e indique qualquer alteração que você fizer.
Remix Icon License v1.0
Grátis em produtos comerciais, mas você não pode vender os ícones como pacote de ícones, criar um conjunto concorrente a partir deles nem usar um como logo. As versões até 4.8.0 eram Apache 2.0; a nova licença começa na 4.9.0.
CC BY 4.0 (ícones), SIL OFL 1.1 (fontes), MIT (código)
A atribuição é obrigatória; os comentários que já vêm dentro dos arquivos baixados contam como atribuição, então não os remova. Os ícones Pro são pagos.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias.
MIT
Mantenha o aviso de copyright junto com as cópias. Raramente atualizado; o Lucide nasceu dele.
CC0 1.0 (os arquivos SVG)
Os arquivos são de domínio público, mas os logos são marcas registradas das suas empresas. Siga as diretrizes de cada marca.
Início
Busca
Usuário
Configurações
Favorito
Excluir
E-mail
Notificações
Os mesmos oito ícones, seis bibliotecas
Fundo escuro
Oito ícones comuns como cada biblioteca os desenha
Biblioteca
Ícone {concept} do {library}
Os ícones são arquivos SVG sem modificação de cada pacote, na versão da tabela abaixo (só os nomes dos arquivos foram trocados), exibidos sob suas próprias licenças.
Textos das licenças:
Bibliotecas comparadas
Notas sobre licenças
Como usar ícones de forma acessível
Nos três casos, o svg fica oculto para leitores de tela e o botão carrega o nome. Se um ícone aparece ao lado de um texto visível, esconda o ícone e deixe o texto falar.