Icons and inline SVG

In plain English

An icon can be plain text, an icon font, or inline SVG, which is drawing code written straight into the HTML. Inline SVG builds pictures out of simple shapes such as <rect>, <circle> and <line>. If an icon is purely decorative, add aria-hidden="true" so a screen reader skips it; if it carries meaning, give it an accessible label. Keep your SVG small by drawing only the shapes you need instead of pasting a giant generated file.

Step by step

1. 1Decide whether the icon is decorative or carries meaning.
2. 2Draw the icon with basic SVG shapes inside your HTML.
3. 3Add aria-hidden="true" to icons that are purely decorative.
4. 4Give meaningful icons role="img" and an aria-label.
5. 5Keep the SVG to just the shapes the icon needs.

<svg width="48" height="48" viewBox="0 0 48 48" role="img" aria-label="Home">
  <rect width="48" height="48" rx="10" fill="#2f6fed"></rect>
  <circle cx="24" cy="24" r="8" fill="#ffffff"></circle>
</svg>

<svg width="48" height="48" viewBox="0 0 48 48" aria-hidden="true">
  <line x1="8" y1="24" x2="40" y2="24" stroke="#2f6fed" stroke-width="4"></line>
</svg>

Common mistakes

• Loading an entire icon font for one icon and shipping hundreds of glyphs nobody uses.
• Leaving a decorative icon unlabelled so screen readers announce a confusing "image".
• Hiding every icon with aria-hidden="true", including the ones that carry meaning.
• Pasting a huge generated SVG with thousands of points when three shapes would do.