免費 Icon 怎麼選：三道關卡判斷授權、格式與一致性

先把場景換成一個假設：一位接案設計師接到官網改版的詢問，客戶在估價階段問她，導覽列與功能區那些小圖示，要不要單獨買授權？上線之後會不會出問題？她一時間答不出來。卡住的原因不是找不到圖，而是三個前提還沒想清楚：這批圖示會不會進入商用交付物、放在什麼載體且交付之後誰維護、需要幾個且一致性要求多高。多數人的習慣是先抓再說，看到順眼的就下載；代價不會在點下載那一刻出現，而是之後的重抓、替換，以及面對客戶提問時答不上話的尷尬。

挑圖示網站的時候，大家用的三個篩選器通常是素材量、「免費」標籤、美感樣式。這三個指標有個共同點：在下載當下都是零成本，看起來愈多愈好、愈美愈好。真正的成本像一張延後付款的帳單，到署名條款、格式維護、風格校正的階段才一次浮現。所以網站數量與素材量恰恰是最不重要的篩選器，順序應該倒過來：先授權、再格式，第三才是風格一致性。一個授權乾淨的主庫，加上一到兩個補圖來源，就足以撐起整個專案的圖示需求。

快速重點：免費圖示能不能用，先過三關：授權決定可否商用、格式看交付後誰維護、超過十個就定主庫。商用專案首選 MIT 或 Apache 開源庫（Heroicons、Lucide、Tabler），彩色擬真才動 Freemium，並在下載前備好署名作法或預算。

先診斷再開網站：三個問題決定你的取圖條件

不需要先弄懂圖示的教科書定義才會挑圖，需要的是在下載之前回答三個問題。第一個問題：這批圖示會進入商用交付物嗎？客戶官網、對外產品頁、要收費的服務都算商用；自己練習、內部測試稿，限制就少得多。第二個問題：放在什麼載體，交付後誰維護？網頁由前端接手、簡報由你自己改、印刷品印了就定案，三種答案指向不同的檔案格式。第三個問題：需要幾個，一致性要求多高？補三個圖示與收五十個圖示，是兩種完全不同的工作。數量同時決定授權追蹤的規模：三個圖示的出處用一段記事就記得住，五十個圖示沒有固定格式很快會失守。

把三個答案寫下來，就是一張取圖條件卡。後面每一道關卡都靠這張卡判斷：授權關看第一個答案，格式關看第二個，一致性關看第三個。條件卡也能用在反向場景，收到報價或盤點舊專案時，先把三個答案補齊，再談要做什麼。條件卡最好寫進文件，不要只放在腦中：交接給同事或回覆客戶時，三行字就能說清楚取圖原則，對方也能照著檢查。

沒有先診斷的代價，多半發生在下載之前，等發現時已經是事後。估價時回應不了授權問題，報價就會失準；風格沒先定調，收圖就會失序；冷門圖示臨時找不到替代，時程就會延誤。四種常見症狀各有解方：署名忘了標，回授權關補判斷；畫面風格混雜，進一致性關定主庫；冷門圖示找不到，用四條取圖路線對症狀；頁面載入變慢，回格式關調整載入策略。圖示在網頁設計必備元素裡的角色是輔助判讀，不是填滿版面的裝飾，診斷的目的就是讓每個圖示都有存在的理由。

↔ 左右捲動檢視完整表格

診斷問題	答案決定什麼	對應關卡	條件卡欄位
會進入商用交付物嗎	授權層級底線	授權關	可接受授權、署名處理
什麼載體、交付後誰維護	檔案格式選擇	格式關	交付格式、載入策略
幾個、一致性要求多高	逐張挑或主庫制	一致性關	主庫、補圖來源數

授權關：把「免費」翻譯成四種能不能用的答案

先給答案：免費只描述價格，授權才描述權利。同一個網站裡，不同素材、不同方案層級的授權可以不同，條款也會改版，先前能免費商用的圖示，後來可能被調整成需要訂閱。所以判斷的單位從來不是網站，是你實際要下載的那個素材、那個方案、那個版本。

