Icones 開源免費圖示目錄，可下載超過 118 套圖示集、14 萬個圖案

免費資源網路社群介紹過許多免費圖示網站，有一大部分是開放原始碼的圖示集，除了點陣圖通常還有向量圖和圖示字型（Icon font），也能快速調整為各種尺寸大小或顏色，非常適合網頁、應用程式和軟體開發者。這些圖示集具備相當高的設計品質，涵蓋各種圖案類型，幾乎可以說不用再重複開發需要的圖示，也能將多種不同圖示圖案混搭使用，有些設計風格接近即使放在一起也很搭。

本文要推薦的「Icônes」是一個將各種開放原始碼免費圖示收錄在一起的線上目錄，直接減少使用者搜尋圖示的難度，Icones 一共收錄 118 套開源圖示集、總圖示數量超過 14 萬個！在目錄中能直接瀏覽各種圖示集、圖案和相關資訊，更重要的是還能單獨將選擇的圖示圖案打包下載或產生圖示字型。

使用者可以瀏覽、搜尋或是調整檢視模式，每個圖示都能快速複製載入方式、SVG、SVG Symbol、Iconify、JSX 程式碼，適用於 Vue、React、Svelte、Unplugin Icons 元件，也有 SVG、Vue、React 或 Svelte 檔案可供下載，或是在 Iconify、UnoCSS 打開該圖示取得更多資訊。

另一個方便的功能是利用選取方式將圖示加入清單，就能把不同圖示集的圖示圖案一次打包、下載，或是產生為圖示字型檔案，透過 Icones 在找圖示時就不用打開一堆網站搜尋，對開發者真的非常有用。

Icônes
https://icones.js.org/

使用教學

STEP 1

開啟 Icones 網站後會看到各種開源圖示集，例如大家很熟悉的 Font Awesome、Google Material Icons、Noto Emoji、Octicons 和 IconPark，很多我們都曾經介紹，依照類型還分為一般、動畫圖示、表情圖案（Emoji）、品牌 / 社群網站、地圖 / 國旗、主題等等。

STEP 2

點選任一個圖示集後就會載入部分圖示，如果圖示數量太多不會一次載入，可點選下方按鈕載入更多（或是完整載入所有圖示），左側還會列出其他的圖示集，包含每個圖示集收錄的圖示數量。

STEP 3

每個圖示集會有原始網站鏈結（在標題右側）、作者、授權方式及標籤，可利用關鍵字快速找出特定圖示。

右上角有個選單可切換小型、大型圖示尺寸或以條列方式排序，開啟複選模式或點選就複製名稱的模式，前者有助於選取多個圖示圖案、再打包將它們下載，利用右上角選單能找到下載為 Iconfont、SVG、ZIP 格式選項。

STEP 4

點選任何的圖示後下方會展開詳細資訊，會有圖示名稱、加入 Bag，還有像是 SVG、SVG Symbol、Iconify、JSX 程式碼、Vue、React、Svelte、Unplugin Icons 元件、鏈結、下載等等，可以說各項資訊非常全面。

STEP 5

當使用者開啟複選模式、或是在特定的圖示點選「add to bag」後就會在右下角找到這些圖示，有點類似購物車的概念，開啟 bag 後就能點選下方「Download Zip」將所有圖示圖案打包下載，或是「Generate Icon Fonts」產生圖示字型。