64 个图标 · MIT 许可

操作按钮动态图标

界面里的“动词”：保存、删除、下载、刷新、点赞、收藏、搜索和设置。每个图标都会对相应的点击或悬停作出回应：点赞时爱心被填满，删除前垃圾桶的盖子先掀起来。

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

适用场景

卡片上的点赞、喜欢和收藏按钮
确认操作完成的下载、上传和保存按钮
登录表单中的显示/隐藏密码切换
仪表盘中的刷新和同步按钮
表格和文件列表中的删除按钮
可以变成清除按钮的搜索框

按交互方式

循环动态图标 · 2
持续播放；当用户偏好减少动态效果时，停留在静态的第一帧。Checkmark, Help.
点击切换动态图标 · 14
点击时在两种状态之间切换；当用户偏好减少动态效果时，直接切换到新状态。Bookmark, Heart, Lock / Unlock, Maxi/Minimize, Maxi/Minimize V2, Plus/X, Search/X, Settings V2, Shield Off, Star, Thumb up, Visibility, Visibility V2, Visibility V3.
点击重播动态图标 · 30
每次点击都从头播放一次，除非用户偏好减少动态效果。Check, Check Circle, Chevron left, Chevron right, Delete, Download, Download Cloud, Download V2, Edit 2, Edit 3, Filter, Heart V2, Link, Link 2, Minus, Minus Circle, Minus Square, Plus Circle, Plus Square, Power, Refresh, Refresh Ccw, Refresh V2, Rotate Ccw, Rotate Cw, Save, Thumbs Down, Upload, Upload Cloud, X Square.
悬停动态图标 · 11
在 mouseenter 时正向播放，在 mouseleave 时反向播放。Calendar, Edit, Explore, Folder, Home, Info, Settings, Trash, Trash V2, Zoom In, Zoom Out.
悬停播放动态图标 · 6
在 mouseenter 时播放一次，除非用户偏好减少动态效果。移出不会中断播放，播放期间再次移入也不会重新开始。Award, Key, Maximize 2, Minimize 2, Shield, Slash.
悬停循环动态图标 · 1
悬停期间循环播放，在 mouseleave 后播完当前一轮；当用户偏好减少动态效果时保持静止。Flag.

添加到您的应用

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

npm install react-useanimations

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

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

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

npx shadcn@latest add https://useanimations.com/r/heart.json

import { AnimatedHeart } from '@/components/animations/heart';

<AnimatedHeart size={24} />

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

常见问题

包含哪些操作按钮动态图标？

共 64 个图标：Award、Bookmark、Calendar、Check、Check Circle、Checkmark、Chevron left、Chevron right、Delete、Download、Download Cloud、Download V2 等另外 52 个。全部可依据 MIT 许可证免费用于个人和商业项目，无需署名。

如何在 React 中使用这些操作按钮动态图标？

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

不用 React 也能使用这些操作按钮动态图标吗？

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

全部操作按钮图标

适用场景

按交互方式

添加到您的应用

常见问题