Unicons Icon Library 超過 4500 個免費圖示向量圖和網頁字型下載

Unicons 是一套收錄超過 4500 種圖案的圖示庫，來自開發商 Iconscout，本身有四種不同風格設計，包括單純線條（Line）、單色（Monochrome）、填滿顏色（Solid）和更細邊框線條（Thin Line），超過 20 種分類，像是箭頭、品牌標誌、商業、對話、雲端服務、通訊網路、裝置、檔案資料夾、多媒體、醫學、安全性、購物、交通工具和使用者介面，都能在圖示庫找到各種對應的圖案。

如同 Unicons 網站所述，這是一套精心設計的圖示集，每個圖案細節符合完美像素（Pixel-Perfect），提供向量圖格式 SVG 檔案讓使用者下載，亦可以網頁字型（Webfont）將圖示集整合到自己的開發專案或應用程式。

不過要注意的是 Unicons 只有免費提供「線條（Line）」圖示風格下載，其餘風格設計有部分可免費使用，但大多數都是需要付費升級 Iconscout Premium 會員才能取得。

這套圖示庫採 Apache 2.0 授權釋出，使用時需要標示出處並連結回到原網站。

如果你有興趣的話，Unicons 也是一個開放原始碼（Open Source）專案，可以從 GitHub 找到完整的圖示向量檔案，從 Unicons 網站也能取得圖示集，一共有 1206 個圖案，考量到檔案大小或速度問題的話可單獨從網站選擇要獲取的圖案。

Unicons
https://iconscout.com/unicons

使用教學

STEP 1

開啟 Unicons 點選「Explore」開始瀏覽圖示圖案，右上角可以看到這套圖示庫目前一共有四種不同的圖案風格，但只有 Liine 可以整套圖示免費下載。

STEP 2

從左側選單「Categories」選擇要瀏覽的圖示分類，或使用上方搜尋框輸入關鍵字搜尋。

STEP 3

開啟後瀏覽 Unicons 圖示庫所有素材，點選圖示會在右側顯示更大張的預覽圖，除了變更顯示顏色，也有 SVG 向量圖或打包整套圖示集的下載按鈕。

從右側點選「SVG」下載某個圖示向量圖格式，下方也有以網頁字型、Vue 或 React 載入特定圖案的程式碼可快速複製。

STEP 4

如果要下載整套圖示集（Download Bundle），點選後需要建立一個帳戶，使用 Google 或 Facebook 帳戶登入就能完成此步驟，無需額外驗證程序。

下載、解壓縮後可以獲得超過 1200 個圖示圖案，使用時記得要標示出處來源，Iconscout 也提供程式碼讓使用者快速複製取用。

STEP 5

如果選擇 Monochrome、Solid 或 Thin Line 風格的圖示圖案，左上角標示一個皇冠，代表需要付費升級為 Iconscout Premium 會員才能下載、解鎖所有的 Unicons 風格。

STEP 6

最後再回到 Unicons 做為網頁字型的使用方法，點選首頁「Start Using」會看到如下網頁畫面，直接給使用者一個對應的網頁樣式表 CSS 鏈結，只要將這段原始碼加入網頁，就能在特定位置載入圖示圖案（參考 Unicons 圖示列表找到 Font 程式碼），也是一個很快速且有效率的應用方式。