查授權可以縮成十秒的固定動作：打開素材頁看條款標示，確認自己適用免費層級還是付費層級，再看輸出格式有沒有綁權限，部分平台連向量檔下載都放在付費方案。三個位置都看過，答案就會浮出來，比記住任何一份網站清單可靠。

四個層次先把地圖畫出來。CC0 或 Public Domain 最寬鬆，商用與修改都不必署名；MIT、ISC、Apache 2.0 這類開源授權同樣開放商用與改作，釋出成品時附上授權條款即可；CC BY 4.0 給你商用與修改的權利，交換條件是依規定標示作者與授權出處；自訂的 Freemium 條款變化最大，免費方案常綁署名、限制格式或用途。實際判斷時，查你下載的那個版本附帶的授權，而非只看網站名稱。

同樣四個層次，三種使用情境有三種結論。做客戶官網，對外頁面通常不接受第三方署名，安全名單是 CC0 與開源；CC BY 與 Freemium 要嘛先備好署名作法，要嘛編列預算買授權，兩者缺一就不該碰。很多爭議不是出在條款本身，而是出在順序被倒過來：圖先上版，署名位置事後才找，客戶打回票的機率很高。做自家網站，署名成本可以自己吸收，CC BY 就有機會用，頁尾一行可見標示連回出處即可。個人練習限制最少，但建議照商用標準練習，養成查條款的反射，接案時不必重新學一遍。

↔ 左右捲動檢視完整表格

使用情境	可接受授權層級	署名處理
客戶官網、對外產品	CC0、MIT 類開源	不需署名，風險最低
自家網站、內部工具	可再加上 CC BY	頁面可見標示連回出處
個人練習、測試稿	限制最少	仍建議記錄來源

條款裡的額外限制要單獨看，常見兩種。一種是排除品牌標誌與商標註冊用途，圖示能商用，不能變成 Logo；另一種是標註僅供編輯用途的素材，通常出現在含人物或品牌符號的內容，禁止放進任何商業交付物。遇到明確排除的條款，處置是換用途或換素材，不是賭對方查不到。署名的實際長相也要先想清楚：它是頁面上連回出處的可見標示，不是存在檔案裡的備註，客戶能不能接受，估價階段就要問。署名的形式也先談定，頁尾集中一頁標示，通常比每個圖示旁各掛一條連結容易被接受。

這套判斷不限於圖示。照片、向量插畫、影音素材走的是同一套價格與權利的二分法，差別只在條款細節；需要其他素材時，商用免費圖庫的挑選同樣從授權層級開始看，看懂四個層次，換素材類型也不用重學。

格式關：交給誰維護，就選什麼檔案

格式選擇的判斷軸只有兩條：交付後誰維護、放在什麼載體。前端會接手的網頁介面，用 SVG；彩色擬真風格與平面產製，用 PNG；不碰程式碼、用頁面編輯器架站的人，沿用圖示字型也行，但要接受整包字型的重量與維護限制。檔案的真實成本從來不是畫質，是維護時間與載入重量。

用維護場景想一遍就懂。臨時要改品牌色：SVG 用樣式就能換色，PNG 每個尺寸要重出一遍，圖示字型要看平台方案支不支援。要加十個圖示：SVG 補檔就好，圖示字型要重新打包整份字型。同一個圖示要放大一倍：SVG 直接用，PNG 得事先抓對尺寸。這些工時在估價階段看不出來，在維護期全部會回來找你。

載體的判斷同樣具體。會進入網頁的圖示以向量為主，交給前端的檔案保持乾淨的結構；只進簡報的圖示，解析度夠的 PNG 就好，簡報軟體對向量的支援參差不齊，跨裝置開檔跑版是常見事故；印刷品在送印前轉成高解析點陣，格式照印刷廠的規格走。同一個專案裡，不同載體拿不同格式並不衝突，記在條件卡上就好。

