2026 Icon 圖示資源：22 個免費 SVG、開源、商用與品牌圖示庫整理

整理 22 個 Icon 圖示資源，包含開源 SVG icon、UI 圖示庫、付費圖示、品牌 icon、動畫與 3D icon，並附授權與商標注意。

這篇整理設計和網站開發常用的 Icon 圖示資源。Icon 看起來小，但授權不小：開源 icon、免費需署名 icon、品牌 Logo、動畫 icon、3D icon 都是不同規則。判斷邏輯跟之前整理的免費圖庫指南和免費字體大補帖是同一套：先看能不能商用、要不要署名。這 22 個資源都實際開過網站確認，附上首頁截圖和授權重點。

先看分類：Icon 資源不要混在一起用

選 Icon Library 前先問 5 件事

1. 這套 icon 的授權是否允許商用、修改、嵌入產品？

2. 是否需要署名？如果要署名，產品介面或客戶案能不能接受？

3. 格式是 SVG、React component、Icon font、PNG，還是 Figma library？

4. 風格是否一致：stroke、圓角、填色、尺寸、視覺重量是否能混用？

5. 如果是品牌 icon，是否會造成商標、背書或合作關係誤解？

22 個 Icon 圖示資源推薦

1. Lucide｜產品連結：https://lucide.dev/

圖片來源：https://lucide.dev/

官方網站。現代 UI 很常用，線條乾淨，工程整合方便。適合產品介面、後台和網站功能圖示。

• 價格型態：免費

• 適合用途：React/Vue/Svelte、網站 UI、產品介面

• 授權注意：ISC License；可商用、可修改，仍需保留授權聲明。

2. Heroicons｜產品連結：https://heroicons.com/

圖片來源：https://heroicons.com/

官方網站。Tailwind 官方生態常見，適合 SaaS、Dashboard 和簡潔產品介面。圖示數量不算最大，但風格屬於常見、好用的類型。

• 價格型態：免費

• 適合用途：Tailwind / React UI、SaaS 介面、後台工具

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

3. Phosphor Icons｜產品連結：https://phosphoricons.com/

圖片來源：https://www.figma.com/community/widget/1572186064932513222/phosphor-icons

官方網站。權重完整，從 thin 到 fill 都有，適合需要同一套圖示支援不同資訊層級的產品。

• 價格型態：免費

• 適合用途：多權重 UI icon、產品介面、品牌輔助圖示

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

4. Tabler Icons｜產品連結：https://tabler.io/icons

圖片來源：https://tabler.io/icons

官方網站。數量大、分類完整，適合 SaaS、CRM、資料產品這類需要大量功能圖示的介面。

• 價格型態：免費

• 適合用途：後台、Dashboard、資料產品、網站 UI

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

5. Bootstrap Icons｜產品連結：https://icons.getbootstrap.com/

圖片來源：https://www.figma.com/community/file/1042482994486402696/bootstrap-icons

官方網站。Bootstrap 團隊自己維護的 SVG icon。用 Bootstrap 的專案選它最省事，不過就算完全沒碰 Bootstrap，單獨拿來做網站或後台也沒問題。

• 價格型態：免費

• 適合用途：Bootstrap 專案、一般網站 UI、後台元件

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

6. Remix Icon｜產品連結：https://remixicon.com/

圖片來源：https://www.figma.com/community/file/847406312498234850/remix-icons-for-figma

官方網站。圖示量足、分類清楚，適合一般產品介面。和其他線條圖示混用時要注意 stroke 與視覺重量。

• 價格型態：免費

• 適合用途：網站 UI、App、功能圖示、常見場景圖示

• 授權注意：現行下載採 Remix Icon License v1.0，允許符合條款的免費商用與修改；禁止把圖示作為獨立素材包販售、建立競爭圖示庫，或用作 logo、商標及主要品牌／App 身份。2026 年 1 月前取得的 Apache 2.0 版本，應保留實際版本、下載來源及當時授權；不可把舊版條件套到目前下載。品牌圖示也不會因此取得對應商標權。

7. Font Awesome｜產品連結：https://fontawesome.com/

圖片來源：https://fontawesome.com/

官方網站。老牌 icon library，生態完整。適合跨框架專案，但 Free/Pro 和品牌 icon 不能混在一起判斷。

• 價格型態：Freemium

• 適合用途：網站、App、前端框架、常見 UI 圖示

• 授權注意：Free/Pro 授權不同；Free icon、font、code 授權需分開看官方說明。

8. Feather Icons｜產品連結：https://feathericons.com/

圖片來源：https://www.figma.com/community/file/1029867510822671559/feather-icons

官方網站。這套的取捨很明確：數量比不上大型 library，但極簡線條幾乎不會出錯。小型網站、工具頁這種需求單純的案子，選它反而省下挑選時間。

