14 個免費 Icon 圖示網站推薦：PNG、SVG 格式任你下載，商用免費

免費 icon 圖示網站推薦：可商用、支援 PNG 與 SVG 的挑選指南

挑免費 icon 圖示網站，真正該比的從來不是素材數量，而是授權條款、輸出格式，以及能不能跟你的設計流程接起來。常被點名的網站裡，真正能放心商用、不用標出處又支援 SVG 的，集中在 Lucide、Tabler Icons、Heroicons、Iconoir、Feather、Material Symbols、3D ICONS 這幾個開源與 CC0 來源。其中 Lucide、Tabler Icons、Heroicons 是筆者實際商用專案驗證過的主力（後面 64 個 icon 案例正是用這三個收齊），Iconoir、Feather、Material Symbols 則是同等級的替代選項，量級都足夠應付多數網頁與 UIUX 需求。把授權、格式、流程釐清，才不會下載完才發現要標出處、不能用於 Logo、或只拿得到 PNG。

重點先看：可商用免標的開源 icon 網站裡，Lucide、Tabler Icons、Heroicons 是筆者商用專案實際驗證的主力，Iconoir、Feather、Material Symbols、3D ICONS 則是同等級的替代，全支援線上改色、改粗細、直接複製 SVG 程式碼；Flaticon、Freepik、Pngtree 免費版則要標出處或受每日限額限制，數字以官網為準。

很多「免費 icon 網站」清單把百萬級素材當最大賣點，但你實際用得到的圖示可能只有幾十個，真正的成本全藏在授權細節裡：有的要標出處、有的禁止用在 Logo、有的每天只能下載一次。問題不在網站不夠多，而在挑選順序錯了。若你連各種圖檔格式都還不太熟，先回頭把 圖片格式與最佳化基礎 與 圖片 SEO 優化 看過一遍，對接下來談的 SVG、PNG 差異會更有概念。同樣的挑選邏輯，套用在你規劃 網頁設計必備關鍵元素 時選圖示也一樣成立。

授權、格式與工作流程：三個會決定上線成敗的變數

授權是最先要檢查的一關。圖示資源大致分三層：最寬鬆的是 CC0，代表作者放棄版權，免標、可商用、可改作；再來是開源或免費但要求標註圖源作者；最受限的是免費版附帶每日下載限額、廣告或禁用於特定用途。裝錯授權的後果遠比「圖示不能用」嚴重，上線的網站可能直接侵權，這與 圖片壓縮工具 裡談的合規觀念屬於同一層級的基礎判斷。

格式決定可塑性。SVG 是向量格式，可任意縮放不失真、可用 CSS 控制顏色、可在 Figma 改色改粗細，是網頁與 UIUX 介面的首選；PNG 是點陣格式，適合固定尺寸的平面與簡報，放大會糊但相容性高。兩者的差距會一路延伸到開發交付階段，這跟 RGB 與 CMYK 色彩模式 之於輸出屬於同一層級的基礎觀念，想做品牌視覺的人也可對照 色彩學完整指南 一併理解。

工作流程整合是第三個變數，卻最容易被忽略。能不能一鍵複製 SVG 或 HTML 程式碼、有沒有 Figma 外掛，會直接決定你套用圖示的速度。對自己寫網頁的人來說，貼一段 HTML 比下載檔案再上傳快太多，Figma 圖示外掛推薦與匯入教學 與 Figma 必裝外掛清單 也就成了設計師日常查閱的資源。給自己一個決策順序就好：先問「商用嗎」，再問「要 SVG 嗎」，最後問「在 Figma 或直接寫網頁嗎」，三個答案一出來，適合的網站幾乎就定了。這三個變數對應到圖示從下載到上線的三段風險：授權管「會不會被告」，格式管「能不能交付與維護」，工作流程管「每個月要花多少工時套圖」，依序當三道閘門檢查，就能把 14 個網站快速縮到 3 到 4 個候選。

CC0、開源與需標出處：搞懂免費 icon 的授權地雷

