Buscador de ícones SVG

Como usar: Buscador de Ícones SVG

Digite o que você precisa — casa, seta para direita, carrinho de compras — e escolha um conjunto, ou pesquise em todos.
Clique em um ícone para abri-lo. Defina o tamanho, mantenha o currentColor para que ele siga a cor do seu texto ou escolha uma cor personalizada; ajuste o traço para ícones de contorno.
Copie como SVG, JSX para React, data URI, máscara CSS ou cole direto no Webflow — ou baixe em SVG ou PNG.
Clique em ☆ Salvar para guardar os ícones que você usa com frequência; eles aparecerão em ★ Salvos na próxima vez.

Ícones grátis que você realmente pode usar

Todos os ícones daqui vêm de conjuntos open source com licença permissiva, então você pode usá-los em sites e aplicativos pessoais e comerciais. A licença e o autor aparecem em cada ícone:

Conjunto	Licença	Estilo
Lucide	ISC	Contorno, grade de 24 px
Tabler Icons	MIT	Contorno e preenchido
Heroicons	MIT	Contorno, sólido, mini
Phosphor	MIT	Seis pesos
Bootstrap Icons	MIT	Preenchido e contorno
Feather, Iconoir	MIT	Contorno
Fluent UI System Icons	MIT	Estilo Microsoft
Material Symbols, Material Design Icons, Carbon	Apache 2.0	Estilos Google, Pictogrammers e IBM

As licenças MIT, ISC e Apache 2.0 exigem que você mantenha o aviso de direitos autorais e de licença ao redistribuir os próprios arquivos de ícone (por exemplo, em um pacote de ícones). Usar os ícones dentro de um site ou aplicativo é o caso mais comum para o qual essas licenças foram escritas.

Por que o currentColor importa

Um ícone cujo fill ou stroke é currentColor assume a cor CSS color do elemento pai. Assim, o mesmo SVG fica branco em um botão escuro, azul em um link e cinza quando desabilitado, sem editar o arquivo. Use currentColor para ícones em textos e botões da interface; escolha uma cor fixa para ilustrações e favicons.

Qual formato copiar

SVG — cole direto no HTML, em um Embed do Webflow ou em um arquivo .svg.
JSX — atributos prontos para React (strokeWidth, className) para usar em um componente.
Data URI — para <img src> ou um background-image em CSS, sem arquivo separado.
Máscara CSS — um ícone que herda o currentColor do CSS, útil em pseudo-elementos.
Copiar para Webflow — cola um Code Embed com o SVG no Designer do Webflow.

Otimize seus próprios SVGs com o Otimizador de SVG ou transforme um deles em favicon com o Gerador de Favicon.

Ícones populares

Coleções gratuitas de ícones SVG para os símbolos de interface mais comuns:

Perguntas frequentes

Esses ícones são grátis para uso comercial?

Sim. Todos os conjuntos listados são open source sob as licenças MIT, ISC ou Apache 2.0, que permitem uso comercial. Mantenha o aviso de licença se você redistribuir os próprios arquivos de ícone.

Preciso creditar o autor do ícone?

Não dentro de um site ou aplicativo, segundo essas licenças. Se você distribuir os ícones como arquivos — por exemplo, em um template ou pacote de ícones — inclua a licença do conjunto.

O que o currentColor faz?

Ele faz o ícone usar a cor do texto do elemento em que está, então um único SVG se adapta a botões, links e modo escuro por meio do CSS.

Posso mudar a espessura do traço?

Sim, para ícones de contorno como Lucide, Tabler, Feather e Iconoir. Ícones preenchidos não têm traço para alterar.

Minha pesquisa é privada?

As palavras pesquisadas são enviadas para a API pública do Iconify, que hospeda os conjuntos de ícones. Nada mais sai do seu navegador, e não é preciso criar conta.

Posso instalar o Buscador de Ícones SVG como um aplicativo da web e usá-lo offline?

Sim. O Buscador de Ícones SVG é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.