Иконки для сайта: где взять и как не испортить дизайн
Иконки — самый частый способ «заполнить пустоту» на сайте, и поэтому их часто ставят не туда: ряды одинаковых значков у слов «качество» и «надёжность». Разбираю, когда иконки действительно помогают, где взять бесплатные и как использовать их, чтобы дизайн выглядел цельным.
- Иконка нужна, если ускоряет понимание: навигация, контакты, характеристики.
- Бесплатные наборы с открытой лицензией закрывают почти все задачи.
- Формат — SVG: лёгкий, чёткий, меняет цвет через стили.
- Один набор, одна толщина линии, один размер для одной роли.
Когда иконки нужны, а когда нет
Иконка помогает, когда её смысл понятен быстрее слова: телефон, почта, корзина, поиск, меню, стрелка «назад». Хороши иконки и в характеристиках товара: срок, гарантия, доставка — глаз быстро находит нужную строку.
А вот ряд одинаковых карточек «иконка + заголовок + текст» с абстрактными значками «качество», «надёжность», «команда» почти ничего не сообщает. Такие иконки читатель пропускает, а место на странице они занимают. Вместо них работают фото, цифры, скриншоты, схемы — то, что доказывает, а не украшает. Подробнее — в статье «Современный дизайн сайта».
- Абстрактная «лампочка» у слова «идеи»
- Шесть одинаковых карточек подряд
- Ничего не добавляет к тексту
- Телефон и почта в контактах
- Срок, гарантия, доставка в карточке товара
- Понятна быстрее, чем слово
Где взять иконки
- Открытые наборы — Lucide, Tabler Icons, Phosphor, Heroicons и другие. Сотни иконок в одном стиле, лицензия разрешает коммерческое использование. Иконки скачивают в SVG и при необходимости меняют толщину линии.
- Иконки в Фигме — многие наборы доступны как плагины, дизайнер вставляет их прямо в макет.
- Свой набор — для бренда с характером рисуют несколько ключевых иконок, а служебные (стрелки, меню) берут из открытого набора с похожими линиями.
- Иконки конструктора — в Тильде есть своя библиотека и можно загрузить свои SVG.
Всегда смотрите лицензию набора: «бесплатно скачать» не всегда значит «можно использовать на сайте компании».
Формат: почему SVG
PNG-иконка размывается на экранах с высокой плотностью и требует отдельный файл под каждый цвет и размер. SVG описывает форму линиями, поэтому одинаково чёткая на любом экране и перекрашивается через стили сайта — например, при наведении на кнопку.
Как использовать: 6 правил
- Один набор на весь сайт: одинаковая толщина линий и скругления.
- Один размер для одной роли: все иконки у пунктов списка — 20 px, все в карточках — 40 px.
- Цвет по смыслу: обычно цвет текста, акцентом — только у важного.
- Иконка + подпись: без подписи понятны только самые известные значки.
- Доступность: декоративная иконка скрыта от экранных читалок, у иконки-кнопки есть текстовое название.
- Не вместо фото: товары, объекты и команду показывают фотографиями — подробнее в статье «Фото для сайта».
Частые вопросы
Где скачать бесплатные иконки для сайта?
В открытых наборах с лицензией MIT или похожей: Lucide, Tabler Icons, Phosphor и другие. Их можно использовать в коммерческих проектах, а в наборе сотни иконок одного стиля.
Какой формат иконок лучше для сайта?
SVG. Иконка в SVG весит меньше килобайта, остаётся чёткой на любом экране и меняет цвет через стили сайта. PNG подойдёт, только если иконка сложная и многоцветная.
Какого размера делать иконки на сайте?
Обычно 20–24 пикселя рядом с текстом и 32–48 пикселей в карточках преимуществ. Главное — один размер для иконок одной роли по всему сайту.
Можно ли смешивать иконки из разных наборов?
Лучше нет: у наборов разная толщина линий, скругления и пропорции. На одной странице это сразу заметно. Если в наборе нет нужной иконки, её дорисовывают в том же стиле.
