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

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

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

IcoMoon App

網站鏈接：https://icomoon.io/app/

使用教學

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

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

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

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

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

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

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

值得一試的三個理由：

• ?收錄超過 5000 個向量圖標，選擇需要的圖案制作為圖標字型
• 將圖標下載為 SVG、PNG 或產生為圖標字型（Icon Font）
• 用戶可上傳自己的圖標文件并在在線轉為圖標字型

更多免費圖標素材：