Aller au contenu
FR

34 icônes · licence MIT

Icônes animées de navigation et de flèches

Des 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.

Sur les 34 icônes, 2 bouclent en continu, 4 basculent entre deux états au clic, 6 se rejouent à chaque clic et 22 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 de navigation

Où les utiliser

  • Menu hamburger qui devient un bouton de fermeture sur mobile
  • Boutons précédent et suivant des carrousels et de la pagination
  • Chevrons des accordéons et des menus déroulants
  • Retour en haut de page et invitations à faire défiler
  • Liens de connexion et de déconnexion
  • Marqueurs de liens externes et boutons de barre latérale

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. More Horizontal, More Vertical.

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

    Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Icônes animées au clic · 6

    Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

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

    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. Arrow Down Left, Arrow Down Right, Arrow Left, Arrow Right, Arrow Up Left, Arrow Up Right, Chevron Down, Chevron Up, Chevrons Down, Chevrons Left, Chevrons Right, Chevrons Up, Corner Down Left, Corner Down Right, Corner Left Down, Corner Left Up, Corner Right Down, Corner Right Up, Corner Up Left, Corner Up Right, External Link, Sidebar.

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 menu par le nom indiqué sur leur page.

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

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

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

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

<AnimatedMenu 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 de navigation et de flèches sont incluses ?

34 icônes : Arrow down circle, Arrow Down Left, Arrow Down Right, Arrow Left, Arrow left circle, Arrow Right, Arrow right circle, Arrow up circle, Arrow Up Left, Arrow Up Right, Burger Menu, Chevron Down et 22 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de navigation et de flèches dans React ?

Installez react-useanimations, ajoutez import menu from 'react-useanimations/lib/menu' et affichez <UseAnimations animation={menu} 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/menu.json.

Puis-je utiliser ces icônes animées de navigation et de flèches 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/menu.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.