Rethinking SVG icons


In the 2025 State of HTML survey, SVG came second in the Graphics & Multimedia Pain Points chart. In the comments, certain issues were voiced repeatedly:

  • “No way to pass currentColor and other params to remote SVGs makes icons very hard to manage”
  • “I’d like to refer to an SVG (e.g. to use as a repeated icon) that’s less verbose than <svg><use>...</use></svg>
  • “Want to be able to do <img src='file.svg'> and still retain ability to style. Currently if i want to pass through currentColor for example i have to inline the entire icon which is silly if i’m using it in dozens of places”
  • “Inlining SVGs causes a lot of repetition and noise in the HTML”

In a previous article about SVG icons I concluded:

For most use cases, <use> is the best option. This approach balances performance, an OK developer experience and just the right amount of stylistic versatility.

Even at the time of writing, I didn’t feel entirely convinced. Compared to an <img>, <use> is a verbose and complex. The best approach is not a settled issue.

The above tweet got over 1000 likes, only to ellicit the response “Don’t do this - mask-image is actually a horrible solution”, which itself garnered over 800 likes and recommended <use> instead. Clearly there is no consensus or universally recognised best practice.

Is <use> a security issue?

In this GitHub issue an Apple employee working on web standards comments:

I’m a bit surprised we’d further enhance the use element given what a security problem it has been to date.

The MDN page doesn’t mention security issues. After a Google search, it seems it’s mentioned almost nowhere on the web: these articles from 2022 are all I could find. However, the new Sanitizer API will strip out <use> elements entirely. If you need to pass markup through the Sanitizer, the <use> element is unusable. That is not the case for an <img> element or an <svg> element, and is a relatively important mark against <use>.

The only conclusion is that every approach to SVG icons is imperfect — at least until CSS link parameters become a thing.