Generador de sprites de iconos SVG

Combina iconos SVG en un único sprite de símbolos con identificadores independientes y reutilizables.

En tu dispositivo · Sin cuenta

Generador de sprites de iconos SVG procesa lo que introduces en este navegador. Los datos introducidos y los resultados se excluyen de las estadísticas de uso. Las herramientas recientes guardan sus nombres, el número de visitas y la fecha y hora de la última visita. Las herramientas guardadas solo almacenan sus nombres. Guardar borradores es opcional y el texto permanece en este dispositivo; puedes eliminarlo con los controles del borrador. Cargar texto desde una URL es opcional y establece una conexión con ese servidor; el servidor puede ver la URL y tu dirección IP. La opción «Usar en» conserva temporalmente los datos en esta pestaña para pasarlos a otra herramienta. La siguiente herramienta los elimina al abrirse y los ignora si ha pasado más de un minuto.

«Copiar enlace» incluye en la dirección los datos que elijas compartir. Cualquiera que tenga el enlace puede volver a abrirlos. Se excluyen los archivos y los resultados generados. Las herramientas de contraseñas y claves solo comparten los ajustes.

Español

SVG separados por una línea con ---

Tu resultado

Enter your values.

Más

Atajos de teclado

Sobre los enlaces y el reinicio

Los enlaces incluyen los datos que introduces y la configuración. Cualquiera que tenga el enlace puede verlos, así que no incluyas texto privado. Los archivos y los resultados generados no se incluyen; las selecciones aleatorias se repiten.

Al restablecer, la herramienta se recarga con sus valores iniciales y libera los archivos abiertos y los controles de dispositivos. Los borradores guardados permanecen en este dispositivo hasta que los elimines.

Cómo crear un sprite de iconos SVG

Separa los documentos SVG con una línea de tres guiones. Cada icono se convierte en un símbolo llamado icon-1, icon-2 y así sucesivamente. Se añaden prefijos a los identificadores internos y las referencias locales para evitar conflictos entre degradados y trazados de recorte.

Siguiente: Selector de color de una imagen

Ejemplo

Dos SVG de entrada se convierten en símbolos llamados icon-1 e icon-2. Usa un elemento SVG use que apunte a #icon-1 para mostrar el primer icono.

Antes de usar el resultado

Solo se admiten SVG que contengan todos sus recursos y tengan un viewBox o valores numéricos de ancho y alto. Se rechazan el contenido activo, las hojas de estilo y los recursos externos. Revisa el sprite exportado en la aplicación donde vayas a usarlo.

Siguiente: Cambiar tamaño de imagen

Citar esta página

Estilo de cita

ToolOctopus. “Generador de sprites de iconos SVG.” Actualizado 7 de octubre de 2026. https://tooloctopus.com/es/generador-de-sprites-de-iconos-svg.

Añade la fecha de consulta si tus instrucciones lo requieren.

Las citas se formatean con citeproc-js, de Frank Bennett, y estilos de Citation Style Language. Licencia y código fuente.