Heroicons – 免費商用 Icons SVG 線上圖標，可直接在 HTML 中使用 CSS 類別元素顯示 Icons

Heroicons 是由 Tailwind CSS 團隊打造的免費開源 SVG 圖標庫，收錄超過 300 個高品質圖標，提供 Outline、Solid、Mini 三種變體風格，MIT 授權完全可商用。所有圖標都能直接從官方網站複製 SVG 或 JSX 格式程式碼，貼入 HTML 即可顯示，並可透過 CSS 類別輕鬆自訂顏色與尺寸。

網站當中所有的圖標 Icons 都是採用「MIT Licensed」授權方式，這是許多開源軟體當中最廣泛被使用的授權方式之一。簡單來說，被授權人有權利使用、複製、修改、合併、出版發行、散布、再授權或銷售軟體及軟體的副本，及授予被供應人同等權利。

這意味著你可以任意使用 Heroicons 當中提供的所有圖標 Icons，也能將其運用在商業用途之中，且不須署名或附上來源，你甚至能修改後再授權甚至販賣都沒有問題。如果你還想尋找其他可商用 Icons 圖標，可以參考：Unicons Solid、CSS.GG、Tabler Icons、SVG Repo、Heroicons.dev、Ionicons 等等相關免費素材，點擊了解更多詳細內容介紹。

網站名稱：Heroicons
網站網址：https://heroicons.com/

Heroicons 是什麼？Tailwind CSS 團隊打造的 SVG 圖標庫

Heroicons 是由 Tailwind CSS 的核心開發者 Adam Wathan 與知名設計師 Steve Schoger 共同打造的免費開源 SVG 圖標庫。這組圖標資源最初是為了 Tailwind CSS 官方文件而設計的，後來因為廣受開發者社群歡迎，便獨立成為一個開源專案，目前在 GitHub 上已累積超過 20,000 顆星的關注度，成為前端開發圈最熱門的圖標庫之一。

Heroicons 的設計理念圍繞著「一致性」、「簡潔性」與「可擴展性」三大核心原則。每一個圖標都經過精心設計，確保視覺風格統一、線條粗細一致，讓你在網站或應用程式中使用時，不需要額外調整就能維持專業且協調的視覺體驗。如果你曾經用過 Tailwind Ink 這類 Tailwind 生態系的工具，對這種注重開發者體驗的設計哲學應該不陌生。

Adam Wathan 是 Tailwind CSS 的創建者，同時也是 Laravel 生態系中知名的開發者。Steve Schoger 則是一位專精 UI 設計的設計師，他在 Twitter 上分享的「UI 設計小技巧」系列深受設計師社群歡迎。兩人合作打造 Heroicons 的初衷，是為 Tailwind CSS 的官方文件提供一套統一的圖標系統，但因為圖標品質極高、風格百搭，很快就從 Tailwind 的附屬資源成長為一個獨立且廣受歡迎的開源專案。這種由實際開發需求驅動的設計過程，讓 Heroicons 的每一個圖標都非常貼近真實的使用場景，而不是為了湊數量而生產的裝飾性圖標。

與 Feather Icons 相比，Heroicons 提供了更豐富的圖標變體選擇。目前收錄超過 300 個高品質 SVG 圖標，涵蓋了導航、操作、通知、社交、媒體等常見的使用者介面場景。所有圖標都採用 MIT 開源授權，完全免費且可商用，你可以從 Heroicons 官方網站 直接搜尋並複製使用。

Heroicons 最吸引人的地方在於它與 Tailwind CSS 生態系的無縫整合。不論你是在純 HTML 專案中直接嵌入 SVG，還是在 React、Vue 等前端框架中透過官方套件引入，Heroicons 都能完美融入你的開發工作流。而且所有圖標都已經過像素級別的優化處理，在各種解析度（包含 Retina 螢幕）下都能保持清晰的顯示效果。這與 Iconhub 和 Iconstore 等圖標庫追求高品質渲染的目標一致。

值得一提的是，Heroicons 的圖標命名遵循了語義化的慣例，每個圖標都以「功能 + Icon」的方式命名，例如 HomeIcon、UserIcon、SearchIcon 等。這樣的命名方式不僅讓你在搜尋時更容易找到需要的圖標，在程式碼中閱讀時也更加直覺。這種注重開發者體驗的設計，是 Tailwind CSS 生態系一貫的特色，也是 Heroicons 能在眾多圖標庫中脫穎而出的原因之一。

