Ikonate 具完整自訂性免費圖示下載，SVG 向量格式可設定邊框樣式

雖然網路上有無數免費圖示可以下載使用，卻很少有「量身打造」的選擇，只能盡量找出最符合自己需求的圖示圖案，有些圖示集仍有完整自訂選項，例如 Omg-img 用一段程式碼快速插入圖示，可自訂顏色、大小或樣式，大部分的圖示則會提供一些預設大小讓使用者選擇，例如 Iconshock 收錄超過 200 萬個免費圖示下載，或是 ICOOON MONO 圖示內建七種不同的尺寸大小。

本文要介紹的「Ikonate」免費圖示集收錄兩百個圖案，是一套開放原始碼、兼具完整自訂性、易用性和最佳化向量圖示，Ikonate 特色是可直接從線上調整並預覽邊框粗細、大小和樣式（直角或圓角），設定顏色後選擇自己需要的圖案，最後一鍵打包將這些圖示匯出下載，對於開發者或設計師來說幫上不少忙。

Ikonate 提供的格式包括自訂後的 .svg 向量圖檔（適合不想編輯程式碼的開發者）、呈現於 .html 範本中的圖示，還有直接寫成程式碼的範例檔，更多自訂及使用方式可參考專案的 GitHub 頁面，有非常完整詳實的說明。

網站名稱：Ikonate
網站鏈結：https://www.ikonate.com/ （GitHub）

使用教學

STEP 1

開啟 Ikonate 網站後按下「Get Icons」就能看到如下的圖示自訂頁面，主要設定選項在左側，右側則是 Ikonate 完整圖示集，目前數量大約在兩百個左右，透過左上角還能以關鍵字快速查找相關圖案。

使用者可直接從 Ikonate 網站調整圖示邊框粗細、尺寸大小、樣式和顏色，設定後會即時更新顯示新的效果。

STEP 2

設定好後選取要下載的圖示，將左側選單列拉到最下方，按下「Export icons」即可將這些圖示打包匯出，此外，Ikonate 也提供深色模式，如果想知道圖示在深色背景的表現情形可以開啟這個選項切換。

STEP 3

下載後解壓縮就能獲取相關檔案，主要由三個資料夾構成：inline、spritesheet 和 svg，使用者可從前兩個資料夾獲取 .html 網頁格式，並查看如何在網頁中載入這些 svg 格式圖示，而 svg 資料夾則是選擇下載的所有圖示檔案。