免費 Icon 下載指南：14 站授權與商用格式比較

官網改版做到尾聲，導覽列、功能區、聯絡表單每一塊都缺一個小圖示，你打開瀏覽器搜「free icon」，跳出幾十個網站，下載了二十幾個，回到 Figma 一擺，才發現有的圓角、有的直角，有的線條 1px、有的 2px，配色也不一樣，整個版面看起來像拼裝車。更糟的是，其中幾個圖示你後來才發現授權寫著「個人使用免費，商用需付費」，而這個專案下週就要交給客戶上線。這個坑，不熟悉授權細節的人多半都踩過不只一次。

這篇整理了 14 個免費（或免費方案就夠用）的 Icon 圖示網站，每一個都附上格式與授權的注意事項。為了讓你不用全部看完才做決定，結論先給你：開發者要用 SVG，先去 Heroicons 或 Lucide；設計師要找大量 PNG 與多種風格，去 Flaticon；要維持整站圖示風格統一，以 Google Material Symbols 當母體。這三個組合能解掉你八成的需求。如果你想進一步把圖示收進素材庫統一管理，我也會在後面把工作流與 Eagle 素材管理工具串起來談。

下載之前，先把「免費」這兩個字拆開來看

很多人找到圖示網站就興奮地狂下，結果上線那天才發現授權根本不允許商用。我把圖示的免費分成四種層次講清楚，因為它直接決定你能不能拿去客戶的電商頁面、能不能修改、要不要署名。

第一種是 CC0 或 Public Domain，通常可自由使用且不要求署名，但仍要確認素材頁標示。第二種是開源授權，如 MIT、ISC、Apache 2.0，多半允許商用與修改，散布時要保留各授權要求的版權或授權聲明。第三種是 CC BY 4.0，可商用與修改，但必須依規定標示作者、授權與變更。第四種是自訂或 Freemium 授權，免費方案可能要求署名、限制格式或用途。不要只看網站名稱，要查你實際下載版本附帶的授權。

第四種是最多人中獎的地方。它的免費版本通常還附帶一個條件：必須署名。例如 Flaticon 的免費方案要求你在使用圖示的頁面放一個連回 Flaticon 的可見標示。如果你做的是客戶官網，多數客戶不會接受首頁底下掛一個「Icons by Flaticon」的連結，這時候你只有兩條路：買付費方案，或換一個 MIT 授權的圖示庫。下載前花十秒看一眼授權頁，比事後收到下架通知或侵權求償信划算太多。這也是我為什麼把授權當成選圖示的第一篩選條件，排在美感與數量之前。

授權類型	能商用嗎	能修改嗎	需要署名嗎	代表網站
CC0 / Public Domain	可以	可以	不必	SVG Repo（部分）
MIT / ISC / Apache 2.0	可以	可以	保留授權檔即可	Lucide、Heroicons、Tabler、Phosphor、Bootstrap Icons、Remix Icon
CC BY 4.0	可以	可以	必須依授權標示	依個別素材或套件
Freemium（個人免費／商用付費）	付費後才可以	視方案	免費版必須署名	Flaticon、Icons8、The Noun Project

PNG、SVG、Icon Font，三種吃法選錯會後悔

選圖示網站之前，你得先決定你要的是哪一種檔案格式，因為同一個圖示，用不同格式交付，會直接影響網站的載入速度、視覺清晰度，還有你日後維護的痛苦指數。

PNG 是最直覺的選擇，點一下就下載，丟進任何軟體都能用。它是點陣格式，放大就失真，所以同一個圖示你常常要抓 16px、24px、48px、128px 四種尺寸，檔案數量立刻膨脹。PNG 唯一不可取代的場景是彩色、多層陰影的擬真圖示，這類用 SVG 很難表現。SVG 是向量格式，一個檔案從 16px 放大到 512px 都不失真，檔案通常只有幾百 bytes 到兩三 KB，還能用 CSS 改顏色、用 JavaScript 動態控制，是現代網頁的預設選擇。Icon Font 則是把圖示打包成一個字型檔，用 <i class="fa-home"></i> 這種方式插入，Font Awesome 是代表。它的優點是好用，但缺點也明顯：一個字型檔動輒幾十 KB 到兩三百 KB，就算你只用其中三個圖示，讀者還是要把整包下載完。

