Aller au contenu
FR

64 icônes · licence MIT

Icônes animées d’action

Les verbes d’une interface : enregistrer, supprimer, télécharger, actualiser, aimer, ajouter aux favoris, rechercher et régler. Chaque icône confirme le clic ou le survol auquel elle correspond : le cœur se remplit quand on aime une publication, le couvercle de la corbeille se soulève avant la suppression.

Sur les 64 icônes, 2 bouclent en continu, 14 basculent entre deux états au clic, 30 se rejouent à chaque clic, 11 se jouent au survol et reviennent en arrière quand le pointeur s’en va, 6 se jouent une fois au survol et 1 boucle pendant le survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, et 61 d’entre elles existent aussi en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes d’action

Où les utiliser

  • Boutons j’aime, favori et signet sur les cartes
  • Boutons de téléchargement, d’envoi de fichier et d’enregistrement qui confirment l’action
  • Bouton afficher/masquer le mot de passe dans un formulaire de connexion
  • Boutons d’actualisation et de synchronisation dans les tableaux de bord
  • Boutons de suppression dans les tableaux et les listes de fichiers
  • Champ de recherche qui se transforme en bouton d’effacement

Par interaction

  • Icônes animées en boucle · 2

    Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Checkmark, Help.

  • Icônes animées à bascule au clic · 14

    Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. 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.

  • Icônes animées au clic · 30

    Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. 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.

  • Icônes animées au survol · 11

    Se joue vers l’avant sur mouseenter et en sens inverse sur mouseleave. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Icônes animées à lecture au survol · 6

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

  • Icônes animées en boucle au survol · 1

    Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée. Flag.

En ajouter une à votre app

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

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

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

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

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

<AnimatedHeart 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 d’action sont incluses ?

64 icônes : Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 et 52 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées d’action dans React ?

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

Puis-je utiliser ces icônes animées d’action 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/heart.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.