Иконки и иллюстрации: стоковые картинки vs кастом

Функциональные иконки (галочки, стрелки) стоит брать из бесплатных библиотек вроде Lucide или Phosphor - переплачивать за них бессмысленно. Ключевые иконки лучше делать гибридом: базовые из готового набора, 4-6 под бренд кастомные. Иллюстрации заказывать только при бюджете от 10 000 рублей и задаче выделиться среди конкурентов.

Почему этот выбор влияет на восприятие

Иконки и иллюстрации на лендинге занимают 5-15% визуальной площади, но определяют 30-40% визуального впечатления. Плохие иконки старят дизайн, шаблонные делают лендинг похожим на сотни других, а кастомные повышают восприятие бренда.

При этом стоимость вариантов различается в десятки раз. Готовые иконки от 0 до 1500 рублей за набор. Кастомные от 3000 до 30000 рублей за комплект под один лендинг.

В этой статье разбираю, когда каждый из вариантов оправдан, какие стоковые библиотеки в 2026 году считаются приличными, и как не превратить лендинг в кашу из несовместимых стилей.

Три типа визуальных элементов

На лендинге встречаются три разные категории.

1. Функциональные иконки. Мелкие значки: галочки, стрелки, чекбоксы, телефоны. Их задача - визуально маркировать элементы.
2. Ключевые иконки. Крупнее, стоят рядом с блоками преимуществ. Их задача - усилить смысл блока.
3. Иллюстрации. Полноразмерные картинки, которые занимают 300-600 пикселей и несут самостоятельную смысловую нагрузку. Если такая иллюстрация стоит на первом экране, она нередко становится тем элементом, по которому измеряют LCP, и её вес стоит держать под контролем.

Для каждого типа разные правила выбора.

Функциональные иконки

Здесь можно и нужно использовать готовые наборы. Переплачивать за галочку и стрелку бессмысленно.

Популярные бесплатные наборы в 2026.

Все эти наборы доступны бесплатно, без водяных знаков, с лицензией на коммерческое использование.

Мой выбор для лендингов - Lucide или Phosphor. Они современные, стилистически нейтральные, хорошо читаются в разных размерах.

Платные наборы (FontAwesome Pro, Streamline) я не рекомендую для типичных лендингов. 95% задач закрывается бесплатными альтернативами.

Ключевые иконки

Здесь решение зависит от бюджета и бренда.

Вариант 1: готовый набор иллюстративных иконок

Некоторые библиотеки предлагают не только мелкие иконки, но и крупные иллюстративные. Например, Icons8, undraw.co, Blush.

Плюсы. Быстро и дёшево. Единый стиль на весь лендинг. Есть возможность перекрасить в цвет бренда.

Минусы. Если вы используете популярную библиотеку, ваш лендинг похож на сотни других. Уникальности нет.

Вариант 2: кастомные иконки под ваш бренд

Дизайнер рисует 6-10 иконок в едином стиле специально для вашего лендинга.

Плюсы. Уникальный стиль, соответствует бренду, выделяется среди конкурентов.

Минусы. Стоимость от 3 000 до 15 000 рублей. Требует времени на согласование.

Вариант 3: гибрид

Базовые иконки (галочки, стрелки) из готового набора. 4-6 ключевых иконок под блоки кастомные.

Это мой выбор для лендингов с бюджетом от 30 000 рублей. Гибрид даёт уникальность там, где она видна, и экономит на мелочах.

Иллюстрации на лендинге

Иллюстрации - самый дорогой и самый сильный визуальный элемент. Они могут либо сделать лендинг, либо его испортить. Отдельно проверяйте, что у каждой картинки заданы width и height в разметке: без них при загрузке страница дёргается, и это бьёт по CLS, одному из показателей Core Web Vitals.

Когда использовать иллюстрации

• У вас нет фото продукта или услуги (онлайн-сервис, нишевое B2B).
• Ваша аудитория молодая, привычная к визуальному контенту.
• Хотите выделиться среди конкурентов, которые используют стоки.
• Бюджет позволяет 10-30 тысяч на иллюстрации.

Когда не стоит

• Услуга физическая, и реальные фото работают лучше абстракций.
• Целевая аудитория консервативная (B2B, юристы, финансы). Иллюстрации могут считаться "несерьёзными".
• Бюджет маленький. Дешёвые иллюстрации выглядят кустарно.

Стили иллюстраций

1. Flat 2D. Плоская графика без объёма. Популярна последние 5 лет. Ассоциируется с digital-продуктами.
2. Isometric. Изометрические иллюстрации с перспективой. Подходят для SaaS и IT.
3. Memphis / ретро. Абстрактные формы, яркие цвета. Подходят для lifestyle-брендов.
4. 3D-рендер. Объёмная графика. Подходит для премиум-продуктов.
5. Hand-drawn. Имитация рисунка от руки. Подходит для экспертов и креативных ниш.

