Skip to content

9 icons · MIT licensed

Animated map and location icons

Map pins, navigation arrows, globes, targets and anchors. A pin that drops on hover helps a store locator or delivery address stand out, and the globe works as a language or region switcher.

Of the 9 icons, 8 play once on hover and 1 loops while hovered. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

All maps & location icons

Where to use them

  • Store locators and address fields
  • Current location and directions buttons
  • Language and region selectors
  • Delivery and order tracking
  • Travel and booking apps

By interaction

  • Hover-to-play animated icons · 8

    Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Hover loop animated icons · 1

    Loops while hovered, finishes the current cycle after mouseleave and stays static when reduced motion is preferred. Globe.

Add one to your app

With React, install react-useanimations and import the icon; it plays its hover replay interaction on its own. Every icon in this category works the same way: swap mapPin for the name on its page.

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

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

With shadcn/ui, the CLI adds a ready-made component:

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

<AnimatedMapPin size={24} />

Not using React? Each icon is a Lottie JSON file at /icons/<id>.json; see Lottie icons for web, iOS, Android and Flutter players.

FAQ

Which animated map and location icons are included?

9 icons: Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 and Target. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

How do I use these animated map and location icons in React?

Install react-useanimations, add import mapPin from 'react-useanimations/lib/mapPin' and render <UseAnimations animation={mapPin} size={32} />. The icon plays its hover replay interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/map-pin.json instead.

Can I use these animated map and location icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/map-pin.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.