How to Create a Simple Stroke Dashboard Icon
What is a stroke icon? Simple to say, it’s an icon that’s made up of strokes filled with only one color. Why stroke icons? This kind of icon is useful and suitable for a graphic user interface on which everything needs to look as simple as possible, friendly, easy to recognize and especially consistent with the neighbor elements (like text, for instance). Let’s take this navigation bar below for a demo.
Stroke icons on a navigation bar
As you see, all the icons on the navigation bar have a simple appearance and the same one color with the text alongside. This helps the navigation bar look gentle and easy to comprehend.
So, is it hard to draw a stroke icon? Totally, no! In fact, it takes several effortless steps and some of the Illustrator’s basic tools then you can freely have as many simple and fast-made icons as you want. Just take the following guide and you’ll see how easy to create one.
(This post follows up the tutorial series “Icon Design Made Simple”.)
Tutorial facts
- Application: Adobe Illustrator
- Tools: the Shape tools, the Offset path, and Divide/Unite/Ungroup commands
- Level: Beginner
- Finish time: About 15 minutes
What to do
In this tutorial, we’re going to create a stroke Dashboard icon with 24 x 24 pixels.
Paths to create for a stroke "Dashboard" icon
First off, we want to explain a little bit why we don’t make any stroke path for this icon. As a matter of fact, we never use the Stroke tool to create stroke icons. Instead, we’ve always relied on the Offset Path and the Path Finder palettes. The reason why is when we scale an icon, the thickness value of the stroke still remains in despite of the change of the icon size. For further details, you can refer to Notes for the Offset Path command, Step 7 in How to create a basic set of navigation icons (next, back, up, down) of this article.
OK, let’s get to it. Please note from all the illustrations below that the icon in the left is the final result and the one in the right is what you have to do.
Step 1
Create a new document that is 24 x 24 pixels. Choose the Ellipse tool and draw a circle.
Fig 1
Step 2
Select the circle you just created and then choose the Offset Path command (go to menu Object/Path/Offset Path) to make a stroke. With the Offset Path opened, type -2 px into the Offset box. Hit OK.
Fig 2
Step 3
Select both paths and click on the Divide button from the Path Finder palette.
Fig 3
Step 4
Select the group, right-click on it and press “Ungroup”.
Step 5
Select the smaller path that stays inside, and repeat Step 2 and 3. Next, delete the path that you created in the first Step 2.
Fig 4
Step 6
Delete the smallest circle that stays inside of all. You will have one like this:
Fig 5
Step 7
With the Rectangle tool selected, draw a rectangle at the position like below:
Fig 6
Step 8
Select the rectangle and the circle that stays inside of all. Next, click on the Divide button from the Path Finder palette. Then, ungroup them all and delete any useless components (in such a way as done in Step 2 and 3) so that you have the result like in Fig 7:
Fig 7
Step 9
Choose the Ellipse tool and draw a circle that makes up the wheel of the hand (4 px).
Fig 8
Step 10
Select the Round Rectangle tool to draw the hand. Then, point the hand tip towards the position as seen in Fig 9.
Fig 9
Step 11
Select the circle created in Step 9 and 10. Finally, click on the Unite button from the Pathfinder palette to merge the hand and the wheel into one path, and in doing this, the vector file looks neat and clean.
Fig 10
The final result
Final result
The additional steps like pixelation solving, scaling, and exporting, we will mention in other articles later.
Followings have the same style as the one above. Hoping that you could make these on your own by this guide.
As a perfectionist, not only have we wanted our products to be as perfect as possible, we have also wanted to improve the quality of each and every article published on this blog. Any suggestions or contributions to this article are highly appreciated. We appreciate your time.