Иконки в Figma: где найти, как добавить и подготовить к разработке

Я почти всегда беру иконки для проектов из Figma Community. Там можно найти хорошие бесплатные наборы, заранее посмотреть их и понять, подходят ли они для проекта. Потом просто дублирую файл себе и переношу в проект только то, что действительно нужно.

Но мало просто взять иконку из Community. Перед тем как уехать в продукт, её ещё нужно привести в порядок в Figma. Иначе начинаются всякие неприятные сложности:

• у одной иконки красится заливка, у другой — обводка;
• одну иконку увеличили без проблем, а у второй явно изменилось начертание;
• одну выгрузили в квадратном контейнере, другую — по границам внутреннего вектора;
• и другие малоприятные вещи.

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

Мне нужен именно цельный набор. Даже если сейчас нужна только стрелка, этого, скорее всего, быстро станет мало. Сегодня нужна стрелка, завтра фильтр, послезавтра корзина и ещё двадцать иконок для действий. Если каждый раз приносить иконку из нового пака просто потому, что она понравилась, продукт быстро начинает выглядеть неконсистентно.

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

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

На таких примерах быстрее видно, держится ли общий стиль, одинаково ли заканчиваются линии и не разваливается ли общая логика набора.

Параллельно смотрю автора и лицензию. Бесплатно не значит «можно всё», поэтому обязательно ознакомьтесь с условиями.

Если всё окей и набор мне подходит, я нажимаю Open in Figma и дублирую файл в своё пространство. Так у меня остаётся весь исходный пак, но в продукт я всё равно заберу только нужные элементы.

Плагины я использую как быстрый вход, когда уже знаю, какой набор мне нужен. Если иконку прислал коллега или я скачал её с сайта автора, то беру SVG и просто перетаскиваю в Figma.

Для передачи готовых векторных иконок я беру SVG: его можно редактировать, красить и менять в Figma. PNG тоже можно вставить, но это растровое изображение — редактируемой векторной иконкой оно от этого не станет. Для обмена ассетами между редакторами Figma тоже рекомендует SVG.

Почему иконка не перекрашивается

Такое бывает. Сначала смотрю в слои и свойства. Красишь Fill, а заливается весь фрейм под иконкой или вообще ничего не происходит. Потом оказывается, что красить нужно было Stroke.

У геометрии иконки может быть:

• Fill — заливка формы;
• Stroke — обводка иконки;
• оба свойства сразу;
• несколько слоёв, каждый со своим цветом.

Внешний вид здесь ничего не гарантирует. Если вы видите иконку с тонкими линиями и она вроде бы обведена, то на деле обводка могла быть переведена в кривые через Outline Stroke. Значит, красится уже не Stroke, а Fill.

Поэтому я сначала смотрю на слои и свойства, а потом уже думаю, что перекрашивать.

Цвет я привязываю к переменной из палитры проекта. Выбираю иконку, открываю перекраску Fill или Stroke и выбираю нужную переменную. Сырой hex-цвет без привязки к переменной выглядит безобидно ровно до момента, когда через полгода не можешь вспомнить, почему здесь именно такой цвет.

Как поменять размер и не сломать толщину обводки

Если взять и просто стрелкой растянуть иконку с обводкой с 16 до 24 пикселей, геометрия увеличится, а Stroke может остаться прежним. Получится большая иконка с неожиданно тонкой линией, потому что пропорции не сохранились.

Для пропорционального изменения есть инструмент Scale — горячая клавиша K. Он масштабирует геометрию, обводку и эффекты одновременно. Figma описывает механику в справке по Scale.

Но жить на постоянном скейле мне не нравится. Если в продукте нужны размеры 16, 20 и 24 пикселя, то я готовлю и проверяю их отдельно, один к одному. В другом проекте размерная сетка может быть другой, и универсальных размеров здесь нет.

Саму геометрию иконки помещаю в квадратный фрейм. Круг, стрелка или плотный квадрат при одинаковом размере занимают разное пространство, поэтому внутри приходится смотреть глазами и поправлять оптическое положение. Но снаружи контейнер всегда остаётся предсказуемым.

Так дизайнеру проще работать, а разработчик не выгрузит SVG с рандомными границами.

Зачем переводить иконки в кривые

Мой принцип довольно дедовский: всё и всегда переводи в кривые. SVG хорошо поддерживает и Fill, и Stroke, а при экспорте Figma и сама преобразует обводки в заливки.

Мне важнее порядок внутри файла. Чужая иконка может приехать с линиями, масками, группами и слоями Vector 12. Для одноцветных продуктовых иконок я обычно применяю Outline Stroke, затем Flatten Selection и получаю один вектор с понятным именем.

Делаю примерно так:

1. Сохраняю копию редактируемой Stroke-версии.
2. Проверяю финальный размер и толщину линии.
3. Применяю Outline Stroke, затем Flatten Selection.
4. Называю итоговый слой и ещё раз смотрю на цвет и контейнер.

Для многоцветной иконки или системы, которая специально работает со Stroke, мой способ может не подойти. Это мой дефолтный режим, но не правило SVG.

