Eva Icons图标素材包

Eva Icons 是一个开源的图标包，包含 480 多个精心设计的图标，覆盖常见的操作和物品场景。它同时提供 Fill（实心）和 Outline（描边）两种视觉风格，支持 SVG、PNG、Web Font、Sketch 等格式，还内置了 zoom、pulse、shake、flip 四种动画。对做前端、移动端或桌面端产品的开发者来说，这是一套可以直接拿来用的图标方案。

适合谁

• 前端开发者：需要在网页里用图标，又不想一个个去下载 PNG 的，直接用 npm 安装或者 CDN 引入，几行代码就能替换成 SVG。
• 移动端 / 桌面端开发者：图标支持 iOS 和 Android 的数字产品，也提供了 Sketch 源文件，设计和技术可以共用一套资源。
• 技术折腾党：喜欢自己定制图标颜色、尺寸、动画行为的，Eva Icons 的属性配置比较灵活，不用改源码就能控制。

能解决什么问题

• 图标风格不统一的问题：一套 480+ 的图标覆盖常见操作和物品，Fill 和 Outline 两种风格可以搭配使用，视觉上保持一致。
• 图标加载性能问题：官方推荐用 SVG 而不是字体图标，理由是渲染效果和性能更好，README 里也引用了 css-tricks 的对比文章。
• 想要图标动起来的需求：内置 zoom、pulse、shake、flip 四种动画类型，可以设置在 hover 时触发，也可以设置无限循环。

怎么开始用

最简单的方式是用 CDN，在页面里加一行：

<script src="https://unpkg.com/eva-icons"></script>

引入后 eva 会作为全局变量可用。然后给元素加上 data-eva 属性，再调用 eva.replace()：

<i data-eva="github"></i>

<script>
  eva.replace()
</script>

也可以用 npm 安装：

npm i eva-icons

然后在页面里引入 path/to/dist/eva-icons.js，或者用模块方式引入：

const eva = require('eva-icons');

import * as eva from 'eva-icons';

想改颜色和尺寸，用额外的 data 属性：

<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>

字体方式也可以：引入 eva-icons.css，然后给元素加 eva 和 eva-github 两个 class。不过官方建议优先用 SVG。

动画用法：加 data-eva-animation 属性，值可以是 zoom、pulse、shake、flip。还可以用 data-eva-hover 控制是否在悬停时触发，data-eva-infinite 控制是否无限循环。如果想让父容器悬停时触发动画，给父容器加 eva-parent-hover 类。

优点和坑

优点：

• 免费开源，MIT 协议，star 数 8814，社区活跃度不错。
• 格式全：PNG、SVG、字体、Sketch 都有，还支持 4 种动画。
• 使用方式灵活：CDN、npm、字体、SVG 替换都行，接入成本低。

坑：

• 最近更新是 2026-11-06，但仓库创建于 2018 年，中间可能有较长的维护空档期，新图标需求不一定能及时跟上。
• 图标数量 480+ 属于中等规模，跟几千个图标的商业图标库比，覆盖面有限，偏门场景可能找不到合适的图标。
• 动画只有四种（zoom、pulse、shake、flip），想要更复杂的动效得自己写 CSS。
• 官方推荐 SVG 而非字体，说明字体方式在渲染和性能上有短板，对性能敏感的项目要注意。

适合你吗

适合：前端或移动端项目需要一套风格统一的开源图标，不想在图标版权和格式转换上花时间的开发者。尤其是已经在用 Angular 生态（Nebular、ngx-admin 都是同一家出品）的团队，风格上比较搭。

不适合：需要超大规模图标库、或者对图标更新频率要求很高的项目。另外，如果只是偶尔用一两个图标，直接去官网下载单个 PNG/SVG 可能比引入整个库更省事。

整体来说，Eva Icons 是一个中规中矩的开源图标方案，胜在免费、格式全、有动画，适合中小型项目直接拿来用。

---

常见问题

Eva Icons 图标库是免费的吗？

是的，Eva Icons 是一个免费开源的图标素材包，采用 MIT 协议。它包含 480 多个精心设计的图标，提供 SVG、PNG、Web Font、Sketch 等多种格式，以及 zoom、pulse、shake、flip 四种动画，开发者可以免费在项目中使用。

Eva Icons 怎么安装和使用？

使用 Eva Icons 最简单的方式是通过 CDN，在页面中添加一行 script 标签引入。然后给 HTML 元素加上 data-eva 属性（如 data-eva="github"），并调用 eva.replace() 方法即可。也可以通过 npm 安装：npm i eva-icons，然后在代码中引入。

Eva Icons 和 IconPark 这样的图标库相比有什么特点？

Eva Icons 提供了 480 多个图标，包含 Fill 和 Outline 两种风格，并内置了 4 种动画。它格式全面（SVG、PNG、字体、Sketch），接入灵活。但与 IconPark 等数千图标的库相比，Eva 规模中等，覆盖面有限，且更新可能不如后者频繁。

Eva Icons 支持哪些动画效果？

Eva Icons 内置了四种动画效果：zoom（缩放）、pulse（脉动）、shake（摇晃）和 flip（翻转）。可以通过 data-eva-animation 属性应用，并配合 data-eva-hover（悬停触发）和 data-eva-infinite（无限循环）等属性来控制动画行为。

使用 Eva Icons 图标时，官方推荐用哪种格式？为什么？

官方推荐优先使用 SVG 格式，而不是字体图标。原因是 SVG 在渲染效果和性能上表现更好。官方 README 中也引用了 css-tricks 的文章进行对比说明，对性能敏感的项目需要注意这一点。

相关工具推荐

• IconPark图标样式转换工具
• 仪表盘与AI助手图标库：dashboard-icons
• Builder：可视化React/Vue/Svelte开发工具