28 ikon · MIT lisanslı

Animasyonlu medya oynatıcı ikonları

Ses ve video oynatıcılar için oynat ve duraklat, ses düzeyi, mikrofon, kamera, atla ve karıştır. Geçiş yapan ikonlar iki durumu arasında değişir (oynattan duraklata ya da mikrofondan sessize), böylece düğme her zaman bir tıklamanın ne yapacağını gösterir.

28 ikondan 1 tanesi kesintisiz döngüde oynar, 10 tanesi tıklandığında iki durum arasında geçiş yapar, 6 tanesi her tıklamada baştan oynar ve 11 tanesi hover’da bir kez oynar. Her biri React bileşeni, shadcn/ui bileşeni, Lottie JSON animasyonu ve statik SVG olarak sunulur. MIT lisansı sayesinde ticari projelerde de ücretsiz kullanılabilir.

Medya kategorisindeki tüm ikonlar

Nerede kullanılır

Ses ve video oynatıcılarda oynat ve duraklat düğmeleri
Görüntülü görüşmelerde sesi kapat ve aç kontrolleri
Toplantı uygulamalarında kamerayı aç ve kapat düğmeleri
Atla, tekrarla ve karıştır için çalma listesi kontrolleri
Yayınlama (cast) ve AirPlay düğmeleri
Podcast ve müzik uygulaması kontrolleri

Etkileşime göre

Döngüsel animasyonlu ikonlar · 1
Kesintisiz oynar; azaltılmış hareket tercih edildiğinde statik ilk karede kalır. Airplay.
Tıklayınca durum değiştiren animasyonlu ikonlar · 10
Tıklandığında iki durum arasında geçiş yapar; azaltılmış hareket tercih edildiğinde ise animasyonsuz, anında geçer. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Tıklamalı animasyonlu ikonlar · 6
Azaltılmış hareket tercih edilmediği sürece her tıklamada baştan bir kez oynar. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Hover’da oynayan animasyonlu ikonlar · 11
Azaltılmış hareket tercih edilmediği sürece mouseenter’da bir kez oynar. İmlecin ayrılması animasyonu durdurmaz; oynarken yeniden üzerine gelmek de baştan başlatmaz. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Uygulamanıza ekleyin

React’te react-useanimations paketini kurup ikonu import etmeniz yeterli; ikon kendi etkileşimini (Tıklayınca geçiş) kendiliğinden oynatır. Bu kategorideki her ikon aynı şekilde çalışır: playPause yerine ikonun sayfasındaki adı yazın.

npm install react-useanimations

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

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

shadcn/ui ile CLI hazır bir bileşen ekler:

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

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

<AnimatedPlayPause size={24} />

React kullanmıyor musunuz? Her ikon /icons/<id>.json adresinde bir Lottie JSON dosyasıdır; web, iOS, Android ve Flutter oynatıcıları için Lottie ikonları sayfasına bakın.

Sık sorulan sorular

Medya kategorisinde hangi ikonlar var?

28 ikon: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 ve 16 ikon daha. Hepsi MIT lisansıyla kişisel ve ticari projelerde ücretsiz kullanılabilir; atıf gerekmez.

Bu animasyonlu medya oynatıcı ikonları React’te nasıl kullanılır?

react-useanimations paketini kurun, import playPause from 'react-useanimations/lib/playPause' satırını ekleyin ve <UseAnimations animation={playPause} size={32} /> ile render edin. İkon kendi etkileşimini (Tıklayınca geçiş) oynatır ve metin rengini izler. shadcn/ui kullanıyorsanız bunun yerine npx shadcn@latest add https://useanimations.com/r/play-pause.json komutunu çalıştırın.

Bu animasyonlu medya oynatıcı ikonları React olmadan kullanılabilir mi?

Evet. Her ikon https://useanimations.com/icons/<id>.json adresinde bir Lottie JSON dosyasıdır (örneğin https://useanimations.com/icons/play-pause.json) ve lottie-web, lottie-ios, lottie-android ya da Flutter’ın lottie paketiyle oynatılabilir; statik SVG’ler her ikonun kendi sayfasında (ikon sayfaları yalnızca İngilizce). Hiçbiri ifade (expression) kullanmadığı için lottie-web’in hafif sürümü (light build) yeterlidir.