Zum Inhalt springen
DE

64 Icons · MIT-Lizenz

Animierte Aktions-Icons

Die Verben einer Oberfläche: speichern, löschen, herunterladen, aktualisieren, liken, merken, suchen und Einstellungen. Jedes Icon bestätigt den Klick oder Hover, zu dem es gehört: Das Herz füllt sich, wenn man einen Beitrag likt, und der Deckel des Papierkorbs hebt sich, bevor man etwas löscht.

Die 64 Icons verteilen sich so: 2 laufen in Endlosschleife, 14 wechseln per Klick zwischen zwei Zuständen, 30 spielen bei jedem Klick erneut ab, 11 spielen bei Hover vorwärts und beim Verlassen rückwärts, 6 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, 61 davon zusätzlich als statisches SVG, kostenlos auch für kommerzielle Projekte unter der MIT-Lizenz.

Alle Icons der Kategorie „Aktionen“

Einsatzmöglichkeiten

  • Like-, Favoriten- und Merken-Buttons auf Karten
  • Download-, Upload- und Speichern-Buttons, die die Aktion bestätigen
  • Passwort anzeigen und verbergen im Login-Formular
  • Aktualisieren- und Sync-Buttons in Dashboards
  • Löschen-Buttons in Tabellen und Dateilisten
  • Suchfeld, das zum Leeren-Button wird

Nach Interaktion

  • Animierte Icons in Endlosschleife · 2

    Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen. Checkmark, Help.

  • Animierte Icons zum Umschalten per Klick · 14

    Wechselt per Klick zwischen zwei Zuständen; bei reduzierter Bewegung springt es sofort um. Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.

  • Animierte Icons mit Klick-Animation · 30

    Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung. Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.

  • Animierte Hover-Icons · 11

    Spielt bei mouseenter vorwärts und bei mouseleave rückwärts. Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.

  • Animierte Icons mit Hover-Replay · 6

    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. Award, Key, Maximize 2, Minimize 2, Shield, Slash.

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

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 heart durch den Namen, der auf der jeweiligen Icon-Seite steht.

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

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

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

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

<AnimatedHeart 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 „Aktionen“?

64 Icons: Award, Bookmark, Calendar, Check, Check Circle, Checkmark, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2 und 52 weitere. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

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

Installieren Sie react-useanimations, fügen Sie import heart from 'react-useanimations/lib/heart' hinzu und rendern Sie <UseAnimations animation={heart} 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/heart.json aus.

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

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