Guía — sets de iconos
Cómo extraer iconos SVG de una web
Coger un icono es fácil. Coger un set entero —cada flecha, glifo y logotipo que dibuja una página, numerado y sin duplicados— es para lo que sirve esta guía.
La forma del problema
Un set de iconos no es una carpeta de archivos
Cuando un sitio publica un set de iconos, rara vez ves archivos. Ves componentes. Cada icono es un <svg> en línea dibujado por el framework, o una referencia <use> a un sprite oculto, o un fondo CSS. Guardar el set entero a mano implica abrir DevTools docenas de veces, copiar marcado, arreglar espacios de nombres e inventar nombres de archivo, para un set que puede tener sesenta iconos.
SVG Downloader convierte eso en un solo escaneo. Lee la página dibujada, detecta cada icono como marcado SVG real —mira cómo funciona la lectura en línea— y te da dos salidas: un icono cada vez con el nombre que elijas, o el set entero en un único ZIP.
Extraer el set, paso a paso
- Abre la página del set de iconos. Ve a la vista que realmente dibuja los iconos: una galería de componentes, una barra de navegación, una rejilla de documentación. Lo que la página aún no ha dibujado no está en el DOM, así que asegúrate de que el set esté en pantalla.
- Abre el popup y escanea. Pulsa el icono de la barra de herramientas. SVG Downloader detecta los componentes de iconos SVG en línea de toda la página y lista todos los que encuentra.
- Recorre el set. Usa Anterior y Siguiente para moverte por las vistas previas aisladas y confirmar lo que expone la página. También es tu comprobación de que el set completo está ahí antes de exportar.
- Nombra los que quieras por separado. Para un icono suelto, pon el nombre de archivo opcional y pulsa Descargar el SVG actual para que salga como
chevron-left.svgy no comodescarga (3).svg. - Llévate el set entero en un ZIP. Pulsa Descargar todo en ZIP. Los iconos bajan de una vez, sin duplicados, y la línea de estado del popup nombra lo que no se haya podido resolver; mira la guía del ZIP para el detalle de cómo se comporta esa exportación.
Por qué exportar el set entero es la vía rápida
La función de ZIP masivo está hecha justo para esto. Los sets de iconos están llenos de repeticiones —la misma flecha en una docena de menús, un logotipo en la cabecera y en el pie— y una recogida ingenua guardaría cada aparición. SVG Downloader elimina los SVG idénticos, así que el archivo refleja el set real: sesenta dibujos pueden ser cuarenta iconos únicos, y eso es lo que obtienes. Los archivos van numerados en el orden de la página —svg-1.svg, svg-2.svg—, así que se descomprimen en la misma secuencia que recorriste en la vista previa, y el prefijo svg puedes cambiarlo en las opciones de la extensión.
Con qué puedes contar
- Vectores originales, no dibujados de nuevo. Cada archivo es el SVG que estaba en la página, con sus trazados exactos y su
viewBox, así que cada icono se mantiene nítido a cualquier tamaño y sigue siendo editable. - Espacios de nombres reparados. El
xmlnsque falta y rompe el SVG en línea copiado se añade de vuelta, así que todos los archivos del ZIP abren en Figma, Illustrator y VS Code. - Nada sale de tu equipo. Toda la extracción se ejecuta en tu dispositivo: sin servidor, sin cuenta, sin subidas, sin analítica.
- Ideal para
- Sets de iconos completos: galerías, barras de navegación y rejillas de documentación dibujadas como componentes en línea.
- Dos salidas
- Descargar el actual con un nombre a medida, o Descargar todo en ZIP para el set.
- Sin duplicados
- Los iconos repetidos se guardan una vez, así que el archivo coincide con el set real.
- Relacionado
- Mira SVG en línea y ZIP de la página entera.
Conviene saber
Preguntas frecuentes
¿Cómo guardo un set de iconos entero en vez de uno a uno?
Abre la página que dibuja el set y pulsa Descargar todo en ZIP. La extensión recoge en un único archivo los SVG que encontró en la página, sin duplicados, así que un set de unas cuantas docenas de iconos baja de un solo clic.
¿Se guardarán dos veces los iconos duplicados?
No. La exportación a ZIP elimina los SVG idénticos, así que una flecha de navegación que aparece en diez sitios se guarda una vez. Eso mantiene el archivo limpio y coincide con el tamaño real del set.
¿Puedo controlar los nombres de archivo?
Para un icono suelto, escribe el nombre que quieras antes de pulsar Descargar el SVG actual y el archivo se guardará exactamente así. Un ZIP va numerado —svg-1.svg, svg-2.svg en el orden de la página— y puedes cambiar el prefijo svg por lo que quieras en las opciones de la extensión, de modo que un set puede salir como acme-1.svg en adelante.
¿Solo encuentra iconos en línea o también los ocultos?
Detecta componentes de SVG en línea, iconos de fondo CSS, referencias <use> a sprites del mismo documento y fuentes <img> u <object> incluidos los URI data:. Si el icono está dibujado en la página, entra. Los iconos que la página aún no ha cargado no aparecerán hasta que lo haga.
¿Los iconos extraídos siguen siendo vectores editables?
Sí. Cada archivo es el marcado SVG original con sus trazados y su viewBox intactos y el espacio de nombres xmlns reparado, así que abre y se edita sin problemas en Figma, Illustrator o un editor de código.
Llévate el set entero en un clic
Gratis, privado, y elimina los duplicados para que te quedes con lo que importa.