10 iconos · licencia MIT

Más iconos animados

Iconos que no pertenecen a un grupo mayor: caras emoji para valoraciones, una taza de café, un reloj, una línea de pulso y una indicación para desplazarse hacia abajo. El icono de desplazamiento es una pista habitual en la sección hero para indicar que hay más contenido debajo.

De los 10 iconos, 4 se reproducen sin parar y 6 se reproducen una vez con hover. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los demás iconos

Dónde usarlos

Indicaciones para desplazarse hacia abajo al final de una sección hero
Caras alegres, neutras y tristes en widgets de valoración
Indicadores de actividad y de disponibilidad
Horarios de apertura y selectores de hora
Enlaces de Buy Me a Coffee y de apoyo

Por interacción

Iconos animados en bucle · 4
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Activity, Arrow down, Arrow up, Scroll down.
Iconos animados que se reproducen con hover · 6
Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia. Clock, Coffee, Frown, Meh, Smile, Tool.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Bucle”. Todos los iconos de esta categoría funcionan igual: cambia scrollDown por el nombre que aparece en la página de cada uno.

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import scrollDown from 'react-useanimations/lib/scrollDown';

<UseAnimations animation={scrollDown} size={32} />

Con shadcn/ui, la CLI añade un componente listo para usar:

npx shadcn@latest add https://useanimations.com/r/scroll-down.json

import { AnimatedScrollDown } from '@/components/animations/scroll-down';

<AnimatedScrollDown size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué más iconos animados se incluyen?

10 iconos: Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile y Tool. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos más iconos animados en React?

Instala react-useanimations, añade import scrollDown from 'react-useanimations/lib/scrollDown' y renderiza <UseAnimations animation={scrollDown} size={32} />. El icono reproduce su interacción “Bucle” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/scroll-down.json.

¿Puedo usar estos más iconos animados sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/scroll-down.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.