載入策略三選一，對應規模而非絕對優劣。圖示少的頁面，把 SVG 原始碼直接內嵌進網頁原始檔，省掉請求又可以用樣式控制；數量多就改成精靈圖做法，全部圖示併成一份 SVG 檔再以引用方式取用，兼顧快取與請求數；非用圖示字型不可時，先做子集化，只打包實際用到的圖示，幾百 KB 的字型能壓到個位數。三種策略的共通原則是：讀者只下載他用得到的東西。判斷順序永遠從數量出發，先數頁面實際用到幾個圖示，再決定策略，不是先挑工具再湊場景。

圖示拖慢頁面的途徑有三條，機制各不相同。整包圖示字型只用到其中幾個，讀者仍要下載完整檔案，字型載入完成前還可能出現空白或替代符號造成的閃動。點陣圖示的多尺寸冗餘，同一個符號存了四五種尺寸，檔案與管理成本一起膨脹。大量零散請求則要修正認知：HTTP/2 之後的協定能多工處理請求，請求數不再是唯一指標，要看每個請求送出的資料量與快取利用。

效能主張要有邊界。Google 自己的說明把頁面體驗訊號放在眾多排名因素之列，而非單獨生效的硬門檻（Google Search Central Blog 於 2020 年 5 月的〈Evaluating page experience〉）；web.dev 談載入速度時，給的理由也是讓讀者更早看到內容，而不是把分數追高（〈Why does speed matter?〉）。行動裝置占全球網頁流量的比例長期偏高（見 Statista 的統計），測試對象以中階手機為準，桌機的順暢不能代表手機。做好圖示載入，改善的是讀者的等待體驗，沒有人能承諾排名或分數。

交付前的收尾管線固定兩步：向量檔先清理冗餘節點再交付，點陣檔統一轉檔與壓縮。用 WordPress 架站的人，把這兩步併進既有的WordPress 圖片優化與圖片壓縮工具流程即可，不必另起一套規則。

圖示字型的適用對象也在此收斂：用頁面編輯器架站、不寫程式的人，在頁面編輯器之間比較或在 Elementor 生態裡作業時，沿用字型是合理的權宜；一旦有前端接手維護，就換回 SVG，把選擇理由寫進條件卡，之後的維護者才看得懂。

一致性關：圖示一多，就從亂抓改成主庫制

先給門檻：圖示超過大約十個，就停止逐張挑選，改用主庫制。選一個授權乾淨、數量充足的主庫當風格母體，全部圖示優先從母體取用，母體沒有的才往外補。這條規則的目的不是美感潔癖，是同時控制兩種成本：風格校正的設計成本，與授權追蹤的管理成本。

風格不是感覺，是規格。一套圖示庫的可量測參數有四個：網格大小、線條粗細、圓角半徑、端點樣式。把主庫這四個參數記下來，它就是你的尺規，之後每一張補進來的圖示，都拿這把尺量過再上版。看起來亂的圖示組合，幾乎都是其中一兩個參數跑掉，不是每張都醜。

主庫的選擇準則三條。授權可商用免署名，CC0 或開源等級，商用交付不需要署名動作。圖示量足以覆蓋功能清單，導覽、狀態、動作、分類的常用語彙都找得到。關鍵參數可明確描述，量得出網格與線粗，補圖時才有依據。三條都過，再談風格喜好；喜好收在篩選的末端，不是第一關。

接著做清單盤點。把專案需要的圖示整理成一份完整清單，逐項核對主庫有沒有供應；缺項先往同風格的開源庫找，真的找不到，再進 Freemium 平台，以風格類型、線徑與配色當篩選條件，挑出最接近的。無論缺口多大，補圖來源都要壓在兩三個以內。

