IcoMoon App 收錄 5500 個免費向量圖示，選取下載 SVG、PNG 圖示字型

網路上有不少提供免費圖示的素材庫可以使用，大部分都是以風格分類，可一次下載整套圖示，再從圖示集找出自己需要的圖示設計，除了常見的 PNG 格式以外也會有 SVG 向量圖檔，檔案容量更小，也可自行設定要使用的尺寸大小或顏色等等，或是透過網頁字型（Webfont）形式只要載入 CSS 樣式表，就能以程式碼載入特定圖案。

本文要介紹「IcoMoon」是一個提供精緻設計圖示集網站，其中有個 IcoMoon App 功能非常方便好用，可以瀏覽超過 5500 個免費向量圖示，選擇自己需要的圖案線上製作為最佳化的圖示字型格式（Icon Fonts），亦可產生為 SVG 和 PNG 檔案。

值得一提的是 IcoMoon App 允許使用者上傳自己的圖示檔（僅限 SVG 格式），將圖示線上轉為 Icon Font 圖示字型，轉換後下載就能取得相關檔案，包括 CSS 和示範頁面都幫你直接產生，非常好用，依照說明網頁將語法帶入就能在特定位置載入圖示。

IcoMoon App
https://icomoon.io/app/

使用教學

STEP 1

開啟 IcoMoon App 會看到預設的圖示集，點選左上角「Import Icons」可匯入自己手邊的 SVG 圖示，再從 IcoMoon 選擇需要的圖案然後一起打包成圖示字型。

IcoMoon App 也有提供「Icon Library」圖示庫功能（從 Import Icons 右側的圖示庫圖案進入），會有需付費才能使用的圖示或免費圖示，分辨方式很簡單，只要圖示集下方顯示的按鈕為「Add」代表可直接加入選擇，若是 Purchase 或 Go Premium 字樣就必須要付費購買或升級才能使用。

STEP 2

從 IcoMoon App 選擇要使用的圖示圖案，如果在前一個步驟有加入其他圖示集，往下捲動就會看到。

從圖示集右上角按鈕切換顯示或隱藏，也能調整每個圖示集要顯示的位置，選好所有需要的圖示後點選下方按鈕來產生 SVG、PNG 壓縮檔或產生字型。

STEP 3

例如我點選「Generate SVG & More」會將我選取的圖示產生為兩種格式，接著點左下角「Download」下載並解壓縮後就會取得 SVG 和 PNG，將游標移動到圖示上方會點選取得代碼會出現詳細資料，像是 HTML、CSS 和 Symbol definition 語法，稍微研究一下就能將圖示運用到網頁或是應用程式。

如果是點選「Generate Font」會出現類似畫面，點選右下角「Download」也能取得製作產生後的圖示字型相關檔案，一樣點選圖示會顯示相關資訊，或是解壓縮檔案、開啟裡頭的 demo.html 會有示範和教學說明可以參閱。

STEP 4

除此之外，IconMoon App 有個比較特別的功能是「Quick Usage」，直接產生 CSS 樣式表和相關檔案，只要點選上方說明「Enable Quick Usage」開啟這項功能就會出現網址，不過臨時的網址只有 24 小時保存期限，僅供測試使用，其實只要將產生的檔案下載回來自行託管就沒有使用期限問題。