Free icon 資源多到讓人選擇困難：哪些真的可商用？哪些要標註出處？做網站該用 SVG 還是 icon font？這一頁就是答案。我們把 2026 年值得用的 25+ 個 free icon 資源站全部實測整理，按「你是誰、要做什麼」分區，附上授權快查表與格式挑選指南——這不是一篇看完就關掉的文章，而是一本工具書：建議直接加入書籤，每次要找圖示就回來查。
- 25+ 個 free icon 站，按情境分五大區
- 授權快查表：CC0／需標註／禁用 Logo
- 開發者首選：Lucide、Heroicons、Tabler
- 3D 與插畫風：Icons8、3D ICONS、IconScout
- SVG 永遠優先，放大縮小不失真
- 商用前 30 秒授權檢查 SOP
不想看全文，直接選這個
以下按使用情境直接給首選與備選，找到你的需求就可以直接去下載。
| 使用情境 | 首選 | 備選 | 理由 |
|---|---|---|---|
| 一般企業官網、形象網站 | Lucide | Iconoir、UXWing | 線條乾淨、授權單純、風格一致 |
| Tailwind 前端專案 | Heroicons | Lucide | Tailwind 團隊出品，視覺語言天生合拍 |
| 後台、儀表板、SaaS | Tabler Icons | Phosphor | 圖示量大，功能類圖示齊全 |
| 簡報、社群貼文、活動素材 | Flaticon | Freepik、Noun Project | 量大、風格多，免費版需標註 |
| 客戶商用，不想標註 | UXWing | Lucide、3D ICONS | 授權壓力低，商用免標註 |
| 3D 圖示 | 3D ICONS | Icons8、IconScout | 3D ICONS 授權乾淨，Icons8 量大 |
| 找冷門圖示 | SVG Repo | Iconify | 素材量大，但要逐一確認授權 |
快速導航：你是誰，就跳到哪一區
工具書的用法是「查」不是「讀」。先確認你的身分與需求：
- 第一區：網頁開發者 — 要程式碼、要一致性（Lucide、Heroicons、Tabler、Phosphor、Font Awesome、Material Symbols、Iconify）
- 第二區：設計師與行銷人 — 要風格、要量大（Flaticon、Noun Project、Iconoir、UXWing、SVG Repo、IconStore、Streamline）
- 第三區：3D 與插畫風 — 要吸睛、要立體感（Icons8 3D、3D ICONS、IconScout）
- 授權快查表 — 商用前 30 秒檢查
- 格式挑選 — SVG／PNG／icon font 怎麼選
- 挑選決策指南 — 三個問題直接給答案
第一區：網頁開發者的 free icon 首選（程式碼友善）
開發者選 icon 的三個標準：開源授權乾淨、有 npm 套件或 SVG 直出、整套風格一致。以下按 2026 年的活躍度與生態排序。
Lucide — 目前最推的開源全能選手
Lucide 是經典 Feather Icons 的社群分支（fork），目前收錄超過 1,700 個 SVG 圖示，是 GitHub 上維護最活躍的 icon 庫之一。線條風格極度一致，React／Vue／Svelte／Angular 幾乎每個框架都有官方套件，ISC 授權，適合網站、App 與前端專案使用；若打包進程式碼，仍應保留授權聲明，商用無需標註。如果只能推薦一套給開發者，就是它。
Heroicons — Tailwind 專案的天作之合
Heroicons 由 Tailwind CSS 原班人馬打造，300+ 個手工繪製 SVG，提供 outline／solid 等多種樣式，MIT 授權。用 Tailwind 做網站，直接選它，視覺語言天生合拍。目前官方維護約 316 個圖示，數量精煉但品質高。
Tabler Icons — 量大管飽的瑞士刀
Tabler Icons 目前收錄 6,000+ 個開源圖示，MIT 授權免標註，支援 HTML、SVG sprite、React 等多種使用方式，後台系統、儀表板、SaaS 專案要什麼有什麼。覺得 Lucide 不夠用時，下一站就是這裡。
Phosphor — 六種粗細的設計系統級選擇
Phosphor 的獨門絕活：每個圖示都有 thin／light／regular／bold／fill／duotone 六種字重，建立設計系統時可以用粗細表達層級。提供 Figma 與 Sketch 外掛、npm 套件，MIT 授權。
Font Awesome — 老牌 icon font 王者
Font Awesome 免費版提供兩千多個圖示，HTML 一行引入，WordPress 生態支援度最高。注意免費與 Pro 的差異：很多搜尋結果好看的款式其實是付費的。
Material Symbols — Google 官方、App 開發必備
Material Symbols 是 Google 官方圖示系統，收錄 2,500+ glyphs，可在站上直接調整粗細與填滿程度，並針對 Android／iOS 提供對應程式碼，Apache 2.0 授權。做 App 或 Google 風格產品的標準答案。
Iconify — 一個框架吃遍所有圖示庫
Iconify 嚴格說不是圖示庫，而是聚合器：把上面提到的所有開源庫（20 萬+ 圖示）裝進同一套元件與 API，搜尋一次、跨庫取用。進階開發者的效率外掛。
Boxicons — 輕量網頁圖示補充包
Boxicons 一千多個單色圖示，可直接複製 HTML 程式碼、調色、加動態效果，也有 Figma 外掛，適合快速做形象站的場景。
第二區：設計師與行銷人的 free icon 寶庫（風格與量取勝）
SVG Repo — 50 萬個 SVG 的免費海洋
SVG Repo 是開放授權 SVG 聚合平台，收錄超過 50 萬個圖示，搜尋強、可線上改色。許多圖示不需標註即可商用，但每個檔案仍要看單頁 License 標示。若用在客戶官網或商業設計案，下載前務必確認該圖示是 Public Domain、SVG Repo License、MIT、Apache，還是 Creative Commons 類授權；平台本身禁止將素材重新聚合成類似資料庫的形式轉售。找冷門主題圖示的好選擇，但授權需逐一確認。
Flaticon — 風格最齊全的素材巨頭
Flaticon（Freepik 旗下）數百萬圖示、成套下載、線上改色改尺寸。代價是免費使用必須標註出處，要免標就得付費。做簡報、社群圖很好用；放官網就要記得處理標註問題。
免費素材站最常見的問題不是「能不能下載」，而是「能不能免標註商用」。Icons8、Flaticon、Freepik、Noun Project 這類大型素材站，免費版常見條件是可商用但需標註作者或平台連結；若是客戶官網、品牌形象頁、廣告素材，建議優先使用免標註授權（如 Lucide、Heroicons、UXWing），或付費取得免標註權利。
Noun Project — 人類設計師的百萬創意庫
Noun Project 由全球設計師共創、主打「Made by Humans」，抽象概念類圖示（例如「策略」「信任」）特別強。免費需標註，付費可免標並編輯樣式。
Iconoir — 免註冊、開源、千款線條風
Iconoir 開源免登入，1,500+ 線條圖示，站上直接調粗細顏色、複製 SVG 程式碼，MIT 授權商用無虞。設計師與開發者通吃的乾淨選擇。
UXWing — 免標註可商用的精品小庫
UXWing 量不大但每個都精緻，免費商用且不需標註出處，同款多配色。唯一限制：不可用於公司 Logo 設計。
IconStore — 設計師投稿的風格圖示包
IconStore 收錄各路設計師捐贈的成套圖示包，多為 CC0，免登入下載。要找「整組同風格」的圖示包時很好逛；用於 Logo 等品牌核心需徵求作者同意。
Streamline（免費版）— 精品級的微表情圖示
Streamline 是設計圈公認質感最高的圖示體系之一，免費版開放數千個 Core Line 圖示（需標註）。要讓介面看起來「貴」，來這裡。
Freepik — 不只圖示的綜合素材庫
Freepik 以向量插圖聞名，圖示之外還有照片、PSD、AI 生圖工具。免費每日限量且需標註。當你要的不只是 icon、還要整張視覺時再來。
第三區：3D 與插畫風 free icon（吸睛利器）
3D ICONS — CC0 的高質感 3D 套組
3D ICONS 全站 CC0：可商用、可改作、免標註，提供繽紛、漸層、全白、黑金四種配色與多角度視圖，還有 Figma 外掛。Landing page 首屏要一顆漂亮的 3D 圖示，先來這裡。
Icons8 — 3D、黏土風與百萬素材帝國
Icons8 百萬級圖示庫，3D 與黏土材質系列特別出圈，支援 PNG／SVG 下載、HTML 嵌入與 Figma 外掛。免費版需標註連結，量大用戶建議直接評估付費。
IconScout — 70 萬 3D 素材＋Lottie 動畫
IconScout 的 3D 圖示多達 70 萬+，人物、電商、Emoji 成套打包，還能搭配 Lottie 動畫。部分素材付費、Figma 外掛免費版有數量限制，挑選時注意標價。
授權快查表：商用前 30 秒檢查
這張表是本工具書的核心，發案前、上線前回來掃一眼：
| 資源站 | 免費商用 | 需標註出處 | 特別限制 |
|---|---|---|---|
| Lucide / Heroicons / Tabler / Phosphor / Iconoir | ✅ | 不用 | 無（MIT／ISC） |
| Material Symbols | ✅ | 不用 | Apache 2.0，保留授權聲明於程式碼 |
| 3D ICONS / 多數 IconStore / 多數 SVG Repo | ✅ | 不用 | CC0；IconStore 用於 Logo 需作者同意 |
| UXWing | ✅ | 不用 | 禁止用於公司 Logo |
| Flaticon / Freepik / Noun Project / Icons8 / Streamline 免費版 | ✅ | 要 | 付費可免標註；下載量／款式有限制 |
| Font Awesome 免費版 | ✅ | 不用 | 僅免費圖示；Pro 款式需付費 |
| Pngtree | ⚠️ | 要 | 免費每日限 1 次下載、廣告多，順位放最後 |
通用安全守則三條：一、任何 icon 都不要直接拿去註冊商標或當 Logo 主體（多數授權明文禁止）；二、「免費下載」不等於「免費商用」，看清楚 License 頁；三、需標註的素材用在客戶案子時，把標註義務寫進交付文件，避免日後糾紛。
SVG、PNG 還是 icon font？格式挑選指南
| 格式 | 優點 | 缺點 | 什麼時候用 |
|---|---|---|---|
| SVG | 向量無限縮放、檔案小、可用 CSS 改色動畫 | 舊系統偶有相容問題 | 網站、App、簡報——預設首選 |
| PNG | 到處能用、支援透明背景 | 放大會糊、改色要重新下載 | 不支援 SVG 的平台（部分電商後台、Email） |
| Icon Font | 一行引入、用 CSS 控制如文字 | 整包載入拖慢速度、無障礙較差 | 老專案維護；新專案建議改用 SVG |
| 3D（PNG/WebP） | 吸睛、有層次 | 檔案大、風格難統一 | 首屏主視覺、社群貼文，點綴使用 |
一句話結論：能用 SVG 就用 SVG；網頁效能敏感的話，記得壓縮（SVGO）並考慮 inline 引入減少請求。圖示載入速度也是 Google 網頁體驗指標的一部分，與排名間接相關。
三個問題，直接決定用哪個站
問題一：你在寫程式嗎？是 → Tailwind 用 Heroicons；一般專案用 Lucide；不夠再去 Tabler；要多種粗細選 Phosphor。否 → 下一題。
問題二：可以接受標註出處嗎？不行（商用網站、客戶案）→ UXWing、Iconoir、3D ICONS、SVG Repo（挑 CC0）。可以（簡報、社群、內部文件）→ Flaticon、Noun Project、Freepik 任逛。
問題三：要平面還是 3D？平面 → 上面任一。3D → 3D ICONS（免費乾淨）優先，量不夠再去 Icons8、IconScout。
把這三題背起來，以後找 free icon 不會再開十個分頁比來比去。
Icon 用在哪最有感？三個實戰場景
網站設計：導航列（購物車、會員）、服務特色區、聯絡按鈕——用圖示取代生硬文字，視覺層次立刻不同。圖示風格務必全站統一：同一套庫、同一種粗細，混搭是新手最常見的災難。網站視覺與動線的整體規劃，可參考小店軍師的網頁設計服務。
簡報與社群貼文：數據前置圖示、流程步驟編號、標題吸睛符號。連 emoji 都是 icon 的一種——用得克制就是加分。
App／UI 介面：功能按鈕、導航元素、空狀態插畫。建議直接選有 Figma 外掛的庫（Phosphor、Icons8、3D ICONS、Flaticon 都有），在設計稿裡即抓即用。
順帶一提：圖示若是純裝飾用途，alt 可留空；若圖示承載資訊，例如服務特色、流程圖示、比較欄位，alt 應描述圖示與內容的關係，而不是硬塞關鍵字。Google 會參考圖片周邊文字、檔名與 alt 來理解圖片主題，「描述清楚」比「塞滿關鍵字」更重要；想了解內容與技術 SEO 的完整佈局，見進階 SEO 服務。最近我們也示範了用 AI 全自動產出與上稿這類文章的流程，見Claude AI 完整指南。
台灣中小企業網站，該怎麼選 icon？
這篇文章最多讀者是台灣中小企業主、行銷人與網站業主。以下依網站類型整理建議，讓你不必從頭研究，直接對照自己的情境選用。
| 網站類型 | 建議 icon 風格 | 推薦來源 |
|---|---|---|
| 醫美、診所、保健 | 細線條、乾淨、低彩度 | Lucide、Phosphor、Iconoir |
| 當舖、汽車借款、金融 | 穩重、辨識度高、少用可愛風 | Tabler、Font Awesome、Material Symbols |
| 清潔公司、搬家、居家服務 | 功能明確、圖示直覺 | Tabler、UXWing、SVG Repo |
| 餐飲、甜點、旅遊 | 可用彩色或插畫風 | Flaticon、Freepik、Icons8 |
| 科技、AI、SaaS | 單色 SVG、設計系統一致 | Lucide、Heroicons、Phosphor |
圖示不只是裝飾，而是網站整體視覺語言的一部分。若你正在替品牌官網或服務頁挑選 icon，真正關鍵不只是圖示好看，而是整套視覺、文字、CTA 與 SEO 架構是否一致。
更新紀錄
- 2026/06/14：補充懶人選擇表、台灣業主選 icon 指南、Icons8/Flaticon 授權提醒；更新 Lucide（1,700+）、Heroicons（300+）、Tabler（6,000+）、Material Symbols（2,500+）最新數量；擴充 FAQ 至 10 題。
- 2026/06/13：初版發布，整理 25+ 個免費 icon 網站、授權快查表與格式指南；查核 Lucide、Heroicons、Tabler、Material Symbols、SVG Repo、Flaticon、Icons8 官方授權頁。
常見問題
Free icon 真的可以商用嗎？
大多數可以，但條件不同：MIT／CC0 授權（Lucide、3D ICONS 等）可自由商用免標註；Flaticon、Freepik 等免費版需標註出處；幾乎所有平台都禁止把圖示拿去當 Logo 或註冊商標。下載前花 30 秒看 License 頁，参照本文授權快查表。
哪個 free icon 網站最適合新手？
不寫程式的新手推薦 UXWing（免標註、直接下載）與 Flaticon（量大好搜，記得標註）；會寫一點程式就直接用 Lucide。
SVG 和 PNG 該下載哪個？
優先 SVG：向量格式放大縮小不失真、檔案小、能用 CSS 改顏色。只有在平台不支援 SVG 時才退而求其次用 PNG。
免費圖示需要標註出處，要標在哪裡？
網站通常標在頁尾（例如「Icons by Flaticon」加連結）；簡報標在末頁資料來源；社群貼文可標在文案末。各平台對標註格式有具體要求，以該站 License 頁為準。
可以把 free icon 改色、改造型嗎？
CC0 與 MIT 授權可以自由改作；需標註類的平台多數允許改色但仍要標註；Noun Project 等免費版不開放編輯、付費才可。改作後拿去當商標一樣是禁區。
icon font（如 Font Awesome）還值得用嗎？
老專案繼續用沒問題；新專案建議改用 SVG 方案（Lucide、Heroicons），載入更快、無障礙更好、樹搖（tree-shaking）只打包用到的圖示。
免費 icon 可以放在客戶的網站或廣告素材嗎？
可以，但要確認授權類型。MIT、CC0、ISC 授權（Lucide、Heroicons、UXWing 等）可直接用在客戶網站或廣告，無需標註；Flaticon、Icons8 等平台免費版若用在客戶案，仍須標註，建議事先向客戶說明或選用免標註授權。
免費 icon 可以放在 Logo 或商標裡嗎？
幾乎所有平台都明確禁止將圖示用作 Logo、商標或申請商標，即使是 CC0 授權也一樣。Logo 需要原創設計，不能直接套用現有圖示。
WordPress 可以直接使用 SVG 嗎？
WordPress 預設封鎖 SVG 上傳，因為 SVG 是 XML 格式，若未清理可能含有惡意程式碼。建議透過「Safe SVG」外掛啟用 SVG 上傳，該外掛會自動清理 SVG 內容再允許存入媒體庫。
下載 PNG 還是 SVG 對 SEO 有影響嗎？
SVG 通常比 PNG 檔案更小，載入更快，對 Core Web Vitals 有正面影響。搜尋引擎也能讀取 SVG 的 alt 與 title 屬性。新專案建議優先使用 SVG，只在瀏覽器相容性有顧慮時才使用 PNG。