如果你正在建立一個需要大量圖標的 Web 應用，Heroicons 提供了完善的配套方案。你可以從簡單的 HTML 嵌入開始，隨著專案規模擴大，再逐步遷移到 React 或 Vue 的元件化使用方式。這種漸進式的採用策略讓 Heroicons 成為各種規模專案都適合的圖標解決方案。對於需要更多圖標變化的場景，你也可以搭配 Emblemicons 或 LineIcons 等圖標庫來補充 Heroicons 沒有涵蓋到的圖標。

Heroicons 三種圖標變體：Outline、Solid 與 Mini 差異解析

Heroicons 在 v2 版本中提供了三種不同的圖標變體，分別是 Outline（描邊）、Solid（填充） 與 Mini（迷你）。這三種變體各有其適用場景，理解它們之間的差異能幫助你在不同的 UI 設計需求中做出更好的選擇。

Outline 描邊風格

Outline 是 Heroicons 最具代表性的風格。所有圖標以 24×24 像素的網格為基礎，採用 stroke-based 描邊設計，線條簡潔優雅，視覺重量較輕。這種風格特別適合用於導航列、工具列、功能按鈕等預設狀態的呈現。當你需要在介面中保持視覺平衡、不讓圖標搶走主要內容的注意力時，Outline 風格是最佳選擇。它與 LineIcons 的設計理念相近，都強調以最少的線條傳達最清晰的意義。

Solid 填充風格

Solid 同樣基於 24×24 像素的網格，但採用 fill-based 填充設計，整個圖標以實心填充呈現。相較於 Outline，Solid 的視覺重量更重，能吸引更多注意力，因此非常適合用於強調狀態、CTA（Call to Action）按鈕、以及圖標的 hover 或 active 切換效果。實務上，許多開發者會將 Outline 作為預設狀態，Solid 作為互動後的回饋狀態，兩者搭配使用能創造出良好的互動體驗。這個概念與 Unicons Solid 提供的實心圖標理念相似。

Mini 迷你風格

Mini 是 Heroicons v2 新增的變體，採用 20×20 像素的精簡網格設計。雖然尺寸更小，但它仍然保持了與 Outline 和 Solid 一致的設計語言與視覺風格。Mini 變體特別適合用於表格、下拉選單、麵包屑導航、標籤等空間受限的使用場景。當介面中的可用空間有限，但又需要清楚傳達圖標意義時，Mini 就是你最好的選擇。

三種變體的設計一致性意味著你可以在同一個專案中混搭使用，而不會產生視覺衝突。比方說，側邊欄導航使用 Outline、互動按鈕使用 Solid、而表格操作欄使用 Mini，整體介面依然能保持和諧統一。這種彈性是 Tabler Icons 和 Remix Icon 等圖標庫同樣具備的優勢，但 Heroicons 在與 Tailwind CSS 的整合度上更勝一籌。

在實際的 UI 設計中，三種變體的搭配使用有一套常見的最佳實踐。預設狀態使用 Outline，當使用者與圖標互動（例如 hover 或 click）時切換為 Solid，這樣的設計模式能提供清晰的視覺回饋，讓使用者知道哪些元素是可以互動的。而 Mini 變體則專門用於空間受限的場景，例如表格中的操作按鈕、下拉選單中的選項圖標、或是麵包屑導航中的分隔符號。透過這種「一套圖標、三種呈現」的設計方式，你可以在整個應用程式中維持視覺的一致性，同時又不失功能性。

需要留意的是，Outline 和 Solid 變體都基於 24×24 的像素網格，而 Mini 則是 20×20。這意味著在相同的 CSS 尺寸設定下，Mini 變體的圖標會顯得更為精緻小巧。如果你需要在非常緊湊的 UI 元素中使用圖標，例如緊鄰文字的小圖標或是在按鈕中搭配簡短文字，Mini 變體往往能提供更好的視覺比例。對於更大尺寸的圖標需求，你也可以透過 CSS 將 SVG 放大到 32×32 或 48×48，由於向量圖形的特性，放大後依然能保持清晰銳利。

MIT 授權條款與商用須知

Heroicons 採用 MIT 授權方式，這是開源界最寬鬆的授權方式之一。了解 MIT 授權的具體內容，能讓你在使用 Heroicons 時更加安心，特別是在商業用途的場景中。

MIT 授權的核心條款

簡單來說，MIT 授權賦予被授權人以下權利：自由使用、複製、修改、合併、出版發行、散布、再授權或銷售軟體及軟體的副本，以及授予被供應人同等權利。這意味著你可以將 Heroicons 的圖標用在任何地方，包含商業網站、SaaS 產品、行動應用程式、電商平台等，完全沒有限制。