網頁 UI 通常優先考慮 SVG，因為可縮放、可改色，也能省去多尺寸點陣檔管理；大量重複圖示則可評估 SVG sprite。圖示格式主要影響維護與載入體驗，Google 的排名系統雖會使用部分網頁體驗訊號，但它們只是眾多訊號之一，不是單一硬門檻（見 Google Search Central Blog 2020 年 5 月的 〈Evaluating page experience〉）。速度的首要價值仍是讓使用者更快取得內容（見 web.dev 的〈Why does speed matter?〉，2026）。

格式	縮放清晰度	檔案大小	能改色嗎	適合場景
PNG	放大失真	中到大（需多尺寸）	不能	彩色擬真圖示、需要陰影層次
SVG	不失真	極小（通常 < 5KB）	能用 CSS 改	絕大多數網頁圖示、UI 介面
Icon Font	不失真	大（整包幾十 KB 起）	能用 class 改	大量圖示同風格、舊專案沿用

14 個 Icon 網站，我用四個用途分類

網路上介紹 Icon 網站的文章，多半是把十四個網站一字排開、各寫一段介紹就結束。這樣的問題是，你讀完還是不知道哪一個適合你。我的分法不一樣：先問你「這個圖示要給誰用、放在哪裡」，再把你導向對應的網站。下面分成四類，分別是系統級一致性、開發者優先、設計師與內容產製、會動的圖示。你會發現，多數專案只需要在兩三個網站之間移動就夠了。

系統級一致性：Google 官方出品

這一類只有一個選手，但它是所有圖示風格的母體之一。如果你的專案從零開始、還沒決定用哪一套圖示，從這裡出發幾乎不會出錯。

1. Google Material Symbols（fonts.google.com/icons）。Google 官方維護的圖示系統，前身是 Material Icons，2022 年改版升級為 Material Symbols，導入了可變字型技術，讓同一個圖示可以用參數調整粗細、填充、光學尺寸與圓角。它涵蓋超過 2500 個圖示，風格統一、辨識度極高，你在 Android、Google 各式產品看到的圖示幾乎都來自這裡。授權是 Apache 2.0，可商用、可修改。它同時支援 SVG 下載與 Icon Font 兩種吃法，官方還提供 CDN 與 npm 套件，開發者整合幾乎零成本。如果你做的是走 Material Design 風格、或單純想要「安全牌」的專案，Material Symbols 是最穩的起點。它唯一的限制是風格偏中性、線條偏幾何，如果客戶要的是手繪感或擬真感，這裡找不到。

開發者優先：SVG 直取、npm 即裝、風格統一

這一類是工程師與切版設計師的主戰場。特色是授權乾淨（MIT 或 Apache）、SVG 直接拿、有 npm 套件或 CDN、風格高度一致，你把它們整包引進專案也不會有授權疑慮。我用這一類的頻率最高。

2. Heroicons（heroicons.com）。Tailwind CSS 團隊官方出品，MIT 授權，風格是簡潔的 24px 與 20px 兩種尺寸，分成 outline 與 solid 兩種變體。數量不多，約三百多個，但每一個都精挑細選，覆蓋了網站 UI 最常用的功能圖示。它的價值在品質與一致性，數量雖少卻精：同一套風格從頭到尾不偏。如果你用 Tailwind 或在學 CSS 入門，Heroicons 幾乎是反射動作會選的。數量不夠時再往外找。

