How to Create Icons in Figma

Updated on: December 18, 2022

aspect of the applications as they can replace text if well done. This tutorial will show How to Create Icons in Figma. Let’s go!  

The Nicely Use of Icons   

Long story short, icons are graphical representations of functions and actions that we can find in any application; for example, the message button has a distinctive icon which is a paper letter, and so on. In this sense, we can replace lots of text and concepts by simply, and cleverly, designing a visual guide that indicates clearly what action comes next if you interact with it.      

How to Create Icons in Figma 1

How to Create Icons in Figma

One way to learn how to create Icons is by using references. If there’s a design of an icon you enjoy, go ahead and recreate it. For this case, we’ll use a ready-made application reference.   

How to Create Icons in Figma 2

Let’s begin with selecting the shape option at the left-top bar. Next, we will recreate the Icon background shape by drawing it on the canvas.

Once you draw the shape, we will modify the edges to make it rounded, just like the reference Icon, by clicking over the tiny dots that appear at the inner corners of the shape and dragging them toward the center.        

How to Create Icons in Figma 3

Now we need to change the color of our Icon. We go to the section at the right menu bar and select the option Fill. Once you do this, a window will display with several other options.

Because we want the same color as our reference icon button, simply select the eyedropper icon in the Fill menu and place it over the reference icon to extract the color.  

How to Create Icons in Figma 4

To draw the inner circles, simply repeat the process and place them as the reference icon button, and to add the text, go to the T icon in the top bar next to the shape option.

How to Create Icons in Figma 5

Very simple! You can do this with every Icon you like by following the reference and applying this Figma tutorial. The more you practice, you will become an expert by creating and designing icons on your own using Figma Tools. Stay tuned!

Access 2,701+ video lessons. Instantly.
Start Learning Now →
crossmenu linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram