Иконки и иллюстрации на сайте — где брать и как использовать

«Нашли иконки в интернете, скачали, поставили» — примерно так выглядит история большинства сайтов. До первого письма от правообладателя или до аудита, когда выясняется: иконки из трёх разных наборов, половина в PNG весом 40 КБ каждая, alt пустой, а та «красивая иллюстрация» с человеком в галстуке лет десять как стала мемом о шаблонных корпоративных сайтах. Иконки для сайта и иллюстрации — это инструменты, у которых есть правила. Знаешь правила — сайт работает лучше. Не знаешь — тратишь бюджет и получаешь обратный эффект.

Зачем вообще визуальные элементы — разве текст не справляется?

Справляется, но медленнее. Иконка рядом с пунктом меню сокращает время распознавания с секунды до долей секунды. Иллюстрация на экране «Как это работает» снимает необходимость читать три абзаца объяснения. Визуальные элементы делают четыре вещи одновременно: направляют внимание (взгляд идёт туда, где есть картинка), объясняют быстрее текста (особенно схемы и пиктограммы), задают характер бренда (игривый, строгий, технологичный) и повышают доверие — сайт выглядит профессионально, а не как текстовый документ.

На наших проектах с клиентами из Хабаровска и Владивостока мы замечаем одну закономерность: страницы услуг с качественными иллюстрациями держат пользователя на 20–30 секунд дольше, чем страницы только с текстом и рамочными кнопками. Это прямо влияет на поведенческие факторы — и на позиции в Яндексе.

Иконки: почему единство стиля важнее красоты

Главное правило — один набор, один стиль. Не «похожие», а именно один и тот же пакет иконок или набор, нарисованный в единой сетке. Если на сайте соседствуют контурные иконки из Heroicons и залитые из Font Awesome, глаз это считывает как несогласованность — даже если пользователь не может объяснить, что «не так».

Что держит иконки вместе:

• Стиль — контурные (outline) или залитые (solid/filled). Смешивать нельзя.
• Сетка — все иконки нарисованы на одной сетке, например 24×24 или 20×20 px.
• Вес линий — толщина обводки одинакова: 1,5 px везде или 2 px везде.
• Скруглённость — острые углы или скруглённые — нужно выбрать одно.
• Детализация — лаконичные пиктограммы или детализированные значки. Не смешивать.

SVG, спрайты или иконочный шрифт — что выбрать?

Формат иконки влияет на скорость сайта и удобство работы. SVG — основной формат для современных сайтов. Он масштабируется без потери качества, весит меньше PNG, управляется через CSS (цвет, размер — без редактора), поддерживается всеми браузерами.

Для сайтов на платформе Аспро Allcorp3 мы чаще всего используем SVG-спрайт или inline SVG — тема хорошо с ними работает, а PageSpeed Insights не штрафует за лишние запросы к шрифтам.

Где брать иконки легально и почему лицензия имеет значение

Скачать иконку из поиска — не значит получить право её использовать. Особенно в коммерческих проектах. Нарушение лицензии — это реальный риск: от письма с требованием убрать иконки до судебного иска с взысканием ущерба. Поэтому сначала — источник, потом — скачивание.

Три безопасных пути:

• Наборы с открытой лицензией. Heroicons (MIT), Lucide (ISC), Phosphor Icons (MIT), Tabler Icons (MIT) — всё бесплатно для коммерческих проектов, атрибуция не обязательна. Flaticon, Iconfinder, The Noun Project требуют проверки: у каждой иконки своя лицензия, бесплатный план часто требует атрибуцию, платный — нет.
• Собственная отрисовка. Дизайнер рисует иконки в Figma под ваш брендбук. Дороже, но полностью ваше — нет ограничений на использование, гарантирован уникальный стиль.
• Заказ у дизайнера на основе существующего набора. Берут Open Source-набор как базу, адаптируют под ваши цвета и стиль. Компромисс между бюджетом и уникальностью.

Иллюстрации: плоские, изометрия, 3D, фото или ИИ?

Тип иллюстрации выбирается под характер бренда и задачу, а не «что красивее». Каждый стиль несёт свой сигнал.

