Библиотеки иконок и иллюстраций для экономии бюджета
Скрытая статья расходов, которую никто не закладывает в бюджет
Когда клиент присылает бриф на проект, разговор о бюджете почти всегда крутится вокруг экранов: сколько их, насколько они сложные, сколько будет итераций правок. А вот что редко обсуждается — и что незаметно съедает 10-20 часов оплачиваемого времени на проекте среднего размера — так это вспомогательный визуальный слой. Иконки для каждого состояния, иллюстрации для пустых экранов, графика для онбординга, страницы ошибок, героические изображения для маркетинга. Никто не вписывает в план на старте проекта пункт «нарисовать 40 пиктограмм», но в итоге этим кто-то всегда занимается — как правило, в 11 вечера накануне сдачи.
Мне доводилось работать над проектами, где клиент настаивал на полностью кастомной иконографике для B2B-дашборда с 60+ уникальными состояниями — тултипы, фильтры, статусы, действия. Это не дизайнерское решение, а производственное, и оно стоит реальных денег вне зависимости от того, работаете вы почасово или по фиксированной ставке. Одна хорошо проработанная иконка, нарисованная под конкретную сетку и толщину линии, с ревью и правками, легко занимает 20-40 минут сфокусированной работы. Умножьте это на 60 — и вы потратили два-три полных рабочих дня на то, что хорошая библиотека решила бы за один вечер подбора и рестайлинга.
Эта статья — не реклама «бесплатных штук из интернета». Это разбор того, какие системы иконок и иллюстраций реально выдерживают продакшн, какие лицензии выйдут вам боком, и как выстроить повторяемый workflow, чтобы это решение не приходилось заново обсуждать на каждом проекте.
Почему это бюджетная проблема, а не только дизайнерская
У кастомной работы над иконками и иллюстрациями есть странное свойство: по отдельности она выглядит дёшево («это же просто простая иконка»), но крайне плохо масштабируется. Лендингу нужно, может быть, 8-12 иконок. SaaS-дашборду — 80-150 по всем состояниям и модулям. Мобильному приложению с онбордингом, пустыми экранами и обработкой ошибок легко может понадобиться 15-25 иллюстраций плюс полный набор иконок. Если оценивать кастомную иллюстрацию в $80-250 за штуку (консервативный фриланс-диапазон в зависимости от сложности и рынка), то один только флоу онбординга из 20 иллюстраций обойдётся в $1 600-5 000 — ещё до всяких иконок.
Клиенты, оценивающие смету, редко видят эту разбивку — именно поэтому она превращается в спор при обсуждении объёма работ. Способ избежать этого спора — решить ещё на этапе предложения, какие визуальные активы структурные (обязательно кастомные, критичные для бренда), а какие утилитарные (могут быть взяты из хорошо подобранной библиотеки). Правильно провести эту границу для вашей маржи важнее, чем почти любое другое отдельное решение в проекте.
Библиотеки иконок, которые реально выдерживают продакшн
Не все наборы иконок одинаковы, и разница между ними важнее, чем кажется на первый взгляд. Библиотека с непоследовательной толщиной линий, несовпадающими радиусами углов или неполным набором состояний (только «outline», без «filled»-варианта для активных состояний) заставит вас потратить больше времени на латание дыр, чем она изначально сэкономила. Вот что я реально использую и почему.
Phosphor Icons
Phosphor, на мой взгляд, сейчас лучший бесплатный вариант общего назначения для продуктового интерфейса. Он поставляется в шести начертаниях (thin, light, regular, bold, fill, duotone), что критически важно для интерфейсной работы — вам почти всегда нужно состояние «по умолчанию» и «активное/выбранное», и когда оба варианта встроены в одно семейство с согласованной геометрией, не приходится искать подходящую заполненную версию из другого набора. Библиотека покрывает более 9 000 иконок — этого достаточно широко, чтобы редко наталкиваться на пробелы для типовых UI-концепций. Лицензия MIT, так что коммерческое использование, модификация и включение в состав продукта разрешены без требований по указанию авторства. Для агентств именно эта лицензия — главный плюс: можно включать набор в клиентские поставки, не отслеживая атрибуцию по каждому проекту.
Lucide
Lucide — форк ныне замороженного проекта Feather Icons, активно поддерживаемый и ставший стандартным выбором для многих современных веб-приложений (он идёт «из коробки» с несколькими популярными библиотеками компонентов). Его сила — в сдержанности: единая сетка 24px, единообразная толщина линии, минимум декоративных элементов. Это не тот набор, к которому обращаются за характером — это набор, к которому обращаются, когда хотят, чтобы иконки «растворились» в интерфейсе и не отвлекали от контента. Тоже под лицензией MIT, тоже бесплатный, тоже есть пакеты для React/Vue/Svelte, так что разработчикам не приходится вручную импортировать SVG.
Untitled UI Icons
Эта библиотека заслуживает больше внимания, чем обычно получает. Untitled UI (больше известный своим Figma UI-китом) поставляет по-настоящему огромную библиотеку иконок — тысячи штук в едином стиле, организованные по категориям, спроектированные специально для продуктовых интерфейсов, а не для общей иллюстрации. Бесплатный тариф щедрый; платный (в комплекте с полным UI-китом) — одна из лучших покупок, которые я делал для повторяющейся работы с клиентами, потому что иконки идут в паре с компонентами, а значит выбор иконок и стилистика кнопок/полей ввода берутся из одного дизайн-языка. Если ваша студия много работает с дашбордами и SaaS, эта покупка окупится уже на первом проекте.
Iconoir
Iconoir стоит знать в первую очередь из-за широты менее распространённых тематик — логистика, медицина, финансы, — которых иногда не хватает Phosphor и Lucide. Лицензия MIT, более 1 600 иконок, хорошо подходит в качестве вторичного набора, когда основная библиотека не покрывает нишевую вертикаль.
Font Awesome (с оговорками)
Font Awesome — имя, известное всем, и это по-прежнему разумный вариант, но будьте осторожны: бесплатный тариф заметно меньше и стилистически менее однороден по сравнению с Pro-версией, а многие «современные» duotone- и sharp-стили спрятаны за подпиской. Если у клиента уже есть лицензия Font Awesome Pro от предыдущего подрядчика — используйте её, не заставляйте платить дважды. Но если начинаете с нуля, Phosphor или Untitled UI дадут больше пользы за те же деньги.
Платный тариф, за который действительно стоит платить: Streamline
Streamline (streamlinehq.com) — подписочная система иконок и иллюстраций с огромным каталогом в десятках визуальных стилей: line, filled, flat color, 3D, hand-drawn. Особенно стоит упомянуть её вот почему: она решает проблему «нам нужны иконки И иллюстрации в одном визуальном языке» одной покупкой. Если клиент хочет узнаваемую, слегка кастомную визуальную идентичность, но не имеет бюджета на индивидуальную иллюстрацию, платные стили Streamline дают 80% результата за долю стоимости, а модель подписки означает, что не придётся покупать заново на каждом проекте, если студия уже взяла инструмент на вооружение.
Чего стоит избегать
Держитесь подальше от наборов иконок внутри «мега-бандлов UI-китов», продающихся на маркетплейсах с расплывчатыми страницами лицензий. Я видел не один проект, где дизайнер использовал иконки из бандла за $19 с маркетплейса, а через полгода юротдел клиента обнаружил, что лицензия покрывает только один конечный продукт, а не разросшуюся с тех пор SaaS-платформу. Читайте текст лицензии, а не маркетинговую страницу. Если где-то в лицензии написано «личное использование» или «один проект» — не используйте это для клиентской работы без апгрейда до коммерческой лицензии на руках, и зафиксируйте это письменно там, где команда сможет это найти позже.
Системы иллюстраций, которые не выглядят как сток
Иллюстрации — более сложная задача. Иконки достаточно малы и утилитарны, чтобы стилистическая согласованность скрывала большинство недостатков. Иллюстрации крупные, заметные и мгновенно узнаваемые, если используются по всему интернету — и это главный риск бесплатных библиотек иллюстраций. Ничто так быстро не подрывает подачу «премиального, кастомного бренда», как та же самая иллюстрация пустого состояния у конкурента клиента.
unDraw
unDraw остаётся самым полезным бесплатным вариантом именно благодаря одной функции: цветовому пикеру, позволяющему перекрасить любую иллюстрацию под палитру бренда перед скачиванием. Одна эта функция маскирует «это бесплатная иллюстрация» лучше любого другого бесплатного приёма. Она не обманет искушённую в дизайне аудиторию, но для внутренних инструментов, админ-панелей и B2B-софта, где никто не всматривается в стиль иллюстраций, этого действительно достаточно, к тому же это бесплатно для коммерческого использования без указания авторства.
Humaaans
Humaaans (авторства Pablo Stanley) — модульная система иллюстраций: персонажи собираются из взаимозаменяемых частей тела, поз и аксессуаров. Сила здесь — глубина кастомизации: два проекта на Humaaans редко выглядят одинаково, потому что число комбинаций достаточно велико для получения разных результатов. Стиль сейчас уже устарел (плоский, скруглённый вид «corporate memphis» превратился в визуальный штамп), поэтому я бы использовал его выборочно, а не по умолчанию — он хорошо работает для игривых потребительских продуктов, но в энтерпрайз-контексте выглядит слишком общо.
Storyset
Storyset (от Freepik) предлагает анимированные и статичные иллюстрации, организованные по категориям, с аналогичным unDraw инструментом перекраски. Экспорт анимированных SVG — по-настоящему полезное отличие для флоу онбординга и маркетинговых сайтов, где немного движения добавляет ощущение проработанности без заказа кастомной анимации. Бесплатный тариф требует указания авторства; платный убирает это требование и открывает больше стилей — оправдано, если вы используете Storyset в нескольких клиентских проектах, поскольку требование атрибуции в клиентской коммерческой работе часто изначально неприемлемо.
Blush
Blush объединяет стили иллюстраций от множества независимых иллюстраторов в одну платформу для поиска и микширования, с плагином для Figma для прямого импорта и перекраски. Это ближе к маркетплейсу, чем к единой библиотеке стилей, а значит можно реально подбирать стиль под конкретную личность бренда, а не довольствоваться тем, что предлагает одна система. Часть стилей бесплатна, многие платные — по отдельной лицензии или подписке. Для клиентской работы, где иллюстрация должна ощущаться осознанным выбором, а не общим местом, Blush часто оказывается лучшим вариантом между «бесплатной библиотекой» и «заказом у иллюстратора».
Open Peeps
Open Peeps, от того же автора, что и Humaaans, — библиотека персонажей в рисованном, набросочном стиле, под лицензией CC0, то есть без каких-либо ограничений, даже без указания авторства. Более грубая эстетика читается как более самобытная на фоне ультра-гладких векторных стилей, доминирующих в этой нише, и хорошо сочетается с редакционными или лайфстайл-брендовыми продуктами, где слегка «человечный», неидеальный стиль иллюстрации — как раз и есть цель.
ManyPixels и DrawKit
Оба сервиса предлагают подписочные библиотеки иллюстраций с более широким диапазоном стилей, чем бесплатные варианты, включая более изысканные, менее «corporate memphis» эстетики. Стоит рассмотреть, если ваша студия регулярно нуждается в иллюстрациях, а стоимость подписки ($20-40/месяц в зависимости от плана) за год выходит дешевле, чем даже два-три заказанных набора иллюстраций. Прежде чем подписываться, посчитайте это относительно реального объёма ваших проектов — подписка экономит деньги только если её достаточно активно использовать.
Настоящая стоимость иллюстрации — не в рисовании, а в поиске. Дизайнер, который точно знает, в какой из шести библиотек найдётся нужный стиль для онбординга финтех-продукта, сэкономит больше времени, чем более быстрый иллюстратор, каждый раз начинающий с чистого листа в Figma.
Лицензионные ловушки, которые незаметно съедают бюджет
Этот раздел реально защищает вашу маржу, так что прочитайте его, даже если пропустили всё остальное. Любая библиотека иконок или иллюстраций попадает в одну из нескольких категорий лицензий, и путаница между ними — типичная причина, по которой студиям приходится оплачивать юридическую уборку или переделывать визуальные активы посреди проекта.
MIT / CC0 — безопасный вариант по умолчанию
Лицензии MIT и CC0 функционально самые безопасные для коммерческой клиентской работы: не требуют указания авторства, не ограничивают модификацию, не лимитируют число конечных продуктов или пользователей. Phosphor, Lucide, Iconoir и Open Peeps — все сюда относятся. Когда вы собираете переиспользуемую внутреннюю библиотеку для студии (об этом ниже), отдавайте приоритет активам именно с такими лицензиями — вам никогда не придётся возвращаться и перепроверять условия перед повторным использованием на 47-м клиенте.
«Бесплатно с указанием авторства» — нормально для одних проектов, проблема для других
Бесплатный тариф Storyset и многие активы Flaticon/Freepik требуют видимой ссылки на авторство, как правило, в футере или на странице благодарностей. Это вполне приемлемо для маркетингового сайта или личного проекта. Но это реальная проблема для white-label SaaS-продукта, внутреннего энтерпрайз-инструмента без публичного футера или для любого клиента, который явно не хочет, чтобы его продукт выглядел построенным на бесплатных активах. У меня были клиенты, жёстко возражавшие против требования атрибуции именно потому, что оно сигнализирует их собственным клиентам «мы не вложились в это» — справедливо это или нет, но это реальный риск восприятия, который стоит обозначить заранее, а не выяснять на поздней стадии.
Лицензии «один проект» / «один конечный продукт»
Это ловушка, в которую фрилансеры попадают чаще всего. Многие бандлы с маркетплейсов (Envato, Creative Market, UI8) лицензируют активы на проект или на конечный продукт, а не на студию. Если вы купили пакет иллюстраций для клиента А, а потом повторно используете активы из него для клиента Б без расширенной лицензии, формально вы нарушаете условия — а если юротдел любого из клиентов когда-нибудь проверит соответствие поставщиков (что всё чаще случается у энтерпрайз-клиентов с проверками безопасности и интеллектуальной собственности), отвечать придётся именно вам, а не маркетплейсу.
Решение простое, но требует дисциплины: покупая пакет активов, сразу отмечайте во внутреннем трекере активов (подойдёт даже простая таблица), какой уровень лицензии куплен и для каких клиентов он действителен. Не полагайтесь на память полгода спустя.
Подписочные библиотеки и вопрос «что будет после отмены подписки»
Streamline, Envato Elements, ManyPixels и подобные подписочные модели, как правило, позволяют сохранять и использовать активы, скачанные во время активной подписки, даже после её отмены — но это всегда стоит уточнять в конкретных условиях, потому что практика различается. Это важно при передаче проекта клиенту: если вы поставляете продукт с иконками из подписочного сервиса, а через два года ваша подписка истекает, остаётся ли дальнейшее использование клиентом легитимным? Большинство надёжных сервисов отвечают «да» (лицензия привязана к скачанному файлу, а не к статусу вашего аккаунта), но «большинство» — не «все», и это именно та вещь, которую стоит подтвердить и задокументировать до того, как визуальная идентичность клиентской поставки будет построена на арендованной библиотеке.
Иконки и иллюстрации, сгенерированные ИИ — новая серая зона
С ростом использования Midjourney, DALL-E и Adobe Firefly для быстрой генерации иллюстраций лицензирование стало не яснее, а мутнее. Коммерческие условия Adobe Firefly — самые чистые из всех именно потому, что Adobe обучала модель на лицензированном контенте Adobe Stock и предоставляет энтерпрайз-пользователям гарантии защиты от претензий по интеллектуальной собственности — что крайне важно, если вы поставляете продукт клиенту с низкой толерантностью к риску, вроде банка или медицинской компании. Условия владения результатом и гарантий у Midjourney и DALL-E слабее и неоднократно менялись по мере развития инструментов. Если клиент спрашивает, «безопасно» ли использовать визуалы, сгенерированные ИИ, в коммерческих целях, честный ответ на сегодня такой: безопаснее с энтерпрайз-условиями Firefly, чем с личной подпиской Midjourney — и это стоит проговорить прямо, а не позволять клиенту думать, что все ИИ-инструменты несут одинаковый риск.
Когда кастомная работа всё ещё оправдана
Всё вышесказанное — не аргумент в пользу того, что заказывать кастомные иконки или иллюстрации не нужно никогда. Это аргумент за осознанность в вопросе, где кастомная работа оправдывает свою стоимость. Есть три ситуации, в которых я по-прежнему подталкиваю клиентов к кастому, даже зная, что это дороже.
Фирменный знак и герой-визуалы
Всё, что появляется в крупном масштабе, в маркетинговых контекстах или регулярно на публичных точках контакта с брендом, должно быть кастомным или как минимум сильно доработанным на основе лицензированной базы. Герой-иллюстрация на главной странице выполняет работу по построению бренда, а не просто заполняет пространство — это одна из первых вещей, на которую падает взгляд посетителя, и узнаваемая стоковая иллюстрация подрывает доверие так, как обычная иконка в дашборде никогда не сможет.
Наборы иконок, привязанные к уникальной продуктовой концепции
Если у продукта есть по-настоящему новая базовая концепция — уникальная визуализация данных, специфическая метафора рабочего процесса, — иконки, представляющие эту концепцию, обычно нельзя взять из общей библиотеки, потому что такой концепции просто не существует ни в одном готовом наборе. Это небольшая часть любого списка иконок (обычно менее 10% от общего числа даже в сложных продуктах), но её стоит выявить заранее, чтобы заложить кастомное время именно на неё, а всё остальное брать из библиотек.
Сильно регулируемые или чувствительные к безопасности индустрии
У некоторых энтерпрайз-клиентов — банков, медицинских компаний, компаний, близких к оборонному сектору — процессы закупок или юридической проверки помечают лицензии сторонних активов как риск в цепочке поставок. В таких случаях даже безупречная лицензия MIT может создать трение, потому что их юротдел в принципе не хочет проверять внешние условия лицензий. Для таких клиентов заложите стоимость кастомной иллюстрации и иконок в предложение с самого начала, а не пытайтесь ввести её позже как допсоглашение — это избавит от неловкого разговора о том, почему «простые» иконки внезапно стали дороже.
Создание переиспользуемой внутренней библиотеки — реальная экономия бюджета
Самый эффективный шаг здесь — не выбрать правильную библиотеку для одного проекта, а построить собственную курируемую, заранее проверенную систему активов, которую вы переиспользуете в каждом клиентском проекте. Именно это по-настоящему накапливает экономию со временем, а не просто решает задачу текущего проекта.
Ведите файл-библиотеку в Figma, а не папку со скачанными файлами
Заведите отдельный файл в Figma (или два — один для иконок, другой для референсов иллюстраций), с компонентами, аккуратно организованными по страницам и категориям: навигация, действия, статусы, коммуникация, файлы и так далее. Каждая иконка должна быть полноценным компонентом Figma, а не растровым изображением, чтобы команда могла менять толщину линии или цвет через варианты, а не заново импортировать SVG на каждом проекте. Эти вложенные заранее организационные затраты окупаются уже на втором проекте и на каждом следующем.
Отслеживайте лицензии в том же файле
Добавьте страницу документации внутри этой библиотеки Figma, где перечислено, откуда именно взят каждый набор иконок или иллюстраций, какая лицензия применяется и какие есть ограничения. Это превращает юридический вопрос, который раньше требовал двадцати минут раскопок, в пятисекундную проверку, а новый сотрудник или субподрядчик, присоединившийся к проекту, может найти ответ сам, а не гадать.
Стандартизируйте одно основное семейство иконок на клиента, а не на проект
Если у клиента несколько продуктов или продолжительное сотрудничество на условиях ретейнера, удержитесь от соблазна вводить новую библиотеку иконок для каждой новой фичи или подпродукта. Несогласованные семейства иконок в рамках экосистемы одного клиента — это заметная и полностью избегаемая проблема качества: выберите одно основное семейство (скажем, Phosphor для всей линейки продуктов клиента) и относитесь к отклонениям как к исключениям, требующим обоснования, а не как к варианту по умолчанию.
Ведите «список пробелов» по мере работы
Каждый раз, когда вы не можете найти подходящую иконку или иллюстрацию, фиксируйте это, а не просто решайте проблему на месте. За несколько проектов этот список выявит закономерности — возможно, вашей студии постоянно нужна финансовая иконография, или вы постоянно нуждаетесь в иллюстрациях на тему удалённой работы. Эта закономерность — как раз тот сигнал, что небольшой набор на заказ (скажем, 15-20 иконок от фрилансера-иллюстратора, что обычно обходится намного дешевле, чем заказывать их на каждом проекте отдельно) начинает окупаться на будущих проектах, вместо того чтобы латать один и тот же пробел раз за разом.
Закладывайте стоимость библиотеки в ставку, а не в отдельные сметы
Если вы платите за Untitled UI, Streamline или похожую подписку, не пытайтесь выносить отдельной строкой «$12 за иконки» в каждый клиентский счёт — это выглядит мелочно и провоцирует пристальное внимание ко всем остальным пунктам сметы. Вместо этого включите стоимость подписочных инструментов в накладные расходы и отразите их в почасовой или проектной ставке — так же, как вы бы поступили с местом в Figma или лицензией на шрифт. Клиентов интересует результат и общая стоимость, а не подробная разбивка того, каким инструментом за $9/месяц вы пользовались, чтобы его достичь.
Практическая схема принятия решений
Когда приходит новый проект, я прохожу примерно такую последовательность шагов перед тем, как называть смету на иконки или иллюстрации, и советую сделать этот шаг явной частью вашего процесса оценки объёма работ, а не полагаться на интуицию.
- Определите, какие визуальные активы критичны для бренда (герой-иллюстрации, знаки, близкие к логотипу), а какие утилитарны (интерфейсные иконки, второстепенные пустые состояния).
- Для утилитарных активов сначала проверьте внутреннюю библиотеку — скорее всего, предыдущий проект уже закрыл 80% потребности.
- Для пробелов сначала проверяйте источники MIT/CC0 (Phosphor, Lucide, Iconoir, Open Peeps, unDraw), прежде чем обращаться к платным подпискам.
- Если индустрия клиента регулируемая или чувствительная к рискам, явно обозначьте вопросы лицензирования в предложении, а не считайте, что всё в порядке по умолчанию.
- Оставляйте кастомный заказ для фирменных знаков, новаторских продуктовых концепций и всего, что заметно появляется в маркетинговых контекстах.
- Фиксируйте любые обнаруженные пробелы для дальнейшего использования и периодически проверяйте, не выйдет ли дешевле закрыть повторяющийся пробел небольшим кастомным заказом, чем продолжать латать его от проекта к проекту.
По отдельности всё это несложно. Ценность появляется, когда вы делаете это последовательно, проект за проектом, пока это не перестанет быть решением и не станет workflow по умолчанию. В этом и есть весь смысл подхода на основе библиотек к бюджету: дело не в том, что какой-то один бесплатный набор иконок достаточно хорош — дело в том, чтобы убрать целую категорию повторяющихся, избегаемых расходов из каждого проекта, который вы берёте, чтобы реальное дизайнерское время уходило на задачи, уникальные именно для этого клиента, а не на задачи, которые десятки других дизайнеров уже решили и выложили в открытый доступ бесплатно.