22 icônes · licence MIT

Icônes animées de fichiers, dossiers et utilisateurs

Fichiers, dossiers, livres, e-mails, pièces jointes et personnes. Ces icônes désignent les objets que l’utilisateur manipule, et leurs variantes ajout, retrait et validation rendent la gestion des listes et des équipes plus réactive.

Sur les 22 icônes, 5 se rejouent à chaque clic, 7 se jouent au survol et reviennent en arrière quand le pointeur s’en va et 10 se jouent une fois au survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes de contenu

Où les utiliser

Gestionnaires de fichiers et listes de documents
Boutons de pièce jointe et de copie dans le presse-papiers
Boîte de réception et archives d’un client de messagerie
Listes de membres d’une équipe avec ajout et retrait d’utilisateurs
Menus de partage pour les documents et les liens

Par interaction

Icônes animées au clic · 5
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Icônes animées au survol · 7
Se joue vers l’avant sur mouseenter et en sens inverse sur mouseleave. Archive, Copy, Mail, Share, User minus, User plus, User X.
Icônes animées à lecture au survol · 10
Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « survol ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez copy par le nom indiqué sur leur page.

npm install react-useanimations

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

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

<AnimatedCopy size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de fichiers, dossiers et utilisateurs sont incluses ?

22 icônes : Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image et 10 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de fichiers, dossiers et utilisateurs dans React ?

Installez react-useanimations, ajoutez import copy from 'react-useanimations/lib/copy' et affichez <UseAnimations animation={copy} size={32} />. L’icône joue son interaction « survol » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/copy.json.

Puis-je utiliser ces icônes animées de fichiers, dossiers et utilisateurs sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/copy.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.