Inline SVG in HTML

A small icon written straight into the markup, styleable with CSS.

<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"
     fill="none" stroke="currentColor" stroke-width="2">
  <path d="M4 12l5 5L20 6"></path>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" role="img">
  <title>Streak on fire</title>
  <circle cx="8" cy="8" r="7" fill="currentColor"></circle>
</svg>

How it works

viewBox sets the coordinate system, so it scales cleanly.
currentColor makes the shape inherit the text color.
aria-hidden hides a decorative icon from screen readers.

The run, in numbers

Lines: 8
Characters to type: 313
Tokens: 84
Three-star pace: 75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 67 seconds.

Type this snippet

Step 6 of 9 in Media & embeds, step 13 of 23 in Semantics & metadata.

← Previous Next →