How I created icon library 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.

That is all good, but 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 -

1. Outline Icons —Icons of this type are created by using only the stroke.

2. Filled Icons — Both strokes and fill are present in these kinds of icons.

3. Dual-tone Outline Icons — Icons that have dual tones are made by using 2 different colors on the stroke.

4. Combination of Outline and Filled Icons — It is possible for these types of icons to coexist with Outline icons and Filled icons. Their function is typically to indicate whether the state of an object is Active or Inactive.

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

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 excellent 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.

• 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 some time to understand and do it in ~3 min at the end:)