Article

第一手推荐!2700+ 开源图标库 Reicon,涵盖 AI 和数字化需求

更新于:2026-07-05 7 min read

刚刚发现一个新开源的图标库 Reicon

专为数字界面设计,包含 2,700 多个图标,支持 HTML、React、Vue 和 Svelte 等主流框架,以及有 Figma 合集, 看了一下 Github 才发布了几天时间而已,可以说我这是第一手的推荐信息了,绝对值得关注。

Reicon 首页

我浏览了整个图标库,相比于我常用的 Lucide 等库来说,Reicon 的图标库确实更加全面,尤其是针对于数字化、AI 需求,有更多的语义化支持,也就是说这里你可以找到其他通用库没有的图标。

图标库浏览界面

怎么用

Reicon 是 Dev Chauhan 开源的图标库,MIT 协议,免费。目前 2700 多个图标,都在 24×24 的网格上,每个图标有 Outline 和 Filled 两种,Outline 是 1.5px 描边配统一圆角,Filled 给选中态用。

Reicon 按框架拆成了好几个包,挑你用的装就行。

React:

npm install reicon-react
import { Heart } from 'reicon-react';

<Heart size={24} weight="Outline" color="#000000" />

单个图标详情页:可调 size / weight / color,并导出 SVG / PNG / WebP

Vue 3、Svelte、原生 JS 各有对应的包(reicon-vuereicon-sveltereicon),用法一样,import 进来传 size、weight、color。

各框架的接入代码:CDN、原生 JS、React、Vue、Svelte

不想装包也行,它提供 CDN 运行时和原始 SVG 打包下载,还有 Figma 插件和 VS Code 插件,在编辑器里直接搜图标插入。

Figma 插件:直接在 Figma 里搜图标插入

设计上几个实在的点

除了图标多,几个工程上的细节做得比较实在。

全量支持 tree-shaking,你用几个就打包几个,不会把 2700 个全塞进去。零依赖,不引入额外的东西。每个图标 Outline 和 Filled 两套,覆盖常态和选中态,不用自己再画一套反白。

覆盖端也全。从代码到设计到编辑器都顾到了,React、Vue、Svelte、原生 JS、CDN、Figma、VS Code、原始 SVG。设计和开发能用同一套图标源,省掉来回对齐的成本。

覆盖全端:React、Vue、Svelte、Figma、Web 都用同一套图标源

和其他通用图标库的区别在哪

Lucide 是我目前一直在用的图标库,它现在几乎是默认选择,风格干净、生态成熟的代表。

Reicon 的差异主要在语义广度。Lucide 是个出色的通用库,日常 UI 的图标它都有,但做到数字化产品、AI 功能那种细分场景,要表达 agent、pipeline、向量、嵌入这类概念,Lucide 里经常找不到对应的图标,只能拿近似的凑。Reicon 在这块补全了更多的语义,很多通用库没有的语义化图标它做了。

风格上两者相近,都是线性几何风、统一描边,混用也不太违和。我的建议是如果你有做数字化/AI 相关的需求,尤其是遇到一般图标库覆盖不到的数字化语义,不妨试试 Reicon,我相信会给到惊喜。

最后

图标库吧,量大不等于好用,关键是有没有自己需求场景所需要的图标。通用库解决了大部分常见需求,剩下那些细分语义,往往是决定界面专不专业的部分。

Reicon 还很新,并且我相信 Star 数量会迎来爆发式的增长,在 AI 和数字化图标的空缺上,它现在填了一个真实存在的需求。值得关注一下。

我是 Rico,感谢阅读!

Rico的设计漫想

关注我的微信公众号

我在这里专注文字创作,分享设计观察、产品思考、个人网站和前端实践的长文与资源。

  • Design Notes
  • Vibe Coding
  • Rico Writing
微信公众号二维码
Rico的设计漫想