Iconoir - 免费开源、优雅高颜值的图标库,支持免费商用和二次修改

设计师、前端开发者看过来,一套好看好用的图标库推荐给你们。

Iconoir 图标库

Iconoir 是一个应用图标库,图形设计非常简洁,但辨识度很高,很实用。自2020年推出以来,一直在更新图标,截止我今天写这篇文章为止,已经拥有1600+高质量的图标,从基础功能操作到行业场景(如商业、金融)的图标都应有尽有,覆盖面广,被很多设计师和开发者用在各种 web / 移动应用界面上。

Iconoir 官网
Iconoir 官网

值得推荐的理由

  • 使用友好:提供可修改的SVG文件、React / Vue 前端组件、满足跨平台开发需求;
  • 风格一致:所有图标遵循统一设计规范,视觉和谐,最重要是颜值够高;
  • 填充样式:很多图标都提供了线框和填充样式,方便实现多种 UI 的交互状态。

上手使用体验

设计师使用

Iconoir 网站首页的左侧有两个快捷工具,一是调整图标尺寸,二是调整线框宽度,调整后的图标会体现在导出的 SVG 文件中,保留完美像素效果,这样批量调整就不用再导入到设计软件中调整了,方便。

不过要注意的是,Iconoir 图标的填充样式很好看,我个人很喜欢,但不是每一个图标都有填充样式。

图标列表
图标列表

前端开发使用

Iconoir 对前端开发者非常友好,提供了多种方式安装:

npmYarnpnpmBun
npm i iconoiryarn add iconoirpnpm add iconoirbun add iconoir
集成方式以及命令一览表

以我熟悉的 Vue 为例,集成到项目中很简单。先安装:

npm i @iconoir/vue

在 Vue 页面中使用:

<template>
  <Iconoir color="red" height="36" width="36" />
</template>

<script setup>
  import { Iconoir } from '@iconoir/vue';
</script>

另外还支持更多用法,比如通过 Tree Shaking 仅导入使用到的图标组件,甚至还可以通过更简单的 CSS 来使用,具体可以参考官网的文档。

免费开源与商用说明

Iconoir 是一个免费开源的图标项目,采用 MIT 开源协议,我们可以免费下载来使用,可以自由用在商业项目上,二次修改也没问题。