Iconoir

Iconoir是什么？

Iconoir是一个免费开源的图标库，目前已包含超过1,670+ 款优雅线性图标，同时图标数量还在持续上涨中。无论是基础的功能操作，或是热门行业的图标比如商业（Business）、金融（Finance），这里皆可找到，覆盖面广，它被定位为Noun Project、Flaticon等付费图标库的开源替代方案，为设计师和开发者提供统一、优雅且可商用的矢量图标资源。

Iconoir的核心特点

• 完全免费&开源：所有的图标均可根据 MIT License 条款发布，您可以随意使用这些图标、将其加入您的代码中、编辑、甚至商用都可以哦。
• 多平台支持：不仅包含SVG、字体（字体图标的 icon font 格式，也可称“web font”），还可以用于前端框架组件如 React（React.js 或者 react-native）、React Native、Flutter 等 UI 工具如 Figma、Framer、CSS 等，真正做到了全平台使用
• 风格统一：简单明了、线性图风格，采用一致的设计语言呈现极简、直观和漂亮的界面视觉效果，并具有圆润的角落处理和良好的线条平衡。
• 数量丰富：目前已有 1670+ 图标，涵盖 UI 元素、3D 编辑器、科技、教育、品牌、天气等多个类别。
• 社区驱动：在 GitHub 上有数千 Star，开发者和设计师可以共同贡献和扩展图标库。

值得推荐的理由

• 使用友好：提供可修改的SVG文件、React / Vue 前端组件、满足跨平台开发需求；
• 风格一致：从整体到细节均拥有相同的风格，所有图标都符合一致性标准的视觉，更重要的是颜值极高！
• 填充样式：很多图标都提供了线框和填充样式，方便实现多种 UI 的交互状态。 

适用人群

• UI/UX 设计师：快速获取统一风格的图标，提升界面一致性。
• 前端/移动开发者：直接引入 React、Flutter、CSS 等版本，减少依赖付费库。
• 品牌与产品团队：在应用、网站、宣传物料中保持一致的视觉语言。
• 教育/个人项目：免费使用，无需担心版权问题。

Iconoir使用教程 

设计师使用

Iconoir网站首页的右侧有两个快捷工具，一是调整图标尺寸，二是调整线框宽度，用这两个快速设置器设置图标效果后，在下载生成的 svg 文件中也能看到设定的修改效果，并能保持完美的像素表现，这使我们不需要再导入设计软件批量修改图标的尺寸和线框宽度。

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

前端开发使用

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的CSS文件，通过类名调用图标。