MIT 授權唯一的具體要求是：在原始碼中必須保留版權聲明與授權條款的文字。但對於圖標這類素材資源來說，你在實際使用時並不需要在網站上標注來源或署名作者。這點與 iconmonstr 的 CC0 授權略有不同，CC0 是直接放棄所有版權，而 MIT 則要求在原始碼層級保留聲明。

商用場景注意事項

在實際的商業應用中，你可以將 Heroicons 的圖標直接嵌入商業產品的介面中，也可以將圖標修改後使用，甚至可以將修改後的版本重新授權或銷售。舉例來說，如果你在開發一個付費的 WordPress 佈景主題，你完全可以使用 Heroicons 的圖標，不需要額外支付授權費用，也不需要在使用者端標注圖標來源。同樣地，如果你正在開發一個 SaaS 服務或是行動應用程式，也可以放心使用 Heroicons 的所有圖標，不用擔心侵權問題。

不過，雖然 MIT 授權不強制署名，但如果你在專案的原始碼中保留了版權聲明，這是一種對開源貢獻者的尊重。在實務上，多數開發者會在專案的 README 或 LICENSE 檔案中統一列出所有使用的開源資源及其授權資訊。如果你還在尋找更多可商用的圖標資源，可以參考 Simple Icons 或是 FreeImages 等同樣提供友善授權的素材網站。同時 FindIcons 作為全球最大的圖示搜尋引擎，也能幫助你找到各種風格的可商用圖標。

關於 MIT 授權與其他常見開源授權的差異，MIT 授權與 Apache 2.0 相比條款更為簡潔，沒有專利授權的相關條文；與 GPL 相比，MIT 不要求衍生作品也必須開源。這使得 MIT 授權成為圖標、UI 元件等設計資源最常採用的授權方式。對於企業用戶來說，MIT 授權的法律風險也相對較低，不需要擔心授權合規的問題。如果你在使用過程中對授權有任何疑慮，可以直接查閱 Heroicons GitHub 儲存庫中的 LICENSE 檔案，裡面有完整的授權條款原文。

Heroicons 線上使用教學：搜尋、複製與嵌入圖標

Heroicons 的使用方式非常直覺，不需要註冊帳號或安裝任何軟體。只要進入官方網站，就能直接搜尋、複製並使用所有圖標。以下帶你一步步了解完整的操作流程。

在使用 Heroicons 之前，建議你先想好需要的圖標類型和大致的使用場景。例如，如果你正在設計一個後台管理系統的導航列，可能需要 home、user、settings、chart、logout 等類型的圖標。有了明確的需求清單後，在 Heroicons 上搜尋會更加快速有效率。官網的搜尋功能支援模糊匹配，即使你輸入的關鍵字不夠精確，也能找到相關的圖標。

搜尋與瀏覽圖標

開啟 Heroicons 官方網站 後，你會看到一個簡潔的介面，上方有搜尋框，下方則是圖標的網格排列。你可以直接在搜尋框中輸入英文關鍵字來快速定位圖標，例如輸入「home」會顯示房屋圖標、「user」會顯示使用者圖標、「search」則會顯示搜尋圖標。如果你不知道確切的關鍵字，也可以直接捲動瀏覽全部圖標。由於 Heroicons 的圖標都經過語義化命名，大多數常見的英文單字都能對應到相應的圖標，例如 arrow（箭頭）、check（勾選）、x-mark（關閉）、chevron（折線）等等。

在搜尋框下方，你可以切換 Outline、Solid、Mini 三種變體。點擊不同的變體標籤後，所有圖標都會即時切換成對應的風格，讓你方便比較同一個圖標在不同變體下的視覺呈現。這個設計與 SVG Repo 和 Heroicons.dev 的瀏覽體驗類似，都是以視覺化方式呈現，方便你快速找到需要的圖標。

複製 SVG 與 JSX 格式

當你找到想要的圖標後，將滑鼠移入圖標上方，此時就會顯示「Copy SVG」與「Copy JSX」兩個按鈕。點擊「Copy SVG」會複製純 SVG 程式碼，適合在 HTML 檔案中直接使用；點擊「Copy JSX」則會複製 React JSX 格式的程式碼，適合在 React 專案中直接貼入。複製後的程式碼會像以下格式：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path fill-rule="evenodd" d="..." clip-rule="evenodd" />
</svg>

這段 SVG 程式碼可以直接貼入 HTML 檔案中，瀏覽器就能正確渲染圖標。整個流程不超過 10 秒鐘，比起在 FindIcons 或 IcoMoon App 等圖標搜尋引擎上下載檔案再匯入的方式，效率高出許多。而且因為 SVG 是向量格式，你可以自由縮放而不會出現鋸齒或模糊的問題，這點是點陣圖格式的圖標（如 PNG 或 GIF）所無法比擬的。