• Флэт-иллюстрации — простые фигуры, сдержанная палитра. Хорошо работают для IT-компаний, сервисов, стартапов. Масштабируются легко, быстро рисуются, дёшево обновляются.
• Изометрия — псевдо-3D в плоском стиле. Популярна для технологических продуктов, инфраструктурных схем, B2B. Хорошо читается на экране, создаёт ощущение системности.
• 3D-иллюстрации — живые, объёмные, привлекают внимание. Дорого в производстве, тяжелее как файлы, могут тормозить загрузку. Подходят для Premium-продуктов, landing pages с высоким бюджетом.
• Фото — живые люди, реальные объекты. Повышают доверие (особенно фото команды или клиентов), но стоковые фото с «улыбающимися менеджерами» давно работают против доверия.
• ИИ-генерация — быстро, дёшево, уникально по набору пикселей. В 2026 году стала полноценным рабочим инструментом, но с нюансами — об этом ниже.

Единый визуальный язык: как не собрать «зоопарк» на странице

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

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

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

ИИ-генерация иллюстраций в 2026 году: плюсы и риски

Midjourney, Stable Diffusion, Adobe Firefly, Kandinsky — инструменты стали доступны, результат — впечатляет. Почему же не генерировать всё подряд?

Плюсы очевидны: скорость (минуты вместо дней), стоимость (в разы дешевле иллюстратора), уникальность пикселей (не совпадёт со стоком).

Риски, которые игнорируют:

• Стиль размывается. Если генерировать иллюстрации «по одному запросу за раз», каждая выйдет немного другой. Единого визуального языка не будет. Нужно фиксировать стиль через LoRA, стиль-референс или работать с одним генератором в рамках сессии.
• Права остаются серой зоной. В России и большинстве стран авторское право на ИИ-генерацию юридически не устоялось. Коммерческое использование — на ваш риск. Лучше выбирать инструменты с явной лицензией для коммерции (Adobe Firefly, Kandinsky от Сбера).
• «Насмотренность» падает. Клиент привыкает к «нейростетике» — однотипным иллюстрациям с характерной «стеклянной» гладкостью. Через год-два это будет так же узнаваемо и обесценено, как стоковые фото с рукопожатием в 2015-м.

Оптимизация: вес, скорость и доступность

Красивая иллюстрация, которая весит 2 МБ, — враг сайта. Особенно для пользователей из Петропавловска-Камчатского или Биробиджана, где мобильный интернет бывает нестабильным.

Что делать:

• SVG-иконки минифицировать через SVGO — размер уменьшается в 2–4 раза без потери качества.
• Растровые иллюстрации сохранять в WebP (для фото — с компрессией 80–85%, для иллюстраций — до 90%).
• Применять lazy-load для inline-изображений, которые не видны при первой загрузке страницы.
• Указывать атрибуты width и height — браузер резервирует место до загрузки и не «прыгает» при рендеринге (Cumulative Layout Shift = 0).
• Прописывать alt — не «картинка» и не пустой атрибут, а описание: что изображено и зачем. Это и доступность для незрячих (screen readers), и сигнал для поисковиков.

Подробнее о том, как скорость страниц влияет на позиции и конверсию, рассказываем в блоке о разработке сайтов — там же примеры замеров Core Web Vitals до и после оптимизации.

Частые ошибки с иконками и иллюстрациями

• Иконки из разных наборов. Контурные Feather + залитые Font Awesome + цветные «плоские» иконки из Flaticon на одной странице — это визуальный хаос. Пользователь не может сформулировать проблему, но ощущает «что-то не то».
• PNG вместо SVG. PNG иконка 32×32 px весит 2–5 КБ против 400–800 байт у SVG. На странице с 20 иконками — это разница в 80 КБ. И при Retina-экранах PNG будет нечётким.
• «Пластиковые» стоковые картинки. Мужчина в костюме показывает на диаграмму — этот образ уже работает против доверия. Лучше реальное фото команды или нейтральная иллюстрация, чем идеальный стоковый персонаж.
• Нарушение лицензии. Иконка скачана «с сайта в интернете» без проверки условий использования. В коммерческом проекте это риск.
• Пустой или бессмысленный alt. alt="" — иконка невидима для поисковиков и screen readers. alt="icon-star.png" — не лучше. Нужно описание: что изображено.
• Отсутствие адаптива. Иллюстрация нормально выглядит на десктопе и теряет смысл на мобильном — потому что на маленьком экране все детали сливаются.

