Ionic Framework 內置的圖標庫，免費開源、數量多，性能還不錯，無論是開發還是設計，都是一個優質的資源。

關於 Ionicons

Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個為 Web / iOS / Android 和桌面應用程序專門定製的圖標。Ionic Framework 是一個跨平台的混合開發和 Web App 框架，這個框架之前寫過的文章 vonic 中有提到過，簡單地説就是使用 javascript 和 html5 來開發 APP 的框架，在國外使用的開發者很多。

同時 Ionicons 這套圖標庫是一個獨立的項目，完全可以脱離 Ionic Framework 單獨使用。

Ionicons 亮點盤點

• 包含 1300 個設計優雅、風格統一的高質量圖標，能滿足大多數的業務場景
• 在 web 平台上使用具有高性能的按需加載機制，只加載需要的圖標資源，無需手動配置
• 提供 filled、outline、sharp 三種不同風格的變體，適應不同的設計場景，開發中甚至可以為不同手機平台設置不同的風格的圖標，適配對應手機系統的設計規範

設計師怎麼用

Ionicons 官網的右上角為設計師提供了所有圖標打包下載的功能，圖標源文件格式為通用的 SVG 格式，滿足了設計師學習臨摹和二次修改的需求。

開發上手使用體驗

以 web 開發為例，如果我們使用的是 Ionic Framework 框架來開發應用，不需要安裝就可以直接使用了，國內一般用 Ionic 比較少，所以我們想要在自己項目中使用 Ionicons 這套圖標庫，只需要引入 script 標籤即可：

默認是以 module 方式引入，當然下面的 nomodule 是為了兼容不支持 module 的老版本瀏覽器。

只需要給 ion-icon 標籤設置對應的 name 屬性即可：

在 Ionic Framework 中使用圖標時，我們還可以為每個平台指定不同的圖標：

設置圖標大小、顏色等更多用法：

之前我推薦過不少免費開源、可商用的圖標庫，原因是在很多前端 UI 組件庫中，圖標這塊大多都缺失，像 Element UI 這樣內置圖標庫的，往往具有一定的品牌特性，數量不多，開發過程中經常找不到合適的圖標。而 Ionicons 的圖標數量不僅多，覆蓋也很全面，自動按需加載的機制也讓開發者省心。

免費開源和商用説明

Ionicons 是 Ionic Framework 開發框架內置的圖標庫，由研發團隊獨立設計，SVG 源文件的代碼基於 MIT 開源協議完全免費開源，任何個人和公司都可以免費下載用於自己的項目，包括商業項目。

相關網址：https://www.thosefree.com/ion...