图标颜色怎么改？先分清SVG和PNG，4步走完

图标能不能改颜色，先看文件后缀，别急着找工具。.svg 是文本文件，改一个色值就完事；.png、.jpg 是像素图，颜色已经烧死在图里，只能整体染色或者重画。下面按格式分开讲，照着做就行。

先看后缀：免费图标改颜色前必须分清的两类格式

判断方法有三种，任选一种：

• 看文件名后缀，.svg 和 .png 一眼能分

• 拖进浏览器放大到 300%，边缘还是干净的通常是 SVG，发虚的是位图

• 右键看属性里的文件大小，单色 SVG 一般几 KB，同尺寸 PNG 往往几十 KB

为什么重要：SVG 里每个色块都对应一行代码，你能精确改；PNG 里没有「颜色」这个概念，只有像素。同样是免费图标改颜色，这两种格式的操作路径完全不同，用错方法会白忙半天。

还有一点要提前看：多色图标（带渐变、带阴影的插画风）改起来麻烦，单色线性图标最好改。下载前先确认图标是单色还是多色。

SVG 图标改色：三步走完，不用装软件

第一步：找到颜色写在哪儿

用记事本、VS Code 或任意文本编辑器打开 SVG，搜这几个关键词：fill=、stroke=、style=。常见三种写法：

• fill="#000000"：填充色，最普遍

• stroke="#333333"：描边色，线性图标常用

• fill="currentColor"：跟随外层文字颜色，改这里没用

第二步：替换色值

1. 按 Ctrl+H 打开替换，把 fill="#000000" 换成目标色，比如 fill="#1A73E8"

1. 保存，双击用浏览器打开，颜色立刻变

1. 多个文件一起改：VS Code 里按 Ctrl+Shift+H，在图标文件夹范围内批量替换，一次改完几十个

两个细节：fill="none" 千万别动，那是没填充的描边图标；色值必须是 6 位十六进制，#1A73E8 和 #1a73e8 等价，但别漏掉开头的 #。

第三步：不想碰代码的两条路

• Figma：把 SVG 拖进画布，选中图层，右侧 Fill 面板点色块改色，导出时选 SVG 格式，矢量不丢

• 在线 SVG 编辑器：上传文件，点色块选颜色，下载；免费额度一般够个人用，但导出前确认是 SVG 而不是 PNG，否则白改

前端项目可以更省事：图标里写 fill="currentColor"，CSS 里 .icon { color: #1A73E8 }，换主题、hover 变色都不用再动文件。

PNG 图标改颜色：两条路和各自的天花板

PNG 没有色值可改，只能「染」。

路线一：整体染色，适合纯黑或纯白的单色图标

1. 用 PS 或在线图片工具打开图标

1. 先去色（图像 → 调整 → 去色），让图标变成纯黑白

1. 新建图层填充目标色，混合模式选「滤色」（原图黑底）或「正片叠底」（原图白底）

1. 合并图层，导出 PNG

路线二：转矢量重画

• 用 Illustrator 或 Figma 的图像描摹功能把 PNG 转成矢量，再按上面的 SVG 方法改色

• 限制：线条细、细节多的图标描摹后边缘会毛，要手动修锚点，图标量大时不划算

说清边界：PNG 改色放大到 2 倍以上就会糊，做印刷、Retina 屏、大屏展示都不合适。这类场景建议直接找 SVG 原图，或者换一套图标库。

四个容易踩的坑

• 改了没反应：图标用的是 stroke，你改的是 fill；或者元素上带了内联 style，优先级更高，要一起改

• 批量替换误伤：#000 和 #000000 是同一种颜色的不同写法，替换前先统一写法，不然改一半剩一半

• 导出颜色丢了：导出时选了 PNG 或者「复制为图片」，颜色被压平，回不到矢量

• 授权没看清：免费图标站点的协议分 CC0、署名免费、仅个人使用几种，改色属于演绎作品，要求署名的必须保留原作者信息

常见问题（FAQ）

Q：SVG 改完颜色文件坏了打不开？

多半是替换时删掉了引号或尖括号。改之前先复制一份备份，出问题直接还原，别在原文件上反复试。

Q：免费图标改颜色之后能商用吗？

看原始授权，不看你会不会改色。CC0 最宽松，署名类协议改完仍要标注来源，仅限个人使用的图标，怎么改都不能商用。

Q：公众号、PPT 里的图标怎么改色？

公众号编辑器不支持直接插入 SVG，得先导出 PNG 再插入；PPT 稍微好一点，插入 SVG 后右键选择「图形填充」就能改色，这是 Office 里少数能直接改矢量色的地方。

Q：为什么图标改完颜色发灰？

色值带了透明度，opacity 或 fill-opacity 没设成 1；也可能是导出时选了有损压缩，重新按 SVG 导出一次即可。

最后更新：2026-10-24（工具界面、价格与政策可能调整，请以官方页面为准）。