22 Icons · MIT-Lizenz

Animierte Datei-, Ordner- und Nutzer-Icons

Dateien, Ordner, Bücher, Mail, Anhänge und Personen. Sie kennzeichnen die Dinge, mit denen Nutzer arbeiten, und dank der Varianten zum Hinzufügen, Entfernen und Abhaken reagieren Listen und Teamverwaltung spürbar auf jede Aktion.

Die 22 Icons verteilen sich so: 5 spielen bei jedem Klick erneut ab, 7 spielen bei Hover vorwärts und beim Verlassen rückwärts und 10 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 „Inhalte“

Einsatzmöglichkeiten

Dateimanager und Dokumentlisten
Buttons für Anhänge und „In die Zwischenablage kopieren“
Posteingang und Archiv in Mail-Clients
Teamlisten mit Aktionen zum Hinzufügen und Entfernen von Nutzern
Teilen-Menüs für Dokumente und Links

Nach Interaktion

Animierte Icons mit Klick-Animation · 5
Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung. File Minus, File Plus, Folder Minus, Folder Plus, User Check.
Animierte Hover-Icons · 7
Spielt bei mouseenter vorwärts und bei mouseleave rückwärts. Archive, Copy, Mail, Share, User minus, User plus, User X.
Animierte Icons mit Hover-Replay · 10
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. Book, Book Open, Clipboard, File, File Text, Image, Inbox, Paperclip, User, Users.

In die eigene App einbauen

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

npm install react-useanimations

import UseAnimations from 'react-useanimations';
import copy from 'react-useanimations/lib/copy';

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

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

npx shadcn@latest add https://useanimations.com/r/copy.json

import { AnimatedCopy } from '@/components/animations/copy';

<AnimatedCopy 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 „Inhalte“?

22 Icons: Archive, Book, Book Open, Clipboard, Copy, File, File Minus, File Plus, File Text, Folder Minus, Folder Plus, Image und 10 weitere. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

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

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

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

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