28 ícones · licença MIT

Ícones animados de player de mídia

Play e pause, volume, microfone, câmera, pular e aleatório para players de áudio e vídeo. Os ícones que alternam trocam entre seus dois estados, de play para pause ou de microfone ligado para mudo, então o botão sempre mostra o que o clique vai fazer.

Dos 28 ícones, 1 fica em loop contínuo, 10 alternam entre dois estados no clique, 6 tocam de novo a cada clique e 11 tocam uma vez no hover. Cada um vem como componente React, componente shadcn/ui e animação Lottie JSON, além de SVGs estáticos, e é gratuito para uso comercial sob a licença MIT.

Onde usar

Botões de play e pause em players de áudio e vídeo
Controles de mudo em chamadas de vídeo
Botões de ligar e desligar a câmera em apps de reunião
Controles de playlist para pular, repetir e ordem aleatória
Botões de transmissão e AirPlay
Controles de apps de podcast e música

Por interação

Ícones animados em loop · 1
Toca continuamente; fica no primeiro frame estático quando o usuário prefere movimento reduzido. Airplay.
Ícones animados que alternam no clique · 10
Alterna entre dois estados no clique, ou troca na hora quando o usuário prefere movimento reduzido. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Ícones animados no clique · 6
Toca de novo desde o início a cada clique, a menos que o usuário prefira movimento reduzido. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Ícones animados que tocam no hover · 11
Toca uma vez no mouseenter, a menos que o usuário prefira movimento reduzido. Sair não interrompe a animação, e entrar durante a reprodução não a reinicia. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Adicione um ao seu app

Com React, instale o react-useanimations e importe o ícone; ele executa a interação “Alternar no clique” sozinho. Todos os ícones desta categoria funcionam do mesmo jeito: troque playPause pelo nome que aparece na página do ícone.

npm install react-useanimations

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

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

Com o shadcn/ui, a CLI adiciona um componente pronto:

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

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

<AnimatedPlayPause size={24} />

Não usa React? Cada ícone é um arquivo Lottie JSON em /icons/<id>.json; veja em Ícones Lottie os players para web, iOS, Android e Flutter.

Perguntas frequentes

Quais ícones animados de player de mídia estão incluídos?

28 ícones: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 e mais 16. Todos são gratuitos para projetos pessoais e comerciais sob a licença MIT, sem exigência de atribuição.

Como uso estes ícones animados de player de mídia no React?

Instale o react-useanimations, adicione import playPause from 'react-useanimations/lib/playPause' e renderize <UseAnimations animation={playPause} size={32} />. O ícone executa a interação “Alternar no clique” e segue a cor do texto. Se você usa shadcn/ui, rode npx shadcn@latest add https://useanimations.com/r/play-pause.json.

Posso usar estes ícones animados de player de mídia sem React?

Sim. Cada ícone é um arquivo Lottie JSON em https://useanimations.com/icons/<id>.json (por exemplo, https://useanimations.com/icons/play-pause.json), que pode ser reproduzido com lottie-web, lottie-ios, lottie-android ou o pacote lottie do Flutter; os SVGs estáticos ficam na página de cada ícone (em inglês). Nenhum deles usa expressões, então o build light do lottie-web é suficiente.

Todos os ícones de mídia

Onde usar

Por interação

Adicione um ao seu app

Perguntas frequentes