自訂圖標顏色與尺寸

Heroicons 的 SVG 圖標使用了 currentColor 作為填色設定，這意味著圖標會自動繼承父元素的文字顏色。你只需要在 SVG 元素或其父容器上設定 CSS 的 color 屬性，就能改變圖標顏色。如果要調整尺寸，則是透過 width 和 height 屬性來控制。這種 currentColor 的設計非常貼心，因為你不需要針對每個圖標單獨設定顏色，只要統一控制父容器的文字顏色，所有圖標就會自動跟著變化。這在深色模式與淺色模式切換的場景中特別好用，你只需要改變 body 的文字顏色，所有 Heroicons 圖標就會自動切換成對應的顏色，完全不需要額外的 CSS 媒體查詢。

如果你使用 Tailwind CSS，那設定起來更是方便。只要加上 w-6 h-6 調整大小、text-blue-500 設定顏色，就能快速完成自訂。這種以 CSS 類別控制圖標外觀的方式，與 CSS.GG 的純 CSS 圖標設計理念相似，但 Heroicons 採用的是 SVG 格式，在縮放時不會失真，這點又更勝一籌。你也可以參考 CSS Gradient 或 CSS box-shadow examples by CSS Scan 等資源來學習更多 CSS 樣式技巧。

進階一點的用法，你還可以為 SVG 圖標加入 CSS 動畫效果。例如使用 Tailwind 的 animate-spin 讓載入圖標旋轉、animate-pulse 讓圖標閃爍提示，或是使用 transition-colors 讓顏色變化更加流暢。這些動畫效果搭配 Heroicons 的簡潔設計，能為你的介面增添生動的互動感。如果你對 CSS 動畫有興趣，CSS Background Patterns 也提供了許多有趣的 CSS 樣式靈感。

另一個實用的技巧是將 Heroicons 的 SVG 圖標與 CSS Flexbox 或 Grid 排版搭配使用。在導航列中，你可以將圖標與文字放在同一個 flex 容器中，透過 gap 屬性控制間距，就能輕鬆實現圖標與文字的完美對齊。這種排版方式在各種響應式設計中都能正常運作，不需要額外的媒體查詢調整。對於需要建立複雜 UI 佈局的開發者，這個技巧非常實用。

Heroicons 開發者整合：npm 安裝與 React/Vue 使用方式

如果你是前端開發者，除了從官網手動複製 SVG 程式碼之外，Heroicons 還提供了更便利的 npm 套件，讓你能在 React 或 Vue 專案中以元件化的方式使用圖標。這種做法不僅程式碼更整潔，後續維護也更加輕鬆。

npm 安裝 Heroicons

Heroicons 提供了兩個獨立的 npm 套件，分別對應 React 和 Vue 兩大前端框架。安裝方式非常簡單：

React 專案：

npm install @heroicons/react

Vue 專案：

npm install @heroicons/vue

安裝完成後，你就可以在專案中透過 import 方式引入任何一個圖標元件。每個圖標元件都支援 Outline、Solid、Mini 三種變體，分別位於不同的路徑下。這種模組化的設計讓你只會打包實際使用到的圖標，不會造成整體檔案體積膨脹。如果你的專案有使用 快取外掛 或是 Cloudflare CDN 等優化方案，搭配 Tree-shaking 機制可以進一步提升載入效能。

在使用 npm 套件時有一個重要的細節值得注意：Heroicons 的 import 路徑決定了你使用的是哪種變體。路徑中的數字代表圖標尺寸（24 或 20），而最後一段則代表風格（outline 或 solid）。例如 @heroicons/react/24/outline 代表 24×24 的描邊風格，@heroicons/react/24/solid 代表 24×24 的填充風格，@heroicons/react/20/solid 則代表 20×20 的迷你填充風格。這個路徑命名規則在 React 和 Vue 套件中是一致的，方便你在不同框架之間切換。

React 中使用 Heroicons

在 React 中使用 Heroicons 的方式非常直覺，就如同使用一般元件一樣：

import { HomeIcon } from '@heroicons/react/24/outline'

function Navbar() {
  return (
    <nav>
      <HomeIcon className="w-6 h-6 text-blue-500" />
      <span>首頁</span>
    </nav>
  )
}

你可以透過 className 屬性來自訂圖標的大小、顏色等樣式，搭配 Tailwind CSS 的工具類別，一行程式碼就能完成所有設定。如果你需要 Solid 或 Mini 變體，只需要更改引入路徑即可：

