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
- System Icon Eg. Settings icon, Camera icon etc.*
- 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
- Size of the Document is 1080*1080
- Turn on Grid available on your software. For Adobe Illustrator Just go to View and click “Show Grid” or simply click Ctrl + “
- Keep the ppi or raster effects at 300ppi
Step 1 : Draw a Rectangle with size 152*152
Step 2 : Draw a Circle of radius 176*176
Step 3 :Draw a Rectangle of size 128*176
Step 4: Draw a Rectangle of size 176*128
Step 5 : Add a Inner Circle
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
- One Line in Center
- One Line on the Right Side as shown below
- 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.