3. Lucide（lucide.dev）。這是傳奇的 Feather Icons 的社群延續版。Feather 停止維護後，一群設計師 fork 出來繼續擴充，現在已經有超過 1500 個圖示，ISC 授權。風格延續 Feather 的極簡線條，24×24 網格、2px 線條、圓角收尾，辨識度極高，是這幾年開源社群最被廣泛採用的圖示庫之一。它幾乎什麼框架都有對應套件：React、Vue、Svelte、Angular 全支援，還有 Figma 外掛可以直接在設計軟體裡搜尋。如果你的專案需要大量一致風格的線條圖示，Lucide 是我最常推薦的單一來源。在 Figma 裡作業的話，從Figma 圖示外掛清單挑一款對應的外掛，就能把 Lucide 直接掛進畫布搜尋匯入。

4. Tabler Icons（tabler.io/icons）。MIT 授權，收錄數千個圖示。風格以 24×24 線條為主，也有實心版本與線條粗細設定。outline 與 filled 變體可用來區分互動狀態；實際數量與可用套件以官網為準。

5. Phosphor Icons（phosphoricons.com）。MIT 授權，同一圖示提供 thin、light、regular、bold、fill、duotone 等粗細與樣式變體，適合建立視覺層級。實際圖示數量與各平台套件以官網為準。

6. Bootstrap Icons（icons.getbootstrap.com）。Bootstrap 官方維護，MIT 授權，約 2000 個圖示。它不只是給 Bootstrap 框架用，任何人都能獨立下載 SVG。風格同樣是幾何線條，但比 Lucide 更緊湊一些，適合資訊密度高的表格、清單、表單。如果你的網站是用 WordPress 主題 搭 Bootstrap 底層，這套圖示的視覺相容性最高。

7. Remix Icon（remixicon.com）。Apache 2.0 授權，約 2900 個圖示，風格分成線條與實心兩大類，線條偏圓潤飽滿。它的特色是分類非常細，光是「商務」「教育」「地圖」這類大分類就拆得很完整，適合你已經知道要什麼主題、想一次撈一批的時候。它也提供 Icon Font 版本與 npm 套件，整合進 Elementor 或自訂版型都不難。

8. Iconify（iconify.design）。嚴格說它不是一個圖示集，而是一個圖示聚合器，把超過兩百個開源圖示庫、總共超過二十萬個圖示統一在一個介面裡搜尋。它的價值在於：你不必記住 Lucide 在哪、Tabler 在哪、Material Symbols 在哪，只要在 Iconify 輸入關鍵字，全部一起比價。它還提供按需載入的 API，你的網站只下載實際用到的圖示，不必整包下載。如果你做的是跨風格、需要混搭的專案，Iconify 是最有效率的搜尋入口。不過混搭要小心風格一致性，這點後面會談。

設計師與內容產製：海量素材、PNG、線上編輯

上面八個都是線條為主的開源圖示庫，數量雖多，風格相對單一。當客戶要的是彩色、擬真、3D、插畫風的圖示，或你需要大量的 PNG 透明背景檔案來做社群素材、簡報、印刷品，就進到這一類。這裡的網站走的多半是 freemium 模式，免費版能用、但商用要留意署名或付費條件。

9. Flaticon（flaticon.com）。Flaticon 提供大量不同風格的圖示；可下載格式、每日限制、署名要求與付費權益可能依方案調整。使用前應查看該圖示及方案當下的授權頁，不能只依平台規模或「免費」標籤判定可商用。

10. Icons8（icons8.com）。Icons8 是一個龐大的設計資源生態系，圖示只是其中一環，還涵蓋插畫、相片、音樂、UI 工具。它的圖示分成多種風格，從經典線條到黏土、3D、Windows 11 風格的 Fluent 都有，品質穩定。免費方案需署名，付費方案提供完整商用與多種格式匯出。它最實用的功能是線上編輯器，可以直接把單色圖示改成你的 品牌色，省下回 Figma 改色的步驟。

11. The Noun Project（thenounproject.com）。圖示界的攝影圖庫，走的是「一個圖示一個故事」的策略，風格偏向極簡符號與插畫，由全球設計師上傳。免費方案需署名，付費方案可免署名商用。它的特色是圖示的「概念」覆蓋極廣，很多抽象詞彙（協作、永續、信任）在這裡找得到對應符號，在其他線條庫裡反而找不到。如果你做的是品牌溝通、社會議題、教育類內容，The Noun Project 的語彙深度會幫上忙。

