图标资源怎么选?我常用的 8 个开源库

虽然主修 Java,但做校园项目时仍需要一套统一的图标。为了不在矢量软件里“画到秃头”,我长期维护一个图标资源清单,下面挑 8 个常用库分享给大家。

1. Lucide

  • 类型:线性风格,1600+ 图标。
  • 使用场景:在 Astro、React 项目中直接按需引入,支持自定义描边。

2. Remix Icon

  • 特点:语义覆盖全面,提供 Figma 文件。
  • 做法:在校园项目里配合 Tailwind,很容易保持统一风格。

3. Heroicons

  • 来源:Tailwind 团队维护,Outline/Solid/Mini 多种尺寸。
  • 经验:后台管理系统直接选 Solid 版,阅读性最好。

4. Iconsax

  • 亮点:多风格切换,适合需要品牌感的页面。
  • 技巧:把色彩映射成 CSS 变量,方便暗色模式适配。

5. QingIcon

  • 国产宝藏:Asorn & 胡蝶维护,附带插画库。
  • 适合:政务与 B 端项目,线条规整。

6. Circum Icons

  • 特点:圆环外形识别度高,适合导航或流程步骤。

7. Iconoir

  • 优点:React/Vue/Flutter 全覆盖,品牌图标完善。

8. Doodle Icons

  • 风格:手绘式,适合校园活动或内容页的小插画。

如何在项目中管理图标

  1. 统一出口:在前端创建 icons.ts,所有图标都从这里导出,方便替换。
  2. 命名规范:按照业务语义(如 IconOrder, IconSchedule),别直接用资源名。
  3. 配色策略:用 currentColor,结合主题色或 CSS 变量,省去重复修改。

如果你也有好用的资源库,欢迎回复告诉我;我会继续把它们整理到 GitHub(github.com/1lck)的资料区里。

Logo

© 2025 李陈康

Twitter Github ZCool Behance RSS