animateicons — 1500+ 带动画的 SVG 图标库，hover 与命令式触发都接好

animateicons 是开发者 Avijit07x 维护的一项开源软件，收录 1500 余枚自带动画的矢量图标，形状基于 Lucide 与 Hugeicons，动画部分由 motion 引擎预先打包进组件，以 MIT 协议发布，仓库托管在 GitHub，并加入了 Vercel OSS Program。安装后从 @animateicons/react/lucide 或 /huge 路径导入组件即可，默认 hover 播放动画，尺寸、颜色、时长都通过 props 调整。除 React 包外，还发布了 Vue、Angular、原生 JS、Svelte、Solid、Astro 多个框架版本，并配 shadcn CLI 与 MCP server。它定位是给前端用的图标资源，也是同类开源项目里少见把动效一并打包的做法。

场景痛点

做 Web 界面时，按钮、菜单、输入框旁的图标大多是静态 SVG，排版整齐但略显死板。想让铃铛在 hover 时晃一下、发送箭头在点击时缩一下，通常得自己挑图标、再手写 transition 或 keyframes，每个动效都要单独调时长和缓动，跨框架时还得把同一套动画重新实现一遍。把这些微动效统一收进一个组件库，开发侧只改一行 props，对做Web应用的团队尤其省事。

主要功能特点

1500 枚动画图标，形状来自 Lucide 与 Hugeicons

库内图标在 1500 枚以上，分 Lucide 与 Hugeicons 两套来源。Lucide 一侧是社区常用的线性描边风格，Hugeicons 一侧是相对饱满的轮廓造型。SVG 路径保持原作者形状，项目方在此基础上叠加 hover 或命令式触发的时间轴，第三方声明见 THIRD_PARTY_NOTICES.md。做UI设计时按现有视觉风格二选一即可。

hover 默认播放，props 调大小颜色时长

接入后鼠标移到图标上就自动播放一次动画，无需额外写事件。props 包括尺寸（默认 24）、颜色（默认跟随文字色）、时长（默认 1 秒）与是否开启动画。想跟主题色走直接继承 currentColor，想统一节奏改时长即可，是把样式变量从 CSS 搬进 props 的设计工具式收敛。

useIconHover 把动画挂到外部按钮上

图标自身 hover 只覆盖光标落在 SVG 上的窄区域，实际界面常希望整个按钮或卡片在 hover 时带动旁边图标一起动。库提供 useIconHover 钩子，把图标实例挂到外层容器的 mouseenter 或 click 上，触发模式可选 hover、click 或 both，也支持把多枚图标编排成序列。做前端开发时省去了自己写 forwardRef 与事件转发。

多框架包覆盖 React、Vue、Angular 与原生 JS

React 主包之外，Vue、Angular、原生 JS、Svelte、Solid、Astro 各有对应包，Angular 目前只支持 20、21、22 三个大版本号，更老工程需先升框架；motion 运行时已打进包里。这套跨平台应用形态，是实用软件中少见覆盖主流前端栈的图标库。

shadcn CLI 与 npx 拷单图标进项目

项目提供 shadcn CLI 一键把图标加进组件目录，也可用 npx 命令把单枚图标源码直接拷进项目。拷进来后组件归项目自己持有，后续升级不强制走 npm 包。文档覆盖 Next.js、按钮、卡片示例。作为一项效率工具，它把找图标、复制代码、接动画压成一条命令，也常进前端工具推荐清单。

MCP server 让 AI Agent 直接搜图标

项目配了 MCP server，编码 Agent 接入后可用自然语言按用途搜图标，再由 Agent 直接把组件写进工程。这部分需用户自己在 AI 客户端配置 MCP 地址，结果仍需本人确认。它属于Skill工具一类把检索能力暴露给 Agent 的做法，也是AI工具目录里的工程配置，在酷软趣站里属于新面孔。

项目地址

官网访问

GitHub 访问

图标浏览访问

下载地址

https://pan.quark.cn/s/52c309218d4f

https://www.guangyapan.com/s/1967451939903602733_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）

animateicons — 1500+ 带动画的 SVG 图标库，hover 与命令式触发都接好

场景痛点