Generador de sprites SVG
Junta muchos iconos SVG en un solo archivo sprite. Cárgalo una vez y muestra cualquier icono con una etiqueta use corta.
Suelta aquí archivos SVG o una carpetaLos archivos se quedan en tu dispositivo
Aún no hay archivos
Los archivos convertidos aparecen aquí. Suelta archivos SVG arriba o prueba con iconos de ejemplo.
Cómo crear un sprite SVG
- Suelta tus iconos SVGAñade archivos, una carpeta o pega código SVG.
- Fija el prefijo del idCada icono pasa a ser un symbol con el nombre de su archivo, como icon-rocket.
- Descarga sprite.svgSúbelo a tu web y muestra los iconos con el código use.
Más herramientas gratis
Todas las herramientas- SVG a PNGPNG nítidos en cualquier tamaño, uno o cientos.
- PNG a SVGVectoriza un PNG o JPG en un vector limpio.
- PNG a ICOArchivos .ico de favicon con 16 a 256 px dentro.
- Favicon e iconos de appConjuntos para web, Chrome, iOS y Android.
- SVG a ReactComponentes JSX tipados, listos para pegar.
- Optimizador SVGSVG más ligeros sin perder nada visible.
- Sprite SVGMuchos iconos en un solo sprite.svg.
- Creador de stickersArchivos de stickers para WhatsApp y Telegram.
Preguntas
¿Por qué usar un sprite SVG?
El navegador carga un solo archivo para todos tus iconos y lo guarda en caché. Cada icono de la página es una línea de código en lugar de un SVG completo.
¿Cómo muestro un icono del sprite?
Añade un elemento svg con un elemento use cuyo href apunte al sprite y al id del icono, como /sprite.svg#icon-rocket.
¿Puedo cambiar el color con CSS?
Sí. Los iconos de un color usan currentColor, así que toman el color del texto que los rodea.
¿Siguen funcionando los degradados?
Sí. Los ids de cada icono llevan delante el id de su symbol, así que degradados y recortes nunca chocan.