Langsung ke konten
ID

28 ikon · Berlisensi MIT

Ikon animasi pemutar media

Play dan pause, volume, mikrofon, kamera, skip, dan shuffle untuk pemutar audio dan video. Ikon toggle beralih di antara dua keadaannya, dari play ke pause atau dari mikrofon ke bisu, sehingga tombol selalu menunjukkan apa yang akan terjadi saat diklik.

Dari 28 ikon di kategori ini, 1 berputar terus-menerus, 10 beralih antara dua keadaan saat diklik, 6 diputar ulang setiap kali diklik, dan 11 diputar sekali saat di-hover. Setiap ikon tersedia sebagai komponen React, komponen shadcn/ui, dan animasi Lottie JSON, lengkap dengan SVG statis. Semuanya gratis untuk penggunaan komersial di bawah lisensi MIT.

Semua ikon media

Tempat memakainya

  • Tombol play dan pause di pemutar audio dan video
  • Kontrol bisukan dan aktifkan suara di panggilan video
  • Toggle kamera nyala dan mati di aplikasi rapat
  • Kontrol playlist untuk skip, ulangi, dan acak
  • Tombol casting dan AirPlay
  • Kontrol aplikasi podcast dan musik

Berdasarkan interaksi

  • Ikon animasi loop · 1

    Berputar terus-menerus; jika reduced motion dipilih, ikon tetap diam di frame pertama. Airplay.

  • Ikon animasi toggle saat diklik · 10

    Beralih antara dua keadaan saat diklik, atau langsung berpindah jika reduced motion dipilih. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.

  • Ikon animasi klik · 6

    Diputar ulang sekali dari awal setiap kali diklik, kecuali jika reduced motion dipilih. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.

  • Ikon animasi yang diputar saat hover · 11

    Diputar sekali saat mouseenter, kecuali jika reduced motion dipilih. Keluar dari ikon tidak menghentikannya, dan masuk lagi selama animasi berjalan tidak memulainya ulang. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Tambahkan ke aplikasi Anda

Di React, instal react-useanimations lalu import ikonnya; ikon langsung menjalankan interaksi toggle saat klik bawaannya. Semua ikon di kategori ini bekerja dengan cara yang sama: ganti playPause dengan nama yang tertera di halaman ikonnya.

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

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

Dengan shadcn/ui, CLI-nya menambahkan komponen siap pakai:

npx shadcn@latest add https://useanimations.com/r/play-pause.json
import { AnimatedPlayPause } from '@/components/animations/play-pause';

<AnimatedPlayPause size={24} />

Tidak memakai React? Setiap ikon adalah file Lottie JSON di /icons/<id>.json; lihat Ikon Lottie untuk player web, iOS, Android, dan Flutter.

FAQ

Ikon animasi pemutar media apa saja yang tersedia?

28 ikon: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2, dan 16 lainnya. Semuanya gratis untuk proyek pribadi maupun komersial di bawah lisensi MIT, tanpa kewajiban atribusi.

Bagaimana cara memakai ikon animasi pemutar media ini di React?

Instal react-useanimations, tambahkan import playPause from 'react-useanimations/lib/playPause', lalu render <UseAnimations animation={playPause} size={32} />. Ikon menjalankan interaksi toggle saat klik bawaannya dan mengikuti warna teks. Jika memakai shadcn/ui, jalankan npx shadcn@latest add https://useanimations.com/r/play-pause.json sebagai gantinya.

Bisakah ikon animasi pemutar media ini dipakai tanpa React?

Bisa. Setiap ikon adalah file Lottie JSON di https://useanimations.com/icons/<id>.json (misalnya https://useanimations.com/icons/play-pause.json) yang bisa diputar dengan lottie-web, lottie-ios, lottie-android, atau paket lottie untuk Flutter; SVG statis tersedia di halaman masing-masing ikon (halaman ikon hanya dalam bahasa Inggris). Tidak ada yang memakai expression, jadi build ringan lottie-web sudah cukup.