Aller au contenu
FR
v3300 icônes · zéro dépendance · MIT→

Des icônes qui prennent vie.

Icônes animées gratuites pour React, shadcn/ui et Lottie

300 micro-animations faites main, avec des micro-interactions au survol, au clic et en boucle déjà intégrées. Utilisez-les comme composant React, ajoutez-les avec shadcn ou téléchargez-les en SVG et en Lottie JSON. Sous licence MIT.

Parcourir les icônes

Passez le pointeur sur le champ d’icônes.

icônes animées
300
icônes animées
interactions intégrées
6
interactions intégrées
pour le lecteur, gzippé
8 kB
pour le lecteur, gzippé
dépendance
0
dépendance

Interactions intégrées

Chaque icône sait comment bouger.

Chaque icône est livrée avec l’interaction pour laquelle elle a été conçue. Il suffit de l’ajouter pour qu’elle fonctionne, ou d’en choisir une autre avec une seule prop. Essayez :

La bibliothèque

300 icônes animées gratuites

Survolez ou cliquez pour lancer l’animation. Ouvrez une icône pour obtenir son code et ses fichiers : Lottie JSON, SVG et ZIP.

300 icônes

Alertes

Notifications

Navigation

Actions

Contenu

Formulaires

Médias

Édition de texte

Communication

Appareils

Météo

Cartes et localisation

E-commerce

Graphiques

Développement

Design et mise en page

Formes et maths

Chargement

Réseaux sociaux

Autres

Utilisez-les à votre façon

Installer, importer, c’est tout.

Un composant React sans dépendance, un registre shadcn, des fichiers téléchargeables aux URL stables et un catalogue lisible par les agents IA.

Lire la documentation →
import UseAnimations from 'react-useanimations';
import menu from 'react-useanimations/lib/menu';

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

Légères, accessibles et faciles à styler.

Suit vos couleurs

Les icônes utilisent currentColor : elles reprennent d’elles-mêmes la couleur du texte, les états de survol et le mode sombre. Pour en changer, passez par une prop, une classe ou du CSS classique.

Légère par conception

8 kB

Un lecteur intégré, zéro dépendance. Chaque icône est un module à part de 2 kB.

Accessible par défaut

Respecte la réduction des animations, joue les animations de survol au focus clavier et reste invisible pour les lecteurs d’écran, sauf si vous lui donnez un libellé.

Prête pour le rendu serveur

Un composant client qui s’affiche sans risque dans Next.js, Remix et Astro. Les icônes sont de simples données, importables n’importe où.

Pensée pour les agents

Un catalogue typé avec des mots-clés pour chaque icône, icons.json, llms.txt et une documentation en Markdown.

Trouvez la bonne micro-animation.

Questions fréquentes

Que sont les micro-animations et les icônes animées ?

Les micro-animations sont des mouvements courts, au rôle unique, qui répondent à une action de l’utilisateur : une icône de menu qui se transforme en bouton de fermeture, un cœur qui se remplit quand on aime une publication, une cloche qui sonne à l’arrivée d’une notification. Les icônes animées en sont la forme la plus courante. Elles rendent une interface plus réactive et signalent les changements d’état sans texte supplémentaire.

Quelle différence entre les fichiers Lottie et SVG ?

Le fichier Lottie JSON contient toute l’animation et se lit dans n’importe quel lecteur Lottie, y compris celui intégré à react-useanimations. Les fichiers SVG sont des images fixes de l’icône au repos, une par état (par exemple eye et eye-off), pour les endroits où rien ne doit bouger : e-mails, documents, outils de design ou solution de repli sans JavaScript.

Est-ce compatible avec Next.js et le rendu côté serveur ?

Oui. Le composant est marqué 'use client' et ne dessine l’animation que dans le navigateur : il s’affiche donc depuis les server components et les frameworks SSR comme Next.js, Remix et Astro, sans import dynamique. Les modules d’icônes sont de simples données que les server components peuvent importer et transmettre en props. Next.js et rendu côté serveur →

Puis-je utiliser les icônes dans des projets commerciaux ?

Oui. Les icônes et le package react-useanimations sont sous licence MIT : utilisez-les, modifiez-les et redistribuez-les dans vos projets personnels et commerciaux. L’attribution est appréciée, mais pas obligatoire. Licence et conditions →

Puis-je utiliser les icônes sans React ?

Oui. Chaque icône est un fichier Lottie JSON standard : elle se lit avec lottie-web en JavaScript pur, dans Vue, Svelte, Angular ou un CMS, ainsi qu’avec les lecteurs Lottie pour iOS, Android et Flutter. La page Icônes Lottie donne les URL des fichiers et des extraits lottie-web prêts à l’emploi pour chaque interaction. Icônes Lottie →

Quel poids les icônes ajoutent-elles à mon bundle ?

Le lecteur de react-useanimations 3.1.1 pèse environ 8 kB gzippé, sans dépendance, et chaque icône est un module à part de 1 à 15 kB (2 kB en médiane) : votre bundle ne contient que les icônes que vous importez.

Donnez du rythme à votre interface.

Gratuit et sous licence MIT, pour vos projets personnels et commerciaux.

Commencer