// Solid 變體
import { HomeIcon } from '@heroicons/react/24/solid'

// Mini 變體
import { HomeIcon } from '@heroicons/react/20/solid'

這種元件化的使用方式讓圖標管理變得非常方便，每個圖標都是一個獨立的 React 元件，你可以輕鬆地在不同頁面和元件之間重複使用。對於注重 SEO 優化 的開發者來說，這種方式也比傳統的圖片圖標更容易進行無障礙優化。你可以在每個圖標元件上添加 aria-label 或 aria-hidden 屬性，確保螢幕閱讀器能正確解讀圖標的含義，這對於提升網站的無障礙性評分非常有幫助。

Vue 與其他框架整合

在 Vue 3 專案中，你可以透過 @heroicons/vue 套件來使用 Heroicons：

對於 Svelte 使用者來說，雖然 Heroicons 沒有提供官方的 Svelte 套件，但你可以直接從官網複製 SVG 程式碼，貼入 Svelte 元件的 template 中使用。Svelte 對 SVG 的原生支援非常好，你可以像操作一般 HTML 元素一樣，為 SVG 圖標添加事件監聽器和響應式屬性。同樣地，Angular 開發者也可以將 SVG 程式碼嵌入元件的 template 中，或是建立一個共用的圖標元件來統一管理所有圖標的使用。無論你使用什麼前端框架，Heroicons 的 SVG 格式都能輕鬆整合。

<script setup>
import { HomeIcon } from '@heroicons/vue/24/outline'
</script>

<template>
  <HomeIcon class="w-6 h-6 text-blue-500" />
</template>

如果你的專案不是 React 或 Vue，也可以直接從官網複製 SVG 程式碼貼入 HTML 中使用。這種方式適用於所有前端框架，包含 Svelte、Angular、甚至是純 HTML 靜態頁面。另一個選項是透過 CDN 引入，例如使用 unpkg 或 jsDelivr 載入 Heroicons 的 SVG 檔案。無論你選擇哪種方式，Heroicons 的 SVG 格式都能確保圖標在任何解析度下保持清晰，這對於注重 網站速度 和使用者體驗的專案來說是非常重要的優勢。

Heroicons 在 WordPress 中的使用方式

對於使用 WordPress 架站的站長來說，Heroicons 同樣是非常實用的圖標資源。不論你是想在文章中插入圖標、在佈景主題中加入裝飾性圖案，還是在自訂頁面中豐富視覺元素，都能透過以下幾種方式在 WordPress 中使用 Heroicons。

透過自訂 HTML 區塊嵌入

在 WordPress 的區塊編輯器（Gutenberg）中，最簡單的方式就是使用「自訂 HTML」區塊。你只需要從 Heroicons 官方網站 複製 SVG 程式碼，然後貼入自訂 HTML 區塊中即可。如果需要調整圖標的大小或顏色，可以在 SVG 標籤中加入 inline style。這種方式不需要安裝任何額外的 WordPress 外掛，也不需要修改佈景主題的程式碼，非常適合不具備程式開發能力的站長使用。而且在 WordPress 5.0 之後的版本中，區塊編輯器已經成為預設的編輯器，所以幾乎所有 WordPress 網站都能使用這個方法。

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
     style="width: 24px; height: 24px; color: #3B82F6;">
  <path fill-rule="evenodd" d="..." clip-rule="evenodd" />
</svg>

這種方式適合在文章或頁面中偶爾使用幾個圖標的場景。每個圖標都是純 SVG 程式碼，不會增加額外的 HTTP 請求，對網站載入速度的影響微乎其微。搭配良好的 WordPress 速度優化 策略和優質的 WordPress 佈景主題，你的網站可以既美觀又快速。

佈景主題與外掛整合

如果你是佈景主題或外掛的開發者，可以在 PHP 模板中直接使用 inline SVG。一個常見的做法是將常用的圖標定義為 SVG sprite，放在佈景主題的範本檔案中，然後在需要的地方透過 <use> 標籤引用。這樣不僅可以重複使用圖標，還能減少重複的 SVG 程式碼，提升頁面載入效能。

另一種方式是使用 WordPress 的 Shortcode 功能。你可以安裝自訂 Shortcode 外掛，將常用圖標註冊為 Shortcode，例如 [heroicon name="home"]，這樣在編輯文章時就能像插入短代碼一樣方便地加入圖標。不論你選擇哪種方式，都建議搭配 SEO 外掛 來確保圖標不會影響搜尋引擎的內容解析，同時使用 快取外掛 來最佳化整體效能。對於想進一步自訂 WordPress 編輯器的使用者，可以參考 Disable Comments 等外掛的開發思路。

