Как сделать иконку в Figma

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

Что такое иконка и зачем делать её самостоятельно

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

Вы каждый день встречаете десятки иконок: лупа обозначает поиск, корзина — удаление или покупки, шестерёнка открывает настройки, а колокольчик показывает уведомления.

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

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

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

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

Что понадобится для создания иконки в Figma

Прежде чем рисовать первую иконку, стоит познакомиться с инструментами, которые используются чаще всего. Хорошая новость: для большинства задач вам не понадобится весь функционал Figma. Чаще всего хватает нескольких базовых инструментов.

Итак, откройте сайт Figma и зарегистрируйтесь. Можно авторизоваться через аккаунт Google. В меню слева перейдите на вкладку All projects, а затем нажмите на кнопку +Project в правом верхнем углу. 

Вы зашли в рабочее пространство, приступим к знакомству с инструментами.

Frame

Фрейм — это рабочая область, внутри которой вы будете создавать иконку. Обычно иконки рисуют в квадратных фреймах:

• 16×16 px;
• 24×24 px;
• 32×32 px;
• 48×48 px.

Shape Tools

Это набор простых фигур:

• прямоугольник;
• линия;
• эллипс;
• многоугольник;
• звезда.

Многие иконки можно собрать только из этих элементов. Например, лупу — из круга и линии, а папку — из нескольких прямоугольников.

Pen Tool

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

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

Stroke

Stroke отвечает за обводку объекта. Здесь можно настроить:

• толщину линии;
• цвет;
• тип окончания линии;
• форму соединения углов.

Например, две одинаковые иконки могут выглядеть совершенно по-разному только из-за толщины обводки.

Fill

Это заливка фигуры. Если вы рисуете контурную иконку, заливка может вообще не понадобиться. А если создаёте цветную пиктограмму, через Fill можно быстро менять её внешний вид.

Как сделать иконку в Figma с нуля

Теперь, когда вы знаете основные инструменты, можно переходить к практике и создать первую иконку с нуля. Сделаем иконку дома, которую легко собрать из нескольких фигур. По тому же принципу вы сможете собрать лупу, папку, сердце или любую другую несложную картинку.

Шаг 1. Создайте фрейм

Нажмите F или выберите инструмент Frame на нижней панели. В правой части экрана задайте размер фрейма 24×24 px. Именно такой размер чаще всего используют в интерфейсах. Он достаточно компактный и при этом позволяет сохранить читаемость деталей.

Старайтесь рисовать иконку внутри фрейма с самого начала. Так вам будет проще контролировать размеры и экспортировать готовый результат.

Шаг 2. Нарисуйте основу дома

Сначала сделаем корпус. Нажмите R и нарисуйте квадрат, зажав Shift, так фигура автоматически получится равносторонней.

Затем нажмите Polygon и создайте треугольник для крыши. Разместите его над прямоугольником. Если нужен равносторонний треугольник, зажмите Shift при рисовании. 

Если хотите, чтобы у крыши и корпуса дома был один общий контур, используйте инструмент Union на панели справа.

Мы решили оставить отдельные контуры для крыши и корпуса.

Создайте ещё один небольшой прямоугольник при помощи инструмента Shape Tools на нижней панели (или нажмите R) и расположите его по центру нижней части дома. Это будет дверь. Можно сразу залить другим цветом при помощи Fill на правой панели, чтобы элемент не потерялся.

Если хотите делать одинаковый контур и заливку для крыши и корпуса, сгруппируйте их: Ctrl + G — на Windows и Linux, Cmd + G — на macOS. Затем нажмите на дверь и выберите Subtract Selection в правой панели. Figma вырежет дверь из контура дома, и с ними можно будет работать по отдельности как с двумя разными элементами. 

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

Пока фигуры могут выглядеть грубо. Главное — собрать общую форму.

Шаг 3. Настройте обводку

Теперь придадим элементам форму. Выделите группу из коробки дома и крыши. В правой панели включите Stroke. 

Попробуйте разную толщину обводки (Weight), позицию (Position) и цвет и сделайте скругление в блоке Appearance → Corner radius. Скруглённые соединения обычно выглядят дружелюбнее и лучше читаются на небольших размерах. Переключайте разные варианты и сравнивайте результат.

