开源的动态图标库

lucide-animated 是一个基于 Lucide 图标库、使用 Motion 动画库构建的开源动态图标库，提供 350+ 个经过精心动画设计的 React SVG 图标，支持即拷即用、完全自定义，采用 MIT 许可证。

核心特性：动画与定制

所有图标均内建流畅动画效果，基于 Motion 库驱动，而非简单的静态 SVG。图标为完全可定制的 SVG 格式，支持调整颜色、大小、描边等属性，且动画状态（如点击反馈、状态切换）由 Motion 统一管理。

• 动画驱动: 使用 Motion 库实现图标动画，非静态 SVG
• 状态反馈: 动画包含 timing、states、click weight 等细节设计

安装与使用：一行命令集成

通过 shadcn CLI 即可将图标库添加到 React 项目中，支持 pnpm、npm、yarn、bun 四种包管理器。安装后可直接按名称引用图标组件（如 <a-arrow-down />），无需额外配置。

• 安装命令: pnpm dlx shadcn add @lucide-animated/（支持 npm/yarn/bun）
• 即拷即用: 复制图标组件代码即可直接使用，无需额外依赖
• 搜索支持: 官网提供 ⌘F 搜索功能快速定位图标

项目背景与社区

由设计师 Dmytro（dt）创建，他同时也是《Invisible Details》课程的作者，该课程专注于界面微交互细节（timing、states、反馈、点击重量等）。项目在 GitHub 上获得 7,822 颗星，由 OpenPanel 提供分析支持。

• 创作者: Dmytro（dt），《Invisible Details》课程作者
• GitHub星标: 7,822 stars
• 分析工具: 使用 OpenPanel 进行项目数据分析

常见问题

Q1：lucide-animated 与 Lucide 图标库是什么关系？

A1：lucide-animated 是基于 Lucide 图标库（超 1600 个线性图标）的动画增强版本，保留了 Lucide 的极简设计语言，但为每个图标添加了由 Motion 驱动的平滑动画效果。

Q2：如何将 lucide-animated 集成到现有 React 项目中？

A2：在项目根目录运行 pnpm dlx shadcn add @lucide-animated/（或使用 npm/yarn/bun 对应命令），然后即可像使用普通 React 组件一样引用图标（如 <a-arrow-down />）。

Q3：这些图标可以商用吗？

A3：可以。lucide-animated 采用 MIT 许可证，允许自由使用、修改和商用，无需支付费用或注明出处。

更多同类工具与网站,可在图标分类继续挑选。

信息核实于 2026年7月,具体以官网为准。