22 iconos · licencia MIT

Iconos animados de archivos, carpetas y usuarios

Archivos, carpetas, libros, correo, adjuntos y personas. Identifican aquello con lo que trabaja el usuario, y las variantes de añadir, quitar y marcar hacen que gestionar listas y equipos se sienta ágil.

De los 22 iconos, 5 se repiten con cada clic, 7 se reproducen con hover y retroceden al salir el cursor y 10 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 iconos de contenido

Dónde usarlos

Gestores de archivos y listas de documentos
Botones de adjuntar y de copiar al portapapeles
Bandeja de entrada y archivo en clientes de correo
Listas de miembros de un equipo con acciones para añadir y quitar usuarios
Menús para compartir documentos y enlaces

Por interacción

Iconos animados al hacer clic · 5
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Iconos animados con hover · 7
Avanza con mouseenter y retrocede con mouseleave. Archive, Copy, Mail, Share, User minus, User plus, User X.
Iconos animados que se reproducen con hover · 10
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. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

Añade uno a tu app

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/copy.json

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy 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 archivos, carpetas y usuarios se incluyen?

22 iconos: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image y 10 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 archivos, carpetas y usuarios en React?

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

¿Puedo usar estos iconos animados de archivos, carpetas y usuarios sin React?

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