如何用 CSS 改变 SVG 图标颜色
最后更新: 十一月 2026
CSS 可以通过 fill、stroke 和 currentColor 给内联 SVG 改色——前提是图标内联在 HTML 中，且它的形状没有锁定自己的颜色。这里介绍三种真正有效的方法（包括悬停状态），以及改色不生效时的排查办法。
第零条规则：图标必须内联
CSS 选择器在图片的边界处止步。用 <img> 标签加载的图标，或作为 CSS 背景的图标，会在它自己密封的文档里渲染：你样式表中的任何 fill 规则都够不到它的路径。要用 CSS 改色，就把 SVG 标记内联粘贴（或者以同文档的 <use> 精灵图提供，并接受只有继承属性能进入影子树）。下面每种方法都假定路径存在于你的 HTML 中。
currentColor：一条规则的主题
构建良好的图标集用 fill="currentColor"（线条图标用 stroke="currentColor"）给形状上色。这个关键字的意思是“这个元素继承的 CSS 颜色”，所以一条规则就能给图标定主题：在按钮或链接上设置 color，图标就会跟随——常态、悬停和深色模式一并跟随。本目录的大多数库都遵循这一惯例；从这里的任何图标页复制内联代码，就能只用 color 来驱动它。
直接瞄准 fill 和 stroke
当形状带有普通的呈现属性（fill="#333"）时，CSS 规则会胜过属性：.icon path { fill: #2563eb } 就能改色，因为属性位于层叠的最底层。有两样东西能击败这条规则：路径上的 style 属性（内联样式胜过样式表——删掉它，或用更具体的规则覆盖），以及每个路径故意使用不同颜色的多色图稿；对后者，用类逐路径改色，或者接受这套配色、只给外层背景定主题。
悬停与状态变化
把上面的技巧与状态选择器配对。使用 currentColor 图标只需一行：a:hover { color: #dc2626 } 让图标随文字一同过渡。直接瞄准时，动画你所设置的属性——transition: fill .15s ease——并记住：如果图标还会移动，transform 和不透明度的动画比填充更省。给状态再配一个非颜色的线索（下划线、粗细、背景），让变化不只靠色相承载。
当什么都不变时
按顺序排查这张清单：图标是 <img> 或背景（把它内联）；路径带有 style 属性（删掉或提高具体性）；SVG 用的是 currentColor 但你设置的是 fill 而不是 color（设置 color）；或者图稿确实是多色的、从来就不能定主题（换成单色图标集，比如同一概念的描边或填充版本——同一概念在这里通常有好几个库都有）。
本站可验证的事实
- 导出格式：Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- 位图导出尺寸：64px, 128px, 256px, 512px, 1024px, 2048px
- 工作台单文件上传上限：2 MB
- 每个图标页面都标注许可证与作者。