How to add an icon to a button
Short answer
Put an <svg> icon inside the button next to the text and align them with inline-flex:
<style>
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 0; border-radius: 8px; background: seagreen; color: white; cursor: pointer; }
</style>
<button class="btn">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 8l4 4 8-8" stroke="currentColor" stroke-width="2" fill="none"/></svg>
Done
</button>gap sets the distance between the icon and the text, and currentColor paints the icon in the button text color — on hover they change together.
An icon-only button
Without text a screen reader has nothing to read. Label the button with the aria-label attribute:
<style>
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: whitesmoke; cursor: pointer; }
</style>
<button class="icon-btn" aria-label="Close">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 3l10 10M13 3L3 13" stroke="currentColor" stroke-width="2"/></svg>
</button>A character as an icon
For simple cases a Unicode character or an emoji right in the text will do: →, ✓, ★. Hide them from screen readers too by wrapping them in <span aria-hidden="true">.
Common mistake
The icon and the text are put into a plain button without flexbox. The picture is aligned to the text baseline and ends up slightly higher or lower:
<button style="padding: 10px 16px;">
<svg width="24" height="24" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="tomato"/></svg>
Record
</button>Functions used in this recipe
- <button> — A button: submits a form or triggers an action.
- <svg> — Vector graphics right in HTML: shapes, icons, diagrams.
- display — Decides how an element behaves in the flow and how it lays out its content.
- gap — The gaps between items in flexbox and grid.
- aria-* — Accessibility attributes: the role, name and state of an element for screen readers.