How to change colors of SVG icons in img elements?

You can't use the CSS fill property to change color of an SVG icon in an img tag, but you can change the color without having to use one SVG per color. Sometimes there are technical constraints to using inline SVGs or fonts for icons, but there are a few alternative approaches to rendering SVG icons, each with its own pros and cons.

Using a CSS mask

If you want to use an img element with a src attribute, this approach will be very similar, because you will also load the image from a file, but from CSS instead of src. If you create a div and add the SVG icon in the CSS, you can reuse the same image but still change its color with a CSS mask.

<div class="icon"></div>

<style>
  .icon {
    width: 16px;
    height: 16px;
    background-color: red;
    mask: url("./icon.svg") no-repeat center;
  }
</style>

Make the code reusable

You can make the code reusable for components by simply making the color and the URL inline styles:

<div class="icon" style="background-color: #00FF00; mask: url('./icon.svg') no-repeat center;"></div>

<style>
    .icon {
        width: 16px;
        height: 16px;
    }
</style>

Accessibility

When you are using an img element you can make an icon accessible by adding a good alt text. But if you use a background image without the img tag there is no alt text, so you need to use aria-label instead.

<div class="icon" aria-label="Search"></div>

Keep in mind that if you already have text visible next to the icon, you will not need any alt text or extra label. It is always preferred to complement icons with a visible text because there will always be users that don't know exactly what the icon means.

Browser support

The browser support is good for CSS masks, but if you need to support very old browsers you may need to go another route: caniuse.com/css-masks

Inline SVGs

The more classic approach to reusable SVG icons is to use inline SVGs. This often works well when you work with a framework or components.

<svg width="100" height="100" fill="blue">
  <circle cx="50" cy="50" r="40" />
</svg>

Conclusion

Different approaches will be useful for different situations. Sometimes there will be technical constraints that prevent you from picking one solution, and other times it will just be about developer preferences.