300 icônes · 20 catégories

Catégories d’icônes animées

Chaque icône useAnimations appartient à une catégorie, des flèches de navigation aux logos de réseaux sociaux en passant par les contrôles multimédias et les indicateurs de chargement. Ouvrez une catégorie pour voir toutes ses icônes, où les utiliser et le code pour en ajouter une, ou parcourez plutôt les icônes par interaction.

Alertes5 icônesTriangles d’avertissement, cercles d’alerte et panneaux stop qui pulsent juste assez pour attirer l’œil, sans clignoter. Placez-les à côté d’un champ de formulaire en erreur, en tête d’une bannière d’erreur ou dans une colonne de statut : là où une icône fixe passe facilement inaperçue.
Notifications4 icônesDes cloches qui sonnent à chaque nouvelle activité ou qui basculent entre cloche et cloche barrée. Un léger balancement attire le regard vers le nombre de non-lus, et les versions à bascule servent aussi de bouton pour couper les notifications d’un canal ou d’un fil.
Navigation34 icônesDes menus hamburger qui se transforment en bouton de fermeture, des flèches, des chevrons et des flèches d’angle qui se décalent dans leur direction au survol. On voit tout de suite où mène le contrôle : ouvrir le tiroir, revenir en arrière, déplier la ligne, quitter le site.
Actions64 icônesLes 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.
Contenu22 icônesFichiers, 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.
Formulaires3 icônesUne case à cocher, un bouton radio et un interrupteur qui s’animent entre l’état coché et l’état décoché. Utilisez-les là où un champ standard paraît plat, comme les checklists d’onboarding ou les écrans de réglages, tout en gardant l’état lisible d’un coup d’œil.
Médias28 icônesLecture et pause, volume, micro, caméra, piste suivante et lecture aléatoire pour les lecteurs audio et vidéo. Les icônes à bascule passent d’un état à l’autre, de lecture à pause ou de micro à micro coupé, si bien que le bouton montre toujours ce que fera le prochain clic.
Édition de texte10 icônesGras, italique, souligné, alignement et listes pour les barres d’outils de texte enrichi. Une courte animation au clic confirme que la mise en forme a été appliquée, ce qui aide dans les éditeurs où le changement sur le texte lui-même est discret.
Communication13 icônesTéléphones, bulles de discussion, boutons d’envoi, messagerie vocale et RSS. Les icônes d’appel couvrent les états entrant, sortant, manqué et transféré dont un journal d’appels a besoin, et l’icône d’envoi donne au message un petit élan au clic.
Appareils12 icônesTéléphones, tablettes, écrans, montres et imprimantes, avec les indicateurs de connexion qui les accompagnent : wifi, Bluetooth et batterie. Elles conviennent aux sélecteurs d’appareil, aux commutateurs d’aperçu responsive et aux statuts de connectivité.
Météo16 icônesSoleil, lune, nuages, pluie, neige, éclairs et vent pour les prévisions et tout ce qui suit le moment de la journée. Le soleil et la lune font aussi un interrupteur naturel entre mode clair et mode sombre.
Cartes et localisation9 icônesRepères de carte, flèches de navigation, globes, cibles et ancres. Un repère qui tombe au survol fait ressortir un localisateur de magasins ou une adresse de livraison, et le globe sert de sélecteur de langue ou de région.
E-commerce11 icônesPaniers, sacs, étiquettes de prix, cadeaux, cartes bancaires et camions de livraison pour les boutiques en ligne. Une animation d’ajout au panier confirme le clic sans toast, et les icônes de camion et de colis donnent un peu de vie au suivi de commande.
Graphiques5 icônesHistogrammes, graphique circulaire et flèches de tendance pour l’analytique et le reporting. Les icônes de tendance à la hausse et à la baisse montrent d’un coup d’œil si un indicateur a progressé ou reculé, idéal pour les cartes de KPI et les historiques de chiffres.
Développement9 icônesChevrons de code, terminal, branches, commits, merges et pull requests Git, ainsi que serveurs et bases de données. Pensées pour les outils de développement, les sites de documentation et les pages de statut, où le vocabulaire de Git et de l’infrastructure fait partie de l’interface.
Design et mise en page10 icônesGrilles, colonnes, calques, recadrage, outil plume et curseurs pour les éditeurs et les builders. Elles trouvent leur place dans les barres d’outils où l’on organise du contenu, où l’on passe d’une vue grille à une vue tableau ou où l’on choisit un outil de dessin.
Formes et maths8 icônesCercles, carrés, triangles, hexagones, un octogone et des signes de division. Utilisez-les comme outils de forme dans les apps de dessin, comme opérateurs de calculatrice ou comme repères neutres dans les schémas et les étapes d’onboarding.
Chargement5 icônesSpinners et loaders qui tournent en boucle tant qu’une opération est en cours. Placez-en un dans un bouton d’envoi pendant une requête, à la place d’un contenu qui charge encore ou sur un écran de démarrage plein écran ; ils restent immobiles quand l’utilisateur a activé la réduction des animations.
Réseaux sociaux22 icônesLogos des réseaux sociaux et des outils sur lesquels développeurs et designers partagent leur travail : X, Instagram, YouTube, Discord, Telegram, Figma et d’autres. Ils s’animent au survol, ce qui rend les liens du footer et des profils visiblement cliquables.
Autres10 icônesDes 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.