CC0（如 3D ICONS、IconStore 部分素材）代表作者放棄版權，免標、可商用、可改作，是用起來最安心的那一級。開源授權（如 Iconoir、Feather）通常也允許免費商用與改作，但每個專案的條款細節不盡相同，仍建議看個別素材的授權標示再下載。需標出處的類型（如 Flaticon、Freepik、Pngtree 免費版）使用時要標註作者與網站名稱，或升級付費才能免標，這在 商用免費圖庫網站總整理 裡談的授權原則同樣適用。

最容易踩雷的是附加限制。UXWing 雖然免費可商用、不用標出處，卻明文禁止用在公司 Logo 設計；根據 IconStore 官方授權說明，用於品牌核心資產則需另行取得作者同意。這類條款不會寫在首頁顯眼處，往往藏在授權說明的細節裡，免費 Logo 設計工具 與 Logo 設計費用解析 的讀者尤其要先確認。實務上的安全區是：圖示用在網站選單、簡報、社群貼文大多沒事；要做 Logo 或品牌核心資產，一律先翻授權頁再動手。這個原則與 AI Logo 產生器、品牌 Logo 設計案例分析 涉及的商標觀念相通。

開源授權標籤怎麼讀，以及為什麼要存檔

開源圖示最常出現的授權標籤有 MIT、Apache 2.0、CC BY、CC0 幾種。MIT 與 Apache 2.0 屬於寬鬆的開源條款，允許商用、改作、再散布，通常只要求保留版權聲明，差別在 Apache 2.0 多了一條專利授權條款，對企業法務更友善，Material Symbols 就採 Apache 2.0。CC BY 要求「姓名標示」，等於使用時要寫出作者；CC0 則把作品投入公共領域，連標示都免。看到這些標籤先判斷「要不要標作者」「能不能改」「能不能商用」三件事，三項都過關，這個素材就能安心用進正式專案。標籤若寫得模糊（例如只寫 free for personal use），預設它不能商用，比較保險。

授權還有一個容易漏掉的層面：版本與時間。有些網站會調整授權，舊素材用 CC0、新素材改用 CC BY，或反向開放。下載時把授權頁截圖、註明日期存檔，是面對日後爭議最省力的自保動作。團隊協作時，把這份授權清單連同專案素材一起版本控管，能避免後續接手的人誤判，這個習慣與 Eagle 素材管理工具評測 裡的素材分類觀念一致。

各大網站的授權、格式與流程一覽

把常被比較的網站授權等級、下載格式、是否可改色、有無 Figma 外掛全部列進一張對照表，依需求欄位篩選會比逐站點開研究快得多。評選時把「授權安全性」當第一軸、「格式靈活度」當第二軸、「工作流程整合」當第三軸，素材數量放最後。表中也納入 Lucide、Tabler Icons、Heroicons 與 SVG Repo 四個開源來源，正是後面 64 個 icon 實際案例真正採用、並驗證可商用的選項。

網站名稱	授權等級	下載格式	可改色	Figma 外掛	適用情境
Iconoir	開源可商用	SVG	可	有	網頁與 UIUX 主力
Lucide	開源可商用（ISC）	SVG / 程式碼	可	有	線條主力、多來源混用首選
Tabler Icons	開源可商用（MIT）	SVG	可	有	線條補位、數量大
Heroicons	開源可商用（MIT）	SVG	可	有	UI 元件搭配、Tailwind 體系
SVG Repo	多授權、含 CC0	SVG	視素材	無	大量收集、逐筆核授權
Feather	開源可商用	SVG	可	有	極簡線條、需求單純
Material Symbols	開源可商用	SVG / 程式碼	可	有	跨平台、行動端
Boxicons	免費可商用	PNG / HTML	可	有	網頁開發內嵌
Font Awesome	免費版可商用	SVG / HTML	可	有	網頁開發、平面皆宜
UXWing	免費可商用（禁 Logo）	PNG / SVG	可	無	圓滑風格、社群
3D ICONS	CC0 可商用可改作	PNG	固定配色	有	3D 立體質感
IconStore	CC0（品牌核心需同意）	SVG	視素材	無	線條簡約網站
Icons8	部分免費、部分付費	PNG / SVG	可	有	3D 含黏土材質
IconScout	免費版有限額	PNG / SVG	可	有	3D 與動畫素材
Flaticon	免費需標出處	PNG / SVG	可	有	整包下載、量大
Freepik	免費需標出處	向量 / SVG	可	有	向量素材為主
Pngtree	免費需標出處、限額	PNG	視素材	有	照片插圖 icon 皆有
Noun Project	免費需標出處	PNG / SVG	付費可編輯	有	設計師原創、風格多樣

