Guia — conjuntos de ícones
Como extrair ícones SVG de um site
Pegar um ícone é fácil. Pegar um conjunto inteiro — cada seta, glifo e logo que uma página renderiza, numerado e sem duplicatas — é para isso que serve este guia.
O formato do problema
Um conjunto de ícones não é uma pasta de arquivos
Quando um site publica um conjunto de ícones, você raramente vê arquivos. Você vê componentes. Cada ícone é um <svg> inline renderizado pelo framework, ou uma referência <use> a um sprite escondido, ou um fundo CSS. Salvar o conjunto inteiro na mão significa abrir o DevTools dezenas de vezes, copiar markup, consertar namespaces e inventar nomes de arquivo — para um conjunto que pode ter sessenta ícones.
O SVG Downloader transforma isso numa varredura só. Ele lê a página renderizada, detecta cada ícone como markup SVG de verdade — veja como funciona a leitura inline — e te dá duas saídas: um ícone por vez com o nome que você escolher, ou o conjunto inteiro num único ZIP.
Extrair o conjunto — passo a passo
- Abra a página do conjunto de ícones. Vá até a visão que realmente renderiza os ícones — uma galeria de componentes, uma barra de navegação, uma grade de documentação. O que a página ainda não desenhou não está no DOM, então garanta que o conjunto esteja na tela.
- Abra o popup e escaneie. Clique no ícone da barra de ferramentas. O SVG Downloader detecta os componentes de ícones SVG inline pela página e lista cada um que encontra.
- Percorra o conjunto. Use Anterior e Próximo para andar pelas prévias isoladas e confirmar o que a página expõe. Também é sua checagem de que o conjunto inteiro está presente antes de exportar.
- Nomeie os que você quer avulsos. Para um ícone só, defina o nome de arquivo opcional e clique em Baixar o SVG atual para ele sair como
chevron-left.svgem vez dedownload (3).svg. - Pegue o conjunto inteiro em ZIP. Clique em Baixar tudo em ZIP. Os ícones descem de uma vez, sem duplicatas, e a linha de status do popup nomeia o que não pôde ser resolvido — veja o guia do ZIP para o detalhe de como essa exportação se comporta.
Por que exportar o conjunto inteiro é o caminho rápido
O recurso de ZIP em lote foi feito exatamente para isso. Conjuntos de ícones são cheios de repetição — a mesma seta em uma dúzia de menus, um logo no cabeçalho e no rodapé — e uma coleta ingênua salvaria cada instância. O SVG Downloader desduplica SVGs idênticos, então o arquivo reflete o conjunto real: sessenta renderizações podem ser quarenta ícones únicos, e é isso que você recebe. Os arquivos são numerados na ordem da página — svg-1.svg, svg-2.svg — então descompactam na mesma sequência que você percorreu na prévia, e o prefixo svg é seu para mudar nas opções da extensão.
Com o que você pode contar
- Vetores originais, não renderizações. Todo arquivo é o SVG que estava na página — seus traçados exatos e seu
viewBox— então cada ícone continua nítido em qualquer tamanho e continua editável. - Namespaces consertados. O
xmlnsfaltante que quebra SVG inline copiado é devolvido, então todo arquivo do ZIP abre no Figma, no Illustrator e no VS Code. - Nada sai da sua máquina. A extração inteira roda no dispositivo — sem servidor, sem conta, sem upload, sem analytics.
- Melhor para
- Conjuntos de ícones inteiros — galerias, barras de navegação, grades de documentação renderizadas como componentes inline.
- Duas saídas
- Baixar o atual com um nome personalizado, ou Baixar tudo em ZIP para o conjunto.
- Sem duplicatas
- Ícones repetidos são salvos uma vez, então o arquivo bate com o conjunto real.
- Relacionado
- Veja SVG inline e ZIP da página inteira.
Vale saber
Perguntas frequentes
Como salvo um conjunto inteiro de ícones, e não um por vez?
Abra a página que renderiza o conjunto e clique em Baixar tudo em ZIP. A extensão junta os SVGs que encontrou na página num arquivo só, sem duplicatas, então um conjunto de algumas dezenas de ícones desce num clique.
Ícones duplicados serão salvos duas vezes?
Não. A exportação em ZIP desduplica SVGs idênticos, então uma seta de navegação que aparece em dez lugares é salva uma vez. Isso mantém o arquivo limpo e bate com o tamanho real do conjunto.
Dá para controlar os nomes dos arquivos?
Para um ícone só, digite o nome que quer antes de clicar em Baixar o SVG atual e o arquivo é salvo exatamente com esse nome. Um ZIP é numerado — svg-1.svg, svg-2.svg na ordem da página — e você pode mudar o prefixo svg para o que quiser nas opções da extensão, então um conjunto pode sair como acme-1.svg em diante.
Ele só encontra ícones inline ou também os escondidos?
Ele detecta componentes SVG inline, ícones de fundo CSS, referências <use> a sprites do mesmo documento e origens <img> ou <object> incluindo URIs data:. Se o ícone está renderizado na página, ele entra. Ícones que a página ainda não carregou só aparecem depois que carregarem.
Os ícones extraídos continuam sendo vetores editáveis?
Sim. Cada arquivo é o markup SVG original com traçados e viewBox intactos e o namespace xmlns consertado, então ele abre e edita sem problema no Figma, no Illustrator ou num editor de código.
Leve o conjunto inteiro num clique
Grátis, privado, e desduplica o conjunto para você ficar com o que importa.