Иконки для сайта: как выбрать и вставить

Иконка помогает быстро найти кнопку, но сама по себе мало что объясняет. Разбираем, в каком формате их ставить, какого размера делать и почему подпись почти всегда нужна.

SVG, а не картинки и не шрифт

Раньше иконки рисовали картинками PNG или подключали иконочным шрифтом. Сейчас для сайта лучше всего SVG:

• чёткая на любом экране, в том числе на телефонах с плотными экранами;
• весит сотни байт, а иконочный шрифт тянет за собой весь набор из сотен знаков;
• цвет меняется через CSS, поэтому одна иконка подходит и для тёмной темы, и для светлой;
• не превращается в квадратик, если шрифт не загрузился.

Готовый код

<button class="icon-btn" aria-label="Корзина">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
       stroke="currentColor" stroke-width="2" aria-hidden="true">
    <path d="M2 3h3l2.5 12H19l2-8H6"/>
    <circle cx="9" cy="19.5" r="1.6"/><circle cx="17" cy="19.5" r="1.6"/>
  </svg>
</button>

.icon-btn { display: inline-grid; place-items: center;
  width: 48px; height: 48px; color: #1a1a1f; }
.icon-btn:hover { color: #6d3fd8; }

stroke="currentColor" берёт цвет из CSS, поэтому иконка перекрашивается вместе с текстом. Если у кнопки нет подписи, обязательно добавьте aria-label: иначе программа экранного доступа прочитает просто «кнопка».

Размеры

Большинство бесплатных наборов нарисованы на сетке 24×24 с линией 2 единицы. На 24 пикселях линия ровно 2 пикселя и выглядит лучше всего. На 16 пикселях она становится тоньше 1,5 пикселя и мелкие детали слипаются, поэтому для мелких размеров выбирайте простые иконки.

• 16 px: внутри строки текста, рядом с мелкими ссылками.
• 20–24 px: меню, кнопки, поля ввода. Основной размер.
• 32–48 px: крупные пункты, карточки услуг, нижнее меню приложения.

Все иконки на странице должны быть из одного набора: одинаковая толщина линии и скругления. Смесь двух наборов видна сразу, как смесь двух шрифтов без причины.

Подпись почти всегда нужна

Однозначно понимают только несколько иконок: дом, лупа, корзина, крестик «закрыть». Сердечко может значить «избранное» или «нравится», а шестерёнка у разных сайтов прячет разное. Подпишите иконку словом, особенно в главном меню: место это занимает немного, а посетителю не приходится угадывать.

Зона нажатия больше рисунка

Иконка 24 пикселя слишком мала для пальца. Делайте вокруг неё кнопку 44–48 пикселей, как советуют Apple и Google (подробнее в статье о кнопках). Рисунок остаётся аккуратным, а промахнуться трудно.

Цвет и контраст

Иконка, по которой нажимают, должна отличаться от фона не меньше чем 3:1. Проверить пару цветов можно в проверке контраста. Цвет иконок обычно берут из основного цвета текста, а акцентный оставляют для главных действий; подобрать его поможет раздел палитр.

Где взять бесплатно

• Lucide: более 1500 линейных иконок, лицензия ISC.
• Tabler Icons: больше всего иконок, лицензия MIT.
• Heroicons: аккуратный набор от авторов Tailwind CSS, MIT.
• Phosphor: шесть начертаний, от тонкого до залитого, MIT.
• Material Symbols: набор Google, Apache 2.0.

Иконку для вкладки браузера делают отдельно: для неё есть генератор фавиконок и статья о фавиконке.

Частые вопросы

В каком формате ставить иконки на сайт?

В SVG: иконка остаётся чёткой на любом экране, весит сотни байт и красится через CSS свойством color.

Какого размера делать иконки?

Обычно 20–24 пикселя рядом с текстом и в меню, 16 пикселей внутри мелкого текста, 32–48 пикселей для крупных пунктов. Зона нажатия при этом не меньше 44–48 пикселей.

Где взять бесплатные иконки?

Lucide, Tabler Icons, Heroicons, Phosphor и Material Symbols: все бесплатны и для коммерческих сайтов. Перед использованием проверьте лицензию набора.