Practical tips to create a digital icon set
Undeniably there is a vast ocean of available icon sets out there on different sites (and I will share with you my favs in the end), but still at some point as a UX/UI/Product/Graphic designer you might have an icon idea yourself — or your client — so I’ve decided to write an article for those special occasions.
I’m not an icon specialist in any means –there are certainly a few heroes who revolutionized this field in big or small ways – but I hope with the sections below I can help you on your designer journey and learn something new.
Definition of an icon / pictogram
What could be the best way to describe these simple shapes, which are guiding us through our digital and physical worlds? 🌐
One possible start could be to acknowledge the power of visual communication and to think about the most important information that you encounter on a daily basis. How to do that? Thinking about your daily activities, I bet there will be three key areas where you’ll meet with some kind of icons: health, safety and transportation.
It’s not by accident, pictograms can communicate information faster than words can. Just look how fast the image below communicates caution and compare it with how long does it take to read the sentences next to it. 🤓
These pictograms communicate information in a universal and simple way that everyone can understand regardless of cultural or geographical background. Another great example could be traffic signs since you always need to be aware of the current speed limits 🚓 or one-way roads, but you only have a blink of an eye to observe, understand and take action. But what makes a good or a bad sign?
We need to dive deeper into science to better understand. The study of sign science is called semiotics. It covers everything from a meaning of a thumbs-up to a smile, and yes, even emojis. 🤓 🔬 A famous representative of this science called Charles Sanders Peirce came up with a triangular model about what makes a sign a sign (see below).
So, if we take the example of a stop sign, the representamen of the stop sign would be the red piece of sheet metal that’s standing on the side of the road attached to a post. It is the physical manifestation of the sign.
The object is the concept or the idea that the sign is referring to. So, in this case, it would be the concept of stopping, of slowing your speed, or halting your speed, so you stop.
Then, finally, the interpretant is the mental picture that’s created in the user’s mind when they see the representamen. So, in this case, it would be a driver seeing the sign and knowing to stop at the dotted line.
When we design icons all three are important, because everything can be a sign. What we mainly need to decide is whether for a certain representamen, we would like to choose an iconic (one on one representation of something like gas station sign ~ gas station nearby), indexical (cause-consequence relation like smoke ~ fire somewhere) or symbolic (arbitrary cultural knowledge like radiation circular sign ~ radioactive element) sign approach.
Alternatively the model can be described as if we see a certain sign in a certain location, what kind of user action we expect to invoke.
Let’s get to work 👷♀️👷♂️
Following this logic we need work a little backwards by picking the action we would like to see on which interface and then choose the sign (the icon) to represent it.
In my case I was briefed to help with a sustainability project for an NGO (non-governmental organization ~ non-profit), so I knew the interface will be mainly their digital website and the social media, but I needed to identify the action part.
To-do: Make a list of actions 🗒
Sitting down virtually with the client’s team was extremely helpful because they are the experts of the field and they’ve also walked me through the website, so I got a clue about the icon sizes they wish to use. I marked down all the actions (25+) they wish to invoke in my notebook to prepare everything for the next step.
Concept(ing)
With the list in my hand I’ve started wildly searching on Google for reference images and trends within the theme. Usually for each of the list items I save 2–3 images from different perspectives on my hard drive, because I don’t know yet at this stage which detail might come handy later. Assuming Google being the largest search engine in the world, the images in the search results would reflect more or less the results in the world, to avoid misunderstandings of objects and signs.
To-do: Save images of references into a folder 🗂
Finally onto the paper for sketching! With the reference images in front of me, I like to use a squared paper or a dotted notebook with some different thickness of markers.
If you’re looking for downloadable (and printable) dotted templates, you can download them from here.
To-do: Get ready to use some kind of paper with rough guides ✏️
Grid setup and sizing
Do you remember the discussion I’ve mentioned with the client earlier? Now it becomes really useful, because I’m aware I need to set up my grid based on digital interface requirements and it’s not something going on a billboard on a highway for example, which would put the user in a different context.
To-do: setting up the grid to transfer sketches ️📏
I’ve used three different types of grid (see below the second) all on a 32 × 32 px canvases. Usually you wish to match the grid size to the size the icon will be used the majority of the time, but officially there aren’t very hard rules about it. Some companies use 24px, 40px or even 64px grids based on mostly shape complexity.
For example since Google’s icons appear in 24dp (density pixels), they’ve designed the rules around them based on that.
(1) The first grid is the one closest to my initial sketches, so I mostly just use that to transfer the idea from paper to digital with the raw dimensions.
(2) The second grid pays more attention to the circular shapes and the overall visual weight.
(3) The third grid is about finessing some smaller details with extra keylines in the middle and to match the similar shapes across the different signs within the set.
Picking an icon style
After we’ve put everything on the grid a very important step follows… to define the style our icons. My client was looking for simple outlined shapes, so I kept my exploration around that. The format of this article is not able to cover all the possible styles out there — if such even exists — but I’ve tried to collect the most common one outline ones to have some comparison. If you’re interested, Varghese Mathai collected some additional ones in this article.
To-do: pick a️ style for icons and stick to it for all icons 💅
Since my icons for the client were mainly for web usage, I didn’t have to think about larger sizes than 64px, but for those of you who need I would rather consider to create an illustrational style for such sizes, because these simple shapes are losing their power as scaled up.
Recently I came across Michael Sommer’s brilliant article on how to achieve it, if you’re interested as well.
Mistakes to avoid
There are a couple of areas of icon design, which worth paying attention otherwise the shapes become quickly unbalanced.
To-do: keep some rules, but know when to break them 📐
Stroke Width
Try to be consistent with your stoke widths. I often try to start with one single unit like 1px (on a 32px canvas), and then later if I need to add more variation, then I slowly introduce new stroke weights like 0.5px or 2px to create hierarchy within the shapes. It’s not about the pixels but more about the ratio which is important, so try to stick to the 0.5 : 1 : 2 for strokes. The worst is to start mixing them way too early, and create like the chaos below.
Border Radius
Rounded corners makes the design friendly, but use the chosen radius consistently and balanced. When rounded corners mixed with flat caps the design feels unfinished and the elements of the set not harmonized.
Key Shapes
Probably as soon as you made the first sketches, you realize there are certain shapes which can be used progressively within multiple icons. Embrace this, because the similar shapes will provide a coherent look and feel in the end.
Closing thoughts
I hope you enjoyed following this reading and created at least some sketches along the way. Although these little shapes are certainly great at symbolizing and object or an action, we should never forget that the world is culturally so diverse, that even with the best care there is a chance for misinterpretation.
To-do: put accessibility first for icons and test relentlessly ♿️
For this reason my overall advice is to always use these symbols with text labels — especially in digital — so the localized copy can reinforce the message also about the desired action accessibly.
Finally also let me share with you how some of the icons turned out:
Favorite places to get free icons (finally!)
Last but not least, let me share with you some the icon resources I enjoy using too, because well we can’t be always in the mood to create our own destiny.
— Noun project: probably the most comprehensive icon collection I’ve seen with a database over 3 million icons and a great team behind it
— Material Design Icons: if you enjoy Google products, you’ve certainly came across the beautifully designed simple icons. Their Figma plugin with Icons8 icons covers altogether 35k+ icons as a collection
— Flaticon: another big gun with over millions of icons to search. I enjoy mostly using this site, when I’m looking for more stylistic iconography, which tend to be almost closer to the illustrative style I’ve mentioned earlier, but also a great source for outlined ones
— Iconmonstr: I’m a big fan of indie projects, and probably that’s how this collection got onto the list. With over 5k icons it offers enough variety to choose for your next side project, if you would like to ignore the other bigger players where everyone else is searching
First of all thank you for reading so far! I hope you liked the tipsand you come back for more later. You can find some other articles below related to UX/UI and Graphic Design. Thanks for any claps, actually you deserve it to read it till the end! 👏