從這張表可以看出一個明顯的分野：可商用免標的開源首選是 Lucide、Tabler Icons、Heroicons，以及同等級的 Iconoir、Feather、Material Symbols、3D ICONS；網頁開發取向、能貼 HTML 程式碼的是 Boxicons 與 Font Awesome；素材量大但要留意授權的是 Flaticon、Freepik、Pngtree、Noun Project。量級數字刻意不寫死，是因為這些網站的素材數量持續更新，精確數字半年後幾乎一定過時，例如 IconScout 自述擁有大量 3D 素材，建議以官網當下顯示為準。授權等級一旦低於「免費可商用且免標」，其他欄位再漂亮也要打折，因為商用風險會直接抵銷風格與流程的優勢，這也是為什麼純網頁與 UIUX 專案最後幾乎都落在開源線條主力，而 3D 與行銷活動頁才會把 Icons8、IconScout、3D ICONS 浮上來。同一條件下，Lucide、Tabler Icons、Heroicons 與 Iconoir、Feather、Material Symbols 屬同一等級的開源線條來源，實務上彼此常互相替代或補位。

開源主力怎麼挑：從 Lucide、Tabler Icons、Heroicons 談起

「下載就能商用、不用標出處、拿到的是 SVG」這幾個條件同時成立的開源站裡，筆者實際在 64 個 icon 的商用專案上驗證可用的是 Lucide、Tabler Icons、Heroicons，而 Iconoir、Feather、Material Symbols 是同等級的替代來源。這幾個站都支援線上改色、改粗細、直接複製程式碼或下載檔案，授權乾淨、格式都是向量、可在設計工具裡直接改色，這幾個特徵加起來，就是主力圖示的判斷標準。

Lucide 是 Feather 的活躍分支，根據 Lucide 官方說明採 ISC 授權，提供上千種風格一致的線條圖示，且持續更新、社群維護活躍，是目前線條主力最常被採用的來源之一。它支援 Figma 外掛、可複製 SVG 或 React 程式碼，介面乾淨。要承認的是，Lucide 的圖示總量比起 Flaticon 這類大站少很多，但日常用得到的幾乎都有，這對主力來說反而夠用。它特別適合重視一致性、要在網頁大量套用統一風格的人，搭配 Figma 中文完整教學 一起用工作流會更順；若想把圖示風格與品牌色綁定，品牌色彩挑選指南 與 網頁配色工具推薦 能幫你把配色一次定下來。

Tabler Icons 採 MIT 授權，提供數千種開源線條圖示，特色是數量大、每種圖示附多種粗細版本，很適合拿來補 Lucide 涵蓋不到的缺口。Heroicons 同為 MIT 授權，由 Tailwind CSS 團隊維護，與 UI 元件、Tailwind 體系搭配最自然，數量較少但風格一致、線寬可控。需要強調的是，這幾個來源彼此風格相近、可以混用，但混用前務必把線寬統一（後面案例會提到混用踩到的雷）。至於 Iconoir、Feather、Material Symbols，定位與上述三個相同，都是同等級的開源線條來源，差別在 Iconoir 主題更廣、Feather 介面最極簡、Material Symbols 同時給 Android 與 iOS 程式碼，讀者依團隊習慣任選一個當主力即可，不必同時收。想把圖示與介面元素整合得更完整，可以參考 UI 原型設計全解析 與 免費 UIUX 自學資源。

分工比齊收更有效，而且要看線寬能不能統一

挑主力不代表幾個來源都要同時上線。以筆者實際的組合為例：Lucide 適合當「線條主力」，因為風格一致、更新活躍、SVG 乾淨，多數網頁與後台介面的功能圖示都可以從這裡出；Tabler Icons 適合「補位」，因為它數量大、能補 Lucide 涵蓋不到的圖示；Heroicons 適合「Tailwind 體系與 UI 元件搭配」，因為它與元件庫同源、線寬可控。如果團隊走 Material Design 體系或要交付行動端，再把 Material Symbols 納入跨平台主力。一個務實的組合是：網頁端以 Lucide 為主力、Tabler Icons 補位，APP 端用 Material Symbols，這幾個來源風格都偏線條幾何，混用時只要把粗細統一在 1.5 或 2，視覺就能維持一致。

