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