28 个图标 · MIT 许可

媒体播放器动态图标

用于音频和视频播放器的播放与暂停、音量、麦克风、摄像头、跳过和随机播放图标。可切换的图标在两种状态之间转换，比如从播放到暂停、从麦克风到静音，按钮始终显示点击后会发生什么。

这 28 个图标中，1 个持续循环播放，10 个点击时在两种状态之间切换，6 个每次点击都会重播，11 个悬停时播放一次。每个图标都提供 React 组件、shadcn/ui 组件和 Lottie JSON 动画，并附带静态 SVG，可依据 MIT 许可证免费用于商业项目。

适用场景

音视频播放器中的播放和暂停按钮
视频通话中的静音和取消静音
会议应用中的摄像头开关
播放列表的跳过、重复和随机播放控件
投屏和 AirPlay 按钮
播客和音乐应用的控件

按交互方式

循环动态图标 · 1
持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。Airplay.
点击切换动态图标 · 10
点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。Camera Off, Mic Off, Microphone, Microphone V2, Play/Pause, Play/Pause circle, Video, Video Off, Video V2, Volume.
点击重播动态图标 · 6
每次点击都从头播放一次，除非用户偏好减少动态效果。Camera, Repeat, Shuffle, Skip back, Skip forward, Stop Circle.
悬停播放动态图标 · 11
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Aperture, Cast, Disc, Fast Forward, Film, Headphones, Music, Radio, Rewind, Speaker, TV.

添加到您的应用

在 React 中，安装 react-useanimations 并导入图标即可，它会自动播放“点击切换”交互。本类别的所有图标用法都一样：把 playPause 换成图标页面上的名称。

npm install react-useanimations

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

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

使用 shadcn/ui 时，CLI 会添加一个现成的组件：

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

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

<AnimatedPlayPause size={24} />

没有使用 React？每个图标都是位于 /icons/<id>.json 的 Lottie JSON 文件；网页、iOS、Android 和 Flutter 的播放器用法请参阅 Lottie 图标。

常见问题

包含哪些媒体播放器动态图标？

共 28 个图标：Airplay、Aperture、Camera、Camera Off、Cast、Disc、Fast Forward、Film、Headphones、Mic Off、Microphone、Microphone V2 等另外 16 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。

如何在 React 中使用这些媒体播放器动态图标？

安装 react-useanimations，添加 import playPause from 'react-useanimations/lib/playPause'，然后渲染 <UseAnimations animation={playPause} size={32} />。图标会播放它的“点击切换”交互，并跟随文字颜色。使用 shadcn/ui 时，改为运行 npx shadcn@latest add https://useanimations.com/r/play-pause.json。

不用 React 也能使用这些媒体播放器动态图标吗？

可以。每个图标都是一个 Lottie JSON 文件，地址为 https://useanimations.com/icons/<id>.json（例如 https://useanimations.com/icons/play-pause.json），可以用 lottie-web、lottie-ios、lottie-android 或 Flutter 的 lottie 包播放；静态 SVG 可以在各个图标页面（英文）下载。这些图标都没有用到表达式，因此 lottie-web 的轻量版（light build）就够用了。

全部媒体播放图标

适用场景

按交互方式

添加到您的应用

常见问题