What 11 years of being a professional designer taught me about icon design
(This article was first written and published on December 3, 2019)
I’m starting this article feeling like an old man even though I’m only 30 years old. I don’t remember exactly the first time I designed a custom icon, but what I do remember was the excitement of creating something unique, not found in an icon pack.
I have been designing custom icons for 11 years, always trying to come up with new ideas to design the same icons we see over and over.
In this article, I’m going to teach you how I approach icons, the differences between them and what not to do.
Benefits of having custom icons
It is very common to see the same icon packs with tons of icons, and who can I blame? Using icon packs is a commodity that we all need from time to time.
We do not always have time to create custom icons.
I defend the benefit of creating custom icons because every client is different and if the client is paying you to do a job, why not deliver your best work and spend some extra time creating custom icons? Even if you are working on the most basic icons like menus, contact, profile, the extra effort can make a huge difference in how clients perceive as a professional.
Here’s a quick list of benefits:
• Every new client is worth the effort
• You don’t need to rely on icon packs
• Build your own and exercise your creativity
• It’s always fun to do it
Style of icons
There are many different styles of icons, below are a few of the design styles I usually make.
Consistency
When working with icons, consistency is key.
For every icon that I create, there are some rules that have to be applied so all your icons are consistent and cohesive. Properties like, size, rounded corners, and stroke thickness are just a few of the things to keep in mind when designing custom icons.
Here are some examples:
• Size
• Rounded corners
• Stroke thickness
• Filled / Not filled
• Style
Styles
Depending on the project you are working on there are different styles of icons you can make for each project. I want to point out that style can be subjective, so the list below is my own take on that.
• Simple
• Detailed
• Abstract
Stroke thickness
There are many sizes of screens and icons can be all sorts of sizes. I designed an example below to show how to deal with different sizes and stroke thickness.
☝️ In this example, the icons have different sizes and stroke thickness, the variation of thickness is used to adapt the size of the icon and not lose any characteristics.
☝️ In this example, every icon has the same stroke thickness and the smallest icon turned into something different compared to the bigger one.
How I design icons
I always start with the simpler ones to set the tone for the rest. Remember earlier on this article where I mentioned about consistency? Well, make sure all your icons have the same properties and style.
Source of inspiration & Software
When I’m stuck I usually use Google, The Noun Project or Dribbble for inspiration. I design my icons mostly using Figma or Adobe Illustrator.
Honorable mention
Adam Withcroft have an old class on Skillshare where he teaches how to design a cohesive icon set. It’s a little old but the principles applied are the same the use for all my icons now