# Иконки и иллюстрации на сайте: когда помогают

Обновлено 29 октября 2026 г. · 2 мин чтения · Студия AETHER · https://aether-studio.ru/blog/ikonki-dlya-sajta

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

## Когда иконки помогают

- **Навигация и действия.** Корзина, поиск, меню, телефон, «закрыть» — значки, которые человек узнаёт за долю секунды.
- **Короткие списки преимуществ.** Три-шесть пунктов с иконками читаются быстрее, чем сплошной текст, — если каждая иконка действительно что-то значит.
- **Контакты и соцсети.** Значки мессенджеров и карт понятнее подписей.

## Когда мешают

- **Иконка у каждого абзаца.** Глаз перестаёт их замечать, а страница выглядит перегруженной.
- **Значок без подписи для непонятного действия.** Шестерёнка, три точки, стрелка в квадрате — что они делают на вашем сайте, догадается не каждый.
- **Иконки вместо смысла.** Значок «ракета» рядом со словом «быстро» ничего не добавляет к слову.

Правило: если иконку можно убрать и ничего не потеряется — уберите.

## Единый стиль

Иконки из разных наборов сразу видны: одни контурные, другие залитые, у одних толстая линия, у других тонкая, где-то скругления, где-то острые углы. Выберите один набор и держитесь его:

- одна толщина линии;
- один тип — контурные или залитые;
- одинаковые скругления углов;
- один размер в одинаковых местах.

## Где взять

- **Открытые наборы** — Lucide, Material Symbols, Phosphor и другие: сотни иконок в одном стиле, лицензии разрешают использовать их на коммерческих сайтах. Условия лицензии всё равно стоит прочитать.
- **Платные наборы** — когда нужен стиль, которого нет у других.
- **Нарисовать свои** — для бренда, у которого есть своя графика. Дорого, но такие иконки становятся частью фирменного стиля.

Нельзя брать иконки и иллюстрации с чужих сайтов: это такие же объекты авторского права, как фотографии. О последствиях — в статье [«Фото для сайта»](https://aether-studio.ru/blog/foto-dlya-sajta).

## Формат и размер

- **Формат — SVG.** Векторные иконки остаются чёткими на любом экране и весят меньше картинок.
- **Размер.** Иконка в тексте — под высоту строки, иконка-кнопка на телефоне — с областью нажатия не меньше 44×44 пикселей, даже если сам значок меньше.
- **Цвет.** Иконки берут цвет текста, а акцентный цвет оставляют для действий — подробно о палитре в статье [«Цвета для сайта»](https://aether-studio.ru/blog/cveta-dlya-sajta).
- **Подпись для незрячих.** У иконки-кнопки без текста должно быть скрытое название — «Корзина», «Закрыть меню», — иначе экранный диктор прочитает просто «кнопка».

## Иллюстрации

Иллюстрации хорошо работают там, где нечего фотографировать: IT-продукты, абстрактные услуги, объяснение процесса по шагам, пустые состояния вроде «в корзине пока ничего нет». Они задают характер сайта — строгий, дружелюбный, игривый.

Но иллюстрации не заменяют фото там, где важно доверие: людей, интерьер и готовые работы показывайте настоящими снимками. И снова про единый стиль: три иллюстрации от разных художников на одной странице выглядят как сборник клипартов. Иллюстрации, сгенерированные нейросетью, проверяйте особенно внимательно — в них легко заметить лишние пальцы и странные детали.

## Как это делаем мы

Графику подбираем на этапе дизайна вместе с палитрой и шрифтами: если у бренда есть свой стиль — продолжаем его, если нет — предлагаем. Сколько стоит дизайн и от чего зависит цена, разобрано в статье [«Сколько стоит дизайн сайта»](https://aether-studio.ru/blog/skolko-stoit-dizajn-sajta).

**Услуга «Лендинг»:** от 4 рабочих дней, от 30 000 ₽, обычно 30 000–70 000 ₽. Подробнее: https://aether-studio.ru/services/landing

**Обсудим дизайн вашего сайта.** Ответим в течение рабочего дня, зададим несколько вопросов и назовём вилку по сроку и бюджету. Бесплатно и без обязательств. Написать: [Telegram @aether_agency](https://t.me/aether_agency), почта aether-studio@mail.ru, форма — https://aether-studio.ru/#contact.