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

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

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

IcoMoon App

STEP 2

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

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

IcoMoon App

STEP 3

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

IcoMoon App

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

IcoMoon App

STEP 4

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

IcoMoon App

值得一試的三個理由:

  1. 收錄超過 5000 個向量圖式,選擇需要的圖案製作為圖示字型
  2. 將圖示下載為 SVG、PNG 或產生為圖示字型(Icon Font)
  3. 使用者可上傳自己的圖示檔並在線上轉為圖示字型
分享本文