Zum Inhalt springen
DE

9 Icons · MIT-Lizenz

Animierte Karten- und Standort-Icons

Kartenpins, Navigationspfeile, Globen, Zielscheiben und Anker. Ein Pin, der bei Hover herunterfällt, hebt eine Filialsuche oder eine Lieferadresse hervor, und der Globus taugt als Umschalter für Sprache oder Region.

Die 9 Icons verteilen sich so: 8 spielen bei Hover einmal ab und 1 läuft in Schleife, solange der Mauszeiger darauf liegt. Jedes Icon gibt es als React-Komponente, als shadcn/ui-Komponente und als Lottie-JSON-Animation, außerdem als statisches SVG, kostenlos auch für kommerzielle Projekte unter der MIT-Lizenz.

Alle Icons der Kategorie „Karten & Standort“

Einsatzmöglichkeiten

  • Filialsuche und Adressfelder
  • Buttons für aktuellen Standort und Routenplanung
  • Auswahl von Sprache und Region
  • Liefer- und Sendungsverfolgung
  • Reise- und Buchungs-Apps

Nach Interaktion

  • Animierte Icons mit Hover-Replay · 8

    Spielt bei mouseenter einmal ab, außer bei reduzierter Bewegung. Verlassen stoppt die Animation nicht, und erneutes Betreten während der Wiedergabe startet sie nicht neu. Anchor, Crosshair, Life Buoy, Map, Map Pin, Navigation, Navigation 2, Target.

  • Animierte Icons mit Hover-Loop · 1

    Läuft in Schleife, solange der Mauszeiger darauf liegt, spielt nach mouseleave den aktuellen Durchlauf zu Ende und bleibt bei reduzierter Bewegung statisch. Globe.

In die eigene App einbauen

Mit React installieren Sie react-useanimations und importieren das Icon; seine Interaktion „Hover-Replay“ spielt es von selbst ab. Alle Icons dieser Kategorie funktionieren gleich: Ersetzen Sie mapPin durch den Namen, der auf der jeweiligen Icon-Seite steht.

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

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

Mit shadcn/ui fügt die CLI eine fertige Komponente hinzu:

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

<AnimatedMapPin size={24} />

Kein React im Einsatz? Jedes Icon ist eine Lottie-JSON-Datei unter /icons/<id>.json; Player für Web, iOS, Android und Flutter finden Sie unter Lottie-Icons.

Häufige Fragen

Welche Icons enthält die Kategorie „Karten & Standort“?

9 Icons: Anchor, Crosshair, Globe, Life Buoy, Map, Map Pin, Navigation, Navigation 2 und Target. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

Wie verwende ich die Icons der Kategorie „Karten & Standort“ in React?

Installieren Sie react-useanimations, fügen Sie import mapPin from 'react-useanimations/lib/mapPin' hinzu und rendern Sie <UseAnimations animation={mapPin} size={32} />. Das Icon spielt seine Interaktion „Hover-Replay“ ab und übernimmt die Textfarbe. Mit shadcn/ui führen Sie stattdessen npx shadcn@latest add https://useanimations.com/r/map-pin.json aus.

Kann ich die Icons der Kategorie „Karten & Standort“ ohne React verwenden?

Ja. Jedes Icon ist eine Lottie-JSON-Datei unter https://useanimations.com/icons/<id>.json (zum Beispiel https://useanimations.com/icons/map-pin.json), abspielbar mit lottie-web, lottie-ios, lottie-android oder dem Flutter-Paket lottie; statische SVGs finden Sie auf der jeweiligen Icon-Seite (die Icon-Seiten sind nur auf Englisch verfügbar). Keines davon nutzt Expressions, der Light-Build von lottie-web reicht also aus.