SVG
<svg>Inline vector graphic or icon.This page shows you how to add inline SVG graphics — icons, logos, and illustrations — using the Unblock SVG block.
What it does
The SVG block lets you paste vector graphics directly into your page. Unlike images, SVGs are code — they scale to any size without losing quality, and they can inherit colors from their surroundings.
This is the right choice for icons, brand logos, and any graphic that needs to stay crisp on every screen size.
When to use
- Icons — UI icons that scale perfectly
- Logos — Brand marks that stay crisp
- Illustrations — Decorative graphics
Key attributes
| Attribute | Purpose | Example |
|---|---|---|
viewBox | Coordinate system | 0 0 24 24 |
width | Display width | 24 or 100% |
height | Display height | 24 or auto |
fill | Fill color | currentColor |
stroke | Stroke color | currentColor |
aria-label | Accessible label | Search icon |
Using currentColor
Set fill="currentColor" to make the SVG inherit the text color of its parent element:
<svg fill="currentColor" viewBox="0 0 24 24" width="24" height="24">
<path d="..."></path>
</svg>
Now the icon color follows the CSS color property of whatever container it sits in. Change the parent's text color, and the icon changes with it.
Accessibility
Every SVG needs one of two things: either mark it as decorative, or give it a label.
Decorative SVGs (icons next to text, background flourishes):
<svg aria-hidden="true" ...>
Meaningful SVGs (the graphic conveys information on its own):
<svg role="img" aria-label="Description of the graphic" ...>
If you skip both aria-hidden and aria-label, screen readers will try to read the raw SVG markup to the user — which is gibberish. Always add aria-hidden="true" for decorative icons or role="img" aria-label="..." for meaningful graphics.
Where to find SVGs
HTML output
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48">
<path fill="currentColor" d="..."></path>
</svg>