免费动态图标库：适用于 React、shadcn/ui 和 Lottie 的动画图标

useAnimations 提供 300 个手工制作的动态图标，每个图标都内置悬停、点击或循环交互。您可以把它们作为 React 组件使用，通过 shadcn 一条命令添加到项目中，或者直接下载 SVG 和 Lottie JSON 文件。全部免费，采用 MIT 许可证。

浏览全部图标

为什么选择 useAnimations

零依赖，体积小

内置播放器压缩后约 8 kB，没有任何第三方依赖；每个图标都是独立模块（中位数约 2 kB），只打包您实际引入的图标。

交互内置

每个图标都自带设计好的交互：循环、点击切换、点击重播、悬停、悬停重播或悬停循环，放进页面即可使用，也可以用一个属性换成其他交互。

跟随颜色与主题

图标使用 currentColor，自动继承文字颜色、悬停状态和深色模式；也可以通过属性、类名或普通 CSS 修改颜色和线条粗细。

默认无障碍

尊重系统的“减少动态效果”设置，键盘聚焦时同样播放悬停动画，并且在您添加标签之前不会干扰屏幕阅读器。

支持服务端渲染

组件标记为 use client，只在浏览器中绘制动画，可以直接用于 Next.js、Remix 和 Astro 等框架，无需动态导入。

完全免费

MIT 许可证：个人和商业项目均可免费使用、修改和再分发，无需署名。

安装与使用

React

先安装软件包，再从 react-useanimations/lib/<名称>导入需要的图标。下面的菜单按钮在打开和关闭之间切换，active属性让图标与您的状态保持同步：

npm install react-useanimations

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

export function MenuButton({ open, onToggle }) {
  return (
    <UseAnimations
      animation={menu}
      active={open}
      onClick={onToggle}
      size={28}
    />
  );
}

shadcn/ui

每个图标也在 shadcn 注册表中。CLI 会在 components/animations/下生成一个现成的组件，并自动安装依赖：

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

Lottie、SVG 与 ZIP 文件

不使用 React 时，可以直接下载文件：每个图标都有 Lottie JSON 动画、每个状态一张静态 SVG，以及包含全部文件的 ZIP 压缩包。所有文件都有固定网址并支持跨域访问，可用于 lottie-web、Vue、Svelte、移动应用或设计工具。

https://useanimations.com/icons/menu.json      # Lottie JSON
https://useanimations.com/icons/menu/menu.svg  # 静态 SVG
https://useanimations.com/icons/menu.zip       # 全部文件

完整的属性说明、受控切换、颜色与尺寸、服务端渲染和从 v2 升级的步骤，请参阅英文文档。

六种内置交互

每个图标都带有为它设计的交互，放进页面就能正确播放；需要时也可以通过 interaction 属性改成其他方式。

循环loop
持续播放，适合加载中、警告等持续状态。（21 个图标）
点击切换click-toggle
每次点击在两个状态之间切换，例如菜单与关闭、播放与暂停、静音与取消静音。（37 个图标）
点击重播click-replay
每次点击都从头播放一次，用来确认发送、保存、下载等操作已经完成。（64 个图标）
悬停hover
指针移入时正向播放，移出时反向播放，动画始终跟随光标。（21 个图标）
悬停重播hover-replay
指针移入时播放一次并自然结束，快速划过工具栏时也不会抖动。（144 个图标）
悬停循环hover-loop
悬停期间循环播放，离开后播放完当前一轮再停止。（13 个图标）

按类别浏览

图标按用途分为 19 个类别，从导航菜单、通知铃铛、媒体播放到电子商务和开发者工具。类别页面目前为英文，包含每个图标的预览和用法。

也可以查看全部动画图标、Lottie 图标和shadcn/ui 动画图标。

常见问题

什么是微动画和动态图标？

微动画是响应用户操作的简短动效，例如菜单图标变成关闭按钮、点赞时爱心被填满、有新消息时铃铛摇动。动态图标是最常见的微动画，它让界面反馈更及时，不需要额外的文字就能表达状态变化。

Lottie 文件和 SVG 文件有什么区别？

Lottie JSON 文件包含完整的动画，可以在任何 Lottie 播放器中播放，包括 react-useanimations 内置的播放器。SVG 文件是图标静止时的图片，每个状态一张（例如 eye 和 eye-off），适合邮件、文档、设计工具或不运行 JavaScript 的场景。

可以在 Next.js 和服务端渲染中使用吗？

可以。组件标记为 use client，只在浏览器中绘制动画，因此可以在服务端组件以及 Next.js、Remix、Astro 等 SSR 框架中直接渲染，不需要 dynamic(…, { ssr: false })。图标模块是普通数据，服务端组件可以直接导入并作为属性传递。

可以用于商业项目吗？

可以。图标和 react-useanimations 软件包都采用 MIT 许可证，可以在个人和商业作品中使用、修改和再分发。署名不是必需的，但我们很欢迎。

不使用 React 也能用吗？

可以。每个图标都是标准的 Lottie JSON 文件，可以通过 lottie-web 在原生 JavaScript、Vue、Svelte、Angular 或 CMS 中播放，也可以在 iOS、Android 和 Flutter 的 Lottie 播放器中使用。

会让打包体积增加多少？

react-useanimations 3.1.1 的播放器压缩后约 8 kB，没有依赖；每个图标是 1 到 15 kB 的独立模块（中位数 2 kB），最终只打包您导入的图标。

全部图标 · 文档 ·许可与条款 · English