How to create icons in Figma?

Icons are graphical representations of functionality, concepts, a specific entity, and the application itself in user interfaces. Users navigate an interface intuitively with the help of icons, which act as a visual guide.

Icons can replace text if appropriately created. Making a UI easy to navigate and user-friendly can be achieved by creating recognizable and clear icons since we perceive visuals faster than text.

That is all good, show me how to do it?

There are no wrong answers to this question. It depends on the process you want to follow and the methods you want to use. There are many different ways in which you can create an icon. I will share the process I followed to create the icons for a product based on spend management.

Recently we redesigned our mobile app experience and interface. Creating new icons was one of the requirements. So we decided to build a new icon library in Figma that we used in the mobile and web app.

Size

The first step in creating an icon is to determine the dimensions of the icons in pixels. There are a lot of different dimensions with which icons can be created.

  • Small icon — 12x12 px, 16x16 px, 24x24 px, 32x32 px, 48x48 px
  • Medium icon — 64x64 px, 96x96 px, 128 x 128 px, 256 x 256 px.

There can be a lot of different canvas sizes depending on the platform for which you are designing the icon.

Icon grids and KeyLines

Start by deciding on icon grids and KeyLines. It will help establish clear rules for graphic elements' consistent but flexible positioning.

KeyLine shapes are essential to maintain consistent visual proportions across all icons.

Specific shapes like squares, circles, rectangles, and diagonals will help us create more consistent icons and unify the placement of these shapes across icons.

The live area is the space where the main content of the icon is present. If required, the content of the icon can extend to the trim area, but it should not extend outside the trim area.

Type of Icon

Once we have created the icon guide and keyline, we can decide on the type of icon we want.

There are different types of icons -

Outline icons
Filled icons
Dual-tone outline icons
Combination of Outline and Filled icons

In the same way, icons can have a variety of styles. The style depends on the icon library. As we were required to create clear and understandable icons, I chose outline icons.

Let’s Create Some Icons

You can create icons in various ways, but in this post, I'll tell you about the process I followed to build an awesome icon library that I'm proud of 😎.

  • Place the icon grid and keyline inside the frame (choose the Frame Tool F and drag out an area of the screen) in which you want to create the icon. Adjust the frame according to the size of the Icon grid layout.
  • Create the icon's base outline by using the existing key shape guideline. Modify or adjust the shape by only using the Live area. I am using a stroke width of 1.5 pixels for the outline icon. You may wish to use a different stroke width for your icon. I used a stroke width of 1.5 because a stroke width of 1px would be too thin, and a lot of white space would appear in the icon. For icons where some level of detail is required, a stroke width of 2px looks too thick and congested.
Different Stroke Widths
  • Create the desired shape. Adjust the size according to your requirement.
  • After creating the icon, select the icon's frame and double click/left click/double tap on the frame. A dropdown menu will appear on the screen. From that menu, select Outline Stroke and bring the same dropdown, and select Flatten. These steps will outline all your different strokes and Flatten them in one single shape.
  • Now adjust the icon inside the frame and resize it if required.
  • To make your icon scalable, change the constraints to Scale vertically and horizontally.
  • Create a component of your icon and change the colour according to your requirement.
  • Voila! your icon is ready 😄

One Last Thing

Here's a tutorial on designing a cog icon which is generally very tricky to design, and it took me a few hours of practice to do it in ~3 min at the end:)

Aditi Saini

More of our stories from

Design
Swapna’s Working Manual

If we are going to work together, this doc will help us reduce many surprises on the path and make our relationship stronger.

Read more...
How did we revamp Fyle Accounting Integration Platform?

Follow the journey of this noob product design intern and checkout how he redesigned a complete integration platform!

Read more...
Redesigning the Fyle Chrome Extension

Learn how we redesigned the world's best Chrome Extension for expense management!

Read more...
The story of how we re-designed Fyle’s Spender Dashboard

Find out how we designed Fyle’s web-app dashboard to be more user-friendly and efficient.

Read more...
How to create icons in Figma?

Are you struggling to create icons? Find out how you can easily create icons in ~3 min in Figma, even if you have no experience.

Read more...
Our approach to redesigning a dashboard

The roller coaster ride of redesigning dashboards from Ideation -> Visual Design -> User Testing. Read on...

Read more...
Why and how did we redesign our mobile app experience?

Learn the art of redesigning a user facing application without breaking the internet!

Read more...
The story of a first time manager and design leadership

My self-reflection as a first-time Manager leading Design at Fyle.

Read more...
How we re-designed icons in the Fyle app

Shyani talks about her experience and learnings with her first major design project at Fyle!

Read more...

All Topics