Заказ иконок для сайта чаще всего идёт по остаточному принципу: верстаем, потом думаем про графику. Через 2 недели разработки выясняется, что в Figma пусто, дизайнер заказан на других проектах, а на стоках лежат одинаковые серые наборы. Сайт получает гладкую вёрстку с лицом из 2015 года и теряет 10-20% к удержанию на первом экране. Этого можно избежать, если планировать графику параллельно с прототипом.
Этот гайд написан по опыту 550+ проектов студии Сайты2.рф из Кронштадта (СПб). С 2008 года мы делали корпоративные сайты, лендинги, интернет-магазины и под каждый собирали свою графику: иконки, иллюстрации, паттерны. Внутри: 4 типа графики и где они нужны, 8 пунктов брифа дизайнеру, типичные ошибки заказчиков, цены в СПб на 2026 год, сравнение AI-генерации и ручной работы, чек-лист приёмки.
Зачем сайту фирменные иконки
Стоковые иконки решают одну задачу - заполнить место. Фирменные решают четыре: создают узнаваемость, отстраивают от конкурентов, ведут взгляд по странице, упрощают сложные смыслы. Заметно на сайтах услуг и B2B, где нет фотографий продукта.
Сравните два сценария. В первом дизайнер берёт пак иконок с FlatIcon - 30 одинаковых серых пиктограмм. Сайт выглядит как ещё один шаблон. Во втором дизайнер рисует 12 фирменных иконок в брендовой палитре с одним акцентным элементом - сайт запоминается, отличается от 10 конкурентов в поиске.
Прямая экономика: фирменные иконки повышают доверие к бренду на первом экране, что улучшает поведенческие в Яндекс.Метрике и конверсию посадочной. При редизайне или новом запуске закладывайте графику в смету сразу, а не "после вёрстки".
4 типа графики на сайте
В корпоративном сайте, лендинге или интернет-магазине обычно нужны 4 типа графики. Каждый со своим назначением, бюджетом и сроком.
1. SVG-иконки. Минимальные пиктограммы 24×24 или 48×48 пикселей для меню, услуг, преимуществ, шагов процесса. Векторный формат, масштабируются без потери качества. Стандартный набор для лендинга - 8-12 штук в едином стиле (line, fill или duotone). Стоимость 8-30 тысяч рублей за пак.
2. Иллюстрации сцен. Полноразмерные картинки 1200×800 для hero-блока, баннеров, разделов "О компании", "Процесс работы". Это герои, рабочие сцены, абстрактные композиции в стиле бренда. Стоят 5-20 тысяч за штуку, на лендинг обычно 2-4 сцены.
3. Паттерны и декор. Бесшовные фоны, орнаменты, разделители секций, фоновые формы. Создают ритм страницы, разбавляют монотонность. Стоят 5-15 тысяч за пак из 3-5 элементов. Часто заказывают вместе с редизайном сайта.
4. Инфографика. Сложные визуализации: схемы процесса, графики, сравнительные таблицы, карты. На стороне дизайнера - визуальный язык, на стороне копирайтера - данные. Стоят 8-25 тысяч за единицу. Подробнее про связь с текстом - в гайде продающий текст для сайта.
Под лендинг обычно собирают комплект из всех 4 типов: пак иконок + 2-3 иллюстрации + 1-2 паттерна + 1 инфографика. Бюджет на графику 50-150 тысяч рублей.
Бриф дизайнеру: 8 обязательных пунктов
Бриф - это документ, который превращает абстрактное "хочу красивые иконки" в конкретное ТЗ. Без брифа дизайнер угадывает, а заказчик потом переделывает 3 раза. 8 пунктов, которые мы заполняем перед стартом.
1. Стиль. Конкретный визуальный язык: flat, line, duotone, isometric, 3D, hand-drawn, mixed. Покажите 3-5 референсов с других сайтов или Dribbble. Если стиль уже есть в брендбуке - дайте ссылку.
2. Палитра. Основные и акцентные цвета в HEX. Если у бренда есть гайдлайн, дизайнер должен взять оттуда. Если нет - сначала фиксируем палитру на встрече, потом рисуем иконки. Норма для иконки - 2-3 цвета, не больше.
3. Размеры и форматы вывода. Для SVG-иконок: базовый размер (24×24 или 48×48), padding внутри bounding box, толщина обводки. Для иллюстраций: ширина в пикселях, соотношение сторон, формат экспорта (SVG, PNG, WebP).
4. Лицензия и права. Договоритесь явно: исключительные права (заказчик владеет графикой, может использовать везде) или ограниченные (только для одного сайта). Цена отличается в 1,5-3 раза. Для бренда лучше выкупать исключительные.
5. Исходники. Просите всегда: исходный Figma-файл, AI или Affinity-файл, послойный PSD. Без исходников вы не сможете быстро добавить новую иконку в этом же стиле через год. Готовые экспорт-файлы без исходников = ловушка.
6. Количество вариантов. Стандарт: 2-3 концепции на старте, потом 2 раунда правок выбранной. Что выходит за рамки 2 раундов - оплачивается отдельно. Зафиксируйте в договоре до старта.
7. Сроки этапов. Не "сдать всё за месяц", а конкретные этапы: концепты - 5 рабочих дней, правки - 3 дня, финал - 5 дней, исходники - 2 дня. Так контролируете прогресс. Связано с подходом приёмки сайта у студии.
8. Каталог результатов. Список всех файлов, которые должны быть на финале: 12 SVG-иконок в hover/active, 3 иллюстрации в WebP+SVG, инструкция по применению, гайд по добавлению новых элементов в стиле бренда. Без каталога часть файлов "потеряется".
Типичные ошибки заказчиков
5 ловушек, в которых заказчики теряют деньги и время на этапе заказа графики.
1. "Ловить тренды". Заказчик увидел на Behance модный 3D-стиль и попросил такой же. Через год тренд устарел, сайт выглядит привязанным к одной эпохе. Брендовая графика должна быть на 5+ лет, не на полгода. Берите проверенные базовые стили (flat, line, duotone).
2. "Заказать сразу финал без черновиков". Заказчик просит дизайнера сразу рисовать 12 иконок без концепта. Дизайнер тратит 2 недели, заказчику не нравится, переделывают 3 раза. Правильно: 2-3 концепта на 1-2 иконках, выбор направления, потом масштабирование на весь пак.
3. "Сами разберёмся с лицензией". Заказчик не уточнил, кто владеет правами. Через год дизайнер требует доплату или запрещает использовать графику в новых проектах. Включайте передачу исключительных прав в договор.
4. "Подкупить дешёвыми иконками с Flaticon". Бесплатные иконки требуют атрибуции - её придётся прятать в футере. Платная подписка на Streamline или Iconify - вариант на старте, но не замена фирменному стилю.
5. "Не подумали про hover и состояния". Заказали статичные иконки без hover, active, disabled. На сайте они выглядят мёртво. Каждой ключевой иконке нужны минимум 2 состояния: обычное и hover. Подробнее про мелкие детали интерфейса - в гайде конверсия сайта.
Цены в СПб на 2026
Ориентир по рынку Санкт-Петербурга и Ленинградской области на 2026 год. Цены за единицу и за пак.
| Тип графики | Цена за единицу | Цена за пак | Срок |
|---|---|---|---|
| SVG-иконка простая (line/flat) | 1 500-3 000 ₽ | 12 шт: 15 000-30 000 ₽ | 5-10 дней |
| SVG-иконка с детализацией | 3 000-6 000 ₽ | 12 шт: 30 000-60 000 ₽ | 7-14 дней |
| Иллюстрация сцена | 8 000-25 000 ₽ | 3 шт: 25 000-70 000 ₽ | 10-20 дней |
| 3D-иллюстрация | 15 000-40 000 ₽ | 3 шт: 40 000-100 000 ₽ | 15-30 дней |
| Паттерн фоновый | 3 000-8 000 ₽ | 5 шт: 12 000-30 000 ₽ | 5-10 дней |
| Инфографика | 8 000-25 000 ₽ | - | 5-10 дней |
Биржевые цены 200-500 рублей за иконку существуют, но за ними - шаблоны с заменой цвета. Для бренда не подходит. Студийные комплекты графики под лендинг - 50-150 тысяч рублей за полный пакет. На корпоративный сайт - 100-300 тысяч. Связано с темой стоимость разработки сайта.
AI-генерация vs ручная работа
С 2024 года иконки и иллюстрации генерируют через Midjourney, DALL-E, gpt-image, Stable Diffusion. Рынок меняется, но дизайнера AI не заменяет. Где работает, где нет.
AI хорошо справляется:
- Концепты и черновики для дискуссии с заказчиком (1 час вместо 1 дня).
- Стоковые иллюстрации в нестандартном стиле (взамен покупки на Shutterstock).
- Декор и паттерны без жёстких требований к деталям.
- Hero-картинки для блога и второстепенных страниц.
AI пока не справляется:
- Векторные SVG-иконки в едином стиле (нужно постпроизводство в Illustrator).
- Точная палитра по бренду (модели промахиваются на 5-15%).
- Системность пака из 12+ элементов (каждая итерация немного отличается).
- Сложная инфографика с конкретными данными.
Гибридный подход работает лучше всего: AI делает 60-70% работы (концепты, основа, заливка), дизайнер доводит руками 30-40% (палитра, унификация стиля, экспорт SVG). Стоимость пака иконок снижается на 30-50%, срок на 40-60%. Студия использует gpt-image-2 для генерации иллюстраций сцен в брендовой палитре с одним акцентом. Подробнее про подход - в материале как заказать иллюстрации через AI.
Чек-лист приёмки
10 пунктов, по которым принимаем графику от дизайнера. Используем на этапе финальной сдачи.
- [ ] Все файлы названы по системе (icon-arrow-right.svg, illustration-hero.svg).
- [ ] SVG оптимизированы через SVGOMG, размер каждой ≤5 КБ.
- [ ] PNG и WebP-версии всех иллюстраций (для fallback).
- [ ] Hover-, active-, disabled-состояния для интерактивных иконок.
- [ ] Палитра соответствует брендбуку (или утверждённой палитре).
- [ ] Все элементы вписаны в общий стиль (не разнобой).
- [ ] Исходники переданы: Figma-файл, AI-файл, послойный PSD.
- [ ] Передача исключительных прав оформлена документально.
- [ ] Инструкция по использованию: где какую иконку применять.
- [ ] Гайд по добавлению новых элементов в этом же стиле.
Сверка по 10 пунктам экономит 2-3 недели на пересдачах через полгода. Процедуру студия применяет для клиентов на технической поддержке и в проектах редизайна.
FAQ
Сколько стоит заказ иконок для сайта в СПб?
Простой пак из 12 SVG-иконок в стиле line или flat - 15-30 тысяч рублей. С детализацией и анимацией - 30-60 тысяч. Полный комплект графики на лендинг (иконки + 3 иллюстрации + паттерн) - 50-150 тысяч рублей.
Можно ли использовать бесплатные иконки с Flaticon или Iconify?
Для прототипа и тестового запуска - да. Для бренда не подходит: одинаковые иконки на тысячах сайтов снижают узнаваемость. Платная подписка на Streamline или Iconify - компромисс на старте.
В чём разница между line, flat, duotone и 3D-стилем?
Line - тонкие контуры без заливки (минимализм, IT, B2B). Flat - плоские заливки без объёма (классика, лендинги). Duotone - две цветовые плоскости с эффектом наложения (модно, бренды 2024-2026). 3D - объёмные с тенями (промо, e-commerce).
Сколько раундов правок входит в стандарт?
2 раунда правок выбранной концепции после согласования направления. Что выходит за рамки - оплачивается по часовой ставке дизайнера или отдельным договором. Фиксируйте в брифе.
Нужны ли исходники в Figma и AI-файлах?
Обязательно. Без исходников через год вы не сможете добавить новую иконку в этом же стиле, придётся заказывать заново. Передача исходников + исключительные права = стандарт договора.
Кто пишет ТЗ на иконки: заказчик или дизайнер?
Заказчик пишет бриф (8 пунктов выше), дизайнер превращает его в техзадание с визуальной mood-доской. На малых проектах оба этапа делает дизайн-студия. Связано с темой бриф на разработку сайта.
Можно ли сгенерировать иконки через AI и не платить дизайнеру?
Можно, но получится разнобой. AI не держит единый стиль на паке из 12+ иконок. Гибридный подход (AI + правки дизайнера) экономит 30-50% бюджета. Без дизайнера - подходит только для прототипа.
Что в итоге
Заказ иконок для сайта - процесс из 4 типов графики, брифа на 8 пунктов и чек-листа приёмки на 10 пунктов. Простой пак SVG-иконок обходится в 15-30 тысяч, полный комплект графики на лендинг - 50-150 тысяч рублей. Экономия на графике через стоки и Flaticon снижает узнаваемость бренда и доверие на первом экране. AI ускоряет процесс на 30-50%, но не заменяет дизайнера для системных проектов.
Студия Сайты2.рф из Кронштадта (СПб) с 2008 года делает сайты с фирменной графикой: 550+ проектов, NPS 9,2, 22 специалиста, средний рост заявок x2,4. Звоните +7 (812) 942-47-44, пишите в Telegram @t9424744 или на 9424744@gmail.com. Адрес: Кронштадт, ул. Карла Либкнехта 15б/6. Работаем по Санкт-Петербургу и Ленинградской области: Гатчина, Выборг, Сосновый Бор, Всеволожск, Тосно, Кировск, Пушкин. Рассчитаем стоимость сайта с комплектом фирменной графики за 1 рабочий день.
