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

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

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

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

Unicons Icon Library

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

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

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

Unicons
https://iconscout.com/unicons

使用教學

STEP 1

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

Unicons Icon Library

STEP 2

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

Unicons Icon Library

STEP 3

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

Unicons Icon Library

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

Unicons Icon Library

STEP 4

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

Unicons Icon Library

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

Unicons Icon Library

STEP 5

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

Unicons Icon Library

STEP 6

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

Unicons Icon Library

值得一試的三個理由:

  1. 精心設計的圖示集,收錄超過 20 種分類、4500 個圖案
  2. 提供向量圖 SVG 格式下載,亦能以字型方式嵌入使用
  3. 採用 Apache 2.0 授權,免費使用時需標示出處來源
分享到...