• 價格型態：免費

• 適合用途：簡潔線條 icon、網站 UI、輕量專案

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

9. Iconoir｜產品連結：https://iconoir.com/

圖片來源：https://www.adhamdannaway.com/blog/icons/free-icon-sets/attachment/iconoir-icon-set

官方網站。開源且數量充足，適合建立完整 icon system。正式專案要先定義 size、stroke 和命名規則。

• 價格型態：免費

• 適合用途：大型線條 icon、App、網站與產品介面

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

10. Radix Icons｜產品連結：https://www.radix-ui.com/icons

圖片來源：https://www.radix-ui.com/icons

官方網站。和 Radix/shadcn 生態貼近，適合產品介面基礎圖示。數量不大，但風格很穩。

• 價格型態：免費

• 適合用途：React UI、Radix/shadcn 介面、簡潔產品元件

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

11. Simple Icons｜產品連結：https://simpleicons.org/

圖片來源：https://github.com/simple-icons/simple-icons

官方網站。品牌圖示最常用來源之一。重點是：圖檔開放不等於商標授權，不能拿來暗示合作或背書。

• 價格型態：免費

• 適合用途：品牌 Logo、技術棧 icon、工具列表、整合頁

• 授權注意：CC0；但品牌商標權仍屬各品牌所有，商用需遵守品牌規範。

12. The Noun Project｜產品連結：https://thenounproject.com/

圖片來源：https://www.figma.com/community/file/1141082912671163459/noun-project-500-free-icons

官方網站。概念型圖示量很大，適合簡報、課程、文章插圖和資訊圖表。免費署名要能放得進版面。

• 價格型態：Freemium

• 適合用途：概念 icon、簡報、教育內容、資訊圖表

• 授權注意：免費通常需署名；付費/NounPro 可免署名，依官方方案。

13. Icons8｜產品連結：https://icons8.com/

圖片來源：https://icons8.com/

官方網站。風格種類多，適合需要不同 icon style 的設計案。客戶案如果不能署名，通常要看付費方案。

• 價格型態：Freemium

• 適合用途：多風格 icon、插圖、照片、App UI 素材

• 授權注意：免費使用通常需連結署名；付費方案可免署名，依官方授權。

14. Streamline Icons｜產品連結：https://www.streamlinehq.com/

圖片來源：https://www.framer.com/community/marketplace/plugins/core-icons-by-streamline/

官方網站。專業 icon set 完整，適合企業產品和大型設計系統。成本高，但一致性和覆蓋率好。

• 價格型態：Freemium

• 適合用途：大型專業 icon set、產品設計、企業設計系統

• 授權注意：Free/付費授權不同；完整商用與團隊使用需看方案。

15. Iconify｜產品連結：https://iconify.design/

圖片來源：https://iconify.design/

官方網站。適合工程整合多套 icon。它不是單一授權來源，真正授權要回到每個 icon set 本身。

• 價格型態：免費

• 適合用途：跨框架 icon、React/Vue/Svelte、統一使用多套 icon

• 授權注意：Iconify 本身為開源框架；各 icon set 授權不同，需逐套確認。

16. Lordicon｜產品連結：https://lordicon.com/

圖片來源：https://lordicon.com/

官方網站。動畫 icon 品質高，適合 landing page、空狀態、提示互動。使用時要管控檔案大小和動態頻率。

• 價格型態：Freemium

• 適合用途：動畫 icon、Landing page、互動介面、簡報

• 授權注意：免費/付費授權不同；商用、去浮水印與匯出格式依方案。

17. 3Dicons｜產品連結：https://3dicons.co/

圖片來源：https://3dicons.co/

官方網站。適合比較活潑的產品視覺和簡報。3D 風格存在感強，不適合所有品牌。

• 價格型態：免費

• 適合用途：3D icon、簡報、Landing page、產品視覺

• 授權注意：開源/免費 3D icon；需依官方授權與下載頁確認使用限制。

18. iconmonstr｜產品連結：https://iconmonstr.com/

圖片來源：https://iconmonstr.com/

官方網站。老牌免費 icon 站，適合找簡單通用圖示。它不是 MIT，使用前要看官方限制。

• 價格型態：免費

• 適合用途：簡單實心/線條 icon、網站 UI、簡報

• 授權注意：免費可用但不可轉售、重新散布或宣稱為自有素材庫；需依官方 License。

19. Boxicons｜產品連結：https://boxicons.com/

圖片來源：https://community-jp.eagle.cool/resource/boxicons-opensource

官方網站。圖示量充足的通用型選擇，一般產品介面都吃得下。要留意它分成 outline、solid 和 logo 三類，混著用之前先決定好統一規則。

• 價格型態：免費