如果你的 WordPress 網站是使用 Bluehost 或其他主機服務託管的，一般來說 inline SVG 圖標對伺服器效能的影響非常小。SVG 程式碼是直接嵌入 HTML 中的，不需要額外的檔案請求，因此在頻寬使用和伺服器負載方面都非常輕量。不過，如果你在同一個頁面中使用了大量的 SVG 圖標（例如超過 50 個），建議將重複使用的圖標改用 SVG sprite 的方式來減少 HTML 體積。你可以參考 如何在 WordPress 中使用 WebP 圖片格式 這篇文章來了解更多關於圖片效能優化的知識。

Heroicons 與其他免費圖標庫比較

市面上有許多優質的免費圖標庫可供選擇，每一種都有其獨特的設計風格與技術特點。了解 Heroicons 與其他主流圖標庫的差異，能幫助你根據專案需求做出最適合的選擇。

Heroicons vs Feather Icons

Feather Icons 和 Heroicons 在設計理念上有不少相似之處，兩者都強調簡潔的線條和一致的視覺風格。不過 Feather Icons 僅提供一種描邊風格，圖標數量約 200+ 個；而 Heroicons 則提供了 Outline、Solid、Mini 三種變體，圖標數量超過 300 個，適用場景更為廣泛。如果你追求極致的簡約美學，Feather Icons 可能更適合；但如果你需要更多樣化的變體選擇，特別是需要填充風格的場景，Heroicons 的彈性會更大。兩者皆為 MIT 授權，都可以自由商用。

Heroicons vs Tabler Icons、CSS.GG 與 Ionicons

Tabler Icons 收錄了超過 558 個圖標，數量比 Heroicons 更豐富，也提供了描邊與填充兩種風格。Tabler Icons 的設計風格略有不同，線條更為粗獷，適合需要較高視覺辨識度的場景。但 Heroicons 在與 Tailwind CSS 的整合度上更具優勢，特別是官方提供了 React 和 Vue 的專用套件。

CSS.GG 採用了獨特的純 CSS 實作方式，不依賴 SVG 或字體檔案，而是利用 CSS 偽元素來繪製圖標。這種方式的優點是零外部依賴，但缺點是圖標的複雜度有限，而且客製化的彈性不如 SVG 格式。如果你特別在意效能、希望減少所有外部資源的載入，CSS.GG 是一個值得考慮的替代方案。

Ionicons 由 Ionic 團隊開發，收錄超過 1,200 個圖標，支援 Web、iOS、Android 等多平台應用。相較之下，Heroicons 更專注於 Web 開發場景，但在跨平台的廣度上不及 Ionicons。如果你的專案需要同時支援 Web 和行動裝置的原生介面，Ionicons 會是更全面的選擇。

整體來說，如果你已經在使用 Tailwind CSS，或是你的專案主要是 Web 應用，Heroicons 會是最自然且最順手的選擇。它的設計語言與 Tailwind 完美契合，官方維護的 React 和 Vue 套件也讓整合變得毫不費力。但如果你有其他特定的需求，例如追求圖標數量的多樣性，可以考慮 IconPark 等替代方案。

在選擇圖標庫時，建議你可以從以下幾個維度來評估：圖標數量是否涵蓋你的使用場景、是否提供多種變體風格、授權條款是否允許商用、是否有官方維護的框架整合套件、以及圖標的視覺風格是否與你的品牌或產品調性一致。Heroicons 在框架整合和視覺一致性方面表現出色，但在圖標總數上不及 Remix Icon 或 Ionicons 等競品。了解這些差異後，你就能根據專案的具體需求做出最佳選擇。

Heroicons 在 Figma 與設計工具中的整合

對於 UI/UX 設計師來說，能在設計工具中直接使用與開發一致的圖標資源，是確保設計到開發交接順暢的關鍵。Heroicons 在這方面也提供了良好的支援，讓設計師和開發者之間的協作更加無縫。

Figma 社群資源

Figma Community 上提供了官方的 Heroicons 組件庫，你可以直接在 Figma 中搜尋並複製到自己的專案中使用。這個組件庫包含了 Outline、Solid、Mini 三種變體的所有圖標，而且支援 Figma 的 Component 屬性功能，讓你可以快速切換不同的圖標與變體風格。

使用 Figma 版的 Heroicons 有幾個明顯的好處：所有圖標的尺寸、間距、線條粗細都經過標準化處理，不需要手動調整；你可以利用 Auto Layout 功能讓圖標與文字自動對齊；而且因為是向量元件，縮放到任何尺寸都不會失真。這與你在 Free Deca UI Kit 或 UI Design Daily 等設計資源中找到的 UI 組件使用體驗類似，但 Heroicons 的圖標更專注於功能性圖示，與開發端的對接也更為直接。

