Heroicons 教學：SVG、React、Vue 與 MIT 授權

Heroicons 是 Tailwind Labs 提供的 SVG 圖示集，可直接複製 SVG 到 HTML，也有官方 React、Vue 套件。圖示採 MIT License，可修改與用於商業專案；散布原始圖示或其重要部分時，仍要保留版權與授權聲明。

Heroicons 有哪些尺寸與樣式

Heroicons 官方 GitHub目前提供 24px outline、24px solid、20px solid 與 16px solid。每組都在固定畫布中視覺校正，某些圖示四周留白不同是為了整套平衡，不宜任意裁切每個 viewBox。

<svg class="size-6 text-gray-500" aria-hidden="true" ...>
  <path ... />
</svg>

Heroicons 使用 currentColor，可由 CSS color 控制。純裝飾圖示加 aria-hidden="true"；若圖示本身承擔按鈕名稱，則要提供可讀的 aria-label 或旁邊的隱藏文字。

npm install @heroicons/react
npm install @heroicons/vue

React 可從 @heroicons/react/24/outline 匯入，Vue 則使用 @heroicons/vue/24/solid 等路徑。只匯入需要的元件，並以 Icon 結尾的 UpperCamelCase 名稱引用。

MIT 允許使用、修改、散布與商用，但授權文字要求在軟體或其重要部分保留原版權與許可聲明。實務上可把 Heroicons LICENSE 納入第三方授權清單；若圖示被改造成品牌 Logo，還要另外檢查商標近似。

需要把自己的 SVG 組成 Icon Font 或 Sprite，可用 IcoMoon；想找更多圖示集可比較 Flaticon，但免費方案的署名規則不同，不能沿用 Heroicons 的 MIT 條件。

一定要用 Tailwind CSS 嗎？
不用。SVG 可用一般 CSS 控制尺寸與顏色。

可以直接當文字按鈕嗎？
視覺上可以，但無障礙名稱不能只靠圖形，應補可讀標籤。