• 適合用途：網站 UI、儀表板、App、常見功能圖示

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

20. css.gg｜產品連結：https://css.gg/

圖片來源：https://www.figma.com/community/file/834587122842084475/css-gg

官方網站。走 CSS/SVG 思路的輕量選擇，前端專案直接引用很方便。設計師這邊要多一步：先確認匯出格式跟工程端的需求對不對得上。

• 價格型態：免費

• 適合用途：CSS/SVG icon、輕量網站、純前端實驗

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

21. Octicons｜產品連結：https://primer.style/octicons/

圖片來源：https://github.com/microsoft/vscode/issues/76909

官方網站。適合開發者工具、文件型產品和 GitHub 風格介面。非開發者產品要評估調性。

• 價格型態：免費

• 適合用途：GitHub/Primer 風格 UI、開發者工具、產品介面

• 授權注意：MIT License；可商用、可修改，需保留授權聲明。

22. Untitled UI Icons｜產品連結：https://www.untitledui.com/icons

圖片來源：https://www.untitledui.com/blog/free-icon-sets

官方網站。SaaS 風格成熟，適合 Figma 設計系統和產品介面。完整套件與團隊使用要看付費授權。

• 價格型態：Freemium

• 適合用途：Figma icon、SaaS UI、設計系統、產品介面

• 授權注意：Free/Pro 授權不同；團隊與商用使用需依官方 license。

使用情境建議

1. 產品 UI 和網站介面

優先看 Lucide、Heroicons、Phosphor、Tabler、Radix Icons。這類開源 icon 很適合直接放進產品介面，重點是整套只選一種視覺語言，不要同時混用太多 stroke 和圓角風格。另外，很多 Figma UI Kit 已經內建整套 icon，選 kit 的時候可以一起評估，參考這篇 Figma UI Kit / Template 資源整理。

2. SaaS / Dashboard / 後台

Tabler、Lucide、Bootstrap Icons、Octicons、Boxicons 都適合工具型產品。後台圖示通常要清楚、低干擾，顏色不要太多，尺寸和 stroke 要固定。

3. 簡報和內容插圖

The Noun Project、Icons8、Streamline、3Dicons 比較適合簡報、課程、文章插圖和視覺輔助。免費需署名的資源要確認版面能放署名，否則用付費方案更乾淨。如果版面需要的不是 icon 而是整張插圖，可以搭配 6 個免費插畫素材圖庫一起找。

4. 品牌 Logo 和技術棧列表

Simple Icons 很方便，但品牌 icon 要特別小心。即使 icon 檔案採 CC0，品牌商標仍屬原品牌所有。不要用品牌 icon 暗示合作、認證、贊助或官方推薦。

5. 互動與動態效果

Lordicon 適合提示、空狀態和 onboarding。動態 icon 不要整頁亂飛，檔案大小也要控制，尤其是行動版頁面。

授權檢查清單

(1) 保留官方首頁、License 頁、下載日期和使用專案。

(2) 開源 icon 要保留授權聲明，不要把 MIT/Apache/ISC 當成無條件。

(3) 免費需署名的 icon，要確認署名位置是否符合專案需求。

(4) 品牌 icon 要另外查品牌 guidelines，不能只看 SVG 授權。

(5) Icon font、SVG、React component 的授權可能分開寫，需逐項看。

FAQ

Q1：Icon 可以直接改色嗎？

多數開源 SVG icon 可以改色，但仍要看授權。品牌 Logo icon 不建議隨意改色，因為那可能違反品牌使用規範。

Q2：商標 icon 可以放在設計稿嗎？

可以作為功能說明或整合列表，但不能暗示合作、授權、認證或官方背書。正式公開頁面要查品牌 guidelines。

Q3：SVG icon 要怎麼用在網站？

小型專案可直接 inline SVG；React/Vue 專案可用 component 套件；大量 icon 建議按需載入，避免整包 icon library 造成 bundle 變大。

Q4：Icon library 怎麼選？

先看授權，再看風格一致性、格式、工程整合和覆蓋率。產品 UI 優先選一套完整開源 icon；簡報或插圖可以選風格更強的圖示庫。

Q5：免費 icon 可以用在客戶案嗎？

客戶案最容易踩的是署名條件：MIT/ISC/Apache 這類開源通常可商用，但要保留授權聲明；Noun Project、Icons8 的免費方案可能要署名，要先確認客戶的版面放不放得下；品牌 icon 還要多過一關商標規範。

延伸整理

• (2026) 免費圖庫指南：40+ 個平台選擇，連同授權知識一起分享給你！

• （2026）免費字體大補帖：100+ 款繁中支援字體整理，商用授權一次搞懂

＊重要補充：本文是設計資源整理，不取代各網站最新授權條款。