SVG guide · English edition October 10, 2026

How to Change an SVG Icon Color: Three Methods

An SVG is editable drawing instructions, not a fixed grid of pixels. If an icon fits your project but its color doesn't, you can often recolor it in a text editor. Choose the method based on how you plan to use the icon: a fixed file, inline HTML, or a CSS mask.

1. Change a fixed color in the file

Open a copy of the SVG in a text editor and look for a fill attribute such as fill="#050000". Replace that value with your color and save. If no fill is specified, black is the default; adding a fill to the outer SVG can work when its child shapes do not override it. Inspect stroke as well for line icons.

<svg viewBox="0 0 512 512" fill="#8b7bff">
  <path d="…" />
</svg>

The drawing paths in the source snippets are abbreviated with an ellipsis. Replace them with the actual paths from your icon before using the example.

This is the simplest choice for one icon with a fixed color. Use the palette generator to choose a color and check it against the background where the icon will appear. CSS rules or fills on individual shapes may override the value on the outer SVG.

2. Let an inline icon inherit the text color

Use fill="currentColor" and place the SVG markup directly in the HTML. The icon can then follow the surrounding CSS color: a button label, a menu item, or a light/dark theme. Child shapes must allow that inherited fill; explicit child fills or CSS declarations can still win.

<p style="color: #8b7bff">
  <svg viewBox="0 0 512 512" fill="currentColor" width="24" height="24" aria-hidden="true">
    <path d="…" />
  </svg>
  Download
</p>

The important condition is inline markup. An external <img src="icon.svg"> is a separate image document; the parent page's text color does not reach inside it. If the icon is decorative beside a visible label, aria-hidden="true" avoids repeating that label to assistive technology.

3. Recolor an external file with a CSS mask

A mask uses the SVG's silhouette to reveal an element's background. Keep the icon as an external file and set the visible color in the stylesheet. This is useful for a group of single-color icons that share theme variables.

.icono {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: #35d6c8;
  -webkit-mask: url("iconos/descargar.svg") center / contain no-repeat;
  mask: url("iconos/descargar.svg") center / contain no-repeat;
}

Change the background color for hover or theme states rather than editing every SVG. A mask uses the shape, so it does not preserve a multicolor illustration. The URL in this example is a placeholder: replace it with your own icon path.

What if the icon has several colors?

Flat illustrations often assign different fills to different shapes, sometimes through an internal <style> block. Edit the relevant values individually if you want to keep those distinctions. Replacing every color with one value, or using a mask, turns the illustration into a single-color treatment.

When embedding several SVG illustrations inline, scope their internal classes and IDs so they do not conflict. Using separate <img> files is another option when you do not need parent-page styling inside the image.

Run a copy through the SVG optimizer before publishing and compare the result visually. Optimization can remove export metadata; it is not a guarantee that untrusted SVG is safe to embed.

Which method should you use?

• One file, one permanent color: edit the fill or stroke.
• Icons within text, buttons, or menus: use inline markup and currentColor.
• Many external single-color icons: use a CSS mask.
• Multicolor artwork: change selected shape colors and preserve their relationships.

Practice with real resources

Try the kitchen icons, AI icon styles, or other resource packs. Continue with SVG favicons and color theory for web design.

Technical reference: MDN: the SVG fill attribute.