SVG Nexus / EXPLAINER Sem Cadastro | 100% no Seu Navegador

O que é SVG?

SVG (gráficos vetoriais escaláveis) é o formato do navegador para ícones, logos e ilustrações: código XML nítido em cada tamanho e recolorível com um atributo.

SVG em um minuto

Um arquivo SVG é texto simples. Abra no navegador, no editor de texto ou na ferramenta de design, leia como HTML e altere cores, tamanhos e formas sem perda de qualidade. É por isso que interfaces, logos e botões viajam em vetor.

O SVG Nexus indexa bibliotecas de ícones SVG e ilustrações de código aberto para você pesquisar, recolorir e copiar código pronto para React, Vue, HTML, CSS ou sua ferramenta de design. Sem conta e sem upload.

Escala infinita

Os traços são matemática, não pixels: o mesmo arquivo fica nítido como favicon de 16px, logo retina ou gráfico de slide 4K.

Recolore com um atributo

Mude o fill ou o stroke uma vez e a marca inteira segue. Keyframes CSS e hover funcionam num SVG inline sem JavaScript.

Texto minúsculo

Os ícones comprimem para kilobytes, vão com gzip com eficiência de qualquer servidor e continuam legíveis para buscadores e leitores de tela.

Copie código SVG para qualquer stack

Ver todas as ferramentas

Cada página do catálogo e cada SVG enviado abre numa ferramenta do navegador que reescreve o código para seu framework: JSX, Vue, Svelte, CSS, data URI, exportações PNG e sprites.

Editor vetorial SVG interativo

Editor vetorial no navegador sem atrasos para cores, espessura do traço, viewBox, transformações, espaçamento, fundos e exportação instantânea em SVG/PNG.

Conversor de SVG para React JSX, Vue e Svelte

Transforma atributos SVG brutos em componentes TypeScript React (TSX), Next.js Server Component, Vue 3 <script setup>, Svelte 5, Flutter e Angular limpos.

Conversor de SVG para PNG e WebP em alta resolução

Rasteriza qualquer ícone SVG ou código personalizado em imagens PNG ou WebP nítidas de 64px até 2048px, com controle de transparência.

Conversor de SVG para CSS e Data URI

Codifica a marcação SVG em Data URIs compactas e seguras para URLs (UTF-8 ou Base64), regras CSS background-image e snippets CSS mask-image com currentColor dinâmico.

Gerador de matriz de ícones SVG e badges

Síntese paramétrica de ícones SVG com molduras squircle/hexagonais personalizadas, gradientes de várias paradas, badges de status e exportação instantânea para frameworks.

Otimizador e minificador de SVG

Minifique o SVG no navegador: remova metadados do editor, comentários e resíduos de XML, compacte os espaços e veja a economia real de bytes.

Encontre ícones SVG por tema

Ver todas as categorias

O catálogo agrupa ícones em temas como transporte, finanças, medicina, clima e feriados. Abra qualquer tema para navegar e copiar vetores em segundos.

SVG ou PNG?

Use SVG para ícones e gráficos de interface que devem escalar e recolorir; exporte PNG ou WebP para detalhe fotográfico, previews sociais ou plataformas que rasterizam. As ferramentas aqui produzem os dois a partir de um único arquivo fonte.

SVG vs PNG: Qual Formato Você Deve Usar? SVG em linha contra tag de imagem Como Editar Ícones SVG no Figma ou no Navegador Todos os guias

Grátis para uso comercial

Cada linha de ícone traz sua biblioteca e licência de origem. Os pacotes MIT, ISC e Apache-2.0 cobrem produtos comerciais; logos de marca seguem regras próprias, sempre na tabela de licenças.

Licenças →

Bibliotecas de ícones de código aberto

Material Icons Phosphor Icons selfh.st Icons Tabler Icons Authentic Brand Logos Domain Icons

Icon libraries →

Perguntas de SVG, respondidas

SVG é melhor que PNG?

Para ícones, logos e arte de interface, sim: SVG escala, recolore e pesa menos porque guarda instruções de desenho, não pixels. PNG continua útil para bitmaps detalhados.

Como abrir e editar um arquivo SVG?

Arraste para um navegador, um editor de texto ou uma ferramenta de design. O SVG Nexus Studio abre no navegador para você editar cores, camadas e traços sem instalar nada.

Posso usar os ícones comercialmente?

As bibliotecas de código aberto aqui são entregues sob MIT, ISC, Apache-2.0 e licenças similares que permitem uso comercial. Cada página de ícone informa a licença exata; logos de marca têm regras extras.

Por que meu SVG aparece desfocado?

Um SVG desfocado normalmente indica rasterização cedo ou exportação com viewport errado. Mantenha em vetor até o render final ou reexporte a partir do arquivo original.

Comece com um recurso SVG

Pesquise no catálogo, abra qualquer recurso no studio do navegador e entregue código vetorial limpo: ícones, logos, ilustrações e as ferramentas que os transformam.

Todos os ícones SVG Abrir no editor

Licença	Uso comercial	Atribuicao	Modificar ou recolorir
MIT	Permitido	Aviso no pacote	Permitido
ISC	Permitido	Aviso no pacote	Permitido
Apache-2.0	Permitido	Obrigatorio com arquivo de aviso	Permitido
CC BY 4.0	Permitido	Credito obrigatorio	Permitido
CC-BY-SA-4.0	Permitido	Compartilhar igual	Compartilhar igual
Trademark / Brand	Apenas uso referencial	Diretrizes do dono	Restrito