28 icônes · licence MIT

Icônes animées de lecteur multimédia

Lecture et pause, volume, micro, caméra, piste suivante et lecture aléatoire pour les lecteurs audio et vidéo. Les icônes à bascule passent d’un état à l’autre, de lecture à pause ou de micro à micro coupé, si bien que le bouton montre toujours ce que fera le prochain clic.

Sur les 28 icônes, 1 boucle en continu, 10 basculent entre deux états au clic, 6 se rejouent à chaque clic et 11 se jouent une fois au survol. Chacune est disponible en composant React, en composant shadcn/ui et en animation Lottie JSON, ainsi qu’en SVG statique, gratuitement pour un usage commercial sous licence MIT.

Toutes les icônes multimédia

Où les utiliser

Boutons lecture et pause des lecteurs audio et vidéo
Activation et coupure du micro en visioconférence
Activation et désactivation de la caméra dans les apps de réunion
Contrôles de playlist : piste suivante, répétition et lecture aléatoire
Boutons Cast et AirPlay
Contrôles des apps de podcast et de musique

Par interaction

Icônes animées en boucle · 1
Joue en continu ; reste sur la première image, fixe, quand la réduction des animations est activée. Airplay.
Icônes animées à bascule au clic · 10
Bascule entre deux états au clic, ou change d’état immédiatement quand la réduction des animations est activée. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Icônes animées au clic · 6
Rejoue une fois l’animation depuis le début à chaque clic, sauf si la réduction des animations est activée. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Icônes animées à lecture au survol · 11
Se joue une fois sur mouseenter, sauf si la réduction des animations est activée. Sortir ne l’arrête pas ; entrer pendant la lecture ne la relance pas. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

En ajouter une à votre app

Avec React, installez react-useanimations et importez l’icône : elle joue d’elle-même son interaction « bascule au clic ». Toutes les icônes de cette catégorie fonctionnent de la même façon : remplacez playPause par le nom indiqué sur leur page.

npm install react-useanimations

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

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

Avec shadcn/ui, la CLI ajoute un composant prêt à l’emploi :

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

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

<AnimatedPlayPause size={24} />

Vous n’utilisez pas React ? Chaque icône est un fichier Lottie JSON à l’adresse /icons/<id>.json ; la page Icônes Lottie présente les lecteurs pour le web, iOS, Android et Flutter.

Questions fréquentes

Quelles icônes animées de lecteur multimédia sont incluses ?

28 icônes : Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 et 16 autres. Toutes sont gratuites pour les projets personnels et commerciaux sous licence MIT, sans attribution obligatoire.

Comment utiliser ces icônes animées de lecteur multimédia dans React ?

Installez react-useanimations, ajoutez import playPause from 'react-useanimations/lib/playPause' et affichez <UseAnimations animation={playPause} size={32} />. L’icône joue son interaction « bascule au clic » et suit la couleur du texte. Avec shadcn/ui, lancez plutôt npx shadcn@latest add https://useanimations.com/r/play-pause.json.

Puis-je utiliser ces icônes animées de lecteur multimédia sans React ?

Oui. Chaque icône est un fichier Lottie JSON disponible à l’adresse https://useanimations.com/icons/<id>.json (par exemple https://useanimations.com/icons/play-pause.json), lisible avec lottie-web, lottie-ios, lottie-android ou le package lottie de Flutter ; les SVG statiques se trouvent sur la page de chaque icône (en anglais). Aucune n’utilise d’expressions : la version light de lottie-web suffit.