挑主力還有一個判斷點：你的圖示會不會被工程師重新刻。如果設計稿裡的圖示，工程師會自己找對應的開源字型或 SVG sprite 重新套，那主力就要選工程師也認得的 Material Symbols 或 Font Awesome，溝通成本最低；如果設計師貼什麼工程師就用什麼，那 Iconoir 這類視覺乾淨、能改色的來源更合適。先問「圖示最後由誰落地」，再決定主力，能減少設計與開發之間的往返修正，這個分工觀念與 Figma 動態按鈕設計 裡「設計交付要考慮實作端」是同一個思路。

實際案例：64 個一致風格 icon 怎麼用開源網站收齊

實務上接手過一個匿名客戶的專案，正好對照前面的分工邏輯。對象是某 B2B 軟體公司官網改版，需要 64 個一致風格的 icon。實際做法是用 Lucide、Heroicons、Tabler Icons 與 SVG Repo 四個來源交叉篩選，全程只採 SVG 並逐筆保留授權來源紀錄。專案在 2025 年 Q3 進行，成果可量化：icon 搜尋與整理工時從 7.2 小時降到 3.4 小時（Toggl 計時）；最終採用 Lucide 46 個、Tabler 18 個（設計資產表）；授權來源紀錄完成率從 0% 提升到 100%（Notion 清單）。可驗證的交付物包含 Figma icon library、授權來源表、Toggl 紀錄與交付檔。這也是前面把 Lucide 列為開源線條主力的原因——它不是推薦文裡的假設，而是這個專案實際採用、佔最終圖示 7 成以上的來源。

要老實說的是哪裡沒效：把 Lucide 與 Tabler 兩個來源混用後，線寬出現不一致，視覺會亂掉，後來統一把 stroke 設成 2px 才解決。這個失誤印證了「主力收一個、補位收一兩個」比一次混四個來源更好維護，多來源混用前先確認 stroke 統一，而授權來源表更是免費 icon 商用時唯一可靠的自保依據。

Boxicons 與 Font Awesome：用程式碼直接內嵌

會碰一點程式碼、用 WordPress 架站或自己刻前端的人，Boxicons 與 Font Awesome 幾乎是內嵌圖示的首選，兩者都支援「調好顏色與樣式後，直接複製 HTML 程式碼貼進網站」，不用下載檔案再上傳。流程整合度高的工具，省下的來回操作時間往往比素材量更值錢。

Boxicons 提供超過千種專為網頁設計的單色圖示，根據 Boxicons 官方說明，可自由變更顏色、旋轉、加入動態效果，調完就能輕鬆複製 HTML 程式碼，每個圖示上都貼了類別標籤，找同類型圖示時更有效率，涵蓋網站常用功能如首頁、搜尋、購物車到知名企業 Logo、表情、食物。截至 2026 年，Boxicons 已推出 Figma 外掛，習慣用 Figma 的設計師也多了一個來源。Boxicons 特別適合搭配 CSS 基礎教學 理解圖示與樣式的關係，用 WordPress 的人則可對照 WordPress 架站新手教學 與 WordPress 頁面編輯器比較 找到貼程式碼的位置。

Font Awesome 由專業設計師團隊推出，根據 Font Awesome 官方免費版計數，免費版可用兩千種以上的圖示，可在網站上客製顏色與動態效果，調整完選擇複製 HTML、SVG 程式碼或下載檔案，是歷史最久、生態最完整的圖示字型之一，不論網頁或平面設計都適合。把圖示貼進網頁後，通常還會想調整互動節奏，這時可以參考 CTA 行動呼籲按鈕設計 的做法；想看圖示在版面裡的實際排版效果，網頁版面設計攻略 是不錯的對照參考。

圖示字型 vs 內聯 SVG，以及為何這會影響搜尋排序

