Como vetorizar um ícone
6 min de leitura · Publicado em 2 de ago. de 2026 · Atualizado em 2 de out. de 2026
Um ícone vive em todos os tamanhos ao mesmo tempo. O mesmo arquivo é um item de 16 pixels num menu, um botão de 24 pixels, um ícone de aplicativo de 512 pixels e, ocasionalmente, um pôster. Isso só funciona quando a geometria por baixo é honesta: poucos nós, caminhos fechados e nenhuma franja residual do anti-aliasing do raster de que você partiu.
Vetorizar um ícone é, por isso, menos sobre a conversão e mais sobre o que você alimenta e o que poda depois. Este guia cobre os dois.
Parta do maior raster que você tiver, depois achate-o
O anti-aliasing é o inimigo aqui. Num ícone de 32 pixels, os pixels cinza suaves ao longo de cada diagonal são uma grande fração da imagem, e um traçador não tem como saber que eles deveriam ser uma borda dura e não um tom intermediário real. Dê a ele uma versão de 512 pixels e a mesma borda é uma transição de um pixel contra quarenta e nove pixels limpos — a forma é inconfundível.
Se o ícone é monocromático, torne-o genuinamente monocromático antes de converter: preto puro sobre transparente, ou preto puro sobre branco, sem sombra suave e sem brilho interno sutil. Cada um desses efeitos vira formas na saída, e formas na saída são nós que você terá que encontrar e excluir.
Julgue o resultado pela contagem de nós, não pela aparência a 100%
No tamanho em que você está olhando, quase qualquer traçado parece bom. O teste que importa é a contagem de nós: abra o caminho e conte os pontos. Um ícone bem desenhado tem pontos apenas onde a curva realmente muda de direção — um quadrado arredondado tem oito, um círculo tem quatro, um chevron tem três ou seis. Se uma forma simples voltou com sessenta, o traçador estava perseguindo ruído de pixels, e essa forma vai renderizar devagar, editar mal e parecer sutilmente errada quando escalada.
No Lite e acima, o controle de detalhe é o que governa isso diretamente: menos detalhe mescla de forma mais agressiva e produz nós em menor número e mais limpos. Empurre para baixo até os cantos começarem a amolecer, e depois volte um passo. No Free o nível é escolhido automaticamente, e a maneira de influenciá-lo é a qualidade da origem.
Alinhe à grade de pixels depois, não antes
Conjuntos de ícones têm uma grade — geralmente 24×24 com uma margem de segurança de dois pixels, ou 16×16 para interfaces densas. Um caminho traçado cai onde os pixels estavam, o que é perto dessa grade, mas não sobre ela, e em tamanhos pequenos de renderização o “perto” é o que faz um ícone numa fileira parecer meio pixel mais pesado que os vizinhos.
Encaixe os caminhos prontos em coordenadas inteiras no seu editor e defina o viewBox do SVG para a sua grade. Isso é delicado na primeira vez e mecânico depois, e é o que separa um conjunto de ícones com cara de desenhado de um com cara de convertido.
Um peso, um estilo, um arquivo
Se você está reconstruindo um conjunto inteiro, converta todos num único lote para que passem pelas mesmas configurações, e depois normalize o peso do traço à mão pelo conjunto. Uma família de ícones lê como família porque os traços combinam; um conjunto traçado individualmente ao longo de várias sessões não vai combinar, e a discrepância é visível mesmo quando nenhum ícone isolado parece errado.
A conversão em lote começa no Pro, que aceita 30 arquivos de uma vez. Abaixo disso os arquivos convertem um por vez, o que para um conjunto de vinte são alguns minutos de cliques, e não um impeditivo.
Passo a passo
- 01
Consiga a maior versão em raster
512 pixels ou mais, se existir. Uma origem de 32 pixels é quase toda anti-aliasing, e anti-aliasing é o que um traçador erra.
- 02
Achate para uma única cor
Remova sombras projetadas, brilhos internos e gradientes antes de converter. Cada um vira formas extras na saída.
- 03
Converta para SVG
Envie e baixe o resultado. SVG é o formato nativo tanto para ícones web quanto para ícones de aplicativo.
- 04
Confira a contagem de nós
Abra o caminho no seu editor. Uma forma simples deve ter um punhado de pontos, não dezenas. Se tem dezenas, a origem tinha ruído.
- 05
Encaixe na grade de ícones
Alinhe os caminhos a coordenadas inteiras e defina o viewBox para o tamanho da sua grade, para que o ícone renderize nítido a 16 e 24 pixels.
Problemas comuns
- O ícone parece borrado a 16 pixels apesar de ser vetor
- Os caminhos não estão alinhados à grade de pixels, então o renderizador aplica anti-aliasing em cada borda. Encaixe as coordenadas em números inteiros e defina o viewBox para corresponder à sua grade.
- Uma forma simples voltou com dezenas de nós
- A origem tinha anti-aliasing ou ruído de JPEG que o traçador leu como detalhe. Use uma origem maior e mais limpa; no Lite e acima, abaixe o nível de detalhe.
- Cantos que deveriam ser nítidos estão arredondados
- A suavização está alta demais. No Lite e acima, diminua um passo — os cantos reais permanecem nítidos até Strong, e só o Maximum arredonda tudo.
- O ícone tem um contorno tênue de uma cor diferente
- É a franja com anti-aliasing do original, traçada como uma forma fina própria. Exclua-a no editor, e da próxima vez achate a origem para uma única cor de borda dura primeiro.
Perguntas frequentes
- De que tamanho o ícone de origem deve ser?
- Do maior tamanho que existir — 512 pixels ou mais é confortável. Abaixo de cerca de 64 pixels, o anti-aliasing é uma grande fração da imagem e o traçador não distingue uma borda suave de uma real, o que produz curvas irregulares.
- Posso converter um conjunto inteiro de ícones de uma vez?
- A conversão em lote começa no Pro, que aceita 30 arquivos por vez; o Studio aceita 50 e o Agency 100. Converter um conjunto num único lote importa por mais que velocidade — cada arquivo passa por configurações idênticas, então os ícones saem consistentes entre si.
- A transparência sobrevive?
- Sim, de uma origem que a tenha. As áreas transparentes de um PNG ou WebP ficam vazias no SVG. Um JPEG não tem transparência alguma, então um ícone vindo de um JPEG chega com o fundo como uma forma sólida que você pode excluir.
- Ícones devem ser SVG ou uma fonte?
- SVG. Fontes de ícones eram uma solução paliativa para uma era de navegadores que acabou: não conseguem várias cores, quebram com um arquivo de fonte ausente, e leitores de tela as leem como texto. Converta para SVG e use inline ou como sprite.
Guias relacionados
- Como vetorizar um logo — Reconstrua um logo que você só tem como um JPG pequeno em curvas limpas, prontas para impressão, com as cores exatas da marca.
- Como vetorizar plantas baixas e desenhos técnicos — Converta desenhos e esquemas escaneados em line art editável, sem herdar os erros do scanner.
- Como vetorizar um flyer ou pôster para grande formato — Salve um design plano para A1 e maiores sem as bordas suaves — e saiba quais partes não converter.