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