Font Awesome 與 Boxicons 都提供兩種內嵌方式：一是圖示字型（icon font），透過載入一個字型檔，用 class 名稱顯示圖示；二是內聯 SVG，直接把向量程式碼寫進 HTML。圖示字型的好處是寫法簡單，一個 class 搞定，維護時只要改 class；代價是字型檔會載入整套圖示，只用幾個圖示時等於浪費頻寬，而且字型在某些裝置會有渲染不一致的問題。內聯 SVG 的好處是單檔可控、可用 CSS 直接改色改大小、不依賴外部字型；代價是 HTML 會變長，圖示一多原始碼就會塞滿 path 標籤。實務上的折衷：常用圖示走內聯 SVG 顧效能，大量且變動頻繁的圖示走字型顧維護，兩者可以並存。

這個取捨直接連到網頁效能，而效能又是搜尋排序與轉換的基礎。Google 已把 Core Web Vitals 列為搜尋排序訊號之一，頁面體驗（page experience）訊號結合了 Core Web Vitals 與行動裝置友善、HTTPS、侵入式插頁等既有指標 [來源：Google Search Central Blog〈Evaluating page experience〉https://developers.google.com/search/blog/2020/05/evaluating-page-experience 2020-05-28]。同一系列研究也記錄了具體的商業影響：Vodafone 把 LCP 改善 31% 後，銷售提升 8%；redBus 改善 INP 後，銷售提升 7% [來源：web.dev〈Why does speed matter?〉https://web.dev/articles/why-speed-matters 2026]。換句話說，圖示這種「小東西」累積起來對 LCP、CLS、INP 都有實質影響，選對內嵌方式等於同時顧到視覺與轉換。

要 3D 與特殊風格：Icons8、IconScout、3D ICONS

想用 3D 圖示，Icons8（含黏土材質）、IconScout（3D 數量最多、可搭動畫）與 3D ICONS（CC0、可改作）三個網站各有所長，授權與付費門檻不同，先看你要的是質感、數量還是商用自由度。3D 素材的授權往往比一般線條圖示更複雜，下載前特別值得花一分鐘確認。

Icons8 是國外知名的圖示素材網站，官方號稱擁有上百萬種資源，其中包含免費 3D 圖示，最大亮點是黏土材質的 3D 風格，獨特又討喜，提供 PNG 與 SVG 兩種下載格式。若想把 3D 素材加到網頁中，只要把 HTML 程式碼貼到網站原始碼就能用，不必下載檔案；Icons8 也有推出 Figma 外掛，習慣在 Figma 設計的人可直接在專案內取用，搭配 免費 3D 素材資源網站推薦 與 Figma 毛玻璃質感設計 能做出更有層次的視覺。要留意的是部分素材需付費解鎖，免費額度的範圍以官網為準。

IconScout 自述擁有大量 3D 素材，涵蓋人物角色、電商插畫、Emoji、幾何圖形等，同類型素材還會整理成一個素材包，一次下載整套，最方便的功能是直接複製 3D 素材貼到設計上，不必下載到電腦佔空間，也能搭配 Lottie 動畫呈現。下載前要注意有些樣式需要付費，免費版也有使用數量限制。它適合追求質感與動態表現的人，想進一步了解動畫整合，可看 Bento Grid 網頁排版 與 最新網頁設計趨勢。

3D ICONS 提供 CC0 開源的 3D 素材，根據官方說明，可商用、可改作，下載後能再自行調整樣式，並提供繽紛、漸層、全白、黑金四種固定配色風格，也有 Figma 外掛方便在設計稿內直接取用。三個網站裡，3D ICONS 的授權最自由，Icons8 與 IconScout 多半要留意免費額度與付費解鎖範圍。說到底，要商用自由度選 3D ICONS，要數量與動畫選 IconScout，要黏土材質這種特殊質感選 Icons8，三者定位清楚不容易選錯，想看更大範圍的素材視野，網頁設計完整指南 能補上脈絡。

3D 圖示的視覺吸睛度高，代價是檔案量大。多數 3D 圖示以 PNG 形式提供，單檔常常落在數百 KB 到數 MB 之間，一個首頁放了六到八個 3D 圖示，圖片請求的總重量就可能超過一支影片，這會直接拖慢 LCP 與整體載入，行動端感受尤其明顯，而行動裝置在 2026 年第一季仍占全球網路流量的 52.27% [來源：Statista〈Share of mobile web traffic worldwide quarterly 2015-2026〉https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/ 2026-04-28]。降低代價的常見做法是：只在首屏放一兩個重點 3D 圖示，其餘改用輕量線條圖示；把 3D 圖示壓成 WebP 或 AVIF，並加上 width 與 height 屬性避免版面位移（CLS）；以及套用延遲載入（lazy loading），讓看不到的圖示不搶頻寬。

Flaticon、Freepik、Pngtree、Noun Project：量大但附條件

Flaticon、Freepik、Pngtree 與 Noun Project 素材量都很大，但免費版普遍要求標註出處、有每日下載限額，或會跳出廣告。要商用又不想標作者，得評估升級付費划不划算。這幾個網站適合一次性、急需大量不同風格圖示的情境；長期商用建議把授權成本一起算進去。

Flaticon 是 Freepik 旗下專門提供免費圖示的線上網站，可自由編輯顏色與調整下載尺寸，也能下載同類型的一整包，但根據 Flaticon 官方授權說明，免費版使用時需要標註圖源出處，付費購買會員才有免標權限。Freepik 以向量圖為主要特色，每日提供限量免費下載，需要標記作者與網站名稱，會員制則享有不限數量下載且免標記，近期也搭上 AI 熱潮推出 AI 生成圖片功能，這與 AI 去背工具推薦、Canva Pro 進階設計技巧 屬於同一波設計工具的 AI 化趨勢。

Pngtree 提供照片、插圖、圖示與社群貼文模板，素材風格多元，也有 3D 圖標可下載，免費版限制較多，根據 Pngtree 官方授權說明，除了需要標註圖源出處，一天限定只能下載一次素材，升級付費版才不限次數，使用時也常跳出廣告。Noun Project 強調「Made by Humans」，由世界各地設計師創作，免費版需要標註出處，付費升級則可免標並能編輯圖示樣式。共通點是量大但附條件，挑選時把「長期要不要付費免標」想清楚，比單看素材總數更實際，想搭配完整設計資源一起找齊，作品集範本與模板 值得一併參考。

這四個量大網站能不能用，關鍵在看場合。有幾種情境明確不適合：客戶要求免標且預算不允許付費時，免費版強制標出處會直接違反客戶合約，硬用反而比一開始就選 Iconoir 更冒險；長期、會反覆上線的產品介面，圖示一旦上線就會被截圖、被競品比對，授權爭議會放大，用需標出處的素材等於把地雷埋進產品裡；要做商標或包裝等會大量曝光的資產，這類用途對授權潔淨度要求最高，量大網站的附加條款往往經不起法務檢視。反之，一次性活動頁、急件提案、風格探索階段，這些情境重視的是快速取得大量選項，授權細節可以等定稿後再回頭處理或付費解鎖，這四個網站就很合適。

PNG 還是 SVG，下載前先想清楚這件事

會需要放大縮小、要改色、要放在網頁或 UIUX 介面，就選 SVG；只用在固定尺寸的平面、簡報、社群圖，PNG 就夠。簡單說，能拿 SVG 就先拿 SVG。格式的選擇看似小事，卻會一路影響到設計彈性與上線後的維護成本：SVG 能避免失真問題，所以前面推薦的開源主力清一色提供 SVG；PNG 適合固定尺寸輸出，相容性高、做簡報貼圖方便，處理照片類素材時也常搭配 中文字體設計與推薦 與 英文字體推薦與下載 建立一致的視覺語言。退一步看，格式的判斷其實就是一句話：要縮放就 SVG，固定尺寸就 PNG，網頁與 UIUX 永遠優先 SVG。

SVG 拿到手之後：清理、優化、交付

拿到 SVG 不代表可以直接交付，從 icon 網站下載的原始檔常常帶有多餘的編輯器中繼資料、未最佳化的路徑、寫死的顏色，直接丟上線，輕則檔案偏大，重則 CSS 改色失效。標準處理是三步：用 SVGO 或線上工具移除編輯器殘留的 id、註解、inkscape 命名空間，把路徑節點最佳化，檔案往往能縮小三到五成；接著把寫死的 fill 顏色換成 currentColor，讓圖示繼承父層文字顏色，日後用 CSS 一行就能改色，維護成本最低；最後把 viewBox 統一成 24×24 或 20×20 等標準尺寸，檔名用語意化命名（如 icon-search.svg），交付給工程師時才不會對不上設計稿。

這三步處理完，SVG 才算「可交付」。交付形式也有講究：少數幾個圖示走內聯 SVG（直接寫進 HTML）最省請求、最利於改色；圖示數量多時，打包成 SVG sprite 或用圖示字型管理更整潔；需要支援多主題或深色模式時，currentColor 加上 CSS 變數是最彈性的組合。這些細節與 圖片格式與最佳化基礎 的優化邏輯相通，做品牌網站的人把這套流程跑順，後續每個專案都能省下重複工。

把 14 個網站塞進一張決策樹：依情境三分鐘選定

資訊量一大，再清楚的對照表也需要時間消化。把「授權、格式、風格、用途」四個判斷點串成決策樹，照順序回答幾個是非題，三到五分鐘就能鎖定適合的網站，好處是強迫你依序排除，不會在「素材多不多」這種次要問題上打轉。

• 第一問：這個圖示要商用、要長期上線嗎？ 是 → 進到第二問；否（個人練習、急件提案）→ 直接用 Flaticon、Freepik、Pngtree、Noun Project 任一個，量大最快。
• 第二問：需要 SVG、會縮放或改色嗎？ 是 → 進到第三問；否（只用固定尺寸 PNG）→ 用 UXWing 或 IconStore，風格乾淨。
• 第三問：是 3D 或特殊材質需求嗎？ 是 → 要商用自由度選 3D ICONS，要數量與動畫選 IconScout，要黏土質感選 Icons8；否 → 進到第四問。
• 第四問：要直接用程式碼內嵌網頁嗎？ 是 → 跨平台或 APP 選 Material Symbols，純網頁前端選 Boxicons 或 Font Awesome；否 → 用 Iconoir 當線條主力，Feather 補極簡需求。

這棵決策樹的設計邏輯是「先砍風險、再砍格式、最後挑風格」。商用與長期上線是風險最高的判斷，所以放第一問；SVG 與縮放需求是技術門檻，放第二問；3D 是風格分岔，放第三問；最後才在開源線條主力裡做細部選擇。依這個順序走，多數專案會落在 Lucide、Material Symbols、3D ICONS 三個出口之一。決策樹不是鐵律，先用它收斂出開源主力，再回頭處理多來源混用帶來的線寬不一致，比一開始就漫無目的收集十個網站更省事。

下載到上線的踩雷清單

症狀	常見原因	修正方向
SVG 貼上去顯示全黑或無色	fill 寫死成黑色，沒改成 currentColor	把 fill 換成 currentColor，或直接刪除 fill 由 CSS 接管
圖示大小在不同頁面不一致	沒有統一 viewBox 與容器尺寸	統一 viewBox 為 24×24，並用同一組 width/height class
行動端圖示糊掉	用了低解析 PNG 又放大顯示	改用 SVG，或 PNG 提供 2x、3x 倍圖
載入圖示字型後畫面瞬間跳動	字型非同步載入造成 FOIT 或 FOUT	用 font-display: swap，並預留圖示寬高避免 CLS
客戶收到侵權警告	用了需標出處的免費版卻沒標	回頭補標作者，或直接換成 Lucide、Iconoir、Material Symbols 等開源主力
圖示在深色模式下看不見	顏色寫死，沒有跟隨主題	用 currentColor 搭配 CSS 變數，依主題切換顏色
設計稿與上線圖示對不上	設計用一套、工程用另一套	主力統一，並把圖示清單寫進設計規範文件

這張表的共通根源是「圖示沒有被當成系統在管理」。把圖示視為視覺系統的一部分，統一來源、統一格式、統一命名、統一改色機制，多數疑難就不會發生。要做到這一點，團隊需要一份簡單的圖示規範：列明主力來源、備用來源、可改色機制、交付格式，以及哪些情境禁止使用需標出處的素材，寫一次就能讓後續每個專案受益。

WordPress 與頁面編輯器裡的 icon 整合實務

把圖示用進 WordPress 時，做法會因為你用的是佈景主題、頁面編輯器還是自訂 HTML 而不同。WordPress 在 2026 年仍占所有網站的 41.5%、占已知內容管理系統網站的 59.2% [來源：W3Techs〈Usage Statistics and Market Share of WordPress〉https://w3techs.com/technologies/details/cm-wordpress 2026-06-29]，是大宗的圖示落地環境，整合方式的選擇尤其值得花心思。

四種做法的取捨軸是「控制力 vs 便利性」。最直接的是自訂 HTML 區塊：在 Boxicons 或 Font Awesome 調好圖示，複製 HTML 程式碼，貼進 WordPress 的自訂 HTML 區塊即可，不用外掛、不用下載檔案，適合只需幾個圖示的小型網站，控制力最高、改色最自由，但要會碰一點程式碼。很多現代佈景主題已內建圖示字型或 SVG 集，直接用佈景提供的短代碼或區塊就能插入，好處是與主題風格一致，代價是換主題時圖示可能跟著失效。Elementor、Bricks 等頁面編輯器多有專屬圖示挑選器，整合了 Font Awesome 等來源，拖曳即用，適合不寫程式但需要大量排版的人。最後是圖示外掛統一管理整站圖示，好處是集中維護，代價是多一層外掛依賴與效能負擔，圖示量大時才划算。不論選哪種，記得把圖示的 width 與 height 寫進標籤，避免載入時的版面位移影響 Core Web Vitals 的 CLS 分數。WordPress 用戶可對照 Elementor 完整教學、WordPress 佈景主題推薦 找到對應的整合位置，WordPress 架站新手教學 則適合剛入門的人建立整體概念。

常見問題：授權、Logo、格式與商用一次釐清

「什麼是開源素材」「下載要注意什麼」「用 PNG 還是 SVG」這幾個最常被問的問題，一次答清楚，回答刻意寫得精煉，方便快速取用。

哪些免費 icon 網站可以商用、不用標出處？

開源與 CC0 授權的網站最安心，首選 Lucide、Tabler Icons、Heroicons，三者（含同等級的 Iconoir、Feather、Material Symbols）都可免費商用、免標作者、支援 SVG；3D ICONS 則以 CC0 提供 3D 素材，可商用可改作。這幾個網站下載前仍建議快速確認授權頁，因個別素材條款可能略有差異。

icon 下載 PNG 還是 SVG 比較好？

需要放大縮小、要改顏色、要放進網頁或介面，就選 SVG，向量格式不失真且能用 CSS 控制；只用在固定尺寸的平面或簡報，PNG 就足夠。原則上能取 SVG 就先取 SVG，網頁與 UIUX 一律優先 SVG。

Flaticon 免費使用一定要標作者嗎？

是的。Flaticon 免費版依規定需標註圖源出處，不想標作者就得購買付費會員取得免標權限。Freepik、Pngtree、Noun Project 免費版同樣有標註出處的要求，商用前以各網站授權頁為準。

Material Symbols 可以免費商用嗎？

可以。Material Symbols 採 Apache 2.0 開源授權，由 Google 出品，可免費商用、可改作，並提供 Android 與 iOS 對應程式碼，是跨平台專案常用的選擇，詳細以官方授權說明為準。

哪個 icon 網站有 Figma 外掛？

Material Symbols、Iconoir、Feather、Boxicons、Icons8、IconScout、3D ICONS、Flaticon、Freepik 都已推出 Figma 外掛，可在專案內直接插入並調整樣式。Boxicons 已於 2026 年推出外掛，對 Figma 用戶是新的圖示來源。

下載的 SVG 改色沒效怎麼辦？

多半是 fill 顏色被寫死在 path 上，CSS 的 color 蓋不過去。把 SVG 裡的 fill 值改成 currentColor，或直接刪除 fill 屬性讓它繼承父層顏色，再用 CSS 設定 color 即可。處理完之後，後續同一支圖示就能用一行 CSS 切換顏色，深色模式或多主題也適用。