Перевод Stroke в Outline описан в справке Figma.

Ещё можно спросить разработчика, как иконки живут в проекте. На саму подготовку иконки это, скорее всего, не повлияет, зато станет понятнее, что происходит после передачи.

В коде есть несколько вариантов: отдельные SVG-файлы, спрайт, React- и Vue-компоненты, иконочные шрифты. Каждый вариант ведёт себя по-своему и красится тоже по-своему. Inline SVG прямо в разметке страницы можно покрасить с помощью CSS, например через currentColor. А SVG, подключённый через <img> или background-image, цвет родительского элемента так не наследует: цвет придётся заложить в сам файл или выбрать другой способ подключения.

Выбирать реализацию за разработчика вам не нужно. Достаточно понимать принцип и то, чего команда ждёт от дизайнера.

Обычно я задаю четыре вопроса:

1. Где лежит единственный продакшн-источник иконок?
2. В каком виде туда добавляется новый ассет?
3. Кто отвечает за названия и обновления?
4. Как в коде меняются цвет и размер?

И ещё один вопрос стоит закрыть, если иконка сама работает как кнопка или ссылка: где в коде задаётся её доступное название?

С одной иконкой на этом всё. Но в продукте она почти никогда не остаётся одна, поэтому дальше уже приходится смотреть не на отдельный SVG, а на весь набор.

Как выбрать набор для продукта

Я всегда смотрю на иконки как на набор и перед выбором проверяю:

• хватает ли в нём действий, которые реально есть в продукте;
• нормально ли названы и рассортированы иконки;
• есть ли нужные начертания;
• держится ли стиль на рабочих размерах;
• понятны ли автор и условия использования.

Бесплатные наборы — это нормальный рабочий вариант. Минус здесь ясен: они бесплатные для всех, поэтому те же стрелки и корзины будут встречаться в куче продуктов.

Платные паки в Community тоже давно не редкость. Но и они не делают продукт уникальным.

Если нужен собственный визуальный язык, то это уже работа графических дизайнеров. Но если хочется порисовать самому, у вас есть в наличии прекрасные инструменты: Pen (P), Stroke, Fill и настройки кривых.

Сам я иконки не рисую. Пару раз пробовал, но мне не понравились ни само занятие, ни результат 😁.

Вот несколько больших наборов, с которых точно стоит начать. Они уже стали своего рода нетленкой:

• Phosphor — несколько начертаний, включая fill и duotone;
• Lucide — лаконичные линейные иконки;
• Tabler Icons — outline и filled на общей сетке;
• Iconoir — лёгкое линейное начертание и готовый Community-файл.

У исходников Phosphor, Tabler Icons и Iconoir — лицензия MIT, у Lucide — ISC.

Тысяча и одна иконка для проекта

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

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

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

Дубликат Community-файла, который лежит у вас в пространстве, не обновляется вслед за оригиналом автоматически. Это и хорошо: изменения автора не приедут в рабочий файл неожиданно. Если нужна свежая версия, её придётся продублировать отдельно и осознанно перенести изменения в проект.

Обычно порядок такой:

1. Переношу нужные иконки на страницу или в секцию Icons.
2. Удаляю дубли и привожу названия к одной системе.
3. Помещаю геометрию в подготовленные контейнеры.
4. Делаю каждую иконку отдельным компонентом.
5. Добавляю новые по мере появления реальных задач.

Кстати о компонентах. Иногда вижу решение, где все иконки собраны в один variant set, тянутся из одного компонента и переключаются через заранее настроенный выпадающий список.

Это не круто.

Такой процесс начинает превращать иконки в помойку: превью компонента всегда одно, по текстовому названию не всегда понятно, как выглядит иконка, найти её практически невозможно, а работать с таким списком — тем более. Да и Figma сама не рекомендует собирать разные иконки как варианты.

Максимум, что можно сделать, — собрать в Variants несколько размеров одной иконки. Остальное не ок.

При замене иконки внутри другого компонента я всё равно проверяю цвет. Разные способы замены в Figma ведут себя по-разному.

И ещё несколько вещей:

• Если в наборе не получается найти иконку, я сначала ищу синонимы: edit, pencil, compose, write. Если не помогло, беру максимально похожую и аккуратно дорабатываю, сохраняя толщину, окончания линий, скругления и детализацию.
• Не смешиваю разные паки иконок, чтобы не сломать консистентность продукта. Но если приходится дорисовывать половину набора, проблема уже в самом паке: меняйте его или заказывайте иконки у графического отдела.

Чеклист перед передачей в разработку

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

• Я знаю источник, автора и условия использования иконки.
• Она выглядит частью выбранного набора.
• Размер совпадает со спецификацией проекта, геометрия проверена внутри квадратного контейнера.
• Компонент и финальный вектор можно найти по нормальным именам.
• Экспортирован внешний контейнер, SVG открыт и сравнен с макетом.
• Цвет меняется тем способом, который используется в коде.
• Команда знает продакшн-источник, размеры и владельца обновлений.