Change SVG icon colors with CSS: inline vs image files

An SVG is a vector format, but that does not mean every SVG can be recolored by setting the CSS color property on its container. Color behavior depends on how the SVG is included and how the author defined its paths.

Inline SVG can follow text color

A monochrome inline SVG can use currentColor for its strokes or fills. The symbol then inherits the same color as its parent control, including hover and focus states.

<button class="save-button" type="button">
  <svg viewBox="0 0 24 24" width="20" height="20"
       fill="none" stroke="currentColor" stroke-width="2"
       aria-hidden="true" focusable="false">
    <path d="M5 3h14v18l-7-5-7 5z"/>
  </svg>
  Save item
</button>

.save-button { color: #233322; }
.save-button:hover { color: #437120; }
.save-button svg { flex: none; }

The example is intentionally a simple shape. Real assets can have multiple paths, explicit fills or gradients; inspect the SVG before applying a blanket replacement.

Why an image element behaves differently

With <img src="icon.svg">, the SVG is loaded as a separate image document. Changing the parent element's color does not normally reach inside that file. To use dynamic currentColor, inline the SVG or prepare a monochrome mask. A CSS filter can alter raster output, but it is difficult to control precisely and may distort brand colors.

A mask is useful for a single-color silhouette:

.search-shape {
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('/assets/icons/search.svg') center / contain no-repeat;
  mask: url('/assets/icons/search.svg') center / contain no-repeat;
}

This technique is unsuitable when the original SVG uses multiple meaningful colors.

Editing fills vs strokes

An outline file might contain fill="none" and a stroke; a filled file may use closed paths with fill colors. Turning on fill in a complex path can produce unexpected shapes. Use the Quikora editor's independent fill and stroke settings to inspect the result, and switch to a purpose-built filled version when the source drawing does not support the treatment.

Before using a color in production

Check contrast against the surrounding component, confirm hover/disabled states do not erase meaning, and keep original brand marks in their permitted colors where required. See outline versus filled and exporting icons for complementary choices.