Как добавить иконку в кнопку
Короткий ответ
Положите иконку <svg> внутрь кнопки рядом с текстом и выровняйте их через 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 задаёт расстояние между иконкой и текстом, а currentColor красит иконку в цвет текста кнопки — при наведении они меняются вместе.
Кнопка только с иконкой
Если текста нет, скринридеру нечего прочитать. Подпишите кнопку атрибутом aria-label:
<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>Иконка-символ
Для простых случаев подойдёт символ Юникода или эмодзи прямо в тексте: →, ✓, ★. Их тоже стоит скрыть от скринридера, обернув в <span aria-hidden="true">.
Частая ошибка
Иконку и текст ставят в обычную кнопку без flexbox. Картинка выравнивается по базовой линии текста и оказывается чуть выше или ниже:
<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>Функции из этого ответа
- <button> — Кнопка: отправляет форму или запускает действие.
- <svg> — Векторная графика прямо в HTML: фигуры, иконки, схемы.
- display — Определяет, как элемент ведёт себя в потоке и как раскладывает содержимое.
- gap — Промежутки между элементами во flexbox и grid.
- aria-* — Атрибуты доступности: роль, название и состояние элемента для программ чтения с экрана.