How to create human-figure icons
In this tutorial, I’ll walk you through the process of designing a human-figure icon.
During the last few weeks, I’ve been working, together with the talented Denis Rodchenko, on a big update of the Nucleo Sport icon category. In doing so, we’ve faced the challenge of crafting human-figure icons representing Olympic sports.
You can check the new sport icons here:
Designing body icons is complicated. However, after a while, I saw some patterns emerging. As with all skills, practice provided us with “design shortcuts”. These patterns were translated into guidelines, and today I’m happy to share some of these guidelines with you all!
In this tutorial, we’ll be designing a skateboarding icon:
32px outline version
Designing outline icons is easier from a technical point of view, compared to creating glyph/filled icons.
Each Nucleo icon is designed on 5 grid sizes and 3 styles. In this article, I can’t cover all the variations, even though the techniques applied are almost identical. We will focus on two sizes: 32x32 pixels and 64x64 pixels. This way I can show you how to gradually enhance your icons when you have more pixels at your disposal.
Here’s a quick video that shows how I created the 32px outline version of the skateboarding icon:
32px glyph version
Next, we move to the 32px glyph version. We can use the outline icon as a reference (it kinds of looks like the skeleton of the glyph version). Besides, working with strokes is so much easier when it comes to editing paths. It just makes sense to me to “expand/outline” the icon at the end of the process, when there are just a few spacing decisions left to deal with.
Here’s the tutorial:
64px outline version
When I work on bigger icon sizes, it comes naturally to start by doubling the size of its half-sized version. However, the process doesn’t end here. When we design icons for Nucleo, the challenge is modifying the icons at bigger sizes to account for the extra space. By doing so, we provide, for each icon concept, different icon variations. The user can either scale up a 32px icon to get a “minimal” 64px version or grab the more detailed 64px version that we provide.
That said, let’s jump into another tutorial, and create the 64px version of the skateboarding icon:
64px glyph version
Time to create the last icon variation! Once again, we start from the outline version, and we use it as a reference to design the glyph one.
Here’s the tutorial:
Now you know some of my icon design secrets! I do hope this article was helpful to you. I’m planning more tutorials. Let me know what you’d love to see next! ✌
Feedbacks/suggestions? Feel free to comment on the article. Don’t forget to follow us here on Medium or Twitter for more icon-related articles!
