---
title: "Figma 图标插件怎么选：Iconify、Ant Design、Material 和自带 SVG 导入"
excerpt: "Figma 不自带通用图标库，但能直接导入 SVG、用 Selection colors 改色、做成组件后用实例替换；要现搜现用，再用 Iconify、Ant Icons、Material Icons Picker 等图标插件，大小不齐用 Figiconizer 批量整理。"
canonical: https://plugmate.figmod.top/blog/figma-icon-plugins
---

# Figma 图标插件怎么选：Iconify、Ant Design、Material 和自带 SVG 导入

「Figma 图标去哪找」「图标插件哪个好用」「从网上下的 SVG 图标怎么放进 Figma」——几乎每个做界面的设计师都问过。先说一句实话：**Figma Design 本身不自带一套通用图标库**，但它把「导入 SVG、做成组件、统一替换」这几件事做得很完整；插件真正省事的地方，是让你**不离开 Figma 就能搜到几万个现成图标**。

先说结论：

- **手上已经有 SVG 文件**：直接拖进画布，Figma 会把它转成可编辑的矢量图层，不用装插件。
- **团队要长期用同一套图标**：把图标做成组件、发布成库，用实例替换和「实例替换属性」来换图标，这一步也是 Figma 自带的。
- **要从开源图标库里现搜现用**：用 [Iconify](/plugin/plugin-16) 一个入口搜多个图标集；产品用 Ant Design 就看 [Ant Icons](/plugin/plugin-213)，用 Material 就看 [Material Icons Picker](/plugin/plugin-523)；想按风格挑，可以看 [IconPark](/plugin/plugin-76)、[Lucide Icons](/plugin/plugin-355) 和 [Phosphor Icons](/plugin/plugin-5)。
- **图标大小、边距不统一**：用 [Figiconizer](/plugin/plugin-363) 或 [Icon Resizer](/plugin/plugin-175) 批量整理。

