Icon matrix in 7 easy steps

The essential step to make Awesome icons.

Icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system.

Talking two common types of icon

1. System Icon Eg. Settings icon, Camera icon etc.*
2. Product Icon Eg. Cart icon, User icon etc.*

So how do you start making a icon ?

You need a Icon matrix to make a icon.

You can use different tools like Adobe Photoshop, Illustrator or any other graphic design software you work on.

Let’s make a icon matrix

Before you start make sure

1. Size of the Document is 1080*1080
2. Turn on Grid available on your software. For Adobe Illustrator Just go to View and click “Show Grid” or simply click Ctrl + “
3. Keep the ppi or raster effects at 300ppi

Step 1 : Draw a Rectangle with size 152*152

Width 152 Height 152

Step 2 : Draw a Circle of radius 176*176

Radius 176

Step 3 :Draw a Rectangle of size 128*176

Width 128 Height 176

Step 4: Draw a Rectangle of size 176*128

Width 176 Height 128

Step 5 : Add a Inner Circle

Note : Connect all sides of the rectangle

Step 6 : Add a Inner Square

Step 7 : Draw Lines

Step 7.1 : Draw a diagonal line through the Inner Square as shown in the Image

System 7.2 : Select the Diagonal line and Horizontal reflect it.

Note It should appear correctly on the other side of the square edge.

Note I removed the Inner Square as it will be formed again in the next few steps

Step 7.3 : Draw three straight lines

1. One Line in Center
2. One Line on the Right Side as shown below
3. One Line on the Left Side as shown below

Step 7.4 : Copy the three lines and Rotate it to do the same for horizontal reference

We finally have it. A icon matrix to get started with icon design.

A example of how you can use the matrix you just made.

*System icons can be referred to those which are already on your system. Product icons are as per the app or a specific topic.