Introduction

You can change the color of an SVG element, but the method depends on how the SVG is embedded. Inline SVG can be styled directly with CSS or JavaScript. SVG used through an img tag is much more limited because the inner shapes are not part of the page DOM.

Use fill and stroke

Most SVG shapes are colored with:

• 'fill for the inside of the shape'
• 'stroke for the outline'

Direct inline example:

<svg width="120" height="120" viewBox="0 0 120 120">
  <circle cx="60" cy="60" r="40" fill="tomato" stroke="black" stroke-width="4" />
</svg>

If your icon is line art, stroke may be the visible property that matters. If it is a filled icon, fill is usually the right one.

Styling Inline SVG with CSS

If the SVG markup is in your HTML, CSS can target it directly.

<svg class="icon" viewBox="0 0 24 24">
  <path d="M12 2L2 22h20z"></path>
</svg>

.icon path {
  fill: royalblue;
}

This is often the cleanest approach because it keeps presentation in CSS and lets you use hover states, themes, and utility classes naturally.

Use currentColor for Reusable Icons

For reusable icons, currentColor is extremely useful. It makes the SVG follow the surrounding CSS color value.

1<button class="danger-button">
2  <svg class="icon" viewBox="0 0 24 24">
3    <path fill="currentColor" d="M12 2L2 22h20z"></path>
4  </svg>
5  Delete
6</button>

.danger-button {
  color: crimson;
}

Now the icon changes color whenever the button text color changes, which is ideal for component libraries and design systems.

Change Color with JavaScript

If the color needs to change dynamically, update the SVG attributes or styles in JavaScript.

1<svg width="120" height="120">
2  <circle id="statusDot" cx="60" cy="60" r="40" fill="gray"></circle>
3</svg>
4
5<script>
6  const dot = document.getElementById("statusDot");
7  dot.setAttribute("fill", "green");
8</script>

This works well for interactive dashboards, validation indicators, or hover-driven behavior that is easier to express in script.

External SVG Files Behave Differently

If you use:

<img src="icon.svg" alt="icon">

then the SVG's internal path and circle elements are not directly targetable by the page's CSS. That is why a selector such as .icon path works for inline SVG but not for an external image file loaded through img.

If you need fine-grained styling, you usually want one of these:

• inline the SVG
• use a sprite or symbol system
• load it in a way that exposes the DOM

For many icon systems, inline SVG plus currentColor is the best combination.

Override Existing SVG Colors

Sometimes the SVG already contains a hardcoded color like:

<path fill="#ff0000" d="..."></path>

That can interfere with your external styling. If a color change seems not to work, inspect the original SVG markup and see whether the element already sets fill or stroke explicitly.

In some cases, the fix is simply to remove the hardcoded attribute and let CSS control the presentation.

Common Pitfalls

Trying to style the inside of an SVG that is loaded through img is the most common mistake.

Changing fill when the visible artwork is actually defined by stroke leads to no visible effect.

Hardcoded colors inside the SVG can override or complicate later styling.

Ignoring currentColor makes reusable icon theming harder than it needs to be.

Summary

• SVG colors are usually controlled with fill and stroke.
• Inline SVG can be styled directly with CSS or JavaScript.
• 'currentColor is a strong choice for reusable icons that should follow surrounding text color.'
• SVG loaded through img is not directly styleable internally in the same way.
• When a color change does not work, first check how the SVG is embedded and whether the element already has hardcoded color attributes.