Ionic Framework 内置的图标库，免费开源、数量多，性能还不错，无论是开发还是设计，都是一个优质的资源。

关于 Ionicons

Ionicons 是一个完全开源的图标集，是知名混合开发框架 Ionic Framework 内置的图标库，包含 1300 个为 Web / iOS / Android 和桌面应用程序专门定制的图标。Ionic Framework 是一个跨平台的混合开发和 Web App 框架，这个框架是之前写过的文章 vonic 中有提到过，简单地说就是使用 javascript 和 html5 来开发 APP 的框架，在国外使用的开发者很多。

Ionicons 官网

同时 Ionicons 这套图标库是一个独立的项目，完全可以脱离 Ionic Framework 单独使用。

Ionicons 亮点盘点

• 包含 1300 个设计优雅、风格统一的高质量图标，能满足大多数的业务场景
• 在 web 平台上使用具有高性能的按需加载机制，只加载需要的图标资源，无需手动配置
• 提供 filled、outline、sharp 三种不同风格的变体，适应不同的设计场景，开发中甚至可以为不同手机平台设置不同的风格的图标，适配对应手机系统的设计规范

Ionicons 线框风格

设计师怎么用

Ionicons 官网的右上角为设计师提供了所有图标打包下载的功能，图标源文件格式为通用的 SVG 格式，满足了设计师学习临摹和二次修改的需求。

开发上手使用体验

安装

以 web 开发为例，如果我们使用的是 Ionic Framework 框架来开发应用，不需要安装就可以直接使用了，国内一般用 Ionic 比较少，所以我们想要在自己项目中使用 Ionicons 这套图标库，只需要引入 script 标签即可：

<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>n<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

默认是以 module 方式引入，当然下面的 nomodule 是为了兼容不支持 module 的老版本浏览器。

图标使用

只需要给 ion-icon 标签设置对应的 name 属性即可：

<ion-icon name="heart"></ion-icon>

在 Ionic Framework 中使用图标时，我们还可以为每个平台指定不同的图标：

<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>

设置图标大小、颜色等更多用法：

<!-- 通过属性设置图标大小 -->n<ion-icon size="small"></ion-icon>n<ion-icon size="large"></ion-icon>nn<!-- 通过css设置图标大小和颜色 -->nion-icon {n font-size: 64px;n color: blue;n}

之前我推荐过不少免费开源、可商用的图标库，原因是在很多前端 UI 组件库中，图标这块大多都缺失，像 Element UI 这样内置图标库的，往往具有一定的品牌特性，数量不多，开发过程中经常找不到合适的图标。而 Ionicons 的图标数量不仅多，覆盖也很全面，自动按需加载的机制也让开发者省心。

免费开源和商用说明

Ionicons 是 Ionic Framework 开发框架内置的图标库，由研发团队独立设计，SVG 源文件的代码基于 MIT 开源协议完全免费开源，任何个人和公司都可以免费下载用于自己的项目，包括商业项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。