28 Icons · MIT-Lizenz

Animierte Mediaplayer-Icons

Play und Pause, Lautstärke, Mikrofon, Kamera, Überspringen und Zufallswiedergabe für Audio- und Videoplayer. Die umschaltbaren Icons wechseln zwischen ihren beiden Zuständen, von Play zu Pause oder vom Mikrofon zum stummgeschalteten Mikrofon, sodass der Button immer zeigt, was ein Klick bewirkt.

Die 28 Icons verteilen sich so: 1 läuft in Endlosschleife, 10 wechseln per Klick zwischen zwei Zuständen, 6 spielen bei jedem Klick erneut ab und 11 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 „Medien“

Einsatzmöglichkeiten

Play- und Pause-Buttons in Audio- und Videoplayern
Stummschalten in Videocalls
Kamera ein und aus in Meeting-Apps
Playlist-Steuerung für Überspringen, Wiederholen und Zufallswiedergabe
Buttons für Casting und AirPlay
Steuerelemente in Podcast- und Musik-Apps

Nach Interaktion

Animierte Icons in Endlosschleife · 1
Läuft ununterbrochen; bleibt bei reduzierter Bewegung auf dem statischen ersten Frame stehen. Airplay.
Animierte Icons zum Umschalten per Klick · 10
Wechselt per Klick zwischen zwei Zuständen; bei reduzierter Bewegung springt es sofort um. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Animierte Icons mit Klick-Animation · 6
Spielt bei jedem Klick einmal von vorn ab, außer bei reduzierter Bewegung. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Animierte Icons mit Hover-Replay · 11
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. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/play-pause.json

import { AnimatedPlayPause } from '@/components/animations/play-pause';

<AnimatedPlayPause 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 „Medien“?

28 Icons: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 und 16 weitere. Alle sind unter der MIT-Lizenz kostenlos für private und kommerzielle Projekte nutzbar, ohne Namensnennung.

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

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

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

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