28 icon · Giấy phép MIT

Icon trình phát media động

Phát và tạm dừng, âm lượng, micro, camera, chuyển bài và phát ngẫu nhiên cho trình phát âm thanh và video. Các icon bật/tắt chuyển giữa hai trạng thái, từ phát sang tạm dừng hay từ micro sang tắt tiếng, nên nút bấm luôn cho thấy cú click tiếp theo sẽ làm gì.

Trong 28 icon, 1 icon lặp liên tục, 10 icon chuyển giữa hai trạng thái khi click, 6 icon phát lại sau mỗi lần click và 11 icon phát một lần khi hover. Mỗi icon có sẵn dưới dạng React component, component shadcn/ui và animation Lottie JSON, kèm SVG tĩnh, dùng miễn phí cả cho mục đích thương mại theo giấy phép MIT.

Tất cả icon đa phương tiện

Dùng ở đâu

Nút phát và tạm dừng trong trình phát âm thanh và video
Nút tắt/bật tiếng trong cuộc gọi video
Nút bật/tắt camera trong ứng dụng họp trực tuyến
Điều khiển playlist: chuyển bài, lặp lại và phát ngẫu nhiên
Nút cast và AirPlay
Điều khiển trong ứng dụng podcast và nghe nhạc

Theo tương tác

Icon động lặp liên tục · 1
Phát liên tục; đứng yên ở khung hình tĩnh đầu tiên khi người dùng bật giảm chuyển động. Airplay.
Icon động bật/tắt khi click · 10
Chuyển giữa hai trạng thái khi click, hoặc chuyển ngay lập tức khi người dùng bật giảm chuyển động. Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
Icon động khi click · 6
Phát lại một lần từ đầu sau mỗi lần click, trừ khi người dùng bật giảm chuyển động. Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
Icon động phát khi hover · 11
Phát một lần khi con trỏ đi vào (mouseenter), trừ khi người dùng bật giảm chuyển động. Rời chuột không làm hiệu ứng dừng; hover lại trong lúc đang phát cũng không khởi động lại. Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

Thêm vào ứng dụng của bạn

Với React, hãy cài react-useanimations rồi import icon; icon sẽ tự chạy tương tác “Click bật/tắt” của nó. Mọi icon trong danh mục này đều dùng giống hệt: chỉ cần thay playPause bằng tên ghi trên trang của icon đó.

npm install react-useanimations

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

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

Với shadcn/ui, CLI sẽ thêm sẵn một component:

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

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

<AnimatedPlayPause size={24} />

Không dùng React? Mỗi icon là một tệp Lottie JSON tại /icons/<id>.json; xem Icon Lottie để biết các player cho web, iOS, Android và Flutter.

Câu hỏi thường gặp

Bộ icon trình phát media động gồm những icon nào?

28 icon: Airplay, Aperture, Camera, Camera Off, Cast, Disc, Fast Forward, Film, Headphones, Mic Off, Microphone, Microphone V2 và 16 icon khác. Tất cả đều miễn phí cho dự án cá nhân và thương mại theo giấy phép MIT, không bắt buộc ghi nguồn.

Dùng các icon trình phát media động này trong React như thế nào?

Cài react-useanimations, thêm import playPause from 'react-useanimations/lib/playPause' rồi render <UseAnimations animation={playPause} size={32} />. Icon sẽ chạy tương tác “Click bật/tắt” của nó và tự lấy theo màu chữ. Nếu dùng shadcn/ui, hãy chạy npx shadcn@latest add https://useanimations.com/r/play-pause.json.

Có dùng được các icon trình phát media động này mà không cần React không?

Được. Mỗi icon là một tệp Lottie JSON tại https://useanimations.com/icons/<id>.json (ví dụ https://useanimations.com/icons/play-pause.json), phát được bằng lottie-web, lottie-ios, lottie-android hoặc package lottie của Flutter; SVG tĩnh có trên trang riêng của từng icon (bằng tiếng Anh). Không icon nào dùng expression, nên bản rút gọn (light) của lottie-web là đủ.