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

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

先说结论：

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

自带部分来自 Figma 官方帮助：Add images and videos to designs、Copy assets between design tools、Swap components and instances、Explore component properties、Convert strokes to vector paths、Flatten layers、View and adjust colors in a mixed selection。Iconify 的用法来自作者的官方文档 Iconify for 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 把很多开源图标集放进一个插件里。觅件详情里写的是 200 多个图标集、25 万以上图标；作者官方文档写的是可导入 30 万以上矢量图标，数量一直在增加，以你打开时为准。

作者文档里写明的用法：

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

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

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

按设计语言选：Ant Design、Material

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

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

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

按风格选：IconPark、Lucide、Phosphor

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

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

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

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

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

觅件库里有多少图标插件

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

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

常见问题

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

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

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

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