Aller au contenu
FR

9 icônes · licence MIT

Icônes animées de carte et de localisation

Repè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.

Sur les 9 icônes, 8 se jouent une fois au survol et 1 boucle pendant le 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 carte et de localisation

Où les utiliser

  • Localisateurs de magasins et champs d’adresse
  • Boutons de position actuelle et d’itinéraire
  • Sélecteurs de langue et de région
  • Suivi de livraison et de commande
  • Apps de voyage et de réservation

Par interaction

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

    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. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Icônes animées en boucle au survol · 1

    Boucle pendant le survol, termine le cycle en cours après mouseleave et reste fixe quand la réduction des animations est activée. Globe.

En ajouter une à votre app

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

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

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

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

npx shadcn@latest add https://useanimations.com/r/map-pin.json
import { AnimatedMapPin } from '@/components/animations/map-pin';

<AnimatedMapPin 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 carte et de localisation sont incluses ?

9 icônes : Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 et Target. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de carte et de localisation dans React ?

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

Puis-je utiliser ces icônes animées de carte et de localisation 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/map-pin.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.