# Animated media player icons

> 28 free animated media player icons, including Airplay, Aperture and Camera. For React, shadcn/ui and Lottie JSON, MIT licensed.

Play and pause, volume, microphone, camera, skip and shuffle for audio and video players. The toggling icons switch between their two states, play to pause or mic to muted, so the button always shows what a click will do.

Of the 28 icons, 1 loops continuously, 10 toggle between two states on click, 6 replay on every click and 11 play once on hover. Each one comes as a React component, a shadcn/ui component and a Lottie JSON animation with static SVGs, free for commercial use under the MIT license.

## Icons

- [Airplay](https://useanimations.com/icons/airplay) (`airplay`, loop)
- [Aperture](https://useanimations.com/icons/aperture) (`aperture`, hover-replay)
- [Camera](https://useanimations.com/icons/camera) (`camera`, click-replay)
- [Camera Off](https://useanimations.com/icons/camera-off) (`cameraOff`, click-toggle)
- [Cast](https://useanimations.com/icons/cast) (`cast`, hover-replay)
- [Disc](https://useanimations.com/icons/disc) (`disc`, hover-replay)
- [Fast Forward](https://useanimations.com/icons/fast-forward) (`fastForward`, hover-replay)
- [Film](https://useanimations.com/icons/film) (`film`, hover-replay)
- [Headphones](https://useanimations.com/icons/headphones) (`headphones`, hover-replay)
- [Mic Off](https://useanimations.com/icons/mic-off) (`micOff`, click-toggle)
- [Microphone](https://useanimations.com/icons/microphone) (`microphone`, click-toggle)
- [Microphone V2](https://useanimations.com/icons/microphone-v2) (`microphone2`, click-toggle)
- [Music](https://useanimations.com/icons/music) (`music`, hover-replay)
- [Play/Pause](https://useanimations.com/icons/play-pause) (`playPause`, click-toggle)
- [Play/Pause circle](https://useanimations.com/icons/play-pause-circle) (`playPauseCircle`, click-toggle)
- [Radio](https://useanimations.com/icons/radio) (`radio`, hover-replay)
- [Repeat](https://useanimations.com/icons/repeat) (`repeat`, click-replay)
- [Rewind](https://useanimations.com/icons/rewind) (`rewind`, hover-replay)
- [Shuffle](https://useanimations.com/icons/shuffle) (`shuffle`, click-replay)
- [Skip back](https://useanimations.com/icons/skip-back) (`skipBack`, click-replay)
- [Skip forward](https://useanimations.com/icons/skip-forward) (`skipForward`, click-replay)
- [Speaker](https://useanimations.com/icons/speaker) (`speaker`, hover-replay)
- [Stop Circle](https://useanimations.com/icons/stop-circle) (`stopCircle`, click-replay)
- [TV](https://useanimations.com/icons/tv) (`tv`, hover-replay)
- [Video](https://useanimations.com/icons/video) (`video`, click-toggle)
- [Video Off](https://useanimations.com/icons/video-off) (`videoOff`, click-toggle)
- [Video V2](https://useanimations.com/icons/video-v2) (`video2`, click-toggle)
- [Volume](https://useanimations.com/icons/volume) (`volume`, click-toggle)

## Where to use them

- Play and pause buttons in audio and video players
- Mute and unmute controls in video calls
- Camera on and off toggles in meeting apps
- Playlist controls for skip, repeat and shuffle
- Casting and AirPlay buttons
- Podcast and music app controls

## By interaction

- [Looping animated icons](https://useanimations.com/interactions/loop) (1): Plays continuously; stays on the static first frame when reduced motion is preferred.
- [Click-to-toggle animated icons](https://useanimations.com/interactions/click-toggle) (10): Toggles between two states on click, or switches immediately when reduced motion is preferred.
- [Click animated icons](https://useanimations.com/interactions/click-replay) (6): Replays once from the start on every click unless reduced motion is preferred.
- [Hover-to-play animated icons](https://useanimations.com/interactions/hover-replay) (11): Plays once on mouseenter unless reduced motion is preferred. Leaving does not stop it; entering during playback does not restart it.

## Code

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

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

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

Every icon is also a Lottie JSON file at `https://useanimations.com/icons/<id>.json`: [Lottie icons](https://useanimations.com/lottie-icons).

## FAQ

### Which animated media player icons are included?

28 icons: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 and 16 more. All of them are free for personal and commercial projects under the MIT license, with no attribution required.

### How do I use these animated media player icons in React?

Install react-useanimations, add import playPause from 'react-useanimations/lib/playPause' and render <UseAnimations animation={playPause} size={32} />. The icon plays its click toggle interaction and follows the text color. With shadcn/ui, run npx shadcn@latest add https://useanimations.com/r/play-pause.json instead.

### Can I use these animated media player icons without React?

Yes. Each icon is a Lottie JSON file at https://useanimations.com/icons/<id>.json (for example https://useanimations.com/icons/play-pause.json), playable with lottie-web, lottie-ios, lottie-android or Flutter's lottie package; static SVGs are on each icon page. None of them use expressions, so lottie-web's light build is enough.

## More categories

- [Animated alert icons](https://useanimations.com/categories/alerts) (5)
- [Animated notification bell icons](https://useanimations.com/categories/notifications) (4)
- [Animated navigation and arrow icons](https://useanimations.com/categories/navigation) (34)
- [Animated action icons](https://useanimations.com/categories/action) (64)
- [Animated file, folder and user icons](https://useanimations.com/categories/content) (22)
- [Animated form control icons](https://useanimations.com/categories/form) (3)
- [Animated text editing icons](https://useanimations.com/categories/text-editing) (10)
- [Animated communication icons](https://useanimations.com/categories/communication) (13)
- [Animated device icons](https://useanimations.com/categories/devices) (12)
- [Animated weather icons](https://useanimations.com/categories/weather) (16)
- [Animated map and location icons](https://useanimations.com/categories/maps-location) (9)
- [Animated e-commerce icons](https://useanimations.com/categories/commerce) (11)
- [Animated chart icons](https://useanimations.com/categories/charts) (5)
- [Animated developer icons](https://useanimations.com/categories/development) (9)
- [Animated design and layout icons](https://useanimations.com/categories/design-layout) (10)
- [Animated shape and math icons](https://useanimations.com/categories/shapes-math) (8)
- [Animated loading icons](https://useanimations.com/categories/loading) (5)
- [Animated social media icons](https://useanimations.com/categories/social-media) (22)
- [More animated icons](https://useanimations.com/categories/other) (10)

HTML version: https://useanimations.com/categories/media