補圖有固定的降級順序：先同風格開源庫，再聚合器按授權篩選，第三步才是 Freemium。順序不能倒過來，原因很實際：Freemium 找圖最快、選擇最多，一旦先進去，開源方案就不會再看一眼，署名與付費條件就跟著整批素材進來。先從開源找，大多數缺項在免署名這一層就解決了，走進 Freemium 的只剩真正的長尾。這個順序還有附帶好處：開源庫的參數多半寫在文件裡，網格與線粗查得到，補圖校正有依據；Freemium 平台的素材頁很少揭露這些規格，素材一旦混進來，校正只能靠目測。

在設計端，Figma 圖示外掛能把主庫帶進工作區，直接在畫布上搜尋、匯入、批次替換，盤點清單的來回切換可以省掉大半。但外掛只解決取圖速度，不會自動統一參數；不同來源的圖示匯入後，網格與線粗仍然要對照尺規自己校正。

診斷結果對照：四條取圖路線與各自首選

條件卡填完，實際要打開哪些網站？把常見症狀對應到四條路線，每條路線給首選與備援。站名只是路線裡的執行順序，不是排名；各站的圖示數量與方案細節會變動，以官網目前標示為準。

↔ 左右捲動檢視完整表格

症狀	路線	首選	備援
要交付商用，授權不能出事	開源家族	Heroicons、Lucide	Tabler、Phosphor、Bootstrap Icons、Material Symbols
要彩色擬真、大量 PNG	Freemium 設計平台	Flaticon、Icons8	The Noun Project
冷門關鍵字找不到圖	聚合器與倉庫	Iconify	SVG Repo
要動態的狀態回饋	動態圖示	Lordicon	LottieFiles

授權零風險的路線走開源家族，首選 Heroicons 與 Lucide。Heroicons 由 Tailwind Labs 官方維護，採 MIT 授權，可商用、免署名，直接提供 SVG 原始檔，數量三百餘個，貴精不貴多；Lucide 採 ISC 授權，圖示上千個，主流前端框架都有對應套件。備援四套同樣乾淨：Tabler 與 Phosphor 是 MIT 授權，Bootstrap Icons 由框架官方維護，Material Symbols 出自 Google、採 Apache 2.0，同一個圖示能先調整粗細、填充與圓角再輸出。這條路線的短處只有一個：找不到彩色擬真與插畫風，要彩色的話一開始就別進來。

彩色擬真與大量 PNG 的需求走 Freemium 平台：Flaticon、Icons8、The Noun Project。三站的共同結構是免費方案附帶署名或用量條件，所以商用前先決定署名放哪、預算多少，再開始下載。Icons8 的線上編輯能把單色圖示換成指定色號再匯出，要對齊品牌色的專案很省事；The Noun Project 的語彙偏符號與插畫，協作、信任這類抽象概念在線條庫找不到時，可以來這裡試。Flaticon 的強項是主題覆蓋廣、同一個語彙常有多種畫法可挑；Icons8 的資源橫跨圖示、插畫與介面素材，適合需要整套視覺語言的專案。篩選條件再細，判斷順序仍然不變：授權層級優先於美觀。反向判斷同樣成立：不能放署名、又沒有預算，這條路線整條跳過。

冷門關鍵字用聚合器與倉庫路線。Iconify 把上百個開源圖示庫集合在同一個搜尋介面，輸入關鍵字就能跨庫比對；要記住的原則是，聚合器上圖示的授權看原始圖示庫，不是看平台本身。SVG Repo 收錄大量開源向量圖示，可以按授權類型過濾，直接把 CC0 的子集篩出來。用聚合器還有一條紀律要守：下載之後立刻把來源庫的名字寫進 credits，搜尋結果頁不會跟著檔案走，隔一個月再回頭查，常常已經想不起它出自哪一套。這條路線解決的是找得到，不是風格一致，抓回來的圖示照樣要過一致性關的尺規。