其他設計工具與工作流程

如果你使用的不是 Figma，也能輕鬆將 Heroicons 整合到你的設計工作流中。你可以從 Heroicons 的 GitHub 儲存庫下載完整的 SVG 檔案集，然後匯入到 Sketch、Adobe XD 等設計工具中使用。下載後的 SVG 檔案按照 Outline、Solid、Mini 三種變體分類存放，方便你按需匯入。

在設計到開發的交接流程中，建議的做法是：設計師在 Figma 或其他工具中使用 Heroicons 組件，開發者則透過 npm 套件或直接複製 SVG 程式碼來實作。因為兩者使用的是完全相同的圖標原始檔，所以能確保設計稿與最終產品之間的視覺一致性。如果你需要對 SVG 檔案進一步優化，可以使用 SVGOMG 這類 SVG 壓縮工具來減小檔案體積，或是參考 Compressor.io 了解更多圖片壓縮的技巧。對於需要在網頁中產生自訂圖形元素的場景，Blobs 也是一個有趣的輔助工具。想要提升 Mockup 品質的設計師，也可以試試 Clay Mockups。

在實際的團隊協作中，建立一套圖標使用規範非常重要。你可以製作一份簡單的設計文件，列出專案中常用的圖標名稱、對應的 Heroicons 名稱、以及在不同場景下應該使用哪種變體（Outline、Solid 或 Mini）。這份文件不僅能幫助新成員快速上手，也能避免同一個專案中出現風格不一致的圖標使用情況。這種系統化的設計管理方式，與 UI Design Daily 等資源提倡的設計系統理念是一致的。

更多免費圖標與網頁設計資源推薦

如果你對 Heroicons 感興趣，那以下這些免費的圖標與設計資源同樣值得一試。每一種都有其獨特的特色與適用場景，根據你的專案需求選擇最合適的工具，能大幅提升開發效率。

開源圖標庫推薦

• Remix Icon — 收錄超過 2,000 個開源圖標，提供線性與填充兩種風格，MIT 授權可自由商用。圖標種類非常豐富，涵蓋了幾乎所有常見的 UI 使用場景，是數量最豐富的免費圖標庫之一。
• Feather Icons — 超過 200 個簡約風格的開源圖標，強調以最少的線條表達最清晰的意義。如果你喜歡極簡美學，Feather Icons 是非常適合的選擇。
• Tabler Icons — 收錄超過 558 個高品質圖標，同樣採用 MIT 授權，支援線上客製化圖標外觀樣式後再下載，客製化程度很高。
• IconPark — 由字節跳動（ByteDance）官方出品，收錄超過 1,287 個高品質圖標，支援線上即時調整圖標的外觀、顏色、線條粗細等參數。
• LineIcons — 超過 2,000 個線形圖標，專為設計師與開發人員設計，提供多種格式下載。

商用圖標資源

• Icons8 — 一站式設計資源平台，不僅提供大量圖標免費下載，還涵蓋了免費圖片、向量插圖、音樂等多媒體素材。支援直接嵌入 HTML 使用，非常方便。
• Iconshock — 提供超過 200 萬個免費圖標，附上來源可作為個人使用，$99 美元即可升級為終身可商業使用的方案，對於需要大量圖標的商業專案來說非常划算。
• Flaticon — 全球最大的線上免費圖標庫，提供各種格式的圖標下載，只需署名即可免費用於商業或個人用途。
• IcoMoon App — 收錄超過 5,500 個免費線上圖標資源，提供 SVG 與 PNG 格式，並可自定義圖標字型，適合需要建立專屬圖標字型的開發者。
• Iconstore — 高畫質免費 Icons 圖標庫，提供 234+ 個圖標集合包，CC0 授權可免費作為商業用途。
• Emblemicons — 免費開源圖標，高達 1,000+ 個產品開發、設計與業務展示的圖標樣式。

這些圖標資源各有特色，建議你可以根據專案的需求與設計風格來選擇最適合的方案。如果你還在尋找更多設計靈感，也可以參考 可商用無版權免費圖庫懶人包，裡面整理了 47 個優質的免費圖片、圖示、圖標、素材與背景資源網站。對於需要免費向量插圖的設計師，ManyPixels Gallery 提供超過 2,500 張 SVG 與 PNG 格式的插圖素材，同樣無須署名即可商用。如果你需要品牌相關的圖標資源，Simple Icons 收錄了大量知名品牌的 SVG 圖標，非常適合用在「使用我們技術合作夥伴」之類的展示區塊中。