Ещё можно побаловаться с начертанием: в Style выбрать, например, пунктир, в Dynamic сделать линии волнистыми как в мультике, а в Brush сделать эффект рисования кистью. Только не забывайте, что иконку должно быть хорошо видно и что пользователь должен быстро понимать, что означает рисунок на ней.

Таким же образом обводим дверь: нажимаем на элемент → Stroke — и настраиваем параметры. Получилось так:

Шаг 4. Раскрасьте иконку

Теперь можно перейти к заливке, эффектам, дополнениям. Можно изменить форму дома, дорисовать детали при помощи тех же Shape Tools на нижней панели.

Заливка выполняется через кнопку Fill на правой панели. Можно залить всю фигуру одним цветом, а можно выделять каждую и закрашивать в свой цвет. Например, я закрасил крышу и корпус разными цветами, сделал обводку более жирной и чуть опустил дверь вниз. 

Получилось так:

Также можно добавить тень через кнопку Effects, чтобы сделать иконку объёмной.

Шаг 6. Экспортируйте иконку

Перед экспортом убедитесь, что:

• иконка находится внутри фрейма;
• элементы не выходят за границы;
• линии выглядят одинаково по толщине;
• объект выровнен относительно центра.

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

Выделите фрейм. В правом нижнем углу найдите раздел Export и нажмите +.

Для разных задач подойдут разные форматы:

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

Как редактировать готовые SVG-иконки в Figma

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

Например, вы можете найти подходящую иконку в библиотеке, а затем:

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

Для примеров в этом разделе будем использовать готовую SVG-иконку папки.

Где взять SVG-иконку

Взять SVG можно из десятков библиотек. Читайте нашу статью о том, где скачать готовые иконки. Например, рассказали о Tilda icons, Noun Project, Flaticon.

Выберите сервис и скачайте любую SVG-иконку. Мы решили работать с изображением из набора иконок в Figma Community.

Как импортировать SVG в Figma

Самый простой способ — перетащить файл в рабочую область. Откройте Figma и просто перенесите SVG из папки на холст. Также можно воспользоваться меню: File → Place image или вставить SVG через буфер обмена.

После импорта Figma автоматически преобразует файл в редактируемый векторный объект.

Как изменить цвет иконки

Выделите иконку или её часть, в нашем случае изображение папки состоит всего из двух векторов — собственно, папки, и закладки. 

Как и при рисовании дома, мы выделили основную часть иконку и закрасили фиолетовым.

Как добавить элемент на иконку

Можно добавить на папку какой-то значок, например, звезду из стандартного набора Shape Tools, или логотип. 

Поставим логотип Unisender: загружаем лого в формате SVG, как делали ранее с иконкой папки, и помещаем пса на папку. Заодно перекрасим закладку и контур папки в оранжевый, выбрав их по отдельности, как уже делали с фигурами при рисовании.

Обратите внимание, что лого немного выходит за границы папки для объёма, но при этом находится в границах фрейма и не обрежется.

Если ваш интерфейс построен на мягких линиях, а иконка с острыми углами, выделите объект и найдите параметр Corner Radius — мы уже пользовались им при рисовании иконки дома.

Как убрать лишний элемент

Представим, что вы нашли такую иконку песочных часов: но вам не нужен элемент песка внутри. Дважды щёлкните по иконке, откройте её структуру, выделите элемент и просто нажмите Delete.

Если элемент является частью общего вектора, придётся вырезать вручную. Читайте подробнее о том, как вырезать объект в Figma.

Где искать готовые иконки для Figma

Если вам не хочется рисовать иконку с нуля, начните с готовых библиотек. В большинстве случаев нужный вариант уже существует — останется только немного адаптировать его под проект.

Собрали популярные источники, которыми пользуются дизайнеры интерфейсов.

Figma Community

Ссылка: https://www.figma.com/community   

Figma Community — встроенная библиотека пиктограмм, шаблонов, плагинов и UI-китов внутри Figma. Здесь можно найти как отдельные наборы иконок, так и полноценные дизайн-системы с тысячами готовых элементов.

Чтобы найти иконки:

1. Откройте вкладку Community.
2. Введите запрос вроде icons, outline icons или material icons.
3. Откройте понравившийся набор.
4. Нажмите Duplicate, чтобы скопировать его в свои черновики.

Плюс этого способа в том, что все иконки уже находятся внутри Figma и не требуют импорта.

SVG Repo

Ссылка: https://www.svgrepo.com/  

