IcoFont 超過 2000 個免費 SVG 圖示字型下載

IcoFont 收錄超過 2000 個免費圖示圖案，可以為你的創意設計增添趣味，這些圖案都很簡單而且易於辨識，網站將圖示依照不同主題分類為 30 種類別，讓使用者搜尋時可以更快找到自己需要的素材，使找圖的流程更快、更流暢。

IcoFont 提供 SVG 向量圖和圖示字型（Icon Font）兩種格式，可單獨下載個別圖示，也能一次選擇多個類別、圖案將它打包下載。

依照網站說明，IcoFont 圖示可使用於網頁或桌面，集合各種類型的圖示圖案，非常完整且全面的設計，而且 100% 免費！這套圖示是開放原始碼專案，所有圖示採用 CC BY 4.0 授權，字型檔案則使用 SIL OLF 授權，其他從 IcoFont 下載的非字型、非圖示檔案使用 MIT license。

IcoFont
https://icofont.com/

使用教學

STEP 1

開啟 IcoFont 網站點選「View All Icons」開啟圖示檢視器（或點選上方選單的 Icons），主要分為左右兩邊欄位，左側是各種圖示分類和數量，右側則有搜尋功能、圖示預覽和標題。

點選圖示會顯示標記、Hex 和 HTML 字元值參照（HTML Entity）資訊，點選「Download SVG 」下載該圖示的向量圖格式，或是點選「Add to collection」稍後再打包多個圖示下載。

STEP 2

除了單獨將圖示加入收藏夾，也可點選分類右上角「Add to Collection」將整個分類加入收藏稍後下載，或是點選「Download」將整個分類圖示全部下載。

加入收藏夾後點選右上角的「Collection」圖案，會看到所有被加入的圖示，點選下載按鈕就能將所有圖示打包、一次全部下載，對於只需要特定圖示的使用者來說很方便也很有用。

將圖示下載解壓縮會有三個檔案夾：css、example 和 fonts，如果要使用於網頁上，樣式表相關檔案會在 css 目錄，圖示字型則是在 fonts 目錄下，另外網站也提供使用範例，可以從 example 資料夾找到，包括一個 HTML 檔案會顯示你下載的所有圖示圖案。

STEP 3

點選 IcoFont 任意圖示會顯示標記、Hex 和 HTML 字元值參照，如果要在網頁上使用，可以參考 How to use 頁面說明載入一段 CSS 樣式表（在下載的圖示壓縮檔可找到），透過 Markup 進行調用就能在網頁上顯示特定的圖示圖案。