SVG icons: inline markup, a sprite with use, or an img element

What it is

Three ways to place an SVG icon. Inline: the <svg> markup sits in the HTML, so fill="currentColor" follows the text colour and CSS can reach every path. Sprite: one file defines each icon as <symbol id="check">…</symbol>, and each occurrence is <svg><use href="/icons.svg#check"></use></svg>; the file is fetched once and cached, and the clone inherits color from its context. Image: <img src="icon.svg"> or a CSS background is simplest and cacheable, but the SVG is an opaque image whose internals CSS cannot style.

Why it matters

Icons are numerous, repeated and coloured by context. Inline markup gives full control but repeats bytes in every page and every table row; the sprite gives caching and a single definition under stricter loading rules; the image gives caching and no styling. The choice decides whether icons follow text colour, hover states and dark mode without extra assets.

How to apply

• Default to a same-origin sprite with <use href>. MDN notes browsers may apply the same-origin policy to <use> and refuse cross-origin URLs, so serve the sprite from the page's origin or inline the <symbol> block once at the top of the document.
• Put fill="currentColor" (and stroke where relevant) on symbols; MDN defines currentColor as the value of the element's color property, so color on the button or link styles the icon.
• Mark decorative icons aria-hidden="true" and focusable="false". Give an icon that stands alone a name: a <title> element inside the SVG (the accessible-name element, usually also shown as a tooltip) or an aria-label on the surrounding button.
• Set width and height (attributes or CSS) on every icon so layout does not shift before the sprite arrives.
• Inline the two or three icons needed for the first paint (logo, menu) and keep the rest in the sprite; version the sprite URL like any other asset.
• Run icons through an optimiser and normalise the viewBox so all icons share one coordinate system.

Pitfalls

Page classes do not reach into the cloned <use> content; only inheritable properties and custom properties cross, so multi-colour icons need currentColor plus custom properties, not class selectors. The clone is not in the DOM for scripts. A sprite that changes id names breaks every page that references the old ones until caches expire. Icon fonts, the older alternative, are not compared here.