12. SVG Repo（svgrepo.com）。一個專注於 SVG 格式的免費圖示搜尋引擎，收錄超過五萬個開源 SVG 圖示，標榜「全部可商用」。它最大的價值是按授權篩選，你可以直接勾「CC0」或「CC BY」，把真正能安心的圖示拉出來，這對做客戶專案的人很實用。它也提供線上把 SVG 改色、調尺寸再下載。風格混雜是它的缺點，你需要自己把關一致性，但單就「快速找到一個可商用的 SVG」這件事，它效率很高。

會動的圖示：讓介面多一層呼吸

前面十二個都是靜態圖示。當你的介面需要一點動態情緒，例如載入動畫、成功提示、空狀態的引導，靜態圖示會顯得呆板。這時候會動的圖示就能派上用場。

13. Lordicon（lordicon.com）。主打動態圖示，提供 Lottie、GIF 等格式，方案與免費素材數量可能調整。下載前要確認該素材的方案、匯出格式與商用授權。動態圖示適合載入、成功、錯誤等狀態回饋，用得過多則會分散注意力。

14. LottieFiles 的動態圖示區（lottiefiles.com）。Lottie 常以向量圖形描述動畫，在合適的素材上通常比同尺寸 GIF 更容易縮放，但檔案大小並非必然更小，也可能包含點陣素材。免費與商用範圍要看個別素材授權；前端還需評估播放器、無障礙與效能。

14 站總比較表：一張表幫你做選擇

上面分類講完，你可能還是想要一個並排比較。下面這張總表把十四個網站的關鍵欄位並排在一起，方便你依需求快速定位。要特別提醒的是，「商用」欄打勾不代表完全免煩惱，freemium 類的網站商用要嘛要署名、要嘛要付費，動手前還是看一下授權頁。

網站	主要格式	授權	商用	風格	最適合
Google Material Symbols	SVG / Icon Font	Apache 2.0	可	幾何中性	系統級一致、Material 風格
Heroicons	SVG	MIT	可	極簡線條	Tailwind 專案、UI 基礎圖示
Lucide	SVG	ISC	可	極簡線條	大量一致風格、各框架
Tabler Icons	SVG	MIT	可	線條／實心配對	Dashboard、後台、狀態切換
Phosphor Icons	SVG	MIT	可	圓潤、六種粗細	視覺層級、親和品牌
Bootstrap Icons	SVG	MIT	可	緊湊幾何	Bootstrap 框架、資料密集介面
Remix Icon	SVG / Icon Font	Apache 2.0	可	圓潤飽滿	分類完整、主題批次抓取
Iconify	SVG	隨來源庫	多數可	聚合多風格	跨庫搜尋、按需載入
Flaticon	PNG / SVG	Freemium	付費或署名	海量多風格	找冷門主題、彩色擬真
Icons8	PNG / SVG	Freemium	付費或署名	多風格含 3D	線上改色、多格式匯出
The Noun Project	SVG / PNG	Freemium	付費或署名	符號插畫	抽象概念、品牌溝通
SVG Repo	SVG	隨作者（含 CC0）	多數可	混雜	快速找可商用 SVG
Lordicon	Lottie / GIF	Freemium	付費或署名	動態彩色	載入、狀態切換動畫
LottieFiles 圖示區	Lottie	Freemium	視個別素材	動態向量	輕量動態 icon、retina 友善

五十個一致風格 icon 怎麼收齊：實戰收圖流程

需要大量一致風格 icon 的官網改版專案，圖示數量會隨功能、狀態與頁面增加。先列出完整清單，再確認主庫能覆蓋多少；遇到主庫沒有的圖示時，才從其他來源補齊，避免一開始就混用太多風格。

