6 interactions · 300 icônes

Interactions des icônes animées

Chaque icône est livrée avec la micro-interaction pour laquelle elle a été conçue : elle boucle, bascule ou se rejoue au clic, ou se joue au survol. Le composant React s’occupe du branchement et respecte la réduction des animations, et la prop interaction permet de passer n’importe quelle icône à une autre interaction.

interaction="loop"Icônes animées en boucle21 icônesJoue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée.Les icônes en boucle servent surtout aux spinners de chargement, aux alertes actives, à une cloche qui sonne ou à une invitation à faire défiler.
interaction="click-toggle"Icônes animées à bascule au clic37 icônesBascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée.Les icônes à bascule au clic pilotent typiquement les boutons son/muet, afficher/masquer le mot de passe, menu/fermer, lecture/pause et j’aime.
interaction="click-replay"Icônes animées au clic64 icônesRejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée.Les icônes au clic confirment typiquement les boutons envoyer, enregistrer, actualiser, télécharger, ajouter au panier et de mise en forme.
interaction="hover"Icônes animées au survol21 icônesSe joue vers l’avant sur mouseenter et en sens inverse sur mouseleave.Les icônes au survol signalent typiquement les éléments de navigation, les boutons de suppression, les réglages, les contrôles de zoom et les liens sociaux.
interaction="hover-replay"Icônes animées à lecture au survol144 icônesSe 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.Les icônes à lecture au survol animent typiquement les liens fléchés, les listes de fonctionnalités, les boutons de barre d’outils et les cartes de landing page.
interaction="hover-loop"Icônes animées en boucle au survol13 icônesBoucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée.Les icônes en boucle au survol signalent typiquement les liens sociaux, les invitations à une communauté, les liens de portfolio et les sélecteurs de langue.

Choisir une interaction

Un état qui dure, comme un chargement ou une alerte active : boucle.
Un contrôle on/off, comme couper le son, le menu ou afficher le mot de passe : bascule au clic, avec active pour un état contrôlé.
Une action ponctuelle, comme envoyer, enregistrer ou actualiser : relecture au clic.
Un aperçu de ce qu’ouvre un lien : survol, qui revient en arrière quand le pointeur s’en va.
Les barres d’outils et les listes que l’on balaie du pointeur : lecture au survol, qui va au bout de l’animation d’elle-même.
Les liens qui invitent à s’attarder, comme les icônes de réseaux sociaux : boucle au survol.

Réduction des animations

Le composant React suit prefers-reduced-motion et se met à jour quand le réglage change. Sur écran tactile, un tap ne déclenche jamais les animations au survol.

loop: l’icône ne démarre pas seule et reste sur sa première image, fixe.
click-toggle: un clic passe immédiatement à l’autre état, sans l’animation intermédiaire.
click-replay: les clics atteignent toujours votre gestionnaire, mais l’animation ne se joue pas.
hover: le survol ne déclenche pas l’animation.
hover-replay: le survol ne déclenche pas l’animation.
hover-loop: l’icône reste fixe pendant le survol.