- Interaction
- Click toggle
- Category
- Media
- Duration
- 0.27 s
- Frame rate
- 30 fps
- Artboard
- 32 × 32 px
- Lottie size
- 1.6 kB
Play/Pause
Animated play/pause icon
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.
Free under the MIT license · Markdown version · About the files
Use it
npm install react-useanimationsimport UseAnimations from 'react-useanimations';
import playPause from 'react-useanimations/lib/playPause';
<UseAnimations animation={playPause} size={32} />npx shadcn@latest add https://useanimations.com/r/play-pause.jsonimport { AnimatedPlayPause } from '@/components/animations/play-pause';
<AnimatedPlayPause size={24} /><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>Play/Pause runs on the light build, lottie_light.min.js.
import LottieView from 'lottie-react-native';
<LottieView source={{ uri: 'https://useanimations.com/icons/play-pause.json' }} autoPlay loop={false} style={{ width: 48, height: 48 }} />import Lottie
LottieView {
await LottieAnimation.loadedFrom(url: URL(string: "https://useanimations.com/icons/play-pause.json")!)
}
.playing(loopMode: .playOnce)
.frame(width: 48, height: 48)val composition by rememberLottieComposition(LottieCompositionSpec.Url("https://useanimations.com/icons/play-pause.json"))
LottieAnimation(composition, iterations = 1, modifier = Modifier.size(48.dp))import 'package:lottie/lottie.dart';
Lottie.network('https://useanimations.com/icons/play-pause.json', width: 48, height: 48, repeat: false)Bundle play-pause.json with the app to use it offline.
<img src="https://useanimations.com/icons/play-pause/pause.svg" alt="Play/Pause" width="24" height="24" />
<img src="https://useanimations.com/icons/play-pause/play.svg" alt="Play/Pause" width="24" height="24" />Inside <img> the SVG draws black; inline it to follow the text color.
Static SVG
Questions about the Play/Pause icon
›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.