自带部分来自 Figma 官方帮助：[Add images and videos to designs](https://help.figma.com/hc/en-us/articles/360040028034-Add-images-and-videos-to-designs)、[Copy assets between design tools](https://help.figma.com/hc/en-us/articles/360040030374-Copy-assets-between-design-tools)、[Swap components and instances](https://help.figma.com/hc/en-us/articles/360039150413-Swap-components-and-instances)、[Explore component properties](https://help.figma.com/hc/en-us/articles/5579474826519-Explore-component-properties)、[Convert strokes to vector paths](https://help.figma.com/hc/en-us/articles/33052305733015-Convert-strokes-to-vector-paths)、[Flatten layers](https://help.figma.com/hc/en-us/articles/30101373312279-Flatten-layers)、[View and adjust colors in a mixed selection](https://help.figma.com/hc/en-us/articles/360042553434-View-and-adjust-colors-in-a-mixed-selection)。Iconify 的用法来自作者的官方文档 [Iconify for Figma](https://iconify.design/docs/design/figma/)。其他插件只写觅件详情页里能核对的功能，没有替你在文件里逐个跑过界面；打开后和这里写的不一致，以你看到的为准。

## 先想清楚：图标在 Figma 里最后都是矢量图层

不管是拖进来的 SVG，还是插件插入的图标，落到画布上都是普通的矢量、组或框架。这意味着：

- **好处**：可以像改其他图层一样改颜色、尺寸，套用颜色样式或变量。
- **边界**：图标和来源之间**没有联动**。图标库更新了，画布上已经插入的图标不会自动跟着变；想统一管理，要靠你自己把它们做成组件。
- **交付开发时**：开发多半直接用同名的图标包（比如 Ant Design、Material、Lucide 的代码包）。**设计稿里保留图标原名**，比交一张好看的切图更有用。

## 1. 已经有 SVG：直接拖进 Figma（自带）

官方帮助里写明：**SVG 文件导入后不再被当作图片，而是转换成可编辑的矢量图层**。所以从图标网站下载的 SVG，直接从电脑拖到画布上就行。

从其他设计工具搬图标时，官方的做法是：

1. 在原来的工具里把图标**以 SVG 格式复制到剪贴板**。
2. 回到 Figma 设计文件，在画布上右键，选择 **Paste here** 粘贴。

官方同时提醒：SVG 里的 marker 和 pattern 元素**不会被导入**。如果粘进来的图标缺了箭头头部或者纹理，多半是这个原因，换一个不依赖这两种元素的图标版本更省事。

反过来，要把 Figma 里的图标给别人：选中图标，右键 **Copy/Paste as → Copy as SVG**，就能把 SVG 复制到剪贴板。

## 2. 改图标颜色：用 Selection colors（自带）

插进来的图标常常由好几个小图层组成，一个个点进去改颜色很慢。官方的做法是：**选中整个图标（或一组图标），看右侧边栏的 Selection colors 区域**。

官方帮助写明它能做的事：

- 列出当前选区里所有纯色和渐变填充，**包括描边的颜色**，同一个颜色只出现一次。
- 点一个颜色可以直接改；点旁边的目标图标，可以选中所有用了这个颜色的图层。
- 可以把某个颜色直接换成颜色样式或变量。

边界：这个区域**只在选区里有不同颜色时才出现**；图片填充、隐藏的填充和蒙版不会列出来。选中的是布尔组时，只显示组本身的颜色，不显示组内子图层的颜色。

## 3. 线性图标要交付或做成单一形状：Outline stroke + Flatten（自带）

很多开源线性图标是用描边画的，缩放时描边粗细可能和你预期的不一样，开发拿到的 SVG 也会带着描边属性。需要把它变成实心形状时：

1. 右键图层选 **Outline stroke**（Mac 是 Command Option O，Windows 是 Control Alt O），把描边转成矢量路径。
2. 需要合成一个图层时，右键选 **Flatten**（Mac 是 Option Shift F，Windows 是 Alt Shift F）。

官方特别提醒：**这两步都是破坏性操作**。描边转完之后就不能再调描边粗细，Flatten 之后也拆不回原来的图层。所以建议**留一份原始图标**，只对要交付的那一份做转换；做错了可以撤销，或者从版本历史里恢复。

## 4. 团队长期用：做成组件，再用实例替换（自带）

如果一个产品里会反复用同一套图标，最稳的做法不是每次都去插件里重新搜，而是**把常用图标做成组件，放进团队库**。之后换图标就用官方的实例替换：

1. 选中画布上的图标实例，右侧边栏会显示它的组件名。
2. 点组件名，打开 Instance 菜单，可以搜索、预览并换成另一个图标。

官方帮助还提到两个省事的地方：

- 图标按斜杠命名（比如 `Icon/Arrow/Left`、`Icon/Arrow/Right`），Figma 会把它们当成相关组件归在一起，换的时候更好找。
- 快捷键 **Shift I** 打开快速插入，也能用来替换选中的实例。

### 按钮里的图标：用「实例替换属性」

做带图标的按钮、列表项时，可以给里面的图标加一个 **Instance swap（实例替换）属性**。官方步骤是：选中主组件，在右侧边栏 Properties 区域添加 Instance swap 属性，设好默认图标；再选中嵌在组件里的图标实例，点 **Apply instance swap property** 绑定上去。

这样别人用这个按钮时，直接在右侧边栏下拉换图标，不用点进图层里。官方还建议设置 **Preferred instances（推荐实例）**：比如你的图标库有 100 多个，但这个按钮只该用其中 8 个，就把这 8 个设为推荐，换图标时会优先列出来。

## 5. 现搜现用：图标插件

自带能力解决的是「图标已经在手上」的情况。**手上没有、要去开源图标库里找**，才是插件真正省时间的地方。

### Iconify：一个入口搜很多图标集

[Iconify](/plugin/plugin-16) 把很多开源图标集放进一个插件里。觅件详情里写的是 200 多个图标集、25 万以上图标；作者官方文档写的是可导入 30 万以上矢量图标，数量一直在增加，以你打开时为准。

作者文档里写明的用法：

1. 在 Figma 菜单里打开 **Plugins**，再选 **Iconify**。
2. 点一个图标集浏览，或者直接搜索关键词（文档示例是搜 `gear`），会在所有图标集里搜。
3. 导入有三种方式：图标浮层里的快速导入按钮、直接把图标拖到画布上、或者先选中图标再用插件窗口底部的按钮导入。

文档里还有几个对设计师很有用的细节：

- 搜索结果里能看到**作者信息和许可证**，商用前顺手看一眼。
- 可以选择把图标**作为组件或框架导入**，要做图标库时选组件更方便。
- 没有固定配色的图标，导入前可以直接选颜色，**也能选文件里已有的颜色样式**。
- 作者说明插件完全免费，导入的图标都是 SVG，而且只收录开源图标集。

### 按设计语言选：Ant Design、Material

如果你的产品已经定了组件库，图标最好也用同一套，开发对接最顺：

- [Ant Icons](/plugin/plugin-213)：查找 Ant Design 的图标，支持按名称搜索，**插入后图标名会显示在对应的框架里**，交给开发时可以直接对上名字。适合基于 Ant Design 的后台和中后台系统。觅件详情里写着「计划支持拖拽到画布」，说明拖拽这一项还不一定可用，以插件当前版本为准。
- [Material Icons Picker](/plugin/plugin-523)：查找 Google Material Symbols，图标数据直接从 Google 获取，不用担心版本旧。支持按名称或关键词搜、按类别筛选，可以在 Outlined 和 Filled 两种样式间切换，筛选偏好会自动保存。

库里另有一款 [Material Design Icons](/plugin/plugin-422)（Icons8 出品），觅件库里标的是**付费**，具体哪些功能要付费以安装时提示为准。只需要 Google 官方的 Material 图标的话，先试上面那款免费的。

### 按风格选：IconPark、Lucide、Phosphor

- [IconPark](/plugin/plugin-76)：在 Figma 里搜索和使用 IconPark 图标，支持拖拽到画布、自定义颜色和尺寸、复制为 SVG、下载 PNG。觅件详情里写明图标资源通过 Iconify API 提供。
- [Lucide Icons](/plugin/plugin-355)：基于 Feather Icons 扩展出来的开源图标库，风格统一的线性图标，适合常规 UI。
- [Phosphor Icons](/plugin/plugin-5)：1,512 个图标，有 Thin、Light、Regular、Bold、Fill、Duotone 6 种粗细和风格，基于 16×16px 设计，**保留原始描边**，插入后还能继续调描边粗细。同一个界面里要「细线版」和「实心版」两套时很方便。

## 6. 图标大小不统一：批量整理插件

从不同地方收来的图标，最常见的问题是外框大小、内边距都不一样，放进列表里高低不齐。这类整理用插件比手动快：

- [Figiconizer](/plugin/plugin-363)：把选中的图标自动放进**统一尺寸的框架**里，按设定的内边距等比缩放。适合把一堆零散图标整理成一套规格一致的图标集。
- [Icon Resizer](/plugin/plugin-175)：可以**分别设置图标尺寸和外框尺寸**，并把外框统一成正方形，一次处理一个或多个框架。

整理完再按第 4 节做成组件，后面换图标、交付开发都会轻松很多。

## 觅件库里有多少图标插件

我们在觅件插件库的「图标&Logo」分类里，用「图标」「Icons」「Logo」「SVG」几个关键词检索并去重，一共能查到 **36 个**插件，其中 **32 个**在库里标为免费，**4 个**标为付费。这些插件除了通用图标库，还包括 App 官方图标、国旗、天气图标、像素图标、Emoji 和 Web3 代币图标等细分方向。（数据来自觅件插件库，统计时间 2026 年 10 月。）

想按需求直接找，在 [觅件](/) 用中文搜「图标」「线性图标」「App 图标」就能看到中文介绍和是否免费。

## 常见问题

**Figma 有没有自带的图标库？**
Figma Design 没有内置一套通用图标库。图标要么自己导入 SVG，要么从团队库、社区资源或插件里拿。

**插件插进来的图标能改颜色吗？**
能。插进来的图标是普通的矢量图层，用右侧边栏的 Selection colors 一次改；Iconify 这类插件也支持导入前选颜色。

**图标能直接给开发用吗？**
可以复制或导出 SVG。但开发通常直接用同名的图标代码包，所以设计稿里保留图标名、用同一套图标集，比交付切图更重要。

**开源图标能商用吗？**
大多数开源图标集允许商用，但许可证各不相同。Iconify 搜索结果里会显示作者和许可证，商用前看一眼最稳妥。