我的收圖流程是這樣的。第一步，先選一個主庫當作風格母體。如果是線條風格的網站，我會選 Lucide 或 Phosphor 當母體，因為數量大、風格一致、授權乾淨。把母體的幾個關鍵參數記下來：網格大小（通常是 24×24）、線條粗細（Lucide 是 2px）、圓角半徑、端點樣式（圓頭還是方頭）。這幾個參數就是你日後挑選補充圖示的尺規。

第二步，把整份圖示清單列出來，逐個標記主庫有沒有。缺少的部分，先到同風格的其他開源庫找，再到 Freemium 網站用風格、線條粗細與顏色篩選。覆蓋比例沒有固定答案，重點是把補圖來源控制在少數幾個。

第三步是收齊之後做一致性校正。把所有圖示放進 Figma 或 Illustrator，逐一檢查線條粗細、網格、圓角與視覺重量。外掛能幫你匯入與搜尋，但不能保證不同來源會自動統一線條與網格；仍要人工調整。這套收圖邏輯也適用於 英文字體 或 中文字體 的搭配。

商用合規檢查清單：上線前過一遍

圖示收齊、設計完成，要交付客戶或上線之前，建議固定跑一遍這份檢查清單。被授權問題咬過一次，就會自動把這個動作變成反射，花你五分鐘，省掉後續可能幾週的麻煩。

• 每一個圖示都標記來源網站與授權類型，最好直接在專案資料夾放一個 credits 檔案，記錄檔名、來源、授權、下載日期。
• freemium 圖示確認是否已付費或已署名，免費版的署名要求是否已在網站對應頁面放置可見標示。
• 檢查有沒有誤用 Editorial Use Only 的素材，這類通常出現在含真人或品牌 logo 的圖示，禁止商用。
• 修改過的圖示保留原始授權檔，MIT 與 Apache 要求你在散布時附上原本的版權聲明，別刪掉。
• 客戶合約裡註明圖示授權歸屬，付費圖示的訂閱帳號是登記在誰名下、客戶接手後能否繼續使用，這點要先講清楚。
• 動態圖示確認 Lottie 或 GIF 的授權，有些動畫平台的免費素材僅限個人專案。

這份清單看起來瑣碎，但每一條對應的都是業界實際發生過的真實爭議。授權這件事，事前一個小時的檢查，抵得過事後一整個月的善後。

Icon 怎麼拖垮你的 Core Web Vitals

圖示很小、看起來無害，但它對網站效能的影響比多數人想像的大。這不是理論，是你打開 Chrome DevTools 的 Network 面板就會看到的數字。我把幾個最常見的效能地雷列出來，因為它們跟你的網頁設計必備元素能不能順利被讀者看到直接相關。

第一個地雷是載入整包 Icon Font，卻只使用少數圖示。字型尚未載入時也可能出現空白或錯誤字元，造成視覺閃動；是否影響 CLS 或 LCP，要看實際版面與候選元素。第二個地雷是大量零散 SVG 請求。每個請求都有成本，但 HTTP/2、HTTP/3 已能多工處理，不能只靠請求數判定一定嚴重變慢。第三個地雷是 PNG 的多尺寸冗餘，會增加檔案與管理成本。

解法其實很清楚。能內嵌就內嵌：把 SVG 的程式碼直接寫進 HTML，省掉 HTTP 請求，還能用 CSS 控制顏色與動畫。數量多就用 SVG sprite：把所有圖示打包成一個 SVG 檔，用 <use> 引用，兼顧快取與請求數量。非用 Icon Font 不可時，用子集化工具（例如 Font Awesome 的 Kits 或 subsetfont）只打包你實際用到的圖示，把字型檔壓到幾 KB。這幾個動作做完，圖示帶來的效能負擔會降到幾乎感覺不到。

這些優化對資源受限的行動裝置尤其重要。根據 Statista 的統計（2026 年 4 月），全球網頁流量有很大一部分來自行動裝置。應在真實或中階裝置上測試，而不是假設桌機結果可直接代表手機。如果你是用 WordPress 架站，這類優化可以搭配 WordPress 圖片優化 與 圖片壓縮工具 一起做。

