28 iconos · licencia MIT

Iconos animados de reproductor multimedia

Reproducir y pausar, volumen, micrófono, cámara, saltar y aleatorio para reproductores de audio y vídeo. Los iconos que alternan cambian entre sus dos estados, de reproducir a pausa o de micrófono a silenciado, así que el botón siempre muestra lo que hará el siguiente clic.

De los 28 iconos, 1 se reproduce sin parar, 10 alternan entre dos estados al hacer clic, 6 se repiten con cada clic y 11 se reproducen una vez con hover. Cada uno se ofrece como componente de React, componente de shadcn/ui, animación Lottie JSON y SVG estático, gratis para uso comercial con la licencia MIT.

Todos los iconos de multimedia

Dónde usarlos

Botones de reproducir y pausar en reproductores de audio y vídeo
Controles para silenciar y activar el micrófono en videollamadas
Botones para encender y apagar la cámara en apps de reuniones
Controles de lista de reproducción para saltar, repetir y reproducir en aleatorio
Botones de transmisión y AirPlay
Controles de apps de pódcast y música

Por interacción

Iconos animados en bucle · 1
Se reproduce sin parar; se queda en el primer fotograma estático si se prefiere movimiento reducido. Airplay.
Iconos animados que alternan con un clic · 10
Alterna entre dos estados al hacer clic, o cambia de inmediato si se prefiere movimiento reducido. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Iconos animados al hacer clic · 6
Se reproduce una vez desde el principio con cada clic, salvo que se prefiera movimiento reducido. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Iconos animados que se reproducen con hover · 11
Se reproduce una vez con mouseenter, salvo que se prefiera movimiento reducido. Salir no lo detiene, y volver a entrar durante la reproducción no lo reinicia. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Añade uno a tu app

Con React, instala react-useanimations e importa el icono; reproducirá por sí solo su interacción “Alternar con clic”. Todos los iconos de esta categoría funcionan igual: cambia playPause por el nombre que aparece en la página de cada uno.

npm install react-useanimations

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

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

Con shadcn/ui, la CLI añade un componente listo para usar:

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

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

<AnimatedPlayPause size={24} />

¿No usas React? Cada icono es un archivo Lottie JSON en /icons/<id>.json; en Iconos Lottie encontrarás reproductores para web, iOS, Android y Flutter.

Preguntas frecuentes

¿Qué iconos animados de reproductor multimedia se incluyen?

28 iconos: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 y 16 más. Todos son gratis para proyectos personales y comerciales con la licencia MIT, sin necesidad de atribución.

¿Cómo uso estos iconos animados de reproductor multimedia en React?

Instala react-useanimations, añade import playPause from 'react-useanimations/lib/playPause' y renderiza <UseAnimations animation={playPause} size={32} />. El icono reproduce su interacción “Alternar con clic” y sigue el color del texto. Con shadcn/ui, ejecuta en su lugar npx shadcn@latest add https://useanimations.com/r/play-pause.json.

¿Puedo usar estos iconos animados de reproductor multimedia sin React?

Sí. Cada icono es un archivo Lottie JSON en https://useanimations.com/icons/<id>.json (por ejemplo, https://useanimations.com/icons/play-pause.json) que se reproduce con lottie-web, lottie-ios, lottie-android o el paquete lottie de Flutter; los SVG estáticos están en la página de cada icono (en inglés). Ninguno usa expresiones, así que basta con la versión ligera de lottie-web.