figma icon 是什麼？先分清楚你要找哪一種圖示
搜尋 figma icon 時，先判斷你要的是 Figma 品牌 logo、可放進設計稿的 Figma 圖示庫、外掛，還是團隊自建圖示集。
你是在找 Figma logo icon，還是 Figma 裡能用的圖示？
Figma logo icon 是品牌識別資產，重點在品牌使用規範；Figma 裡能用的圖示則是 UI 設計素材，重點在格式、風格、授權與能不能被團隊重複使用。這兩種需求如果混在一起，很容易下載到看似正確、實際上不適合放進產品設計稿的素材。
| 搜尋意圖 | 你真正需要的東西 | 建議處理方式 | 要避開的誤區 |
|---|---|---|---|
| 找 Figma logo icon | Figma 品牌圖示或標誌 | 查官方品牌資產或授權來源 | 把品牌 logo 當成一般 UI icon 使用 |
| 找 Figma 圖示庫 | 可放進介面的 icon library | 從 Figma Community 或圖示庫取得同一風格素材 | 每顆圖示來自不同來源，風格混亂 |
| 找 Figma icon 外掛 | 在 Figma 內搜尋並插入圖示 | 用 Iconify、Material Symbols、Lucide 這類工具先試 | 只看數量，不看授權與可編輯性 |
| 管理 Figma icon set | 團隊可共用的圖示系統 | 建立 component、variant、命名規則與來源紀錄 | 把下載檔散放在設計稿裡 |
三種主要需求：找資源、裝外掛、管理設計稿圖示
新手設計師多半先需要「找得到、放得進去」；產品團隊會開始在意「能不能改色、改尺寸、做成元件」；接案或品牌專案還要處理「授權能不能交付給客戶」。我的判斷是，figma icon 這個關鍵字最容易失焦的地方，不是資源不夠，而是讀者沒有先分清楚自己處在設計流程的哪一段。
如果只是要 Figma 品牌 logo，應去官方品牌資產或授權來源確認。
品牌 logo 不適合直接納入一般 Figma 圖示元件庫。它牽涉商標、品牌呈現與使用限制，應獨立記錄來源與授權，不要和產品介面裡的搜尋、返回、設定、刪除等 UI 圖示混在一起管理。
2026 推薦先看的 Figma icon 資源與外掛比較
大多數 UI 專案先看 Iconify、Material Symbols、Lucide，再依風格、授權與交付需求補 Figma Community 或外部圖庫。
| 來源或工具 | 常見格式 | 是否有 Figma 使用路徑 | 授權檢查重點 | 適合情境 |
|---|---|---|---|---|
| Iconify | SVG、向量圖示 | 常見作法是用 Figma 外掛搜尋插入 | 每個圖示集可能有不同授權，要看原始來源 | 想快速搜尋多個 icon set，適合一般產品 UI |
| Material Symbols | SVG、字型或向量資源 | 可透過外掛、Community 或外部資源使用 | 確認當前版本與使用條款 | 適合常見介面功能，例如搜尋、選單、帳號、設定 |
| Lucide | SVG | 常見於外掛或 Community 檔案 | 確認開源授權與專案使用方式 | 適合線性、乾淨、一致感高的產品介面 |
| Figma Community | Figma file、component、SVG | 直接 duplicate 到自己的工作區 | 看作者頁面、檔案說明與授權註記 | 想一次取得整包 icon pack 或既有 component library |
| Flaticon | SVG、PNG | 可下載後匯入，外掛狀態以平台當前資訊為準 | 免費、付費、署名與商用條件要分開看 | 找大量素材或特定題材時可補充使用 |
| SVG Repo | SVG | 多半下載 SVG 後匯入 Figma | 逐一確認圖示頁面授權 | 需要可編輯 SVG，且願意自行整理來源紀錄 |
| Noun Project | SVG、PNG | 有外掛與下載使用路徑，依當前平台為準 | 署名、訂閱與商用使用條件要確認 | 適合找概念型、特殊語意或比較少見的圖示 |
| IconScout | SVG、PNG | 可透過外掛或下載匯入 | 免費與付費素材條款可能不同 | 需要特殊風格、品牌素材或行銷設計搭配時 |
| Phosphor | SVG | 可透過 Community、外掛或外部檔案使用 | 確認開源授權與再散布限制 | 適合想要輕量、線性、可調整風格的 UI 圖示 |
| Font Awesome | SVG、icon font | 可用 SVG，也可走字型工作流 | 免費版、Pro 版與品牌圖示條件不同 | 適合已經在工程端或品牌系統使用 Font Awesome 的團隊 |
適合大多數 UI 專案的首選：Iconify、Material Symbols、Lucide。
這三類來源的共同優點是可搜尋、可取得 SVG 或向量素材，也比較容易維持同一套視覺語言。若設計稿需要快速產出，我會先從這裡找，不先開十幾個素材網站。來源越多，後面整理線寬、圓角、命名與授權的成本越高。
適合找大量素材：Figma Community、Flaticon、SVG Repo。
Figma Community 適合拿整包檔案，尤其是已經整理成 component 的 Figma Community icons。Flaticon 和 SVG Repo 適合補缺，但要特別查授權。外部圖庫常讓人誤以為「下載成功」就等於「可以交付」，這是接案專案最常出問題的地方。
適合品牌或特殊風格：Noun Project、IconScout、Phosphor。
如果專案不只需要標準 UI 圖示，而是要有品牌語氣、行銷素材或特殊概念，這幾個來源比較容易找到不同風格。行銷頁面與廣告視覺的圖示使用，還要和 廣告設計視覺原則 一起看，避免 icon 變成裝飾，而沒有支撐訊息層級。
比較欄位必含：格式、是否有 Figma 外掛、授權檢查、適合情境。
選 figma icon 資源時，不能只比誰的圖示最多。真正影響設計稿品質的是格式能不能編輯、能不能在 Figma 內順手使用、授權能不能被專案接受，以及整套 Figma 圖示是否適合長期維護。
在 Figma 使用 icon 的 4 種方式：Community、外掛、SVG/PNG、icon font
Figma 圖示常見使用方式有四種：Duplicate Community file、用外掛插入、匯入 SVG/PNG，以及用 icon font。
方式一：Duplicate Figma Community 的 icon file。
- 在 Figma Community 搜尋目標風格或 icon pack。
- 打開檔案說明，檢查作者、授權、更新資訊與使用限制。
- Duplicate 到自己的工作區，不要直接把未整理的素材貼進正式設計稿。
- 檢查圖示是否已經做成 component、是否有尺寸或狀態分類。
- 把會重複使用的 Figma 圖示搬到團隊 library 或專案 assets page。
方式二：用 Figma icon 外掛搜尋並插入。
- 安裝適合的 Figma icon 外掛，例如 Iconify 或常用圖示庫外掛。
- 先用同一個 icon set 搜尋，不要每顆都混不同風格。
- 插入前確認格式是向量或可編輯 SVG，而不是單純圖片。
- 插入後檢查 fill、stroke、frame 尺寸與命名。
- 常用圖示要轉成 component，避免每次重新搜尋。
方式三：下載 SVG 或 PNG 後匯入 Figma。
- UI 介面圖示優先下載 SVG，文件或暫時展示才考慮 PNG。
- 匯入前確認授權頁面與來源網址，必要時記錄在設計稿或交付文件。
- 把 SVG 拖進 Figma 後，檢查群組、fill、stroke 與是否能改色。
- PNG 匯入後只能當圖片處理，不適合作為 Figma icon library 的主來源。
方式四：用 Font Awesome 這類 icon font。
icon font 適合已經在團隊工作流中使用字型圖示的專案。它的優點是能用文字圖層邏輯插入 glyph，缺點是字型缺失時容易變成方框、亂碼，交付時也要提醒工程師與其他設計師安裝同一套字型。
icon font 流程：安裝字型、選字型、複製 glyph、貼進 Figma。
- 確認電腦已安裝對應 icon font，且 Figma 可以讀取本機字型。
- 在 Font Awesome 或相同系統中找到需要的 glyph。
- 複製 glyph，貼到 Figma 文字圖層。
- 選擇正確字型家族與樣式。
- 交付前標註字型來源，避免其他人打開檔案時看不到圖示。
SVG、PNG、icon font 怎麼選？不同格式的使用判斷
UI 設計與元件庫優先用 SVG；PNG 適合快速展示或文件；icon font 只適合已有字型工作流的專案。
| 格式 | 適合用途 | 優點 | 限制 | 是否適合當元件庫主來源 |
|---|---|---|---|---|
| SVG | 產品 UI、設計系統、可交付圖示 | 可縮放、可編輯、可改 fill 或 stroke | 匯入後可能有多層群組，需要整理 | 適合 |
| PNG | 簡報、文件、快速 mockup、暫時展示 | 匯入快、預覽穩定 | 放大會失真，通常不能改色或調整線寬 | 不適合 |
| icon font | 已有字型圖示系統的團隊 | 可用文字圖層插入 glyph，和工程端字型流程一致 | 字型缺失會顯示錯誤，視覺調整不如 SVG 直覺 | 視團隊流程而定 |
SVG：適合可編輯 UI 與設計系統。
SVG 是 Figma 圖示最穩的主格式，尤其適合要改色、調整大小、轉成 component、交付工程師的場景。設計師要注意的是，外部下載的 SVG 不一定乾淨，有些會包很多群組或使用不一致的 stroke 設定，匯入後要先整理再進元件庫。
PNG：適合快速展示，不適合長期維護。
PNG 可以解決「先放一顆圖示讓畫面能看」的需求，但它不是好的設計系統來源。接案時我不會把 PNG 當正式 icon component，因為後面要改色、換尺寸、輸出 SVG 或讓工程端重用時，通常都會重新整理一次。
icon font：適合特定字型工作流，但容易遇到字型缺失。
icon font 的價值在於和既有字型圖示系統銜接。它不適合每個 Figma 圖示專案，尤其是團隊成員或客戶沒有安裝同一套字型時，檔案很容易失真。若工程端已經大量使用 Font Awesome，設計稿可以配合；若從零開始整理 UI icon，SVG 通常更直覺。
如何把 icon 管理成 Figma 裡可重用的元件庫
把 Figma 圖示做成可重用資產，要靠 component、variant、命名規則、尺寸規範、線寬規則與交付檢查。
把常用 icon 建成 component，而不是每次複製貼上。
同一顆搜尋、關閉、返回、下載圖示，只要在不同畫面出現多次，就應該做成 component。複製貼上的成本一開始很低，但專案長大後，改色、換線寬、統一狀態都會變成手動修補。團隊圖示管理最常壞在命名和版本，不是工具本身。
用 variant 管理尺寸、狀態與填色版本。
variant 適合用來管理尺寸、預設狀態、hover 狀態、disabled 狀態、filled 版本與 outline 版本。不要把每個版本散成獨立 component，否則設計師在 assets panel 裡很難找到正確圖示，也容易把過期版本拖進新畫面。
命名規則建議：icon/category/name/size/state。
命名要讓設計師和工程師都看得懂。舉例來說，導覽類、操作類、狀態類可以分 category；name 使用英文或團隊固定語彙；size 和 state 對齊設計系統。若品牌圖示也放進同一套 library，要另外標記 brand 或 logo 類別，並連到 品牌規範手冊 的資產規則。
尺寸、線寬、對齊要和 8pt spacing 一起看。
圖示看起來不整齊，常不是單顆 icon 畫錯，而是 frame、視覺重心、線寬與周圍間距沒有一起校正。Figma 圖示放進 button、tab、navigation item 時，要和 8pt grid spacing 的間距規則一起看，才不會出現圖示本身正確、元件裡看起來歪掉的狀況。
交付工程師前要確認 SVG 可匯出、命名清楚、顏色不混亂。
- component 名稱符合團隊規則。
- SVG 匯出後沒有多餘群組或奇怪命名。
- fill 與 stroke 使用規則一致，必要時對齊 color token。
- 同一套 icon 的線寬、圓角與視覺重心一致。
- 來源、授權與版本有紀錄。
如果品牌想建立長期一致的視覺語言，Figma icon library 還要和 品牌形象一致性 一起維護。圖示不是小裝飾，它會在產品介面、簡報、廣告素材與客戶交付文件裡反覆出現。
如何建立自己的 Figma icon set
自建 Figma icon set 適合重複使用、品牌一致性要求高、需要團隊共用與穩定交付的專案。
什麼情況需要自建 icon set？
不是每個新專案都要自建圖示集。如果只是一次性 landing page 或簡報，使用現成圖示庫再整理授權就夠了。需要自建的情況通常是產品長期維護、跨頁面大量重用、品牌有明確視覺規範，或工程端需要穩定匯出的 SVG 檔案。
用 Icon Set Generator 類工具整理自己的圖示。
Icon Set Generator 這類工具的價值，在於把自有 SVG、命名、分類與輸出流程整理起來。它不是替設計師決定風格，而是減少手動整理 icon set 的成本。使用前要先清掉重複圖示、舊版圖示、來源不明的 SVG，否則只是把混亂包成一個看起來整齊的檔案。
自建 icon set 前的品質檢查：尺寸、命名、線寬、授權。
| 檢查項目 | 要確認的內容 |
|---|---|
| 尺寸 | 同一組圖示使用一致 frame，並確認放進元件後不偏移 |
| 命名 | 符合 icon/category/name/size/state，避免同義詞混用 |
| 線寬 | 同一風格的 stroke width、端點與圓角規則一致 |
| 顏色 | 區分可套用 token 的顏色與固定品牌色 |
| 授權 | 自繪、購買、開源、客戶提供來源要分清楚 |
自建 figma icon set 前先做這張表，比後面在工程 handoff 時補文件可靠。很多團隊不是沒有圖示，而是沒有人知道哪一顆才是最新版。
商用授權與來源標註：免費 Figma icon 不等於可商用
免費 Figma 圖示不能直接視為可商用；要檢查 commercial use、attribution、品牌限制與客戶交付條件。
免費下載不代表免費商用。
free icons 可能只允許個人使用，也可能要求署名，或限制再散布。Figma Community、外部圖庫、開源圖示庫各自有條款，且條款可能調整。設計稿裡一旦放進客戶專案，就不能只憑「我是在免費頁面下載」當作授權依據。
接案與公司專案要記錄 icon 來源。
來源紀錄至少要包含圖示名稱、平台、作者或圖示集、取得日期、授權頁連結與是否需要 attribution。授權頁截圖不是法律保證，但比交付後才回頭找來源可靠得多。若圖示會用在行銷素材，也要確認是否能用於廣告、簡報、社群貼文或商業提案。
品牌 logo icon 要特別確認品牌使用規範。
品牌 logo、社群平台圖示、合作夥伴標誌不能只當一般 Figma 圖示處理。這類素材常有顏色、安全距離、不可變形、不可改色等限制，應回到品牌資產頁或客戶提供的規範確認。品牌資產最好和 品牌規範手冊 一起管理，而不是散在設計稿角落。
交付給客戶前的 5 點檢查。
- 每個外部 icon 都有來源紀錄。
- 授權頁有確認 commercial use 或專案可用條件。
- 需要署名的素材已標註處理方式。
- 品牌 logo 沒有被任意改色、裁切或變形。
- 交付檔案中沒有混入來源不明或測試用 icon。
常見問題排查：icon 不能改色、變文字、尺寸對不齊怎麼辦？
Figma 圖示出錯時，先判斷它是圖片、SVG 結構、字型、線寬、frame，還是團隊規範不一致造成的。
| 問題 | 常見原因 | 修正方式 |
|---|---|---|
| 不能改色 | 匯入的是 PNG，或 SVG 裡有複雜群組與固定填色 | 改用 SVG，展開圖層後檢查 fill 與 stroke |
| 變成方框或亂碼 | icon font 字型缺失 | 安裝正確字型，或改用 SVG 版本 |
| 線寬不一致 | 不同來源混用 | 統一 icon set，或手動校正 stroke width |
| 尺寸看起來不齊 | frame 尺寸、視覺重心或對齊方式不同 | 統一 frame，檢查 optical alignment |
| 外掛圖示不符合規範 | 外掛插入的是另一套風格 | 先建立團隊允許的來源清單 |
| PNG 放大模糊 | 點陣圖片解析度有限 | 換成 SVG 或重新取得向量檔 |
SVG 匯入後不能改色。
先確認它是不是 SVG，而不是包在 SVG 外殼裡的圖片。再展開圖層，看顏色是在 fill、stroke，還是被 mask 或 group 包住。若圖示含有多個固定顏色，進元件庫前要先決定哪些色彩能被 token 控制，哪些是品牌固定色。
icon font 貼進來變成方框或亂碼。
這通常是字型沒有安裝、Figma 沒讀到本機字型，或 glyph 來自另一個字型版本。最穩的修正方式是確認字型版本，或改用 Font Awesome 的 SVG 圖示。交付給客戶時，如果對方不需要維護 icon font，SVG 反而比較不容易出錯。
不同來源的 icon 線寬不一致。
線寬不一致會讓介面看起來像臨時拼貼。先選一套主來源，再補缺少的圖示；補進來的圖示要校正 stroke width、端點、圓角與視覺重量。如果每顆外掛圖示都要手修，代表來源選錯了，不是設計師不夠細心。
icon 看起來沒有對齊元件。
圖示的 frame 對齊不等於視覺對齊。有些箭頭、播放鍵、搜尋圖示在幾何上置中，視覺上仍會偏一側。放進 button 或 tab 前，應看實際元件內的視覺重心，而不是只看 Figma 對齊線。
外掛匯入的 icon 和團隊規範不同。
外掛很方便，但它不會自動理解團隊規範。設計系統維護者應先定義可用來源、允許格式、命名方式與授權記錄欄位。當 Figma icon 外掛只被拿來快速插圖，而沒有進入 library 管理流程，後續改版通常會變慢。
建議工作流：從找圖示到交付工程的一套流程
有效管理 figma icon 的流程是：判斷用途、選同一來源、查授權、匯入可編輯格式、元件化，再交付檢查。
Step 1：先判斷用途與授權風險。
先問這顆圖示會用在哪裡：內部草稿、產品介面、客戶提案、品牌素材，還是商業廣告。用途不同，授權風險不同。若會交付客戶或公開使用，來源紀錄要在圖示進入設計稿前就建立。
Step 2：從精選來源找同一風格的 icon。
先用 Iconify、Material Symbols、Lucide 或團隊既有 Figma icon library 找同一套風格。缺少的圖示再從 Figma Community、SVG Repo、Noun Project 等來源補。不要先追求最特別的圖示，先讓整套 Figma 圖示看起來像同一個系統。
Step 3：優先用 SVG 或外掛匯入可編輯版本。
UI 圖示優先保留可編輯向量版本。外掛插入後要檢查圖層結構；下載匯入時要優先選 SVG。PNG 可以留給文件或臨時展示，不要進入正式 icon component library 當主要來源。
Step 4：轉成 component 並建立命名規則。
常用圖示進入 component library 後，才能被團隊穩定重用。命名、分類、variant 與狀態都要一致，並和設計工作流文件同步。若團隊正在整理設計產出流程，可以把圖示規範放進 AI 設計工作流 或既有 design ops 文件，避免規則只存在某個人的腦中。
Step 5：交付前檢查匯出、顏色、線寬與來源紀錄。
交付前檢查 SVG 是否能正常匯出、命名是否清楚、顏色是否符合 token 或品牌色規則、線寬是否一致、來源與授權是否可追溯。管理 Figma icon 的重點不是找到最多圖示，而是讓圖示在設計稿裡能被重複使用、保持一致、順利交付。
figma icon 是指 Figma logo 還是在 Figma 裡用的圖示？
兩種都有可能。搜尋 figma icon 時，要先分成 Figma 品牌 logo、Figma 裡可用的 UI icon library、Figma icon 外掛，以及團隊自建 icon set。若是品牌 logo，要查品牌資產規範；若是 UI 圖示，要看格式、授權與管理方式。
Figma icon 可以商用嗎？
不能只用「免費」判斷是否可商用。要看來源平台的 commercial use 條款、是否需要 attribution、是否限制再散布，以及是否能交付給客戶。條款可能變動，實作上要記錄來源與授權頁。
Figma 裡用 SVG 還是 PNG 比較好？
UI 設計、設計系統與可重用元件優先用 SVG，因為它可縮放、可編輯，也比較適合交付工程師。PNG 適合簡報、文件或快速展示，不適合作為 Figma 圖示元件庫的主來源。
推薦哪個 Figma icon 外掛？
一般 UI 專案可先看 Iconify、Material Symbols、Lucide 相關外掛或資源。選擇時不要只看圖示數量，也要看是否能插入 SVG、是否容易維持同一風格，以及每個 icon set 的授權條件。
Figma 可以用 Font Awesome 嗎？
可以。常見做法是使用 Font Awesome 的 SVG 圖示，或透過 icon font 字型工作流貼入 glyph。若使用 icon font，要確認字型已安裝、Figma 可讀取字型，並在交付時提醒團隊字型版本。
icon font 和 SVG 有什麼差？
icon font 是文字圖層邏輯，依賴字型與 glyph；SVG 是向量圖形，通常更適合在 Figma 裡編輯、改色、轉 component 與匯出。若沒有既有字型工作流，SVG 對設計團隊較穩定。
為什麼 icon 貼進 Figma 後不能改顏色？
常見原因是匯入的是 PNG，或 SVG 裡有固定填色、複雜群組、mask、stroke 設定。先確認格式，再展開圖層檢查 fill 與 stroke。若要做元件庫，建議先整理成可被 color token 控制的結構。
如何讓一整套 icon 尺寸與線寬一致？
使用同一套 icon set，統一 frame 尺寸、stroke width、端點、圓角、視覺重心與命名規則。放進元件時還要檢查和 8pt spacing、button padding、tab 高度是否一致。
Figma Community file 和 icon 外掛差在哪？
Figma Community file 適合一次 duplicate 整包 icon pack 或 component library；icon 外掛適合在設計時即時搜尋並插入單顆圖示。Community 比較像素材包，外掛比較像搜尋工具。
什麼時候需要建立自己的 icon set？
當團隊會重複使用同一批圖示、品牌一致性要求高、工程交付需要穩定，或外部圖示庫已經無法滿足產品語意時，就適合建立自己的 Figma icon set。一次性頁面通常不需要一開始就自建。
免費 icon 需要標註來源嗎？
依平台授權而定。有些 free icon 允許商用但需要 attribution，有些限制用途，有些免費條件只適用於個人使用。接案與公司專案最好記錄來源、作者、授權頁與取得日期。
icon 要不要做成 component？
常用、會重複出現、需要多人協作、會交付工程師，或要維持品牌一致性的 icon，都應該做成 component。只出現一次的臨時圖示可以先不元件化，但要避免來源不明的素材留在正式設計稿裡。