圖示不是裝飾，是資訊層級的一部分

很多設計師把圖示當成「頁面太空白就補一個上去」的填充物，這是常見的誤解。一個稱職的圖示，做的是引導視線與降低閱讀成本的工作，它跟排版、配色、字體是同一套系統，不是獨立的裝飾品。從不少 網站版面規劃 的稿可以看到，圖示用得好的頁面，讀者掃視三秒就能抓到資訊架構；圖示用得亂的頁面，讀者反而要多花力氣判斷「這個圖代表什麼」，注意力被分散，轉換跟著掉。

圖示在版面裡通常扮演三種角色：分類錨點、狀態指示與行動引導。購物車、警告、下載等熟悉符號能幫助讀者辨認區塊或下一步，但是否提高點擊仍要靠可用性測試或數據確認，不能把圖示本身當成轉換保證。

這三種角色對圖示的要求不一樣。分類錨點要的是辨識度與風格一致，因為讀者會反覆看到；狀態指示要的是語意精準，一個圖示只能對應一個意思，否則讀者會困惑；行動引導要的是視覺重量夠，不能輕到被按鈕文字蓋過。近年流行的 Bento Grid 排版 更是把圖示的角色放大了：每個卡片是一個獨立資訊區塊，卡片的視覺重心往往就落在那一個圖示上，選錯圖示等於讓整張卡片失焦。於是，我前面花那麼多篇幅談風格一致性，一致性顧好了，圖示才會從「裝飾」升級成「結構」。如果你想了解這類視覺潮流的整體走向，可以回頭看我們整理的 網頁設計趨勢，圖示風格的演進其實是跟著大的設計潮流在跑的。

有一個小技巧值得記下來：圖示的留白比圖示本身重要。一個 24px 的圖示，周圍至少要留 8 到 12px 的呼吸空間，太緊貼文字或邊框，視覺上會擠在一起，反而讓資訊變難讀。很多設計師急著把圖示塞進有限的版面，結果整個區塊看起來像拼貼。寧可少放一個圖示，把留白留出來，質感會立刻提升。這個原則在做 網頁設計必備元素 的取捨時同樣適用：少即是多，每個元素都要有存在的理由。

收圖工作流：Eagle 加 Figma 外掛加壓圖

圖示的存放與取用會決定長期效率。很多人圖示收完就丟在桌面或下載資料夾，下次要用時翻半天找不到，找到之後又不確定授權狀態，只好重抓。

我的工作流是三層。第一層是集中存放，用 Eagle 這類素材管理工具，把所有圖示依專案、風格、授權分類，並在備註欄寫上來源網站與授權類型。Eagle 最大的價值是它支援顏色、形狀、標籤多維度篩選，你記得「那個藍色的圓角齒輪」就能找到。第二層是設計階段的取用，在 Figma 裡裝好圖示外掛，設計過程中直接搜尋匯入，不必在 Figma 與素材庫之間來回切換。如果你還沒建立 Figma 工作流，可以從 Figma 完整教學 與 Figma 必裝外掛 開始打底。第三層是交付前的優化，把要用在網站上的圖示跑一次壓縮與格式轉換，SVG 用 SVGO 清理冗餘節點，PNG 轉 WebP 再壓縮，這幾步能再砍掉不少體積。

這個三層工作流的好處是「收一次、用很多次」。同一套風格統一的圖示，會隨著你的專案累積變成個人資產，下次接到相似產業的客戶，半個工作天就能把圖示系統部署完。如果你也在做 作品集 或建立自己的設計資源庫，這套流程同樣適用；需要照片與向量圖時，也可以搭配我們整理的商用免費圖庫清單。把素材當資產管理，而不是用完即丟的消耗品，長期下來的複利效果非常可觀。於是，我會建議新手在學 UIUX 自學資源 的同時，就把素材管理的習慣一起建立起來，越早養成越省事。

常見問題

免費圖示真的能商用嗎？

