Como usar: Localizador de ícones SVG
- Digite o que você precisa — casa, seta para a direita, carrinho de compras — e escolha um conjunto ou pesquise todos eles.
- Clique em um ícone para abri-lo. Defina o tamanho, mantenha a cor atual (currentColor) para que ela acompanhe a cor do seu texto ou escolha uma cor personalizada; ajuste o traço para ícones com contorno.
- Copie como SVG, JSX para React, um URI de dados, uma máscara CSS ou cole no Webflow — ou baixe como SVG ou PNG.
- Clique em ☆ Salvar para guardar os ícones que você usa com frequência; eles vão aparecer na seção ★ Salvos da próxima vez.
Ícones gratuitos que você pode usar de verdade
Todos os ícones aqui vêm de um conjunto de código aberto com uma licença flexível, então você pode usá-los em sites e aplicativos pessoais e comerciais. A licença e o autor aparecem junto com cada ícone:
| Conjunto | Licença | Estilo |
|---|---|---|
| Lucide | ISC | Contorno, grade de 24 px |
| Ícones Tabler | MIT | Contorno e preenchidos |
| Heroicons | MIT | Contorno, preenchido, mini |
| Fósforo | MIT | Seis espessuras |
| Ícones Bootstrap | MIT | Preenchidos e contornos |
| Feather, Iconoir | MIT | Contorno |
| Ícones do sistema Fluent UI | MIT | Estilo Microsoft |
| Símbolos Material, Ícones Material Design, Carbon | Apache 2.0 | Estilos do Google, Pictogrammers e IBM |
As licenças MIT, ISC e Apache 2.0 pedem que você mantenha os avisos de direitos autorais e de licença ao redistribuir os próprios arquivos de ícones (por exemplo, em um pacote de ícones). Usar ícones dentro de um site ou aplicativo é o caso mais comum para o qual essas licenças foram criadas.
Por que o `currentColor` é importante
Um ícone cujo fill ou stroke é currentColor herda o CSS color do seu pai, então o mesmo SVG fica branco em um botão escuro, azul em um link e cinza quando desativado — sem precisar editar o arquivo. Mantém o currentColor para ícones em textos e botões da interface; escolhe uma cor fixa para ilustrações e favicons.
Qual formato copiar
- SVG — cole direto no HTML, em um Webflow Embed ou em um
.svgarquivo. - JSX — atributos prontos para o React (
strokeWidth,className) para inserir em um componente. - Data URI — para
<img src>ou um CSSbackground-imagesem precisar de um arquivo separado. - Máscara CSS — um ícone que herda
currentColordo CSS, útil em pseudoelementos. - Copiar para o Webflow — cola um Code Embed com o SVG no Webflow Designer.
Otimize seus próprios SVGs com o Otimizador de SVG ou transforme um deles em um favicon com o Gerador de Favicon.
Também pesquisado como: ícones svg, ícones svg gratuitos, localizador de ícones, busca por ícones svg, ícones de código aberto, ícones lucide, heroicons, ícones do tabler.
Ferramentas que combinam com: Localizador de ícones SVG
- Conversor de SVG para PNG — Converta gráficos vetoriais SVG em imagens PNG nítidas, exatamente no tamanho que você precisa — para lojas de aplicativos, redes sociais, e-mail ou documentos.
- Imagem para Base64 — Transforme um arquivo PNG, JPEG, SVG, WebP ou GIF em um URI de dados Base64 com CSS e HTML prontos para copiar — ou cole uma sequência Base64 para visualizar e baixar a imagem.
- CSS Mask Generator — Make images and sections fade out instead of ending hard: fade one edge, top and bottom, all four edges, a radial vignette or a spotlight, cut the element into stripes — or mask it with a shape (star, heart, hexagon, arrow…) with soft, feathered edges that clip-path can’t do.
- Gerador de códigos de barras — Crie códigos de barras que podem ser lidos por leitores ópticos para produtos, estoque, remessas e bibliotecas — os dígitos de verificação são calculados automaticamente, e você pode baixar um arquivo SVG de alta qualidade para impressão ou um PNG para documentos.