Zum Inhalt springen
DE

34 Icons · MIT-Lizenz

Animierte Navigations- und Pfeil-Icons

Hamburger-Menüs, die sich in einen Schließen-Button verwandeln, dazu Pfeile, Chevrons und Eckpfeile, die bei Hover ein Stück in ihre Richtung rücken. So ist sofort klar, wohin ein Bedienelement führt: Drawer öffnen, zurückgehen, Zeile aufklappen, die Website verlassen.

Die 34 Icons verteilen sich so: 2 laufen in Endlosschleife, 4 wechseln per Klick zwischen zwei Zuständen, 6 spielen bei jedem Klick erneut ab und 22 spielen bei Hover einmal ab. 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 „Navigation“

Einsatzmöglichkeiten

  • Hamburger-Menü, das mobil zum Schließen-Button wird
  • Zurück- und Weiter-Buttons in Karussells und Paginierung
  • Chevrons in Akkordeons und Dropdowns
  • Hinweise „Nach oben“ und „Nach unten scrollen“
  • Links zum Anmelden und Abmelden
  • Markierungen für externe Links und Sidebar-Toggles

Nach Interaktion

  • Animierte Icons in Endlosschleife · 2

    Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen. More Horizontal, More Vertical.

  • Animierte Icons zum Umschalten per Klick · 4

    Wechselt per Klick zwischen zwei Zuständen; bei reduzierter Bewegung springt es sofort um. Burger Menu, Menu V2, Menu V3, Menu V4.

  • Animierte Icons mit Klick-Animation · 6

    Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung. Arrow down circle, Arrow left circle, Arrow right circle, Arrow up circle, Log In, Log Out.

  • Animierte Icons mit Hover-Replay · 22

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

In die eigene App einbauen

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

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

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

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

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

<AnimatedMenu 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 „Navigation“?

34 Icons: 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 und 22 weitere. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

Wie verwende ich die Icons der Kategorie „Navigation“ in React?

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

Kann ich die Icons der Kategorie „Navigation“ ohne React verwenden?

Ja. Jedes Icon ist eine Lottie-JSON-Datei unter https://useanimations.com/icons/<id>.json (zum Beispiel https://useanimations.com/icons/menu.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.