Icons

Current Rating	B . We can use <svg /> elements, but we must either inline the entire file or compile all our svgs into a single sprite file.
Status	Proposals Open. See Below

Current State

There are limitations to using styleable SVG icons without resorting to workarounds

Current Options

Option A: SVG Sprites with <use>

<svg>
  <use href="sprite.svg#icon-name"></use>
</svg>

Option B: Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" fill="currentColor" />
</svg>

Problems

SVG Sprites: Require awkward syntax, limited cross-browser support for external references, and need the sprite to be present in the document.

Inline SVG: Bloats HTML markup, provides no caching benefits as SVG code is repeated on every page, and creates maintenance issues when the same icon is used across multiple pages.

Workarounds

CSS mask Property

.icon {
  mask: url('icon.svg');
  background-color: currentColor;
  width: 24px;
  height: 24px;
}

This approach works for single-color icons but cannot style individual paths within the SVG and has limited browser support for some mask features.

Proposals

Proposal A: SVG src Attribute (WHATWG HTML #5910)

<svg src="icon.svg" viewBox="0 0 100 100">
  <style>
    circle { fill: red; }
  </style>
</svg>

This proposal adds a src attribute to SVG elements, allowing external SVG files to be styled with CSS rules from the parent document while maintaining caching benefits.

Proposal B: CSS ::src Pseudo-element (WHATWG HTML #9064)

img::src {
  fill: currentColor;
  border: 2px solid blue;
}

img::src path {
  stroke: red;
  stroke-width: 2px;
}

This proposal introduces a pseudo-element syntax for styling external SVG content loaded via <img> tags, enabling granular control over SVG elements and their children.

Proposal C: currentColor Support (WICG #50)

<img src="logo.svg" colorscheme="glyph">

This proposal would automatically substitute black colors with currentColor values, enabling SVG images to adapt to their parent's text color for theme support.