# Play/Pause animated icon

> Free Play/Pause animated icon that toggles between pause and play on click. MIT-licensed for React, shadcn/ui, Lottie JSON and SVG.

Play/Pause is a 0.27 s micro animation that toggles between two states on click; use it for play and pause controls. Its static SVGs cover the pause and play states, so the resting icon still shows which one is active. Also known as media control.

## Facts

- Interaction: [Click toggle](https://useanimations.com/interactions/click-toggle). Toggles between two states on click, or switches immediately when reduced motion is preferred.
- Category: [Media](https://useanimations.com/categories/media)
- Duration: 0.27 s at 30 fps
- Artboard: 32 × 32 px
- Lottie size: 1.6 kB
- License: MIT, attribution optional ([Licencing & Terms](https://useanimations.com/licencing-and-terms))

## Files

- Lottie JSON: https://useanimations.com/icons/play-pause.json
- Static SVG (pause): https://useanimations.com/icons/play-pause/pause.svg
- Static SVG (play): https://useanimations.com/icons/play-pause/play.svg
- ZIP (Lottie JSON and SVGs): https://useanimations.com/icons/play-pause.zip
- shadcn registry item: https://useanimations.com/r/play-pause.json
- Web page: https://useanimations.com/icons/play-pause

## React

```bash
npm install react-useanimations
```

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

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

## shadcn/ui

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

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

<AnimatedPlayPause size={24} />
```

## HTML and lottie-web

```html
<div id="play-pause-icon" style="width: 48px; height: 48px"></div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie_light.min.js"></script>
<script>
  const el = document.getElementById('play-pause-icon');
  const a = lottie.loadAnimation({ container: el, renderer: 'svg', loop: false, autoplay: false, path: 'https://useanimations.com/icons/play-pause.json' });
  const motion = matchMedia('(prefers-reduced-motion: reduce)');
  let isOn = true; // Frame 0 is on; the final frame is off.
  el.addEventListener('click', () => { isOn = !isOn; if (motion.matches) a.goToAndStop(isOn ? 0 : a.totalFrames - 1, true); else { a.setDirection(isOn ? -1 : 1); a.play(); } });
</script>
```

## FAQ

### Can my app decide whether Play/Pause shows pause or play?

Make it controlled: pass active and flip it in onClick, e.g. active={on} onClick={() => setOn(!on)}. true plays to the last frame and false back to the first; an icon that mounts with active already true starts there without animating, and with reduced motion it jumps instead of playing.

### How do I make Play/Pause an accessible button?

Put its events on a real button with the render prop: render={(events, icon) => <button aria-label="Play/Pause" aria-pressed={on} {...events}><span {...icon} /></button>}. The animation itself stays aria-hidden, and aria-pressed tells screen readers which state is on.

## Related icons

- [Play/Pause circle](https://useanimations.com/icons/play-pause-circle) (click-toggle)
- [Skip back](https://useanimations.com/icons/skip-back) (click-replay)
- [Skip forward](https://useanimations.com/icons/skip-forward) (click-replay)
- [Video](https://useanimations.com/icons/video) (click-toggle)
- [Microphone](https://useanimations.com/icons/microphone) (click-toggle)
- [Microphone V2](https://useanimations.com/icons/microphone-v2) (click-toggle)
- [Camera Off](https://useanimations.com/icons/camera-off) (click-toggle)
- [Mic Off](https://useanimations.com/icons/mic-off) (click-toggle)
- [Video V2](https://useanimations.com/icons/video-v2) (click-toggle)
- [Volume](https://useanimations.com/icons/volume) (click-toggle)
- [Video Off](https://useanimations.com/icons/video-off) (click-toggle)
- [Fast Forward](https://useanimations.com/icons/fast-forward) (hover-replay)

[All media icons](https://useanimations.com/categories/media) · [All icons](https://useanimations.com/icons)