Saltar al contenido
ES
v3300 iconos · cero dependencias · MIT→

Iconos que cobran vida.

Iconos animados gratis para React, shadcn/ui y Lottie

300 microanimaciones hechas a mano, con microinteracciones de hover, clic y bucle integradas. Úsalas como componente de React, añádelas con shadcn o descarga los archivos SVG y Lottie JSON. Con licencia MIT.

Explorar iconos

Mueve el puntero sobre los iconos.

iconos animados
300
iconos animados
interacciones integradas
6
interacciones integradas
reproductor, con gzip
8 kB
reproductor, con gzip
dependencias
0
dependencias

Interacciones integradas

Cada icono sabe cómo moverse.

Cada icono viene con la interacción para la que fue diseñado. Colócalo y funciona sin más, o elige otra con una sola prop. Pruébalas:

La biblioteca

300 iconos animados gratis

Pasa el cursor o haz clic para reproducirlos. Abre un icono para ver su código y sus descargas: Lottie JSON, SVG y ZIP.

300 iconos

Alertas

Notificaciones

Navegación

Acciones

Contenido

Formularios

Multimedia

Edición de texto

Comunicación

Dispositivos

Clima

Mapas y ubicación

Comercio electrónico

Gráficos

Desarrollo

Diseño y maquetación

Formas y matemáticas

Carga

Redes sociales

Otros

Úsalos a tu manera

Instala, importa y listo.

Un componente de React sin dependencias, un registro de shadcn, archivos descargables con URL estables y un catálogo que pueden leer los agentes de IA.

Leer la documentación →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Ligeros, accesibles y a tu estilo.

Siguen tus colores

Los iconos usan currentColor: adoptan por sí solos el color del texto, los estados de hover y el modo oscuro. Puedes cambiarlo con una prop, una clase o CSS normal.

Diminutos por diseño

8 kB

Un reproductor integrado y cero dependencias. Cada icono es su propio módulo de 2 kB.

Accesibles por defecto

Respetan el movimiento reducido, reproducen las animaciones de hover con el foco del teclado y los lectores de pantalla los ignoran salvo que les pongas una etiqueta.

Listos para el renderizado en servidor

Un componente de cliente que se renderiza sin problemas en Next.js, Remix y Astro. Los iconos son datos simples que puedes importar en cualquier parte.

Hechos para agentes

Un catálogo tipado con palabras clave para cada icono, icons.json, llms.txt y documentación en Markdown.

Encuentra la microanimación adecuada.

Preguntas

¿Qué son las microanimaciones y los iconos animados?

Las microanimaciones son movimientos breves con un único propósito que responden a una acción del usuario: un icono de menú que se convierte en un botón de cerrar, un corazón que se rellena cuando das me gusta a una publicación, una campana que suena con una notificación nueva. Los iconos animados son el tipo más habitual. Hacen que una interfaz se sienta ágil y muestran los cambios de estado sin texto adicional.

¿Qué diferencia hay entre los archivos Lottie y SVG?

El archivo Lottie JSON contiene la animación completa y se reproduce en cualquier reproductor de Lottie, incluido el que trae react-useanimations. Los archivos SVG son imágenes estáticas del icono en reposo, una por estado (por ejemplo, eye y eye-off), para lugares donde nada debe moverse: correos, documentos, herramientas de diseño o una alternativa sin JavaScript.

¿Funciona con Next.js y el renderizado en servidor?

Sí. El componente está marcado con 'use client' y dibuja la animación solo en el navegador, así que se renderiza desde server components y frameworks con SSR como Next.js, Remix y Astro sin imports dinámicos. Los módulos de los iconos son datos simples que los server components pueden importar y pasar como props. Next.js y renderizado en servidor →

¿Puedo usar los iconos en proyectos comerciales?

Sí. Los iconos y el paquete react-useanimations tienen licencia MIT: úsalos, modifícalos y redistribúyelos en trabajos personales y comerciales. La atribución se agradece, pero no es obligatoria. Licencia y condiciones →

¿Puedo usar los iconos sin React?

Sí. Cada icono es un archivo Lottie JSON estándar, así que se reproduce con lottie-web en JavaScript puro, Vue, Svelte, Angular o un CMS, y en los reproductores de Lottie para iOS, Android y Flutter. La página de iconos Lottie tiene las URL de los archivos y fragmentos de lottie-web listos para usar con cada interacción. Iconos Lottie →

¿Cuánto añaden los iconos a mi bundle?

El reproductor de react-useanimations 3.1.1 ocupa unos 8 kB con gzip y no tiene dependencias, y cada icono es un módulo independiente de 1 a 15 kB (2 kB de mediana), así que el bundle solo incluye los iconos que importas.

Pon tu interfaz en movimiento.

Gratis y con licencia MIT, para trabajos personales y comerciales.

Empezar