Одна из крупнейших библиотек бесплатных SVG-файлов. Здесь можно найти как отдельные иконки, так и целые коллекции на тысячи элементов.Большинство файлов доступны без регистрации.

Lucide

Ссылка: https://lucide.dev/ 

Современная open-source библиотека контурных иконок. Если вы работаете над сайтом или веб-приложением, стоит начать именно с неё: все иконки выполнены в едином стиле и хорошо сочетаются друг с другом.

Heroicons

Ссылка: https://heroicons.com/ 

Библиотека, созданная командой Tailwind CSS. Содержит сотни минималистичных интерфейсных иконок в двух вариантах: с контуром и с заливкой цветом.

Tabler Icons

Ссылка: https://tabler.io/icons 

Одна из самых популярных библиотек среди продуктовых дизайнеров. Содержит несколько тысяч иконок практически для любых сценариев.

Material Symbols

Ссылка: https://fonts.google.com/icons 

Официальная библиотека иконок Google. Особенно полезна, если вы проектируете Android-приложения или сервисы, которые ориентируются на Material Design.

Сравнение библиотек

Если собираете интерфейс с нуля, обычно удобнее начать с Lucide, Heroicons или Tabler Icons. Если же нужна редкая или нестандартная иконка, быстрее всего искать её через SVG Repo или Figma Community.

В каких ещё программах и сервисах можно создавать иконки

Хотя Figma стала стандартом для большинства интерфейсных дизайнеров, это далеко не единственный инструмент для работы с иконками. Некоторые сервисы лучше подходят для сложной векторной графики, другие — для быстрых правок без установки программ.

Adobe Illustrator

Ссылка: https://www.adobe.com/products/illustrator.html  

Illustrator остаётся одним из главных инструментов для профессиональной работы с векторной графикой.

В отличие от Figma, он изначально создавался именно для иллюстраций, логотипов и сложных векторных объектов. Если вам нужно нарисовать нестандартную иконку с большим количеством деталей, возможностей Illustrator обычно хватает с запасом.

CorelDRAW

Ссылка: https://www.coreldraw.com/en/ 

CorelDRAW часто используют в полиграфии, наружной рекламе и производстве сувенирной продукции.

Для создания интерфейсных иконок его выбирают реже, но он по-прежнему остаётся мощным векторным редактором.

Inkscape

Ссылка: https://apps.microsoft.com/ 

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

Интерфейс выглядит менее современно, чем у Figma или Illustrator, зато большинство возможностей доступны бесплатно.

Canva

Ссылка: https://canva.me/design-with-canva 

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

IconKitchen

Ссылка: https://icon.kitchen/ 

Если вам нужно создать иконку приложения для iOS, Android или веб-приложения, обратите внимание на IconKitchen. Сервис автоматически генерирует десятки вариантов иконки под требования разных платформ. Вам достаточно загрузить изображение или выбрать цвета и форму.

Boxy SVG

Ссылка: https://boxy-svg.com/app 

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

Penpot

Ссылка: https://penpot.app/ 

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

Для большинства задач достаточно связки из Figma и готовых SVG-библиотек. Но если вы работаете с более сложной графикой или хотите попробовать альтернативы, Illustrator, Inkscape и Penpot тоже заслуживают внимания. Следующий вопрос — можно ли обойтись вообще без Figma и нарисовать простую иконку прямо в браузере.

Частые ошибки при создании иконок

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

Слишком мелкие детали

Иконка может отлично выглядеть на холсте 512×512 px, но потерять читаемость после уменьшения до 24×24 px. Например, если добавить слишком много линий, декоративных элементов или мелкого текста, они превратятся в нечитаемое пятно.

Проверяйте иконку в том размере, в котором её будут видеть пользователи.

Разная толщина линий

Если часть элементов имеет обводку 1 px, а часть — 2 px, иконка выглядит случайной и несбалансированной. Такая проблема особенно часто появляется после объединения SVG из разных библиотек.

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

Несоответствие пиксельной сетке

Иногда объект оказывается расположен на координатах вроде 10,5 px или 15,3 px. В результате после экспорта линии становятся размытыми.

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

Слишком много цветов

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

Использование растровых изображений вместо вектора

Иногда пользователи скачивают PNG и пытаются использовать его как иконку. На небольших размерах это может работать нормально, но при масштабировании качество быстро ухудшается.

SVG остаётся чётким при любом размере, поэтому для интерфейсных иконок обычно используют именно этот формат.

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