多數可以，但要分清楚授權。MIT、ISC、Apache 2.0、CC0 這幾類可以放心商用，只要保留授權檔或不必署名。CC BY 4.0 可以商用但要署名。Freemium 類（Flaticon、Icons8、The Noun Project）免費版商用通常要求署名或限制每日下載量，正式商用建議買付費方案，省掉署名與數量限制的麻煩。下載前花十秒看授權頁，是最低成本的保險。

SVG 一定比 PNG 好嗎？

九成的網頁圖示場景裡，SVG 優於 PNG，因為它體積小、不失真、可改色。但有一種情況 PNG 不可取代：彩色、多層陰影、擬真風格的圖示，用 SVG 表現起來會很複雜，檔案反而變大，這時 PNG 或 WebP 更合適。判斷標準很簡單，圖示是單色或雙色就用 SVG，要呈現光影層次就用 PNG。

這麼多圖示庫，我一定要全部用嗎？

千萬不要。一個專案固定用一到兩個主庫就夠了，太多來源只會破壞風格一致性。我的建議是挑一個開源主庫（Lucide、Phosphor、Tabler 擇一）當母體，再用 Material Symbols 補系統級圖示，需要彩色或擬真時才動用 Flaticon 或 Icons8。深度用熟兩三個網站，勝過淺淺認識十四個。

Icon Font 還值得用嗎？

新專案我會建議優先用內嵌 SVG 或 SVG sprite，因為效能與可控性都更好。Icon Font 在兩種情境還有價值：一是舊專案已經大量使用、重寫成本太高；二是你需要用現成的 <i> 標籤語法快速上手，例如用 頁面編輯器 架站、不想碰程式碼。除此之外，Icon Font 的肥大字型檔與 FOIT 問題，讓它在 2026 年已經不是首選。

圖示要搭配什麼顏色才好看？

線條圖示最安全的做法是跟著網站的主色或文字色走。功能性圖示（首頁、搜尋、選單）建議用與正文相同或接近的深灰，避免搶走文字的視覺重量；強調性圖示（優勢、特色、保證）可以用你的品牌主色，讓它在版面裡跳出來。彩色或擬真圖示則要配合整體配色計畫，不能只看單張圖示漂亮，要擺進版面一起看。如果你還沒確定主色，先回頭把品牌色與 色彩學基礎 定下來，圖示的配色才有依歸。一個常見的錯誤是圖示用了五顏六色，結果整個首頁像調色盤，讀者的眼睛反而找不到焦點。

圖示大小怎麼抓才不會跑版？

網頁圖示常見尺寸有 16、20、24、32px，但沒有適用所有介面的標準值。真正決定跑不跑版的，是圖示容器、對齊與視覺邊界。可把圖示包在固定大小的 span 或 div 裡，再用 flexbox 對齊；行動版也要獨立檢查，必要時用相對單位或 media query 微調。

三步收圖行動清單

讀到這裡，與其記住十四個網站的名字，不如立刻動手做三件事。這是我會給任何想知道「圖示到底怎麼選」的人的建議。

1. 今天就把主庫定下來。打開 Lucide 或 Phosphor，花十分鐘瀏覽它的風格與分類，判斷它跟你目前專案的調性合不合。合就用它當母體，不合就換一個。這一步的關鍵是「只選一個」，不要貪多。
2. 把現有專案的圖示盤點一次。把你手上正在做的網站所有圖示位置列出來，標記哪些來自哪個網站、授權是什麼。你會很快發現哪些圖示是地雷，哪些可以放心保留。這份盤點也是你建立 credits 檔案的起點。
3. 建立素材管理習慣。下載 Eagle 或你慣用的素材管理工具，把盤點完的圖示分類存放、標好授權。這個動作現在看起來像多餘的行政工作，三個月後你會感謝自己。

圖示是網頁設計裡容易被忽略的小細節。選對來源、顧好授權、維持一致性、把效能顧好，網站的視覺語言才會穩定。根據 W3Techs 的統計（2026 年 6 月），WordPress 支撐全球超過四成的網站；不論使用哪種系統，這套選圖與授權檢查流程都適用。