Heroicons：Tailwind CSS 團隊出品，依四種樣式分類

這份圖示 eaglepack 收錄了 Heroicons 全套 316 款圖示（icons），每款都有 Outline、Solid、Mini、Micro 四種樣式，依樣式分成四個資料夾，匯入 Eagle 就能直接挑圖。Heroicons 由 Tailwind CSS 團隊推出，採 MIT 授權，可以免費用在商業專案。Outline 是 24×24、1.5px 描邊的線性圖示，另外三種都是填色版本，分別對應 24px、20px、16px 三種使用尺寸。

做介面時，同一個圖示常常會出現在不同地方：導覽列用 24px，按鈕裡用 20px，到了表格或標籤裡又得縮到 16px。直接把大圖示縮小，線條很容易擠成一團。Heroicons 把這幾個常用尺寸各做成一套，名稱也完全一致，換尺寸時找同名的那一個就好。

Heroicons 出自 Tailwind Labs，這個團隊最有名的作品是 Tailwind CSS，一套前端工程師用來寫網頁樣式的工具，在 GitHub 上累積近 10 萬顆星。Heroicons 主要由設計師 Steve Schoger 繪製。他和 Tailwind CSS 作者 Adam Wathan 合著過介面設計書《Refactoring UI》。Heroicons 在 GitHub 上累積約 2.4 萬顆星，官方同時維護 React 和 Vue 套件，也提供 Figma 檔。

主要特色

• 每款圖示都有 Outline 24、Solid 24、Mini 20、Micro 16 四種樣式
• Outline 統一用 24×24 畫布、1.5px 描邊
• 圖示名稱和 React／Vue 套件一致，設計稿跟程式碼直接對得上
• eaglepack 依四種樣式分資料夾，不用在同一個資料夾裡分辨尺寸

Heroicons 可以免費商用嗎？

Heroicons 採 MIT 授權，個人和商業專案都能免費使用，也可以修改。用在自己的設計稿、網站或 App 介面裡，不需要在畫面上標示來源；如果要把圖示檔本身重新打包、對外散布，就要附上原本的 MIT 授權聲明。

資源規格與 eaglepack 整理方式

所有圖示都是 SVG，直接拖進 Figma、Illustrator、Sketch 都能用。eaglepack 內的資料夾如下：

• Outline · 24px（316 款）
• Solid · 24px（316 款）
• Mini · 20px（316 款）
• Micro · 16px（316 款）

另外有一個 _Deprecated 資料夾，收了 8 款官方已經從網站移除、但套件裡為了相容舊版仍保留的圖示（例如 arrow-small-up、plus-small），有 Outline、Solid、Mini 三種樣式。維護舊專案時可能用得到，新設計就不用從這裡挑。

Heroicons 適合用在哪裡？

Outline 和 Solid 24px 適合放在 App 的 Tab Bar、Dashboard 側邊欄選單這類導覽位置，線性和填色兩版剛好可以拿來區分「未選取」和「選取中」。Mini 20px 適合放在按鈕和輸入框裡；Micro 16px 則適合表格、標籤（badge）、下拉選單這類資訊密集的地方。

如果你跟用 Tailwind CSS 的工程師合作，Heroicons 也能減少交接時的來回確認。設計稿裡用了哪個圖示，工程師用同樣的名稱就能從 @heroicons/react 或 @heroicons/vue 套件裡叫出來，不用另外切圖或匯出 SVG。這對 SaaS 後台、內部管理工具這類開發節奏快的專案特別省事。