Чек-лист по иконкам и иллюстрациям

1. Все иконки из одного набора или нарисованы в одном стиле?
2. Иконки в формате SVG (не PNG)?
3. SVG минифицированы через SVGO?
4. Лицензия проверена — коммерческое использование разрешено?
5. Атрибуция указана там, где требуется?
6. У всех изображений прописан осмысленный alt?
7. Иллюстрации соответствуют палитре и стилю сайта?
8. Растровые файлы в WebP, сжаты до приемлемого веса?
9. Прописаны width и height — нет CLS?
10. Иллюстрации адаптированы под мобильные экраны?

Как было / как стало: пример из практики

Клиент из Хабаровска — компания в сфере B2B-услуг, сайт на Аспро Allcorp3. На странице услуг: иконки из трёх разных наборов (контурные, залитые и цветные), PNG весом 8–15 КБ каждая, стоковое фото «деловая встреча» на главном экране, alt у половины изображений пустой. PageSpeed: 54 на мобильных.

После замены: один набор контурных SVG-иконок (Heroicons, MIT-лицензия), минификация через SVGO, изображения в WebP с правильными alt. Стоковое фото убрали — поставили схематичную изометрическую иллюстрацию в цветах бренда, нарисованную в Figma за два дня работы дизайнера. PageSpeed: 81 на мобильных. Время на странице выросло на 18 секунд по данным Яндекс Метрики.

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

Можно ли использовать иконки из Google Fonts Icons на коммерческом сайте?
Да. Google Material Symbols и Material Icons распространяются под лицензией Apache 2.0 — коммерческое использование разрешено без атрибуции. Это один из самых безопасных вариантов для коммерческих проектов.

Чем отличаются иконочный шрифт и SVG-иконки на практике?
Иконочный шрифт (Font Awesome и подобные) рендерит иконки как символы текста: хуже для доступности, иногда мигает при загрузке, тянет весь пакет даже если используете 10 иконок из тысячи. SVG грузит только нужные иконки, управляется CSS, работает корректно со screen readers. В 2026 году SVG — предпочтительный выбор для новых проектов.

Нужно ли указывать alt для декоративных иконок?
Для иконок, которые несут только декоративную функцию (например, маленькая стрелка-буллет перед пунктом списка), ставьте alt="" — это говорит screen reader'у пропустить элемент. Для иконок, которые несут смысл (например, иконка телефона перед номером), прописывайте осмысленный alt: alt="Телефон".

Как быть с ИИ-иллюстрациями — они легальны для коммерции?
Зависит от инструмента. Adobe Firefly и Kandinsky от Сбера явно разрешают коммерческое использование. Midjourney в платном плане — тоже, но с оговорками. Stable Diffusion на открытых моделях — юридически серая зона, особенно если модель обучалась на защищённых работах. Читайте ToS инструмента перед использованием в коммерческом проекте.

Сколько стоит нарисовать набор иконок с нуля?
Набор из 20–30 простых пиктограмм в одном стиле у дизайнера в Хабаровске — от 8 000–15 000 рублей. Полноценный набор из 50+ иконок с несколькими состояниями — от 25 000 рублей. Альтернатива: взять готовый Open Source-набор и адаптировать цвет и скруглённость под бренд — это 2–4 часа работы дизайнера.

Если хотите привести визуальные элементы своего сайта в порядок — аудит дизайна, подбор иконочного набора, замена иллюстраций входит в нашу разработку сайтов и редизайн. Работаем с проектами в Хабаровске, Владивостоке, Южно-Сахалинске и по всей России. Позвоните, обсудим: 8 800 55-100-10.