- 登入
- 註冊
Free Icon 免費圖示網站推薦：15 個商用授權、署名與 SVG 下載指南
內容目錄
顯示
想找 Free Icon，不必先看完一長串網站。截至 2026 年 9 月，最省時間的做法是先依用途選下載入口，再確認商用、署名與檔案格式：網站介面可從 Lucide、Heroicons 或 Tabler Icons 開始，簡報可看 Google Material Symbols，需要大量特殊主題再找 Flaticon。免費下載不等於免署名商用，正式使用前仍要查看單一圖示或套件的授權。
只想立刻下載？依用途選這 5 個 Free Icon 網站
| 你的用途 | 直接下載 | 優先格式 | 使用前注意 |
|---|---|---|---|
| 一般網站與後台介面 | Lucide Icons | SVG | 主要為 ISC，部分圖示沿用 MIT，要保留對應聲明 |
| Tailwind、React 或 Vue 專案 | Heroicons | SVG 或套件 | MIT，散布時保留版權與授權聲明 |
| 需要大量一致的線性圖示 | Tabler Icons | SVG | 免費原始圖示為 MIT，PNG 等現成格式另有付費包 |
| 簡報或熟悉的通用介面 | Material Symbols | SVG 或 PNG | Apache 2.0，可調整填色、粗細與光學尺寸 |
| 產業、節慶與特殊主題 | Flaticon | PNG 或 SVG | 免費授權要依官方方式署名，Editorial Use 不可拿來推廣商品或服務 |
如果你不確定該選誰：少量網站功能圖示先用 Lucide；需要線框與實心狀態切換可用 Heroicons；題材多又要統一線寬可用 Tabler Icons。要找品牌 Logo 可用 Simple Icons 當索引，但必須再查該品牌的商標與識別規範。
15 個免費 Icon 網站比較：格式、授權與風格一次看
以下資訊於 2026 年 9 月 9 日重新查核官方網站與授權頁。方案與條款可能更新，實際使用仍以下載當下的單一圖示頁、套件 LICENSE 與官方條款為準。
| 圖示網站 | 風格與用途 | 主要格式 | 免費商用與署名重點 |
|---|---|---|---|
| Google Material Symbols | 通用介面，多種可變軸 | SVG、PNG、字型 | Apache 2.0，產品內不強制可見署名 |
| Heroicons | 乾淨線框與實心介面 | SVG、React、Vue | MIT，保留授權聲明 |
| Lucide | 一致的線性介面 | SVG 與框架套件 | ISC／MIT，依圖示保留聲明 |
| Tabler Icons | 大型線性圖示庫 | 免費 SVG；PNG 等另有套裝 | 免費原始圖示為 MIT |
| Bootstrap Icons | 網站與後台介面 | SVG、Sprite、字型 | MIT，保留授權聲明 |
| Remix Icon | 線框與填色成對 | SVG、PNG、字型 | 現行自有 License v1.0，署名可選，但限制圖示庫式再散布 |
| Phosphor Icons | 多種粗細與填色 | SVG 與框架套件 | MIT，保留授權聲明 |
| Iconoir | 簡潔線性介面 | SVG 與框架套件 | MIT，保留授權聲明 |
| Simple Icons | 品牌與服務標誌 | SVG 與套件 | 專案為 CC0，個別品牌授權與商標仍要另查 |
| iconmonstr | 單色且可快速下載 | SVG、PNG | 可商用與修改，不要求署名，不可轉售圖示本身或用作商標 |
| Icons8 | 多風格與跨媒材 | PNG、SVG 等 | 免費使用通常要在使用頁面放 Icons8 連結 |
| Flaticon | 大量特殊主題與圖示包 | PNG、SVG、EPS、CSS | 免費使用要署名，免署名須符合付費方案條款 |
| Noun Project | 用名詞與概念搜尋 | PNG、SVG | Public Domain、CC BY 3.0 或付費授權，逐張確認 |
| Font Awesome Free | 前端套件與圖示字型 | SVG、JS、字型 | 圖示、字型與程式碼分屬不同授權，官方檔案已帶署名註解 |
| SVG Repo | 跨來源搜尋與改色 | SVG、PNG | 預設授權不強制署名，但單張可能採其他授權 |
「保留授權聲明」通常是保留套件、原始碼或下載檔案裡的版權與 LICENSE，不代表每個圖示旁都要顯示來源。Icons8、Flaticon 與 CC BY 圖示則可能要求使用者看得見的連結或署名，兩者不能混為一談。
Free Icon 授權怎麼判斷？下載前走完 5 步
MIT、ISC、Apache 2.0、CC BY 與 CC0 的條件不同。就算都能用在商業專案，有些要保留版權聲明，有些要求公開署名，有些沒有處理第三方商標。公司官網、客戶交付與可轉售商品也可能適用不同限制。
10 個開源或條款相對單純的免費 Icon 網站
1. Google Material Symbols：簡報與通用介面容易上手
Material Symbols 適合表單、導覽、按鈕與 Android 風格介面。官方提供 SVG、PNG 與可變圖示字型，可調整填色、粗細、grade 與光學尺寸。圖示採 Apache License 2.0；若使用字型，建議只載入會用到的圖示名稱，避免整套字型增加傳輸量。
來源：Google Fonts：Material Symbols guide（查證 2026-09-09）
2. Heroicons：Tailwind 團隊的線框與實心圖示
Heroicons 可直接複製 SVG，也提供 React 與 Vue 套件。命名清楚、外觀一致，適合產品網站與 SaaS 後台。官方標示採 MIT License；一般頁面不必在每個圖示旁署名，但散布套件或原始檔時要保留授權聲明。
來源：Heroicons 官方網站（查證 2026-09-09）
3. Lucide：線條一致，支援多種前端框架
Lucide 是社群維護的線性圖示庫，可下載 SVG，也有 React、Vue 與 Svelte 等套件。主要圖示採 ISC License，部分源自 Feather 的圖示沿用 MIT；自行挑出 SVG 交付時，應保存來源、版本與對應聲明。
來源：Lucide License（查證 2026-09-09）
4. Tabler Icons：大量 SVG，搜尋與調整方便
Tabler Icons 官方頁目前標示 6,150 多個免費 SVG 圖示，可調整大小、線寬與顏色。免費原始圖示採 MIT License，可用於個人與商業專案；官方另售含 PNG、PDF 與圖示字型的現成套裝，不能把付費套裝格式誤寫成全部免費提供。
來源：Tabler Icons 官方網站（查證 2026-09-09）
5. Bootstrap Icons：不使用 Bootstrap 也能單獨下載
Bootstrap Icons 可下載單一 SVG，也能使用 SVG sprite 或圖示字型，適合 WordPress、企業網站與管理介面。專案採 MIT License；少量圖示可直接使用單一 SVG，大量重複介面再考慮 sprite 或套件。
來源：Bootstrap Icons；MIT License（查證 2026-09-09）
6. Remix Icon：線框與填色成對，適合介面狀態
Remix Icon 的圖示多半同時提供 line 與 fill 版本，適合呈現未選取與已選取狀態。它已改用 Remix Icon License v1.0，不宜沿用舊文章常見的 Apache 2.0 說法。現行條款允許個人與商業使用及修改，署名為選擇性，但禁止把圖示當作獨立圖示庫或商品再散布。
來源：Remix Icon License v1.0（查證 2026-09-09）
7. Phosphor Icons：多種粗細適合建立視覺層級
Phosphor Icons 提供同一圖示的多種粗細與填色版本，適合產品頁、App 與儀表板。核心圖示採 MIT License。使用時應先固定一至兩種粗細規則，不要在同一區塊任意混搭。
來源：Phosphor Icons MIT License（查證 2026-09-09）
8. Iconoir：乾淨的開源線性圖示
Iconoir 官方 repository 標示超過 1,600 個 SVG 圖示，支援 React、React Native、Vue 與 Flutter 等框架，採 MIT License。風格簡潔，適合編輯器、作品集與現代產品介面。
來源：Iconoir 官方 repository（查證 2026-09-09）
9. Simple Icons：品牌圖示索引，不是商標授權書
Simple Icons 適合找社群、技術與服務品牌圖示。專案本身以 CC0 發布，但官方 disclaimer 明確提醒，個別圖示仍可能有自己的授權與品牌指南。使用品牌 Logo 前，要回到品牌官方規範確認顏色、比例與可用情境。
來源：Simple Icons License；Simple Icons Disclaimer（查證 2026-09-09）
10. iconmonstr：快速下載單色 SVG 與 PNG
iconmonstr 可先調整尺寸與顏色，再下載 SVG 或 PNG。官方授權允許商業使用與修改，不要求署名，但禁止出售圖示本身，也禁止轉讓或重新散布。
來源：iconmonstr License（查證 2026-09-09）
5 個授權條件較多的平台：署名、付費與逐張確認
11. Icons8：免費方案通常要放官方連結
Icons8 的圖示、插圖與其他視覺素材風格很多。官方免費使用說明要求在使用素材的網站頁面放 Icons8 連結；若多數頁面都使用，可依其指示放在頁尾。客戶不接受來源連結時，應改用符合需求的付費方案或其他圖庫。
來源：Icons8 License（查證 2026-09-09）
12. Flaticon：題材很多，免費使用必須署名
Flaticon 適合找產業、節慶、商務與特殊情境圖示，可下載 PNG、SVG、EPS 與 CSS 等格式。2026 年 4 月版官方條款指出，免費使用 Flaticon Content 時要依平台指定方式標示網站或公司與作者；在有效訂閱期間下載的 Premium 內容，才可依條款免除這項署名。
標示 Editorial Use 的內容只能用於資訊、學術或教育等允許情境，不可用於商品或服務的廣告、行銷與推廣。要做轉售商品時，也不能只套用一般下載授權。
來源：Flaticon Terms of Use，8.1 Flaticon License（2026 年 4 月版，查證 2026-09-09）
13. Noun Project：用概念找圖很強，免費 CC 圖示要署名
Noun Project 的圖示可能標示為 Public Domain、CC BY 3.0 或付費 Royalty-Free License。免費 CC BY 3.0 圖示可用，但必須署名創作者；Public Domain 不受已知著作權限制，付費授權則依購買條件使用。每張圖示的授權可能不同，不能用平台名稱一概而論。
來源：Noun Project Terms of Use（查證 2026-09-09）
14. Font Awesome Free：SVG、字型與程式碼不是同一套授權
Font Awesome Free 可用於商業與開源專案，但不同檔案類型適用不同授權：SVG 與 JS 圖示採 CC BY 4.0，字型採 SIL OFL 1.1，其餘程式碼採 MIT。官方下載檔已內嵌足夠的署名註解，正常使用通常不必在畫面另加文字，但不應主動刪除註解。
來源：Font Awesome Free License（查證 2026-09-09）
15. SVG Repo：搜尋方便，但要看單張圖示頁
SVG Repo 聚合多種來源，提供搜尋與改色功能，也能下載 SVG 或 PNG。預設 SVG Repo License 不強制署名，允許修改並作為商業專案的一部分，但禁止原樣轉售或做成同類圖庫。平台也收錄 Public Domain、MIT、GPL、Apache、Creative Commons 與 Logo License 等內容，最後仍要以單張頁面標示為準。
來源：SVG Repo Licensing（查證 2026-09-09）
SVG 還是 PNG？用放置方式直接判斷
| 需求 | 建議格式 | 理由 | 注意事項 |
|---|---|---|---|
| 網站按鈕、導覽列與功能說明 | SVG | 縮放清楚，常能用 CSS 改色 | 先清理不必要的 script、外部引用與 metadata |
| 簡報與文件，或不支援 SVG 的系統 | PNG | 使用直覺，內容固定 | 先下載足夠尺寸，放大後可能模糊 |
| 既有系統大量使用同一套圖示 | 圖示字型 | 可用 CSS 統一控制 | 避免載入大量未使用字形，補好無障礙名稱 |
| 大型產品反覆使用多個 SVG | SVG sprite | 集中管理與重複引用 | 需要固定建置、命名與版本流程 |
一般內容網站只需要十幾個功能圖示時，優先使用清理過的單一 SVG。有複雜多色或陰影，或要貼進簡報時，再選 PNG。WordPress 若未允許 SVG 上傳，不要為了方便直接解除安全限制，應先採用可信來源與安全的 SVG 處理方式。
線框、填色與多色圖示怎麼選？
- 線框圖示：適合資訊密度高且需要留白的網站與後台。先固定線寬、端點、圓角與基準尺寸。
- 填色圖示：適合強調目前狀態或主要操作。若與線框搭配，最好使用同一圖示庫的成對版本。
- 多色或 3D 圖示：適合活動頁與重點說明，但不宜大量混入工具列。要分別確認放在深色背景，縮小顯示，以及套用品牌色時仍看得清楚。
網站使用 Free Icon 的 4 個實務原則
1. 同一區塊只用一套視覺語言
先固定線框或填色、圓角或銳角、線寬與基準尺寸，再決定主要與次要狀態。不要在同一排功能卡混用多個圖庫，否則每張圖示即使單看好看，整體仍會顯得零碎。
2. 圖示不能取代必要文字
放大鏡、選單與關閉符號較容易理解，產業或抽象概念則未必。重要按鈕應搭配文字標籤；若圖示本身就是按鈕，互動元素也要有清楚的可存取名稱。
3. 裝飾圖示不要讓螢幕閱讀器重複朗讀
旁邊已有相同文字的裝飾圖片可使用空 alt；純裝飾 inline SVG 可用 aria-hidden="true" 隱藏。若圖示傳達文字未說出的資訊，就要提供替代文字或按鈕名稱。
4. 只載入真的會用到的圖示
為了少數圖示載入整套字型、CSS 與 JavaScript，可能增加請求與未使用資源。可優先下載單一 SVG，使用按需載入的套件，或建立小型 sprite，再用瀏覽器開發者工具與 PageSpeed Insights 檢查實際傳輸量。
免費 Icon 下載前檢查表
- 記下圖示名稱、作者、來源網址、下載日期與授權版本。
- 確認圖示用於個人作品、商業專案或客戶交付，還是會隨可轉售商品提供。
- 查看單一圖示頁或套件 LICENSE，不只看搜尋結果標題。
- 需要署名時，先確認正式頁面能保留作者與授權連結。
- 使用品牌圖示前，再查品牌官方 Logo 與商標指南。
- 下載 SVG 後檢查是否含 script、外部引用或不必要的 metadata。
- 保留原始檔與授權紀錄，讓團隊日後能追溯來源。
內文精華總結
- 只想快速下載網站介面圖示，可先從 Lucide、Heroicons 與 Tabler Icons 開始。
- 免費下載不等於免署名商用，應逐一確認用途、署名、修改與再散布限制。
- 網站少量功能圖示通常優先選 SVG；簡報或不支援 SVG 的系統再用 PNG。
- 品牌 Logo 即使來自開源圖庫，仍可能受商標與品牌規範限制。
- 同一區塊維持一致線寬、尺寸與風格，比增加更多圖示更重要。
網站設計延伸閱讀
想把圖示、配色與內容做成一致的正式網站？
選對圖示只是第一步。真正上線時，還要讓圖示、字體、按鈕、配色與內容層級一起工作，使用者才知道下一步要按哪裡。秒站讓團隊用 WordPress 管理內容，同時保留網站成長需要的設計與擴充空間。
想確認圖示與頁面是否適合目前品牌，可用 LINE 聯絡 @site-now。
重點整理
免費 Icon 可以商用嗎？
要看單一圖示或套件的授權，不能只看平台寫著免費。MIT、ISC、Apache 與部分平台自有授權通常允許商用，但可能要求保留版權或授權聲明；CC BY 與部分免費方案則要求署名。品牌 Logo 還可能受商標與品牌規範限制。
Free Icon 下載後一定要署名嗎？
不一定。Flaticon 免費授權、Noun Project 的免費 CC BY 圖示與 Icons8 免費方案通常需要依官方方式署名。開源套件則多半要求保留檔案或散布內容中的授權聲明，不一定要在每個圖示旁顯示來源。
Flaticon 免費版可以商用嗎？
依 Flaticon 2026 年 4 月版官方條款，免費使用 Flaticon Content 時，必須依平台當時指定方式標示平台或公司與作者。標示 Editorial Use 的內容不能用於商品或服務的廣告、行銷與推廣。
SVG 和 PNG 圖示哪一種比較適合網站？
一般介面圖示通常優先選 SVG，因為縮放清楚，常能用 CSS 改色。PNG 適合簡報，也適合具有複雜色彩或陰影的圖像；系統不支援 SVG 時，也可改用 PNG。第三方 SVG 要來自可信來源，並清理不必要的 script、外部引用與 metadata。
免費 Icon 可以改顏色或線條嗎？
要看授權是否允許修改。多數 MIT、ISC、Apache 與部分平台自有授權允許改作，但可能要求保留版權與許可聲明，也可能禁止把修改後圖示當成獨立商品或圖示庫轉售。品牌標誌即使能下載 SVG，也不能因此任意變形、變色或暗示合作，還要查品牌官方商標指南。
網站圖示尺寸應該用多大？
常見介面可先以 16、20、24 或 32 px 的設計格建立規則，再依按鈕與版面調整。重點不是找唯一標準尺寸，而是讓同一區塊的基準尺寸、線寬和留白一致。觸控按鈕也要保留足夠可點擊範圍，不能把可點區域縮成圖示本身。
如何確認單一圖示的授權？
先開啟單一圖示頁或官方 repository，確認 license 名稱與連結，再查看商用、署名、修改、散布與轉售條件。接著檢查是否為品牌 Logo 或 Editorial Use，並保存頁面網址、作者、下載時間與授權版本。
Free Icon 放進網站後如何兼顧速度與無障礙？
少量圖示可優先用清理過的單一 SVG，避免為幾個圖示載入整套字型與 JavaScript。裝飾圖示可用空 alt 或 aria-hidden，重要操作則要有清楚的文字或可存取名稱。上線後再用瀏覽器開發者工具與 PageSpeed Insights 檢查實際傳輸量、未使用資源與版面顯示。