在選擇圖標資源時，除了考慮授權條款和圖標數量之外，也要注意圖標的設計一致性。在同一個專案中混用太多不同風格的圖標庫，容易造成視覺上的不協調。建議的做法是選擇一個主要的圖標庫作為基礎（例如 Heroicons），只有在需要補充特定圖標時才從其他資源中尋找。這樣既能保持介面的一致性，又能滿足功能上的需求。

Heroicons 常見問題 FAQ

授權與使用相關

Heroicons 可以商用嗎？
可以。Heroicons 採用 MIT 開源授權，完全允許商業用途。你可以將 Heroicons 的圖標用在商業網站、SaaS 產品、行動應用、電商平台等任何商業場景中，不需要支付授權費用，也不需要署名。只需要在原始碼中保留 MIT 授權的版權聲明即可。這與 iconmonstr 的 CC0 授權和 Simple Icons 的 CC0 授權類似，都是對商業使用非常友善的授權方式。

Heroicons 與 Heroicons.dev 有什麼不同？
Heroicons.com 是由 Tailwind CSS 團隊開發與維護的官方網站，而 Heroicons.dev 則是由開發者 Zaydek 建立的第三方瀏覽工具。兩者使用的圖標來源相同（都是 Heroicons 開源專案），但網站介面和瀏覽體驗有所不同。官方的 Heroicons.com 介面更為簡潔直覺，而 Heroicons.dev 則提供了額外的搜尋和篩選功能。

使用 Heroicons 需要署名嗎？
MIT 授權不強制要求署名。你在使用 Heroicons 時不需要在網站上標注來源或附上連結。但如果你願意在專案中提及使用了 Heroicons，這是一種對開源貢獻者的尊重與支持。

技術與整合相關

Heroicons 圖標如何在 WordPress 中使用？
在 WordPress 中使用 Heroicons 有兩種常見方式：第一種是使用區塊編輯器的「自訂 HTML」區塊，直接貼上從官網複製的 SVG 程式碼；第二種是透過佈景主題的 PHP 模板將 SVG 圖標嵌入。兩種方式都不需要安裝額外的 WordPress 外掛，而且對網站載入速度的影響非常小。更多 WordPress 優化技巧可以參考 WordPress 速度優化指南。

如何自訂 Heroicons 圖標的顏色和大小？
Heroicons 的 SVG 圖標使用 currentColor 作為填色，因此會自動繼承父元素的文字顏色。你可以透過 CSS 的 color 屬性改變顏色，透過 width 和 height 屬性調整大小。如果使用 Tailwind CSS，可以直接用 w-6 h-6 和 text-blue-500 等工具類別來快速設定。

Heroicons 支援哪些前端框架？
Heroicons 官方提供了 @heroicons/react 和 @heroicons/vue 兩個 npm 套件，分別支援 React 和 Vue。對於其他框架（如 Svelte、Angular），可以直接複製 SVG 程式碼嵌入使用。無論你使用什麼框架，SVG 格式的圖標都能正常顯示。

Heroicons 圖標會影響網站速度嗎？
不會。Heroicons 使用的是 inline SVG，不會產生額外的 HTTP 請求，也不需要載入外部字體檔案。每個圖標的 SVG 程式碼體積非常小（通常不到 1KB），對頁面載入速度的影響幾乎可以忽略不計。搭配良好的快取策略和 網站速度測試 工具，你可以確保圖標的使用不會拖慢網站效能。如果你使用 React 或 Vue 的 npm 套件，Tree-shaking 機制還能確保只有實際使用到的圖標會被打包，進一步減少檔案體積。對於需要進一步優化圖片資源的場景，可以參考 Free Online File Converter 來轉換圖片格式。

與傳統的 Icon Font 方案（例如 Font Awesome）相比，inline SVG 在效能上有幾個明顯的優勢。第一，SVG 不需要載入額外的字體檔案（通常 50-100KB），減少了首次載入的資源體積。第二，SVG 只會包含你實際使用的圖標，而 Icon Font 則會載入整套字型，即使你只用到其中幾個圖標。第三，SVG 在渲染時不需要經過字體載入的過程，不會出現「圖標閃爍」的問題。這些優勢讓 Heroicons 的 SVG 方案在效能和使用者體驗上都優於傳統的 Icon Font 方案。如果你的網站對載入速度有嚴格要求，搭配 GTMetrix / GiftOfSpeed 等效能測試工具來驗證優化效果會是很好的做法。