Saltar al contenido
ES

64 iconos · licencia MIT

Iconos animados de acción

Los verbos de una interfaz: guardar, eliminar, descargar, actualizar, dar me gusta, añadir a marcadores, buscar y ajustes. Cada uno confirma el clic o el hover al que responde: un corazón se rellena cuando das me gusta a una publicación y la tapa de una papelera se levanta antes de eliminar.

De los 64 iconos, 2 se reproducen sin parar, 14 alternan entre dos estados al hacer clic, 30 se repiten con cada clic, 11 se reproducen con hover y retroceden al salir el cursor, 6 se reproducen una vez con hover y 1 se repite en bucle mientras el cursor está encima. Cada uno se ofrece como componente de React, componente de shadcn/ui y animación Lottie JSON (61 de ellos también como SVG estático), gratis para uso comercial con la licencia MIT.

Todos los iconos de acciones

Dónde usarlos

  • Botones de me gusta, favoritos y marcadores en tarjetas
  • Botones de descargar, subir y guardar que confirman la acción
  • Botón para mostrar u ocultar la contraseña en un formulario de inicio de sesión
  • Botones de actualizar y sincronizar en dashboards
  • Botones de eliminar en tablas y listas de archivos
  • Campo de búsqueda que se convierte en un botón para borrar

Por interacción

  • Iconos animados en bucle · 2

    Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Checkmark, Help.

  • Iconos animados que alternan con un clic · 14

    Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Iconos animados al hacer clic · 30

    Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Iconos animados con hover · 11

    Avanza con mouseenter y retrocede con mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • 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. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

  • Iconos animados en bucle con hover · 1

    Se repite en bucle durante el hover, termina el ciclo en curso tras mouseleave y se queda estático si se prefiere movimiento reducido. Flag.

Añade uno a tu app

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

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import heart from 'react-useanimations/lib/heart';

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

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

npx shadcn@latest add https://useanimations.com/r/heart.json
import { AnimatedHeart } from '@/components/animations/heart';

<AnimatedHeart 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é iconos animados de acción se incluyen?

64 iconos: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 y 52 más. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de acción en React?

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

¿Puedo usar estos iconos animados de acción sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/heart.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.