之前介紹過不少 SVG 格式的免費向量圖示集,像是 iconhub、Heroicons、Emblemicons 或是 IcoMoon App 等等,不同圖示素材都有自己的樣式風格,不過普遍都是較為簡潔的線條,可符合各種設計情境,此外,SVG 圖示也能快速複製程式碼,在網頁特定位置直接顯示,因為其向量圖特性無論是放大縮小或是調整為各種顏色、背景也都很簡單,不會有失真或是模糊等問題。
本文要介紹的「Tabler Icons」是一套免費圖示,一共收錄 1298 個圖案,其特色是具備完整自訂性(Fully customizable),使用者可直接開啟 Tabler Icons 網站預覽所有圖示,或是以搜尋方式輸入關鍵字找特定圖案,透過網頁編輯器調整圖示大小、線條粗細、顏色參數,即時在網頁上預覽效果。
點選 Tabler Icons 圖示時會自動複製 SVG 程式碼,就能快速取得圖示,這套圖示以 MIT license 授權方式釋出。
Tabler Icons
https://tablericons.com/
使用教學
STEP 1
開啟 Tabler Icons 網站會看到目前所有的圖示列表,上方會有一個可調整圖示尺寸大小、線條粗細和顏色的設定選項,中間則有搜尋欄位,比較有趣的是使用者能自行選擇是否要顯示網站各種功能,亦可讓功能列固定在畫面上方,有助於設定後預覽其他的圖示圖案。
STEP 2
從網站工具列可以直接調整圖示大小、線條粗細和顏色,網站還直接給出一些調色盤色彩、點選就能套用。
STEP 3
點選 Tabler Icons 網站上的圖示後,SVG 原始碼就會自動複製到剪貼簿,如果想要檢視 SVG 效果或是轉檔為 PNG 格式可以使用以下兩個工具:
值得一試的三個理由:
- Tabler Icons 免費圖示集,一共收錄 1298 個圖示圖案
- 線上即時調整圖示大小、線條粗細和顏色,即時在網頁預覽效果
- 點選圖示快速將 SVG 原始碼複製到剪貼簿