13 個 Figma 圖示外掛推薦:免費 Icon 一鍵匯入
13 款 Figma 圖示外掛完整評比:Lucide、Phosphor、Material Symbols 等免費 Icon,從商用授權、SVG 支援到元件化與團隊共用,挑選邏輯一次看懂。
作者:褚崇名(Sliven)
本頁目錄
- 為什麼「選圖示外掛」其實是設計系統決策,不是「找一個漂亮的圖」
- 三種你一定要先認識的圖示風格
- 評估任何圖示外掛的 5 個維度
- 13 個 Figma 圖示外掛,依用途分成三層來推薦
- Tier A:多風格超級圖示庫(什麼風格都要能用)
- Tier B:單一風格一致性家族(要做設計系統的人看這裡)
- Tier C:特殊用途(品牌 logo、免費素材庫、進階需求)
- 商用授權地雷:免費不等於隨便用
- Stroke 還是 Fill?跨來源混搭時保持視覺一致的方法
- 圖示尺寸的黃金數字:16、20、24 什麼時候用哪個
- 從拖進畫面到交給工程師:圖示的元件化與命名衛生
- 三個常見的圖示地雷
- 30 秒核心重點:一張表加一句結論
- 結尾行動方案:今天就動手把圖示流水線架起來
找一個小小的設定齒輪圖示,真的需要花掉你半小時嗎?多數人還在用那套老流程:開新分頁、Google「free icon」、在六七個網站之間來回切換、下載 SVG、解壓縮、拖進 Figma、調大小、調顏色。回過神來,半小時過去了,設計節奏全斷。
這種「圖示狩獵」吃掉專注力的狀況,許多設計師都太熟悉了。換句話說,問題從來不是圖示不夠多,而是你沒有把圖示來源變成 Figma 裡的一條流水線。裝對外掛(plugin),把常用的圖示家族直接掛進 Figma,需要的時候搜尋、點一下就插進畫布,整個過程不超過五秒。
圖示外掛適合處理搜尋、插入與樣式一致性;其他圖示來源則可補充外掛未收錄的素材。
以下整理 13 個可在 Figma 工作流程中使用的圖示外掛與資源。若要找照片或插畫,可另看Figma 素材外掛;外掛狀態、方案與授權可能變動,安裝前仍應確認近期更新與官方條款。
30 秒核心重點
- 想要一站搞定、各種風格都要能用:Iconify。
- 設計系統要單一一致風格、不想東拼西湊:Phosphor Icons 或 Lucide。
- 要放品牌 logo(Facebook、GitHub、各種 SaaS):Simple Icons。
- 需要商用:優先查清楚 MIT / Apache 2.0 / CC0 等授權的義務;開源不等於免除授權聲明或商標限制。
如果你是剛接觸 Figma、連外掛怎麼裝都還不熟,建議先看一遍 Figma 必裝外掛推薦 把基礎流程跑順,再回來這篇挑圖示類的。也想複習 Figma 整體操作的話,Figma 中文完整教學 是很好的起點。
為什麼「選圖示外掛」其實是設計系統決策,不是「找一個漂亮的圖」
很多人的直覺是:我需要一個信封圖案 → 打開外掛 → 搜尋 envelope → 挑一個好看的 → 拖進來。看起來沒問題,對吧?但只要你做的是超過三個頁面的產品,這個直覺會讓你的設計稿在兩週後變成一個「圖示動物園」。
原因是這樣:每一套圖示家族都有自己的設計指紋。線條粗細(stroke width)、圓角半徑、填色還是鏤空、端點是圓頭還是方頭、柵格大小(16px 還是 24px)。當你從 A 家抓一個信封、從 B 家抓一個齒輪、再從 C 家抓一個放大鏡,三個圖示擺在同一個畫面裡,就算單獨看都漂亮,擺在一起就是會「怪」。使用者說不出哪裡怪,但就是覺得這個介面不專業。
換句話說,圖示的一致性,比任何單一圖示的好看程度都重要。因此挑圖示外掛的第一步,該優先決定的是「產品要用哪一種風格家族」,這件事比圖示多寡重要得多,決定了之後盡可能讓整個產品只用那一個家族。
這件事跟排版很像。你在 排版與字體設計技巧 裡會學到,一套版面不該出現四種字體;圖示也是同一個道理,一套介面不該出現四種圖示風格。決定了風格家族,再回頭找對應的外掛,你就不會在「200 萬個圖示」的海洋裡迷失。
三種你一定要先認識的圖示風格
在挑外掛之前,先把這三個詞搞清楚,後面的推薦你才看得懂:
- Stroke(線性/鏤空):只有外框線條,沒有填色。看起來輕盈、現代、適合極簡風格的產品。代表是 Feather、Lucide、Tabler、Phosphor 的 thin 系列。
- Fill(實心):整個圖形填滿顏色。看起來扎實、辨識度高、適合需要強對比的地方,像行動裝置底部導覽列的啟用狀態。代表是 Material Symbols 的 filled 版本。
- Duotone(雙色):兩個色階組成,介於線性和實心之間,很有插畫感。適合品牌氣氛濃、活潑一點的產品。代表是 Phosphor 的 duotone 系列。
記住一個原則:同一個畫面、同一個層級的圖示,只用一種風格。導覽列全部用 stroke,工具列也全部用 stroke;如果某個按鈕需要強調,用顏色或字重去區分就好,千萬別突然丟一個 fill 圖示進來。這個紀律一旦建立起來,你的設計稿質感會立刻拉開一個檔次。
評估任何圖示外掛的 5 個維度
不管市面上出了多少新外掛,都可以回到這 5 個維度判斷它值不值得裝。這不是官方標準,而是一套可直接套用的篩選框架。
| 維度 | 為什麼重要 | 及格線 |
|---|---|---|
| 1. 風格家族覆蓋 | 決定你能不能「一站式」找齊需要的圖,還是得跨好幾個外掛拼湊 | 至少涵蓋一整個完整家族(例如整套 Phosphor 或整套 Material),光有幾十個零散圖示是不夠的 |
| 2. 商用授權 | 免費不等於能商用,授權不乾淨的圖示上到正式產品就是定時炸彈 | 逐一閱讀官方授權;MIT、ISC、Apache 2.0 仍可能要求保留授權或著作權聲明,商標另行處理 |
| 3. 格式與可編輯性 | 插入後能不能改顏色、改粗細、改大小,決定它是不是真正的向量元件,還是一張假圖 | 必須是可編輯的向量(vector),能套用 Figma 的 stroke 與 fill,被點陣化成圖片的就淘汰 |
| 4. 更新頻率 | 圖示庫會持續新增,外掛不更新就會少掉新圖、甚至跟新版 Figma 不相容 | 近一年內有更新紀錄,作者還活躍 |
| 5. 離線與版本穩定性 | 有些外掛每次插入都要連線抓圖,網路不穩就卡住;版本飄移會讓舊檔案裡的圖示跑掉 | 能離線使用、或圖示是打包進元件庫而非即時拉取的更可靠 |
這張表你會發現,「圖示數量」根本不在裡面。因為對絕大多數產品來說,一套完整的圖示家族(通常是 1000 到 6000 個)早就夠用了,再多你也不會用到。數量是行銷話術,一致性和授權才是真正會咬人的地方。
13 個 Figma 圖示外掛,依用途分成三層來推薦
接下來這 13 個外掛,不用「第一名、第二名」這種沒有意義的排行榜,因為它們解決的問題不一樣。把它們分成三層:Tier A 是多風格超級圖示庫(什麼風格都有,適合什麼都想找的人)、Tier B 是單一風格的一致性家族(適合要做設計系統的人)、Tier C 是特殊用途(品牌 logo、特殊格式)。你先想清楚自己落在哪一層,再往下看那一層的推薦就好。
Tier A:多風格超級圖示庫(什麼風格都要能用)
這一層的外掛特色是「一個外掛背後掛著好幾十個圖示家族」,你能在裡面切換 Material、Phosphor、Tabler 等不同風格。優點是覆蓋面極廣,缺點是選擇太多反而容易破壞一致性,所以適合拿來做早期探索、或臨時補一個缺漏的圖,不適合當作設計系統的唯一來源。
1. Iconify 這是 Figma 圖示生態裡最重要的單一外掛,沒有之一。它背後串接的是 Iconify 圖示集,一個匯集了上百個開源圖示家族的開放資料庫,總圖示數超過 20 萬個,涵蓋 Material Symbols、Phosphor、Tabler、Lucide、Fluent、Carbon 等幾乎所有主流家族(2026)。你在 Figma 裡搜尋一個關鍵字,它能一次列出好幾個家族的對應圖示讓你挑。它真正的價值在於「快速比對不同家族對同一個概念的詮釋」,圖示總量只是附帶好處,這個比對能力在風格探索階段超級好用。多數家族走開源授權,但建議插入後還是查一下該家族的授權標示。
2. Material Symbols Google 官方圖示系統提供三種樣式家族,以及四個可調變數軸:填色(FILL)、重量(wght)、等級(GRAD)與光學尺寸(opsz)。Rounded 與 Sharp 是樣式家族,不是填色軸(見 Google 的 Material Symbols 指南與 Material Symbols and Icons 圖示庫,2026)。授權採 Apache 2.0,使用時仍應保留授權文件並維持家族一致。
3. Flaticon Flaticon 是老牌的圖示資源站,數量號稱數百萬,風格從線性到插畫感的實心圖都有,背後的資料庫是 Flaticon(2026)。它的優點是很多風格強烈、裝飾性高的圖示,做行銷頁、社群素材、簡報很合適。但請務必注意授權:免費版需要標示作者(attribution),而且部分圖示是進階會員才能下載的。如果你是要上到正式產品介面、又不想到處貼來源標示,Flaticon 的免費版會讓你很卡。通常只把它當作「找靈感」的來源,確定要用再去看授權。
Tier B:單一風格一致性家族(要做設計系統的人看這裡)
這一層適合要建立設計系統的人。每個來源背後是一個風格一致的圖示家族,共用筆觸、圓角與柵格。選定主家族並持續使用,能大幅減少跨頁面的視覺漂移。下面六個家族的風格、覆蓋範圍與授權各有差異,應依產品需求選擇,不當成絕對排名。
4. Phosphor Icons Phosphor 同一個圖示提供 Thin、Light、Regular、Bold、Fill、Duotone 等變體,適合需要多種視覺重量的設計系統(見 Phosphor Icons 官網,2026)。授權採 MIT,可商用,但散布時仍要依條款保留著作權與授權聲明。
5. Lucide Lucide 是從傳奇的 Feather Icons 分支出來、持續擴充的現代化線性圖示家族。它繼承了 Feather 那種乾淨俐落、24px 柵格、2px 線條的極簡美學,但圖示數量比原本的 Feather 多出好幾倍,涵蓋了大量現代產品才會用到的概念(雲端、各種裝置、抽象動作)。授權是 ISC(一個比 MIT 還寬鬆的授權)。如果你的產品走極簡、技術感、工具型的路線,Lucide 幾乎是預設答案。它也是很多開源軟體跟開發者工具的標配圖示。
6. Tabler Icons Tabler 走的也是 24px 柵格的線性風格,跟 Lucide 是同個生態位的兄弟,但它有兩個特別值得欣賞的地方:一是圖示數量非常多、涵蓋面比 Lucide 更廣一些;二是它同時提供 stroke 跟 fill 兩種版本,而且兩種版本的視覺語言是對齊的。授權是 MIT。如果你發現 Lucide 涵蓋不到你需要的一些冷門圖示,Tabler 通常補得上來,兩者風格也能勉強搭在一起。
7. Feather Icons Feather 是線性圖示的「祖師爺」之一,雖然它已經很久沒有大規模更新,圖示數量也只有兩百多個,但它的設計紀律是教科書等級的。這裡還是要把它列出來,因為對很多極簡主義的設計師來說,Feather 那兩百多個核心圖示就夠用了,而且它的視覺純度極高。如果你的產品圖示需求不多、又追求那種「一個多餘的筆畫都沒有」的質感,Feather 依然是好選擇。需要更多圖的話再往 Lucide 跳。
8. Remix Icon Remix Icon 是由 Remix Design 團隊維護的開源家族,走 Apache 2.0 授權。它的特色是同時提供線性跟實心兩大類,而且兩邊的圖示是成對設計的,數量加起來超過兩千個。它的線條比 Lucide 稍粗一點、圓角更明顯,視覺上偏「親和、圓潤」。如果你的產品調性是友善、面向一般大眾的(例如生活類 App、教育類服務),Remix 的圓潤感會比 Lucide 那種技術感更貼切。
9. Streamline(免費版) Streamline 是一個商業圖示系統,但它的免費版在 Figma 外掛裡就能用到,提供了相當數量的核心圖示。它的風格比較「插畫感」,線條的粗細變化比前面幾個家族更豐富,適合需要一點品牌個性的產品。要留意的是,免費版只涵蓋整套家族的一部分,如果你後來愛上它的風格、想把整套買下來,那是商業授權的決策了。
Tier C:特殊用途(品牌 logo、免費素材庫、進階需求)
這一層的外掛主要用來解決一些特定場景,並非做產品介面的主圖示:要放第三方品牌的 logo、要找特定格式的素材、或需要更大型的素材市集。它們是補位角色,但缺了它們你會卡關。
10. Simple Icons Simple Icons 收錄許多品牌圖示,適合技術整合頁、社群連結與第三方登入原型(2026)。但資料庫授權不會消除各品牌的商標權與使用規範;正式產品應核對品牌官方資產與指南,不能把資料庫中的圖示一律視為官方核准版本。品牌識別初期也可搭配 免費 Logo 製作工具 思考。
11. SVG Repo SVG Repo 收錄圖示、插畫與裝飾向量(2026)。授權依素材與圖示集而異,不能用「多數是 CC0 或 MIT」概括;下載前應打開個別素材頁確認。
12. Iconduck Iconduck 是另一個開源圖示的聚合平台,定位上跟 Iconify 有點像,但它的介面更強調「授權透明」。每個圖示家族都會清楚標出授權類型,讓你在挑選的當下就知道能不能商用。如果你對授權特別敏感(例如做的是金融、醫療這類合規要求高的產品),Iconduck 的授權標示機制會讓你比較安心。它的圖示總量也很可觀,背後匯集了大量開源家族。
13. Iconscout(免費版) Iconscout 是一個設計素材市集,涵蓋圖示、插畫、3D 素材與 Lottie 動畫;其 Figma 外掛可在畫布內搜尋並插入素材。免費方案的可用範圍、標示義務與下載限制依素材及當期條款而異,使用前要查看個別授權。它的定位更接近素材市集,和前面以一致圖示家族為主的來源不同。
商用授權地雷:免費不等於隨便用
授權不清楚,可能讓設計稿在正式上線前被法務或合作方擋下。圖示外觀可以調整,授權義務卻不能靠改色或改尺寸消除;「免費」也不等於不必遵守標示、聲明與商標規範。
這張表把我們剛提到的幾個主要家族的授權整理出來,你存下來,下次挑圖示的時候直接對照:
| 家族 / 來源 | 授權類型 | 商用 | 是否需標示作者 |
|---|---|---|---|
| Material Symbols | Apache 2.0 | 可以 | UI 通常不需標示作者;散布時依 Apache 2.0 保留必要聲明 |
| Phosphor Icons | MIT | 可以 | UI 通常不需標示作者;依 MIT 保留必要聲明 |
| Lucide | ISC | 可以 | UI 通常不需標示作者;依 ISC 保留必要聲明 |
| Tabler Icons | MIT | 可以 | UI 通常不需標示作者;依 MIT 保留必要聲明 |
| Feather Icons | MIT | 可以 | UI 通常不需標示作者;依 MIT 保留必要聲明 |
| Remix Icon | Apache 2.0 | 可以 | UI 通常不需標示作者;依 Apache 2.0 保留必要聲明 |
| Simple Icons(程式碼端) | CC0 | 可以 | 不需(但 logo 商標權屬原品牌,依各品牌規範使用) |
| SVG Repo | 視素材與圖示集而定 | 依個別授權 | 視個別素材標示而定 |
| Flaticon(免費版) | 需標示作者 | 可以但有條件 | 需要標示作者,否則需購買進階版 |
| Iconscout(免費版) | 視素材而定 | 部分可以 | 多數需要標示作者或購買授權 |
單一開源家族通常比素材市集更容易管理,但仍要保留授權文字、追蹤版本與處理商標。市集型平台則要逐素材確認方案與標示義務,不要把免費方案概括成一律需要或一律不需要標示。
還有一個更隱晦的地雷:聚合型外掛裡的圖示,授權未必跟外掛本身一致。例如你透過 Iconify 插入一個某冷門家族的圖示,那個家族可能是 CC-BY 甚至更嚴格的授權。所以實務上的習慣是,只要是透過聚合外掛抓的圖,插入後一定再花十秒查一下該家族的官方授權頁面。這十秒能幫你避掉日後好幾個禮拜的授權爭議。
實務上建議每個團隊都準備一份「圖示授權清單」,哪怕只是一份共用試算表。欄位很簡單:家族名稱、授權類型、是否需標示作者、使用範圍、負責人。每新增一個圖示來源就補一行。這份清單平時看似不起眼,真正派上用場的時刻,是你產品要上架、要被稽核、或要跟外部合作方交付素材的那一刻,它能讓你在五分鐘內證明「我們用的每一個圖示,授權都是乾淨的」。這種準備工作看起來不起眼,卻是成熟團隊跟業餘團隊的一條明確分界線。很多設計糾紛,追到源頭都是因為當初沒留下這份授權紀錄。
Stroke 還是 Fill?跨來源混搭時保持視覺一致的方法
就算你已經選定了主要家族,現實裡你一定會遇到「主家族就是缺這一個圖」的狀況。這時候你得從別的來源補一個進來,而問題就來了:怎麼讓補進來的圖示,跟主家族擺在一起不違和?
可採用一個叫「風格錨點」的技巧。概念很簡單:先把你主家族的圖示擺在畫面上當作錨點,然後任何從別處抓來的圖示,都強制對齊這幾個屬性:
- 線條粗細對齊:先查看主家族在目標尺寸與變體下的官方規格,再用 Figma 的 Stroke 或對應變體調整補圖。Material Symbols 的重量可變,不能用單一固定 px 值概括。
- 端點與接點對齊:線條的端點(cap)跟轉角(join)要一致,圓頭搭圓頭、方頭配方頭。這個細節很多人沒注意,但混搭時一眼就看得出來。
- 風格類型對齊:主家族用 stroke,補圖就盡量找 stroke 版本;不要主家族全是鏤空,補圖卻丟一個實心進來。
- 柵格大小對齊:統一在 24px 或 20px 的容器裡對齊,不要一個是 22px 一個是 26px。
換個方式想,這就像你在做菜,主家族是你的主調味(比方說日式醬油風),你補進來的材料就算換了,也得用同一套調味邏輯去處理,整鍋才不會味道打架。圖示也是,不一致的視覺味道,使用者嚐得出來。
實作上,可在 Figma 裡開一個「icon 調整框」的元件,把抓進來的圖示都先丟進去跑一遍標準化流程(對齊粗細、對齊端點、套用主色),確認沒問題才放進正式畫布。這個動作看起來龜毛,但一旦做成習慣,你的設計稿質感會穩定在一個很高的水準。
如果你對這類「視覺一致性」的思考方式有興趣,色彩理論指南 裡也有類似的方法論可以延伸,圖示顏色跟整體色彩系統的搭配也是同樣的邏輯。
圖示尺寸的黃金數字:16、20、24 什麼時候用哪個
跨來源混搭時,尺寸是另一個經常被忽略、卻會直接破壞視覺一致性的變數。把圖示尺寸分成三個常用檔位,每個檔位對應不同的使用情境,記下來幾乎不用再改:
- 16px:密集資訊區。用在表格列、下拉選單項目、表單欄位前綴圖示這類「空間擁擠、圖示只是輔助提示」的地方。這個尺寸下,線條不能太細,否則在高解析度螢幕上會糊掉。
- 20px:一般介面元素。按鈕內圖示、次要導覽、卡片標題旁的小圖示。這是最常用的主力尺寸,因為它在視覺重量跟佔位之間取得最好的平衡。
- 24px:主要操作與導覽。常用於底部導覽列、側邊欄主選單與行動按鈕;圖示仍要放在足夠大的互動容器裡,不能把圖示尺寸當成完整點擊範圍。
這裡有一個很多人不知道的細節:圖示的視覺尺寸不等於容器尺寸。一個 24px 的圖示,實際圖形通常只佔 20px 左右,周圍留白是為了讓不同形狀的圖示在視覺上感覺一樣大。一個滿版的正方形圖示跟一個纖細的線條圖示,如果都填滿 24px,正方形會看起來大得多。好的圖示家族(像 Phosphor、Material)都內建了這種光學平衡,所以你從這些家族抓的圖,視覺重量天生就是一致的。但如果你從不同來源混搭,就得自己在容器層做補償。
圖示的視覺尺寸不等於可點擊區域。WCAG 2.2 AA 的 Target Size (Minimum) 是 24×24 CSS px,並包含間距等例外;44×44 px 則可作為較舒適的實務目標。設計時應同時標示圖示尺寸、互動容器與相鄰目標間距。
從拖進畫面到交給工程師:圖示的元件化與命名衛生
圖示插進畫布,對設計師來說工作只完成了一半。另一半、而且經常被低估的一半,是這些圖示怎麼乾淨地交到工程師手上。你在 Figma 裡隨手放的圖示,到了切版階段會變成開發者的噩夢,如果沒有做好元件化和命名。
先講元件化。每一個圖示都應該被做成一個 Figma Component(元件),讓它有結構、有命名,絕不能以散落的向量圖層到處丟。然後,用 Variants(變體)把同一個圖示的不同狀態收進同一個元件底下,例如:
icon / search / 24 / stroke(線性版)icon / search / 24 / fill(實心版)icon / search / 24 / stroke / active(啟用狀態,顏色變體)
這種命名規則看起來繁瑣,但它解決了三件事:一是設計師之間能秒找到圖示、二是工程師拿到設計稿時能直接對應到程式裡的命名、三是未來要替換整個家族時,只要改元件定義就能一鍵更新全部。這跟你在 Figma 網格系統 裡建立一致的排版秩序,是同一種投資觀念。
再講 SVG 衛生。從外掛抓下來的 SVG,常常帶著多餘的圖層、不必要的群組、或沒有對齊到整數的座標,這些都會讓檔案變肥、也讓工程師在實作時困擾。實務上的習慣是插入後做幾件事:
- 只在匯出需求明確時 Flatten,避免不必要地破壞可編輯性或改變複合路徑。
- 依 stroke 粗細與目標尺寸對齊像素格;0.5px 座標有時反而是讓奇數線寬清晰的正確位置。
- 移除隱藏圖層跟多餘的 fill 屬性,只保留要用來控制的 stroke 跟 fill。
- 套用 color variable 或 style,並在交付文件寫清楚 token 對應;Figma 樣式不會保證自動映射到程式碼 token。
這幾步做完,你的圖示才算是「生產就緒」。如果你想知道這些優化跟整體素材瘦身怎麼接軌,圖片壓縮工具 雖然主要講點陣圖,但 SVG 瘦身的觀念是互通的。
還有一個很多人漏掉的點:把整個圖示家族匯入成一個獨立的 Figma Library(元件庫),讓各專案共用它,避免把圖示直接散丟在個別專案裡。這樣你所有專案都能共用同一套圖示定義,改一處全部同步,也不會出現「A 專案的搜尋圖示跟 B 專案的長得不一樣」這種飄移。這就是設計系統的基礎功夫,跟 網頁設計必備元素 裡談的那些地基是同一件事。
三個常見的圖示地雷
接下來三項都會造成授權、視覺一致性或交付問題,適合在正式上線前逐一檢查。
地雷一:用聚合外掛抓圖,沒查家族授權就上線。聚合平台裡每個家族可能採不同授權。插入後應立即記錄家族、版本與官方授權頁;授權不明就不用。
地雷二:早期沒固定家族,做到後期畫面變動物園。若每個頁面都臨時抓不同來源的圖示,同一個「搜尋」動作就可能出現多種放大鏡,線條、圓角與大小各不相同。開始前先指定主家族與補圖規則,通常比後期逐頁統一省事。
地雷三:圖示沒做成元件,交付時難以對應。同一圖示若以散落向量存在不同畫布,名稱、大小與顏色很容易漂移,工程端也難以對應到同一個實作元件。元件化與命名不是額外裝飾,而是設計與開發能否順利接軌的基礎。
這三個地雷的共同點很清楚:前期省略授權、家族與元件規則,後期就要付出額外整理與溝通成本。
30 秒核心重點:一張表加一句結論
如果你一路看到這裡,恭喜你的耐心。不過有時候你只是需要一個快速決定。這張總表把 13 個外掛的「最適合場景」濃縮成一行,你對著自己的需求挑就好:
| 外掛 | 分層 | 最適合的場景 | 授權 |
|---|---|---|---|
| Iconify | A 超級庫 | 什麼風格都要、早期探索、跨家族比對 | 視家族而定 |
| Material Symbols | A 超級庫 | Material Design 產品、需要四個可調變數 | Apache 2.0 |
| Flaticon | A 超級庫 | 行銷素材、插畫感圖示、找靈感 | 免費版需標示 |
| Phosphor Icons | B 一致家族 | 需要多變體彈性的設計系統首選 | MIT |
| Lucide | B 一致家族 | 極簡、技術感、工具型產品 | ISC |
| Tabler Icons | B 一致家族 | 線性為主、數量需求比 Lucide 更大 | MIT |
| Feather Icons | B 一致家族 | 極簡主義、圖示需求量少 | MIT |
| Remix Icon | B 一致家族 | 親和、圓潤、面向大眾的產品 | Apache 2.0 |
| Streamline(免費) | B 一致家族 | 插畫感、需要品牌個性 | 免費版有限 |
| Simple Icons | C 特殊用途 | 第三方品牌 logo、社群登入按鈕 | CC0(logo 商標另議) |
| SVG Repo | C 特殊用途 | 中型裝飾元素、空狀態圖、幾何素材 | 視素材與圖示集而定 |
| Iconduck | C 特殊用途 | 對授權高度敏感、要透明標示 | 視家族而定 |
| Iconscout(免費) | C 特殊用途 | 需要插畫、3D、Lottie 等複合素材 | 免費版多需標示 |
如果是全新的產品、不知道該從哪開始,預設組合是這樣:主圖示家族用 Phosphor(或 Lucide,看產品調性),品牌 logo 用 Simple Icons,臨時補洞用 Iconify,就這三個。其他的是在你有更明確的特殊需求時才加進來。記得,外掛不是裝越多越好,裝太多反而會讓你在選擇裡浪費時間。
結尾行動方案:今天就動手把圖示流水線架起來
看了這麼多,如果只記得一個觀念,請記得這句:圖示的一致性比數量重要,而一致性是靠系統建立的,不是靠靈感。這個六步行動方案,是建議你今天就動手做的事,不用等到下個專案,現在這個正在進行的專案就能開始整理。
- 盤點你目前畫布上的所有圖示。把你現在設計稿裡用到的每一個圖示列出來,你會很驚訝自己不知不覺混了多少個家族。
- 選定一個主家族。對照上面的總表,依你的產品調性挑一個 Tier B 的家族,從今天起它是你的圖示唯一來源。
- 把主家族匯入成一個獨立 Figma Library。不要散在每個專案裡,讓它成為可共用的元件庫。
- 建立命名規則。用前面提過的
icon / 名稱 / 尺寸 / 風格格式,把每個圖示做成帶變體的元件。 - 訂一份授權清單。把你用的每個家族的授權類型記在設計文件裡,未來新增圖示時強制查一遍。
- 設定風格錨點流程。真有必要從別處補圖時,跑一遍那個對齊粗細、端點、風格的標準化流程,才放進正式畫布。
這六步走完,你的圖示從此就是一條可重複、可移交、可控管的生產線,取代每次都要重新發明輪子的隨機抓取。這就是設計效率翻倍的真相,從來不在某個神奇外掛身上,真正的關鍵在於把流程紀律化。
說到底,圖示外掛只是工具,真正決定你設計效率的,是你有沒有把工具收斂成一條屬於自己的工作流程。裝對外掛、選對家族、建立紀律,這三件事做到,你會發現那種「為了一個圖示耗掉半小時」的日子,再也不會回來了。現在就打開你的 Figma,把今天的盤點清單開出來吧。