INICIO RÁPIDO

Un poco de movimiento. Tres pasos sencillos.

Animación SVG: principios y rendimiento ↗

01 / Encuentra tu icono

Explorar la colección. Busca por nombre o etiqueta y filtra por categoría, fuente o movimiento. Puedes pausar las vistas previas en cualquier momento.

02 / Personalízalo

Abre un icono para cambiar color, tamaño, grosor del trazo, duración, retraso, curva de velocidad, repeticiones, dirección e intensidad. Usa Reproducir, Pausa, Reiniciar o el control de posición para revisar el resultado. Los últimos ajustes se guardan en este navegador. Un enlace compartido incluye los ajustes sin necesidad de una cuenta.

03 / Llévatelo

Elige Copiar SVG para pegar el código en tu HTML, o Descargar .svg para obtener un archivo autónomo. Incluye los estilos de animación y no necesita JavaScript, bibliotecas ni recursos externos.

<img src="/icons/bell-ring.svg"
     width="32" height="32"
     alt="Notifications" />

Para imágenes decorativas junto a texto, usa alt="". Para SVG decorativos en línea, elimina role y aria-labelledby y añade aria-hidden="true".

Movimiento con cuidado

Cada exportación respeta prefers-reduced-motion. El editor empieza en pausa si el sistema solicita menos movimiento; pulsa Reproducir para revisar la animación. Usa una repetición para confirmar acciones y bucles limitados para llamar la atención.

Usar varias copias en línea

Cada combinación de icono y ajustes recibe estilos propios. Si pegas la misma exportación varias veces en un documento, asigna IDs únicos a cada SVG y su título y actualiza los selectores CSS y aria-labelledby. Los elementos de imagen aíslan cada archivo automáticamente.

Libertad para crear

Los 210 iconos incluyen información de fuente y licencia. Consulta la colección de origen para conocer al autor y sus condiciones. Los SVG descargados incluyen los mismos datos. Fuentes · Licencias