動態的狀態回饋走動態圖示路線：Lordicon 與 LottieFiles。載入中、成功、失敗這類狀態，動態圖示給的回饋比靜態明確；Lottie 以向量資料描述動畫，縮放表現通常比同用途的 GIF 穩，細節可以再看Lottie 的運作原理。代價是播放器與授權都要逐件確認，免費素材未必可商用，動態元素一多也會分散注意力；狀態指示是最值得用的位置，裝飾性動畫先克制。

路線選完是整合。用 WordPress 架站的人，先盤點WordPress 主題與版型自帶的圖示系統，能沿用就沿用，別為了換圖示重做版型；懂一點CSS 基礎，圖示的尺寸、間距與顏色控制會順很多；剛入門的人把UIUX 自學資源裡的介面單元走一遍，對網格與狀態的判斷會快很多。四條路線不是單選，多數專案是開源主庫加一條補圖路線的組合。

出事怎麼辦：三種事故的處置順序與授權深水區

授權事故的處置有固定順序：先停用，再替換，第三步補救。順序很重要，停用止損，替換止血，補救收尾；很多人卡在第一步，因為捨不得已經做好的視覺，但爭議展開之後，每多掛一天，成本都在增加。同一套順序也適用於還沒出事的日子：定期把上線頁面的圖示與 credits 對帳一次，缺紀錄的先補齊，真的需要替換時，清單已經在手上。

1. 署名遺漏：先把該圖示下架或遮蔽，接著二選一，補上可見標示，或換成開源替代。換圖的工時成本，通常低於爭議的溝通成本。
2. 授權查不到：淘汰，不戀戰。查不到條款的圖示，沒有可主張的權利基礎，直接替換掉最省事。
3. 客戶要原始檔：交付前把 credits 內容與授權歸屬寫進合約，哪些圖示可以再利用、哪些授權隨訂閱終止，白紙黑字寫清楚。

三個深水區分開記。第一個：免費可商用，不等於可以註冊成商標。商標要獨佔性，共用素材庫裡的圖任何人都能下載，先天衝突，所以多數條款直接排除品牌標誌與商標用途。標誌要做為品牌識別時，走免費 Logo 設計工具或委外設計，授權邊界要分開確認，兩邊的條款不能互相替代。

第二個：credits 檔案的最低欄位四項，檔名、來源網站、授權類型、下載日期。建立時機是下載當下，不是出事之後；日期欄位特別重要，條款改版時，它就是你主張適用舊版的依據。付費訂閱還有一個歸屬問題：帳號登記在設計師或客戶名下，客戶接手後能不能續用，這些在估價階段就該列進報價單，避免交付後才發現授權跟著人走。

第三個：AI 生成的圖示，權利狀態未必明確，各平台條款不同，進客戶專案前保守處理，能不用就不用，要用就留下生成紀錄與條款截圖。這個領域的規則還在變動，把它當深水區對待，比當成免費素材的安全牌穩妥。

風格為什麼看起來亂：四個參數的視覺體檢

圖示都抓對了，畫面還是怪，問題多半出在四個參數與視覺重量。體檢順序固定：對照主庫，量網格尺寸、線條粗細、圓角半徑、端點樣式，再看每個圖示的視覺重量是否相近。混源圖示的違和感，通常來自其中一兩項跑掉；對照參數做修正，比逐個換圖有效，也便宜得多。

視覺重量與光學尺寸是兩個直觀但常被忽略的概念。同樣 24px 的框，實心圖示比線條圖示重，圓形比細長形輕；把重量不同的圖示排成一列，有的看起來大、有的看起來小，框其實一樣大。校正方式是微調圖形在框內的佔比，重的縮一點，輕的撐一點，直到並列時重量相近。

修正手段分三層，從便宜到昂貴：先調參數，線粗、圓角、尺寸都是可以改的規格；參數救不了再重繪，而且只重繪少數關鍵圖示；整批風格不合才換源，回到主庫重新取。會燒掉大量時間的做法是跳過前兩層直接換源，等於把校正工作升級成重做工作。

