Heroicons 手工打造 SVG 免費圖示集，收錄兩種樣式 230 個常見圖案

Heroicons 是一套漂亮的手工製作 SVG 免費向量圖示集，也是 Tailwind CSS 框架開發者製作釋出的圖示圖案，收錄超過 230 個常見圖示，依照樣式分為僅有外框（Outline）和填滿實色效果（Solid）。前者主要使用於主要導覽列和營銷區塊，設計為 24×24 大小，後者適合按鈕或表單元件使用，設計為 20×20 尺寸。

這套圖示集風格細膩，而且圖形易於識別，收錄的圖示數量恰到好處，開啟網站後可直接預覽或輸入關鍵字搜尋，將游標移動到圖示上方會顯示快速複製 SVG、JSX 原始碼按鈕，除了有基本 SVG 格式外也能透過 React 和 Vue 框架載入。

Heroicons 使用 MIT 授權方式釋出，除了在 GitHub 開放原始碼亦有 Figma 檔案可下載。

Heroicons
https://heroicons.com/

使用教學

STEP 1

開啟 Heroicons 網站就會看到兩種樣式的圖示：Outline、Solid，前者大小為 24×24，後者尺寸就稍小一些，僅有 20×20，不過兩者推薦的使用情境略有不同，使用者還是可以依照自己需求選擇合適的樣式。

STEP 2

透過上方的搜尋欄位、輸入關鍵字後會顯示所有相關的圖示圖案。

STEP 3

將游標移動到圖示上方就可以複製 SVG 或複製 JSX 程式碼，如果要預覽 SVG 圖案，可以試試之前推薦的「SVG Viewer 線上檢視、最佳化 SVG 圖形，亦可轉檔 PNG 或 React 格式」線上工具，除了具有檢視 SVG 圖案的功能，也能快速轉為 PNG 圖片格式。