Разделы

Бесплатные иконки для Figma: как импортировать, настроить и перекрасить

Чтобы работать с бесплатными иконками в Figma, скачайте их в SVG или скопируйте SVG-код и вставьте на холст: Figma превратит файл в редактируемый вектор. Затем оформите каждую иконку компонентом фиксированного размера, например 24×24, настройте цвет через обводку или переменные и вставляйте в кнопки с auto layout как экземпляры. Ниже — все шаги по порядку.

Какие иконки подойдут

Для интерфейсов удобнее всего линейные иконки на сетке 24×24 с обводкой 1,5 px: они аккуратно встают в кнопки, поля ввода и меню. Для активных состояний — выбранной вкладки, добавленного в избранное — пригодятся иконки с заливкой. Базовый комплект для макета — поиск, меню, настройки, пользователь, уведомления — собран в категории «Интерфейс». Все иконки freeicons бесплатны для коммерческих проектов и не требуют указания автора.

Импорт SVG в Figma

  1. Перетащите файлы. Выделите несколько SVG в проводнике или Finder и перетащите на холст — каждая иконка станет отдельным фреймом с вектором внутри.
  2. Вставьте код. На странице иконки нажмите «Копировать SVG-код» и вставьте его в Figma через Ctrl+V (⌘V на Mac). Так быстрее, чем скачивать файл.
  3. Добавьте PNG — это вариант для 3D-иконок. Они растровые, поэтому перекрасить их в Figma не получится, зато для карточек, баннеров и пустых состояний они подходят отлично.

После импорта проверьте три вещи:

  • фрейм имеет размер 24×24, а вектор внутри не сместился;
  • толщина обводки осталась 1,5 px;
  • цвет: значение currentColor Figma не понимает и обычно подставляет чёрный. Удобнее заранее выбрать цвет в палитре на странице иконки или перекрасить иконку уже в макете.

Иконки как компоненты

  1. Выделите фрейм иконки и нажмите Ctrl+Alt+K (⌥⌘K на Mac) — это команда Create component.
  2. Назовите компонент через косую черту: icon/search, icon/arrow-right. В панели Assets такие имена группируются в папки.
  3. Внутренний векторный слой во всех иконках назовите одинаково, например glyph. Тогда при замене иконки в экземпляре Figma сохранит переопределённый цвет.
  4. Соберите компоненты на отдельной странице или в отдельном файле-библиотеке, чтобы подключать их к разным макетам.

Варианты и свойства

Если у иконки есть версии — линейная и залитая, 16 и 24 px, — объедините их командой Combine as variants и задайте свойства, например Style: Line / Filled и Size: 16 / 24. В компоненте кнопки добавьте для слота иконки свойство Instance swap: иконку можно будет менять в правой панели, не заходя внутрь экземпляра.

Как перекрасить иконку

  • Одну иконку. У линейной цвет задан обводкой — меняйте его в блоке Stroke, у залитой — в блоке Fill.
  • Много иконок сразу. Выделите их и откройте блок Selection colors: он покажет все цвета выделения, и любой можно заменить одним действием.
  • В дизайн-системе. Привяжите цвет к переменной или стилю, например icon/default и icon/accent. Если у переменной есть режимы для светлой и тёмной темы, иконки переключатся вместе со всем макетом.

Иконки в auto layout

Кнопка с иконкой и текстом собирается за минуту:

  1. Поставьте рядом экземпляр иконки и текстовый слой, выделите оба и нажмите Shift+A.
  2. Задайте расстояние между элементами 8 px, внутренние отступы и выравнивание по центру.
  3. Иконке оставьте фиксированный размер (Fixed) 20×20 или 24×24, а кнопке выберите Hug contents — она будет подстраиваться под длину текста.
  4. Кнопке только с иконкой задайте фиксированный размер, например 40×40, и выравнивание по центру.
  5. Счётчик уведомлений на колокольчике переведите в режим Absolute position — он не будет сдвигать соседние элементы.

Масштабирование без искажений

Обычное изменение размера не трогает толщину обводки: иконка 24 px, растянутая до 48 px, выглядит тоньше соседних. Решений три:

  • инструмент Scale (клавиша K) масштабирует и обводку;
  • отдельные варианты размеров с подобранной толщиной линии;
  • команда Outline stroke, которая превращает обводку в заливку: толщина начнёт масштабироваться вместе с иконкой, но менять её отдельно будет уже нельзя.

Передача в разработку

Экспортируйте иконки в SVG через панель Export, очистите код онлайн-оптимизатором и, если разработчики подключают иконки одним файлом, соберите SVG-спрайт. Какой способ подключения выбрать — спрайт, inline SVG или шрифт, — разобрано в статье об иконочных шрифтах и SVG.

Итог

Импортируйте иконки как SVG, сразу превращайте их в компоненты с понятными именами и одинаковой структурой слоёв, цвет храните в переменных, а в кнопках используйте иконку фиксированного размера внутри auto layout. Тогда замена иконки, цвета или темы займёт секунды, а не часы ручной правки.