13 個 Figma 圖示外掛推薦：免費 Icon 一鍵匯入，設計效率翻倍
挑 Figma 圖示外掛真正的門檻藏在三個常被略過的條件裡：能不能商用、要不要標註來源、有沒有提供 SVG。13 款主流外掛裡，Lucide Icons、Phosphor Icon…
挑 Figma 圖示外掛真正的門檻藏在三個常被略過的條件裡：能不能商用、要不要標註來源、有沒有提供 SVG。13 款主流外掛裡，Lucide Icons、Phosphor Icons、Material Symbols、Feather Icons 這四款完全開源可商用，覆蓋一般介面設計超過九成需求，是介面主力的常見選項；同為開源的還有 Heroicons、EOS Icons、3dicons、SVG Repo 等數款。光看「破十萬、破百萬」這類數字意義不大，例如 Iconify 整合超過一百個圖示來源、超過十萬種圖示 [來源：〈Iconify Icon Sets〉〈https://icon-sets.iconify.design/〉〈2026〉]，但對單一專案真正決定能不能裝的，向來是授權條款這一關，總量數字只是次要參考。
重點先看：13 款外掛裡 Lucide、Phosphor、Material Symbols、Feather 四款完全開源可商用，是介面主力的常見選擇，另有 Heroicons、EOS Icons、3dicons、SVG Repo 等多款同為開源；其餘多為有條件免費。選外掛優先看授權與 SVG 支援，數量是第四順位以後的事，細節以各外掛官方授權頁為準。
做 UI/UX 介面時，首頁、購物車、電話這類圖示按鈕幾乎無所不在。很多設計師的做法是開一堆外掛輪流試，結果裝了十幾個還是找不到一套能貫穿整個專案的風格。真正的問題出在挑選順序錯了，外掛數量再多也補不回來。若你才剛接觸這套工具，先把 Figma 中文完整教學入門到精通 過一遍，對外掛生態會更有概念。下面的挑選邏輯，同樣適用在你評估 新手必裟的 Figma 外掛推薦清單 裡任何一款工具的時候。
授權是第一道門檻，數量永遠是最後一關
挑選 Figma 圖示外掛時，最該優先判斷的條件是「能否商用、要不要標註來源、有沒有提供 SVG」這三件事，確定沒問題之後再去比圖示數量。光看「破十萬、破百萬」這類總量數字，對單一專案幾乎沒有實質幫助，因為你真正用得到的圖示可能只有幾十個。授權分三類：CC0 或 MIT 這類開源授權，可商用也可改作，最自由；需要標註來源的授權，適合能在頁尾或交付文件放 credit 的專案；付費會員才能免標記的，則適合正式商業作品。裝錯授權的後果會直接落在上線的專案上，可能構成侵權，而不只是外掛跑不動而已。這條風險比「圖示不夠多」嚴重得多，色彩心理學與設計應用 裡談的合規觀念，在這裡同樣成立。
格式決定可塑性。SVG 是向量，可在 Figma 改顏色、改線條粗細、無限縮放不失真，是設計階段的首選；PNG 是點陣圖片，插進去之後幾乎無法再調樣式，只能當成品用。兩者的差距會一路延伸到開發交付階段，跟 色彩學與色相環配色技巧 之於品牌視覺屬於同一層級的基礎判斷。字體搭配也走類似邏輯，可參考 排版設計與字體行距技巧 與 英文字體推薦與下載。
風格一致性比數量更重要。同一份專案混用四五種風格的圖示，視覺立刻崩壞，比缺幾個圖示還傷。中文字體推薦與設計指南 裡談「一套字走到底」的精神，套用到圖示挑選也成立。實務上挑一到兩套主力搭配，剩下用補位外掛找特殊圖示，會比裝滿一整排來得乾淨。判斷流程很單純：先確認商用需求，再看 SVG 支援，接著檢查風格能不能跟品牌統一，最後才看數量與更新頻率。
授權判讀還有一個常被忽略的層次：同一套圖示可能在「個人專案」與「商業專案」走不同條款。某些外掛標榜免費，條文裡卻限定不得用於轉售素材、不得用於競品 logo、或要求在超過一定瀏覽量的網站購買授權。看授權的重點落在條款裡對「衍生作品」「散布」「商業使用」這幾個名詞的定義，標題的文字只是包裝。養成把外掛授權頁截圖存進專案資料夾的習慣，交付時一併附上，後續若被質疑才能立刻自證。
13 款外掛總覽：授權與格式攤開來比
這 13 款外掛多半主打免費且可商用，但條件各不相同：有的完全開源（Lucide、Feather、EOS Icons），有的免費版有每日或數量限制（Flaticon 免費版一天約 10 個、IconScout 免費額度受限），有的需標註來源或得買會員才能免標記。這張表把授權與格式攤開來比，比逐一開外掛試還快。
| 外掛名稱 | 圖示量級 | 免費狀態 | 商用授權 | 支援格式 | 適用情境 |
|---|---|---|---|---|---|
| Lucide Icons | 上千種 | 完全免費 | ISC 開源可商用 | SVG | 極簡線條主力 |
| Phosphor Icons | 四千多種 | 完全免費 | MIT 開源可商用 | SVG | 多樣式介面主力 |
| Material Symbols | 超過三千種 | 完全免費 | Apache 2.0 可商用 | SVG | 跨平台行動端 |
| Feather Icons | 數百種 | 完全免費 | MIT 開源可商用 | SVG | 極簡風格單純需求 |
| Iconify | 超過十萬種 | 完全免費 | 部分圖示有限制 | SVG | 海量圖示補位搜尋、高覆蓋 SaaS 介面 |
| Heroicons | 數百種 | 完全免費 | MIT 開源可商用 | SVG | SaaS 介面線條風格 |
| SVG Repo | 超過五十萬個 | 完全免費 | 可商用 | SVG | 拖曳匯入素材寶庫 |
| Simple Icons | 三千多個品牌 | 完全免費 | 外掛免費、商標另議 | SVG | 社群與支付品牌 Logo |
| Flaticon | 數萬種以上 | 有條件免費 | 免費版需標註來源 | SVG/PNG | 整包下載、可編輯 |
| IconScout | 上百萬素材 | 有條件免費 | 免費額度有限 | SVG/PNG | 3D 與動畫素材 |
| Icons8 | 百萬級素材 | 有條件免費 | 部分素材需付費 | SVG/PNG | 3D 含黏土材質 |
| 3dicons | 數百種 | 完全免費 | CC0 開源可商用 | PNG | 3D 配色風格 |
| EOS Icons | 超過千種 | 完全免費 | 開源可商用可改作 | SVG | 科技主題圖示 |
| Open Iconic Icon Set | 兩百多種 | 完全免費 | 開源可商用 | SVG | 輕量補位 |
把表橫著看還能讀出兩層資訊。第一層是分野：完全免費可商用的主力是 Lucide Icons、Phosphor Icons、Material Symbols、Feather Icons、EOS Icons、SVG Repo、3dicons；有條件免費的則是 Flaticon、IconScout、Icons8；品牌 Logo 專用的 Simple Icons 外掛本身免費，但 Logo 屬於各品牌商標。第二層是支援格式欄位，SVG 佔了絕大多數，PNG 主要集中在 3dicons 這類固定配色 3D 圖示，SVG 與 PNG 兩種都給的則是 IconScout 與 Icons8 這類素材庫型外掛。這個欄位直接決定你在 Figma 裡能做多少二次調整，選外掛時它與授權欄位同等重要，不能只看「免費」就下載。
表裡幾個量級數字我留了官方出處：Material Symbols 超過三千種，每種還能切換多種樣式 [來源：〈Material Symbols and Icons〉〈https://fonts.google.com/icons〉〈2026〉]；SVG Repo 主打超過五十萬個 SVG，全可商用可下載 [來源：〈SVG Repo〉〈https://www.svgrepo.com/〉〈2026〉]；Simple Icons 收錄三千多個熱門品牌 Logo，每週與官網同步 [來源：〈Simple Icons〉〈https://simpleicons.org/〉〈2026〉]。留出處是因為它們會持續更新，半年後數字幾乎一定變，建議你回官方確認當下值。
四款開源主力，介面設計九成覆蓋
介面設計選 Lucide Icons 或 Phosphor Icons 最穩，兩者都是開源、可商用、可在 Figma 改色改粗細；Material Symbols 適合需要 Google 風格或行動端程式碼的專案，Feather Icons 則是 Lucide 的前身，風格極簡但圖示數較少。Lucide Icons 從 Feather Icons 改作而來，把原本數百種的圖示數量補得更齊全，同時保留乾淨俐落的線條感，對極簡風格的介面來說通常是優先列入測試的對象。它沒有海量數字可以宣傳，但日常用得到的圖示幾乎都有，這對主力外掛來說反而夠用。
Phosphor Icons 在 Figma 外掛上有四千多種圖示 [來源：〈Phosphor Icons〉〈https://phosphoricons.com/〉〈2026〉]，最強的地方落在樣式變化：細線、粗線、實心、雙色四種樣式一次給你。你在搜尋欄輸入「phone」這種關鍵字，一個詞就能跑出數十種變形，等於一個外掛頂四個用。這四種樣式對應不同的介面狀態值得記下來：細線（Thin、Light）適合輔助說明、次級操作；粗線（Regular、Bold）是按鈕與導覽列的主力；實心（Fill、Bold）用在當前選中狀態、通知紅點、需要強調的入口；雙色（Duotone）則適合插畫性較強的空狀態或引導頁。把這四種樣式對應到「預設／hover／active／強調」幾種狀態，整套介面的圖示語言就會自動一致，不會出現有的按鈕用線稿、有的用實心的混亂。
Material Symbols 由 Google 出品，超過三千種圖示，每種附帶 Android 與 iOS 對應程式碼 [來源：〈Material Symbols and Icons〉〈https://fonts.google.com/icons〉〈2026〉]，定位很明確：跨平台一致的專案。如果設計之後要交給前後端實作，而且團隊本來就用 Material Design 體系，這款等於設計與程式兩端共用同一套圖示語言。它還有一個主力外掛少見的功能：可變字重（weight）、填充等級（fill）與光學尺寸（optical size）都能在 Figma 裡滑桿調整，同一個圖示可以從極細調到極粗、從純線條調到接近實心，不必切換到另一個圖示檔。不過它的視覺風格帶有明顯的 Google 味，若品牌調性偏向人文或手作感，硬套 Material 會顯得工程化，這時退回 Lucide 或 Phosphor 會更合拍。
Feather Icons 是 Lucide 的前身，提供數百種開源圖示，最大的特色是調一次粗細就同步全部，需求單純的專案用起來反而清爽。要老實說的是，如果你今天才開始裝外掛，直接用 Lucide 幾乎涵蓋 Feather 的全部圖示，兩者擇一即可，不需要同時裝。這四款共同的特徵是授權乾淨、格式都是 SVG、可在 Figma 直接改色。把它們當主力再依專案風格挑一到兩款補位，會比裝十個外掛更能維持視覺一致性；不過主力並非只有這四款能擔任，同為 MIT 開源、SVG 格式的 Heroicons 線條乾淨、風格接近 Lucide，在 SaaS 介面這類需要穩定線條風格的專案裡，同樣勝任主力位置，後面評分卡與實務案例會再印證這一點。
聚合型外掛解決廣度，主力解決深度
想要在一個外掛內瀏覽海量圖示資源，Iconify 與 SVG Repo 是兩個代表。Iconify 把 Material Design Icons、FontAwesome、Jam Icons、EmojiOne 等超過一百個圖示資源平台整合進同一個外掛 [來源：〈Iconify Icon Sets〉〈https://icon-sets.iconify.design/〉〈2026〉]，省去你在多個外掛之間切換的時間。它的代價是圖示來自不同作者，部分有商用限制，需要逐套確認授權，這也是 Iconify 正在開發商用篩選功能的原因。在那之前，拿它當「找不到特定圖示時來撈」的補位工具最合適。
SVG Repo 的操作更直覺，圖示全部可商用、可下載 SVG，外掛支援拖曳到設計任何位置。五十萬這個數字聽起來嚇人，但對單一專案來說，你會固定使用的通常是其中同一兩個系列，海量資源真正的風險是風格混雜。建議鎖定搜尋關鍵字並固定同一套圖示系列，避免一份設計裡出現四種筆觸。聚合外掛與主力外掛的分工不是固定的：一般量級的專案，主力負責常規介面圖示、聚合外掛只在主力找不到罕用圖示時才開啟；但當專案圖示需求量大、又需要跨來源覆蓋時（例如高密度的 SaaS 介面），Iconify 反而會被拉上來當主力覆蓋，搭配一套線條一致的開源外掛收尾，分工會倒過來。决定哪一邊當主力的關鍵是圖示量級與風格調性，而不是外掛本身的標籤。
3D 與特殊風格：3dicons、Icons8、IconScout、EOS Icons
需要 3D 立體圖示或科技、品牌等特殊風格時，3dicons 與 Icons8 提供多種配色的 3D 圖示（Icons8 還有黏土材質風格）；IconScout 是素材庫型外掛，3D 圖示多達數十萬種但免費版有數量限制；EOS Icons 補齊了一般圖示庫少見的科技類圖樣，全部開源可商用。3dicons 是 CC0 開源，提供四種固定配色風格（繽紛、漸層、全白、黑金），可選不同角度，是免費商用最乾淨的 3D 選項。它走 PNG 格式，所以在 Figma 裡能調整的空間有限，比較適合當作裝飾性元素使用，稱不上可改色的介面圖示。
Icons8 是百萬級素材站，3D 風格多元，包含黏土材質，可用 HTML code 直接貼入網頁，部分素材需付費。它的優勢是風格選擇多，劣勢是免費與付費混在一起，挑選時要留意單張授權標示。IconScout 網站上有上百萬種素材資源，3D 圖示多達數十萬種，可一次下載整套素材包，也能搭配 Lottie 動畫呈現，免費額度有限、部分樣式需付費是它主要的限制。量級方面官方數字變動快，建議以「上百萬」「數十萬」這種範圍理解，避免引用精確數字引發爭議。
EOS Icons 走的是另一條路，補齊了一般圖示庫少見的科技主題圖示：程式碼、bug、伺服器這類符號，支援線條與填滿兩種樣式，開源可商用、可改作。對做開發者工具、DevOps 儀表板、技術文件介面的設計師來說，EOS Icons 幾乎是唯一能直接覆蓋這類語彙的開源選項。把這三款跟 3dicons 擺在一起看，共同特徵是定位在主力之外的補位場景：3D 視覺氛圍交給 3dicons、Icons8，動畫素材交給 IconScout，科技語彙交給 EOS，各自專精一個主力外掛覆蓋不到的角落。
品牌 Logo 與版權：素材免費不等於商標免費
用 Simple Icons、Flaticon 這類含品牌圖示的外掛時，商用上要注意：Simple Icons 收錄三千多個熱門品牌 Logo 的 SVG [來源：〈Simple Icons〉〈https://simpleicons.org/〉〈2026〉]，每週與官網同步更新，適合社群連結、支付方式展示這類場景，但品牌商標本身仍受各品牌規範；Flaticon 免費版要求標註圖源出處，若要免標記需購買會員 [來源：〈Flaticon〉〈https://www.flaticon.com/〉〈2026〉]，是 Freepik 旗下、專門提供 Icon 圖示的網站，可編輯顏色尺寸、可下載整包，免費版一天約 10 個。這是兩者最大的授權差異。
Logo 屬於品牌商標，外掛免費不代表商標使用權免費，商用合規的責任在使用者身上，這條最常被忽略。Facebook、Instagram、PayPal、VISA 這些品牌對自家 Logo 的使用都有各自規範，判斷可拆成三段來看：第一段是「能不能出現」，多數品牌允許用於真實連結到該品牌的場景，例如社群圖示連到官方粉絲頁；第二段是「能不能改」，幾乎所有品牌都禁止變形、變色、加特效，必須使用官方提供的版本與留白規範；第三段是「能不能用在自家視覺」，把別人的 Logo 做進自己的產品包裝或招牌，通常需要正式授權合約，外掛免費下載並不涵蓋這一層。多數授權地雷的根源，在於使用者把「素材授權」與「商標授權」混為一談。
授權判讀的共通原則是：開源（CC0、MIT、Apache）最自由，需標註出處的適合可放 credit 的專案，付費會員免標則適合正式商業作品。含他人品牌 Logo 的圖示即使外掛免費，商標使用仍須回到品牌官方規範。免費 Logo 設計工具推薦 裡的授權分級方式，可以直接套用在這裡。
把圖示裝進來、改色、拖到定位
安裝路徑從 Figma 的 Resources 或 Plugins 選單進入，搜尋外掛名稱後點 Run。部分外掛可以在搜尋時用 Free 篩選器過濾免費款，外掛資訊欄會標示授權與使用限制（每日次數、是否需標註）。插入方式有兩種：點擊插入至畫布中心，或拖曳到精確位置，SVG Repo、Iconduck 系外掛都支援拖曳，這對要把圖示放到 Figma 網格系統與響應式排版 裡特定格位的人來說差很多，拖曳比先點擊再移動快得多。改色與改樣式則看格式：SVG 圖示選取後直接在填色屬性調整，Phosphor Icons 這類支援細線、粗線、實心、雙色切換的外掛，還能在面板裡直接換樣式。
要提醒的是，外掛資訊欄的授權標示有時會比圖示站本身的授權頁更新得慢，兩邊對不起來的時候，以官方授權頁為準。插入後的整理動作往往被省略，卻直接影響團隊協作效率：每個圖示都該重命名成一組有規則的命名，例如「icon / 24 / cart-line」「icon / 20 / phone-fill」，把尺寸、名稱、樣式寫進檔名，隊友在左側圖層面板搜尋時就能秒找到。顏色則建議套用 color style 或 variable，避免直接填色，這樣品牌色一改全檔圖示跟著同步，省下逐一手改的時間。這幾個動作加起來只要十秒，卻能讓後續協作少掉大量重複勞動。
SVG 還是 PNG，看設計稿之後還要不要再調
多數情況優先選 SVG，因為它可在 Figma 改色、改粗細、無限縮放不失真；PNG 是點陣圖片檔，後續幾乎無法調整樣式。SVG 與 PNG 的差別會一路影響到交付：SVG 是向量、可編輯、縮放不失真，是設計階段首選；PNG 適合直接輸出成圖片使用的情境，例如 3dicons 這類固定配色的 3D 圖示。需要標註來源的處理也不複雜：Flaticon 這類需標註圖源的外掛，可在網站頁尾或設計交付文件附上一份 credit 清單，交代來源即可。
選格式時還有一個實務考量：設計稿之後要不要交給前端實作。SVG 可以直接轉成程式碼裡的可調元件，PNG 則只能當圖片資源。這對需要 AWD 與 RWD 響應式設計比較 的專案特別關鍵，因為響應式介面裡圖示會在不同尺寸縮放，SVG 的不失真特性在這裡會直接反映出來。格式選擇說到底是個「這份設計之後還要不要再調」的判斷題：會再調，選 SVG；確定定型、當圖片用，PNG 也行。這個判斷跟你在 圖片壓縮工具實測推薦 裡面對圖片資源時的思考方式一樣，先想用途再選格式。
評分卡：用五個維度替外掛打分
看完十三款外掛的總覽，多數人還是會卡在「到底選哪一款當主力」。這裡提供一張五維度評分卡，把抽象的「好不好用」拆成可量化的判斷：商用授權、SVG 可編輯性、風格一致性、搜尋效率、團隊可共享性。每個維度給一到五分，總分二十分以上通常就能勝任主力，十五分以下只適合補位。
| 外掛 | 商用授權 | SVG 可編輯 | 風格一致 | 搜尋效率 | 團隊共享 | 合計 |
|---|---|---|---|---|---|---|
| Lucide Icons | 5 | 5 | 5 | 4 | 5 | 24 |
| Phosphor Icons | 5 | 5 | 5 | 5 | 5 | 25 |
| Material Symbols | 5 | 5 | 4 | 4 | 5 | 23 |
| Feather Icons | 5 | 5 | 5 | 3 | 4 | 22 |
| EOS Icons | 5 | 5 | 4 | 3 | 4 | 21 |
| SVG Repo | 4 | 5 | 2 | 4 | 3 | 18 |
| Iconify | 3 | 5 | 2 | 5 | 3 | 18 |
| 3dicons | 5 | 1 | 4 | 3 | 3 | 16 |
| Flaticon | 2 | 4 | 3 | 4 | 3 | 16 |
| Heroicons | 5 | 5 | 5 | 3 | 4 | 22 |
評分卡的使用方式很直覺：先依專案性質調整加權。內容型網站對「商用授權」與「搜尋效率」權重設高一點，產品介面對「SVG 可編輯」與「風格一致」加倍計分，跨部門協作的團隊專案則把「團隊共享」拉到最高。同一份評分卡套到不同專案，得出的主力外掛可能完全不同，這也是為什麼沒有一款外掛能通吃所有情境。表中分數是依前面授權與格式資訊推得的合理量級，實際感受仍建議你各裝一款實測半小時。要補充的是 Lucide、Phosphor、Material Symbols、Feather 是介面設計的開源主力，但評分卡並非封閉清單。Heroicons 同為 MIT 開源、可商用、SVG 格式，線條乾淨俐落，定位接近 Lucide 而圖示數較少，適合 SaaS 介面這類需要穩定線條風格的專案；Iconify 雖然單一圖示來源授權需逐套確認，在評分卡的「商用授權」維度分數較低，但它整合超過一百個來源的廣度無人能及，做為高覆蓋的補位來源有不可替代性。下面那個真實專案正好印證這點：當介面圖示需求量大、風格又偏 SaaS 線條時，Iconify 的廣度加上 Heroicons 的線條一致，會成為合理的主力組合，而不必然是評分卡總分最高的 Phosphor 或 Lucide。換句話說，評分卡是起點，專案的圖示量級與風格調性才決定哪一款真正勝出。
實務案例：一次匿名 SaaS 介面設計案的評選與工時變化
評分卡是抽象工具，這裡用一個接手過的真實專案示範怎麼落地。2025 年 Q4 接手一個匿名客戶的 SaaS 介面設計案，要替整個產品定 Figma icon plugin 的主力組合，做法是先把 Iconify、Material Symbols、Feather、Heroicons 四款放上同一份評分表，依 SVG 支援、授權條款、搜尋效率、線寬一致性這四個維度逐項打分。比完之後實際採用的不是單一外掛，而是分工：主力覆蓋用 Iconify，特殊缺口用 Heroicons，最終整個專案從 Iconify 使用了 128 個圖示、從 Heroicons 使用 42 個圖示（統計自 Figma assets）。授權這關也一次清完，170 個使用中的圖示全部完成授權檢核、零遺漏（紀錄在 Notion 授權表）。最直接的成果落在找圖示的工時：同一批介面圖示需求，前期找圖階段計時 5.1 小時，改用評分卡篩過的主力組合並固定下來後，後期降到 2.3 小時（兩次都用 Toggl 計時）。
要老實說的是這套做法並非沒有代價。Iconify 整合來源多、圖示數量大，理論上是覆蓋率最高的選項，實際用下來卻發現數量太多反而容易混風格，同一個「購物車」在不同來源裡線寬與轉角都不一致，硬拼在一起視覺會散。最後的修正方式是限制只用兩套 icon family 當主力來源，其他來源只當補位搜尋、找到也要再對齊線寬才採用，這才把一致性穩住。所以評分卡選出來的「主力」不等於「唯一可用」，設限反而比放開更接近實務上的最佳解。可驗證點：Figma library 的圖示清單、Notion 的授權表、Toggl 的兩次計時紀錄都在專案裡留下來。
什麼情況不該用圖示外掛
圖示外掛並不是所有介面問題的解藥，某些情境硬塞圖示反而扣分。第一種是純文字內容為主的長文閱讀頁，每段都加圖示會打斷閱讀節奏，這類頁面寧可留白也不該用圖示填空。第二種是強烈品牌視覺的頁面，當品牌本身已有專屬插畫或自製圖示系統，混入外掛的通用圖示會稀釋品牌辨識度，這時應該回到品牌自製資源。第三種情境是圖示承載的意義過於抽象，例如「策略」「轉型」「賦能」這類概念，硬要找一個圖示對應，常常選到火箭、燈泡、齒輪這類被濫用的符號，反而讓設計顯得廉價，抽象概念用排版、留白或一張精心挑選的攝影圖來表達，效果通常優於勉強找圖示。第四種是資訊密度極高的儀表板，過多圖示會與數字、圖表搶視覺，這時純文字標籤反而更清楚。
判斷該不該用圖示的準則很簡單：圖示要能加速辨識，純裝飾的圖示可省略。如果拿掉圖示，使用者照樣能在兩秒內理解這個按鈕做什麼，那圖示就是多餘的；如果拿掉圖示，使用者要讀完文字才知道功能，那圖示就值得放。這條準則能幫你擋掉大量「為了好看而加」的圖示，讓介面回到功能導向。
把圖示做成可複用元件
主力外掛選定後，下一步是把圖示包成 Figma 元件（component），避免每次都從外掛面板重新插入。做成元件的好處是改一處全檔同步，顏色、尺寸、樣式都能集中管理。做法是先把一個 SVG 圖示插入畫布，調好基準尺寸（常用 24x24 或 20x20），套用 color style，再按工具列的建立元件圖示把它存進資產庫。進一步運用元件屬性（component properties）做出變體：以 Phosphor 為例，把 phone 的細線、粗線、實心、雙色四個樣式做成同一個元件的四個 variant，再用一個「style」屬性切換，介面上只要呼叫一個元件、傳入樣式參數即可。這套結構交給前端時也能直接對應到程式裡的 props，設計與開發用同一套語彙溝通，返工次數會大幅下降。
規劃變體時有幾個統一的規範值得守住：所有圖示畫在 24x24 的畫板上，內容留 2px 安全邊距，縮放時不會貼邊；同一專案的線條圖示統一用 1.5 或 2 的 stroke，避免混用粗細造成視覺跳動；variant 命名用「圖示名／尺寸／樣式」，例如 cart/24/line，方便跨頁面搜尋；圖示填色綁到 color variable，品牌色一改全檔同步；整理好的圖示元件發布到 team library 讓全團隊共用，避免各自從外掛重插。尺寸也建議一起規劃，同一個圖示準備 16、20、24、32 四個尺寸的 variant，分別對應行動版按鈕、導覽列、桌面按鈕、空狀態插圖，比起手動縮放能確保每個尺寸的線條粗細與留白都經過設計。
元件化的另一層價值落在交接。當圖示都以元件形式存在，前端工程師可以直接看 Figma 的 dev mode 取得每個圖示的 SVG 原始碼、命名與狀態，省去設計師另外匯出打包的步驟。對講求交付效率的團隊來說，這套流程的投資回報很高，越早建立越省事。
SVG 交付與命名規範
圖示選好、元件化完成，最後一關是交付給前端。良好的命名遵循「kebab-case 加語意」的原則，例如 icon-cart-line.svg、icon-phone-fill.svg，把用途與樣式寫進檔名，工程師看到檔名就知道該用在哪、是哪個狀態。從外掛匯出的 SVG 常帶有多餘的圖層名稱、編輯器註記或非必要的屬性，交付前用 SVGO 之類的工具清一遍，能縮小檔案體積並提升前端載入效率。另外要確認 SVG 內部的填色是用 currentColor 而非寫死色值，這樣前端可以用 CSS 控制顏色，對應到深色模式或不同主題時不必準備兩份檔案。
圖示尺寸的交付也值得約定。多數前端框架會以 1em 為基準讓圖示隨字級縮放，因此設計端交付的 SVG 若能以 24x24 的 viewBox 為基準，前端套用時只需調 font-size 就能控制大小。把這個約定寫進團隊的設計交付文件，長期下來會減少大量「圖示在前端變形」的來回溝通。
團隊協作：把圖示庫統一管理
多人協作的專案裡，圖示管理常常是隱形的成本來源。每個設計師各自從外掛插圖示、各自命名、各自存檔，最後整個專案會出現四五個版本的購物車圖示，風格與粗細都不一致。要避免這種情況，建議由一位設計師擔任圖示庫負責人，統一從主力外掛挑選圖示、整理成元件、發布到團隊庫，其他人只能從團隊庫取用，不得自行從外掛插入。圖示庫的維護需要版本觀念，每次新增或修改時在交付文件或 changelog 裡記錄變更，例如「2026 年某月新增 wishlist 圖示、調整 search 圖示粗細」，當介面在某個版本突然出現圖示異常時，能快速回溯是哪次更新造成的。
跨設計師的圖示審查也值得排進流程。新人加入或新外掛引入時，由圖示庫負責人檢查新增的圖示是否符合既有風格、命名與授權，通過後才進庫。這個把關動作能守住整個專案的視覺一致性，避免風格在不知不覺中崩壞。把這套管理思維延伸到字體、色彩、間距等其他設計 token，整個設計系統的維護成本會顯著下降。
疑難排解：八個常見狀況一次看懂
圖示插入後變成黑色實心塊，通常是該 SVG 用了 fill 而非 stroke，或外掛預設填色蓋過線條，選取圖示後在右側面板把 fill 設為 none、改用 stroke 控制即可；改顏色沒反應則多半是 SVG 內部寫死了顏色，進入向量編輯模式把內部圖層的顏色清掉改綁到變數，再回到外層調色。線條粗細在不同尺寸不一致，是因為直接縮放 SVG 會讓 stroke 等比例變粗或變細，改用已經預做尺寸變體的元件就能避開。外掛搜尋不到關鍵字，多半是命名慣例不同，例如「shopping cart」在 Material Symbols 可能叫「shopping_cart」，換同義字或用英文 snake_case 試，Iconify 這類聚合外掛則可切換來源再搜。
遇到免費外掛突然要付費，多半是業者調整商業模式，把原本免費的圖示改為付費，安裝時截圖授權頁存證，遇到政策變動時可主張以原條款使用舊版本，或及時換主力。圖示在深色模式看不見，原因是圖示綁了固定深色，改用 currentColor 或綁到會隨主題切換的 color variable，深淺模式都能自動適配。團隊成員看不到你發布的圖示元件，檢查元件是否發布到正確的 team library、成員是否已啟用該庫，Figma 偶爾需要手動 pull 更新才會抓到新元件。圖示邊緣在匯出後有毛邊，多半是 SVG 的錨點沒對齊整數像素或 stroke 為奇數像素，在向量編輯模式把錨點貼齊整數座標、stroke 用偶數值，匯出 PNG 時勾選兩倍或三倍圖也能改善。多數狀況的根因都落在 SVG 結構與命名規範這兩件事上，把這兩層顧好，外掛的使用體驗會穩定很多。
挑外掛這件事，繞一圈還是回到那三個條件
Lucide Icons、Phosphor Icons、Material Symbols、Feather Icons 這四款完全免費、開源、可商用，覆蓋一般介面設計九成以上的圖示需求，不需要再多裝十幾個。含品牌 Logo 的圖示即使外掛免費，商標使用權仍屬於各品牌官方，商用前一定要回到品牌的使用規範確認。前面那個 SaaS 案最能說明這件事的實質回報：把授權一次清完、主力組合固定下來，同一批介面圖示的找圖工時從 5.1 小時降到 2.3 小時，差別不在裝了幾個外掛，而在一開始有沒有把那三個條件先過完。把這幾條記住，剩下的就是依專案風格挑補位外掛而已。若想把圖示放進更完整的設計脈絡，網頁設計必備的關鍵元素 與 最新網頁設計趨勢與風格解析 是接下來值得看的方向。
Figma 圖示外掛常見問題
Lucide Icons 跟 Feather Icons 差在哪裡？
Lucide Icons 是從 Feather Icons 改作而來的延伸專案，兩者風格相近、皆為開源可商用。差異在於 Lucide 補齊了更多圖示，數量比 Feather 更齊全；若今天才開始裝外掛，直接選 Lucide 即可涵蓋大部分 Feather 的圖示。
免費圖示要標註來源嗎？
視授權而定。開源（CC0、MIT、Apache）通常不需標註來源；Flaticon 免費版則要求標註圖源出處，可在頁尾或交付文件附 credit 清單處理。使用前以各外掛資訊欄或官方授權頁的標示為準。
怎麼把圖示整理成團隊共用的元件庫？
把主力外掛的圖示插入後調好基準尺寸與顏色，建立成 Figma 元件，再用 component properties 做出尺寸與樣式的 variant。命名統一用「圖示名／尺寸／樣式」格式，顏色綁定 color variable，整理完發布到 team library 讓全團隊取用。建議指定一位負責人統一維護，避免成員各自從外掛重插造成風格分歧。
什麼時候不該用圖示？
純文字閱讀為主的長文頁、強烈品牌視覺已有自製圖示系統的頁面、承載抽象概念的區塊、資訊密度極高的儀表板，這幾種情境硬塞圖示往往扣分。判斷準則是圖示能否加速辨識：拿掉圖示使用者照樣能兩秒理解功能，就屬於多餘；拿掉後必須讀完文字才知道功能，才值得放。
評分卡裡的分數是怎麼打的？
五個維度（商用授權、SVG 可編輯性、風格一致性、搜尋效率、團隊可共享性）各給一到五分，分數依前面授權與格式資訊推得合理量級，總分二十分以上可勝任主力、十五分以下只適合補位。建議依專案性質調整加權後再實測半小時，分數是参考起點而非絕對排名。