Skip to main content
FreeToolkit .ai

Pesquisa de Ícones Pesquise e personalize ícones SVG de código aberto com tamanho, cor e traço ajustáveis.

Pesquisa de Ícones illustration
🎨

Pesquisa de Ícones

Pesquise e personalize ícones SVG de código aberto com tamanho, cor e traço ajustáveis.

1

Pesquise ícones

Digite uma palavra-chave para filtrar ícones por nome em várias categorias.

2

Personalize a aparência

Ajuste a cor, tamanho e largura do traço do ícone para combinar com o seu design.

3

Copie o SVG

Clique em um ícone para copiar o código SVG personalizado.

Loading tool...

What Is Pesquisa de Ícones?

A ferramenta de Pesquisa de Ícones permite que você navegue, personalize e copie ícones SVG de código aberto. Os ícones são elementos essenciais da interface do usuário para navegação, ações, indicadores de status e comunicação visual. Essa ferramenta inclui ícones em seis categorias: Setas, Ações, UI, Mídia, Comunicação e Arquivos. Cada ícone é um SVG baseado em traços que pode ser personalizado com sua cor preferida, tamanho e largura do traço. Pesquise por palavra-chave para encontrar rapidamente o ícone de que você precisa. Clique em qualquer ícone para copiar seu código SVG com as configurações personalizadas aplicadas. O SVG gerado é limpo, acessível e pronto para uso inline no HTML ou como arquivos SVG independentes.

Why Use Pesquisa de Ícones?

  • Categorias de ícones organizadas: Setas, Ações, UI, Mídia e mais
  • Pesquisa por palavra-chave para descoberta rápida de ícones
  • Cor, tamanho e largura do traço personalizáveis
  • Cópia em um clique de código SVG limpo e acessível

Common Use Cases

Desenvolvimento de UI

Encontre e personalize ícones para botões, navegação e elementos da interface.

Prototipagem Rápida

Pegue rapidamente ícones para protótipos e mockups sem procurar na web.

Consistência de Design

Use ícones baseados em traços para um design de interface coeso.

Documentação

Adicione ícones visuais à documentação, guias e arquivos README.

Technical Guide

Os ícones SVG usam o elemento <svg> com viewBox para escalonamento independente do tamanho da tela. Os ícones baseados em traços usam o atributo stroke para cor, stroke-width para espessura da linha e stroke-linecap/stroke-linejoin para terminações de linha. O atributo fill="none" garante que apenas os traços sejam visíveis. Os ícones SVG podem ser usados inline no HTML para estilização CSS direta, como src de <img> para uso simples ou como background-image via data URI. Para acessibilidade, adicione os atributos role="img" e aria-label a ícones decorativos, ou aria-hidden="true" para ícones puramente decorativos com rótulos de texto visíveis. Os ícones SVG escalonam perfeitamente para qualquer tamanho sem perda de qualidade. Para sistemas de ícones, considere usar folhas de sprites SVG ou um componente de ícone que faça referência a definições SVG. A palavra-chave currentColor permite que os ícones herdem a cor do texto do elemento pai.

Tips & Best Practices

  • 1
    Use ícones baseados em traços para estilização consistente em todo o projeto
  • 2
    Defina a cor do traço como currentColor para herdar automaticamente a cor do texto
  • 3
    Mantenha os tamanhos dos ícones consistentes - 24px é um tamanho padrão comum
  • 4
    Adicione aria-label para botões de ícone acessíveis sem texto visível

Related Tools

Gerador de Botões CSS - free online tool

Gerador de Botões CSS

Crie botões personalizados com cores, preenchimento, bordas, sombras e efeitos ao passar o mouse.

🎨 CSS & Design
SVG para Fundo de CSS - free online tool

SVG para Fundo de CSS

Codifique o código SVG como uma imagem de fundo do CSS usando codificação de URI de dados.

🎨 CSS & Design
Gerador de Variáveis CSS - free online tool

Gerador de Variáveis CSS

Gere propriedades personalizadas do CSS (variáveis) para cores, espaçamento e tipografia.

🎨 CSS & Design
Gerador de Padrões SVG - free online tool

Gerador de Padrões SVG

Gere padrões repetitivos baseados em SVG para fundos CSS com várias formas.

🎨 CSS & Design

Frequently Asked Questions

Q Esses ícones são gratuitos para uso?
Sim, todos os ícones nesta ferramenta são de código aberto e gratuitos para uso pessoal e comercial.
Q Posso alterar a cor do ícone?
Sim, ajuste o seletor de cores para alterar a cor do traço de todos os ícones.
Q Como uso ícones SVG no meu projeto?
Cole o código SVG diretamente no seu HTML, use como src de uma imagem ou converta em um componente React.
Q Posso adicionar esses ícones ao React?
Sim, cole o código SVG em um componente React ou use uma ferramenta de conversão de SVG para React.
Q Como faço para tornar os ícones acessíveis?
Adicione aria-label para botões de ícone autônomos, ou aria-hidden="true" quando acompanhados por texto visível.

About This Tool

Pesquisa de Ícones is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.