Мой выбор для большинства лендингов - flat 2D с 2-3 акцентными цветами бренда. Универсальный и не устаревает быстро.

Как не развалить визуальный стиль иконок?

Главная проблема лендингов со смешанными иконками - стилевая каша. Галочка из Heroicons, стрелка из FontAwesome, иконка сердечка из Lucide. Визуально это хаос.

Правила для сохранения единого стиля.

1. Один набор иконок на весь лендинг. Выбрать одну библиотеку и взять все иконки оттуда. Если нужной нет - либо перерисовать в стиле других, либо сменить всю библиотеку.
2. Одинаковая толщина линий. Если в библиотеке аутлайн-иконки имеют толщину 2 пикселя, все ваши иконки тоже 2 пикселя. Смешивать 1,5 и 2,5 нельзя.
3. Один размер "по умолчанию". Обычно 24 пикселя для функциональных и 48-64 для ключевых. Не 23 и 26, это разнобой.
4. Единый цвет или палитра. Функциональные иконки все одного цвета (обычно - цвет текста основного или акцентный). Ключевые - в одной цветовой гамме.
5. Одинаковая стилистика. Аутлайн или солид, но не вперемешку. Округлые углы или острые, но выбирайте один.

Сколько иконок нужно на лендинге?

Частый перебор: "чем больше иконок, тем интереснее". На деле перебор иконок рассеивает внимание.

Ориентир по количеству.

• Функциональные иконки (галочки, стрелки): неограниченно.
• Ключевые иконки: 4-8 на весь лендинг. В блоке "почему мы" или "преимущества".
• Иллюстрации: 1-3 на лендинг. Больше становится шумно.

Если на лендинге 15+ крупных иконок разного назначения, они теряют силу акцента. Всё становится декорацией.

Альтернатива иконкам - реальные фото

Для локальных услуг и физических продуктов реальные фото часто работают лучше любых иконок.

Сравнение двух вариантов блока "процесс работы".

Вариант А: с иконками

6 иконок (телефон, календарь, чемодан, галочка, конверт, звёздочка), под каждой 1-2 предложения. Плоский и скучный.

Вариант Б: с фото

6 реальных фото с процесса. Мастер принимает заявку на телефон, выезжает на замер с чемоданчиком инструментов, оформляет договор на планшете, и так далее. Те же 1-2 предложения под каждой.

Вариант Б почти всегда лучше. Это доказательство реальности работы, а не абстракция.

Типичные ошибки

• Смесь иконок из разных библиотек. Уже разбирали выше, но повторюсь - это самая частая ошибка.
• 3D-иконки на бюджетном лендинге. Если весь лендинг плоский, одна 3D-иконка выглядит чужеродно.
• Одинаковые иконки для разных по смыслу блоков. 4 одинаковых галочки на 4 разных преимуществах. Это ленивое оформление.
• Анимированные иконки без смысла. Летящие, моргающие, вращающиеся. Если анимация не несёт функции (только декор), она отвлекает.
• Огромные иконки на первом экране. Занимают 400 пикселей, отодвигают оффер и кнопку.

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

Можно ли использовать эмодзи вместо иконок?

Для функциональных отметок вроде галочек - нет: эмодзи рендерятся по-разному в разных ОС и браузерах, и стиль лендинга станет непредсказуемым. Как исключение эмодзи иногда уместны в неформальных нишах, но это на свой риск и не как основной набор иконок.

В каком формате хранить иконки: SVG или PNG?

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

Нужно ли адаптировать иконки под тёмную тему сайта?

Да, если на лендинге есть тёмные блоки. Иконка, нарисованная тёмным цветом на прозрачном фоне, на тёмном блоке становится не видна. Проще всего задавать цвет иконки через currentColor или CSS-переменную, а не зашивать его в файл.

Сколько времени занимает заказ кастомных иконок у дизайнера?

Обычно 3-5 дней на комплект из 6-10 иконок, включая один круг правок. Это стоит учитывать в сроках запуска лендинга: если дизайн и вёрстка готовы за 2 дня, а иконки заказаны отдельно, комплект может стать узким местом всего проекта.

Вывод

Функциональные иконки брать из бесплатных библиотек (Lucide, Phosphor, Heroicons). Ключевые иконки - гибрид готовых и 4-6 кастомных под бренд. Иллюстрации заказывать только если есть бюджет от 10 000 рублей и задача - выделиться. Единый стиль на весь лендинг критичен: одна библиотека, одна толщина линий, один размер, одна палитра. Для физических услуг реальные фото почти всегда работают лучше иконок.

Смежные материалы: Фото и видео на лендинге: что конвертит, Типография для лендинга и Психология цвета на лендинге.