圖示幫忙還是添亂，有判準。幫忙的兩個條件：符號本身熟悉，購物車、放大鏡、警告這類不需要學習的符號；周圍留白足夠，圖示與文字不互相擠壓。添亂的兩個訊號：讀者需要動腦解讀圖代表什麼；圖示的視覺搶過文字，本末倒置。踩到任一訊號，寧可少一個圖示，把呼吸空間留出來。

換一個假設情境當練習：一個 SaaS 產品的定價頁，三個方案卡片各配一個圖示，再加上方案比較表的勾選圖示，密度很快超過版面負荷。掃視動線與圖示密度的取捨沒有標準答案，可以從一個假設起測：方案圖示幫助辨識，比較表的勾選改用色塊或文字可能更乾淨。要留要刪，用實際版面測，成效宣稱之前先實測。

幾個延伸判斷可以接上。圖示與字體共用同一套幾何邏輯，英文字體與中文字體的搭配判斷，看的同樣是骨架、比例與重量；Bento Grid 版式把每張卡片的視覺責任集中在少數元素上，單一圖示的重量被放大，體檢要更嚴（見Bento Grid 排版的結構分析）；配色紀律是功能性圖示跟文字色、強調性圖示跟品牌主色，先把色彩學基礎打好，圖示選色才有根據。留白與動線的原則，回去查網站版面規劃；圖示風格的流行曲線，放在網頁設計趨勢的脈絡裡看，分得出哪些是週期、哪些是結構變化。

把圖示變資產：什麼時候值得建素材庫

建庫的觸發條件先判斷：同產業的客戶出現第二次、同一套品牌要部署多個站台、團隊多人需要共用圖示，三者任一成立就值得建；只做一次性專案，收一次用一次，不必勉強。建庫的報酬是收一次用很多次，圖示從消耗品變成可繼承的資產。

最低標準是命名與授權欄位。檔名要能看出用途與風格，不要只剩下載時的編號；備註要有來源與授權類型。判斷標準很簡單：三個月後的你，能不能只看紀錄就決定這個圖示能不能再商用。素材管理工具的多維篩選在這裡發揮價值，記得顏色、形狀或專案名，就找得回來，備註欄跟著素材走，不會散落在對話紀錄裡。

取用與交付各一條固定線。設計端從 Figma 工作流直接取用母體庫，素材庫與畫布之間不來回搬檔案，工作流還沒搭起來的人，從Figma 完整教學與新手外掛清單起步就夠；交付前跑固定管線，向量清理冗餘、點陣轉檔壓縮，再進版本控制或交付資料夾。流程固定下來，跨系統都適用：WordPress 支撐全球四成以上的網站（依 W3Techs 的長期統計，2026 年），但這套取圖與授權檢查不綁定任何系統。

素材庫的累積效果在作品集看得到：風格系統、授權紀錄、收圖流程都是可展示的工作方法，接到相似產業時，半天的部署成本對應別人從零開始的一週。資產化的本質是把判斷流程固定下來，讓每次取圖都在累積，不必重複付學費。

收尾行動：填完你的取圖條件卡

流程跑完，今天就能做完的最小行動有三件。第一件，回到開頭的三個問題，把答案寫進條件卡：商不商用、誰維護、幾個與一致性要求。第二件，選定一個主庫，打開開源路線的首選，十分鐘內確認風格與參數合用，不合就換下一個，只選一個。第三件，盤點手上專案的現有圖示，來源與授權狀態各標一欄，這份盤點同時就是 credits 檔案的起點。三件事，半小時內收工。

之後每次取圖都照卡執行，判斷不再依賴運氣或記憶。能期待的改變是流程性的：少重抓、少替換、交付時的授權爭議變少；至於排名、流量、轉換，沒有任何一套取圖流程能承諾。圖示是介面裡最小的單位，把它的判斷流程固定下來，是整個設計工作流程裡成本最低、回收最穩的一段。