10 icônes · licence MIT

Autres icônes animées

Des icônes qui n’appartiennent à aucun groupe plus large : des émojis pour recueillir un avis, une tasse de café, une horloge, une ligne de pouls et une invitation à faire défiler. L’icône de défilement est un indice classique en bas d’une section hero pour signaler qu’il y a de la suite.

Sur les 10 icônes, 4 bouclent en continu et 6 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 diverses

Où les utiliser

Invitations à faire défiler en bas d’une section hero
Visages content, neutre et triste dans les widgets d’avis
Indicateurs d’activité et de disponibilité
Horaires d’ouverture et sélecteurs d’heure
Liens « Buy me a coffee » et de soutien

Par interaction

Icônes animées en boucle · 4
Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Activity, Arrow down, Arrow up, Scroll down.
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. Clock, Coffee, Frown, Meh, Smile, Tool.

En ajouter une à votre app

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

npm install react-useanimations

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

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

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

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

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

<AnimatedScrollDown 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 autres icônes animées sont incluses ?

10 icônes : Activity, Arrow down, Arrow up, Clock, Coffee, Frown, Meh, Scroll down, Smile et Tool. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces autres icônes animées dans React ?

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

Puis-je utiliser ces autres icônes animées 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/scroll-down.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.