Reúne tus iconos en una sola lámina y genera su hoja CSS

Con Hoja de sprites, fotógrafos y creadores visuales pueden agrupar iconos y su CSS antes de integrarlos. Reúne tus iconos en una sola lámina y genera su hoja CSS.

Reúne tus iconos en una sola lámina y genera su hoja CSS. La herramienta es gratuita en el navegador y muestra el resultado sin pedirte una cuenta.

Cómo usar

Elige varias imágenes PNG, JPEG o WebP; cada una debe ser de 20 MB o menos, y necesitas entre 2 y 100 archivos.
Establece el ancho máximo que deseas para la hoja final, en píxeles.
Añade un margen alrededor de cada sprite para que los iconos no se toquen entre sí.
Genera la hoja y descarga tanto la imagen como su hoja de estilos CSS.

Ejemplo

Un desarrollador front-end está ensamblando un conjunto de iconos pequeños para una barra de navegación. Carga los archivos, elige un ancho de hoja razonable y un margen pequeño, luego añade la hoja generada y el CSS al proyecto. La página puede solicitar una sola imagen en lugar de muchos archivos separados.

Límites y formatos

La salida es una hoja de mapa de bits, no un sistema de iconos vectoriales, por lo que un aumento considerable puede suavizar los iconos.
Los archivos de entrada deben ser PNG, JPEG o WebP, con un límite de 20 MB por imagen y un total de entre 2 y 100 archivos.
Verifica el CSS generado con la estructura de tu proyecto, ya que los nombres de clase o las rutas de archivo pueden necesitar ajustes.
Un ancho mal elegido o demasiadas imágenes pueden crear una hoja que sea difícil de mantener más adelante.

Dónde se procesa

La generación de la hoja y del CSS se ejecuta dentro de tu navegador. Tus archivos de imagen no se suben, no se requiere cuenta y los recursos finales quedan disponibles para descargar en tu dispositivo.

Preguntas frecuentes

¿Cómo debo elegir el ancho máximo de la hoja?

Piensa en cuántos iconos tienes y dónde se usará la hoja. Un ancho moderado evita que la hoja se vuelva extremadamente alta, mientras que una hoja más ancha puede reducir su altura. Prueba un valor, inspecciona el resultado y ajústalo si la disposición parece desequilibrada.

¿Tengo que usar el archivo CSS generado?

Puedes usarlo tal como se proporciona, adaptarlo a tus convenciones de nombres o simplemente leerlo como guía de posicionamiento. El CSS describe dónde se ubica cada sprite en la hoja. La imagen de la hoja en sí permanece igual tanto si conservas la hoja de estilos como si no.

¿Puedo mezclar diferentes formatos de imagen en una hoja?

Sí, los archivos PNG, JPEG y WebP se pueden seleccionar juntos. Para los iconos, los archivos PNG con transparencia suelen funcionar mejor porque se integran limpiamente con diferentes fondos de página. Revisa siempre la hoja final, ya que los bordes y las áreas de fondo pueden variar según el formato de origen.