Creating Icon Sets for Digital Products
Hello, I’m a digital product designer @TİO, a digital product studio based in Istanbul. This post is about the best practices and guidelines about creating icon sets for digital products.
Ready? Let’s begin!
Icons are very very powerful tools for visual communication and they’re everywhere. You must have seen an icon somewhere today. We mostly recognize them and understand what they represent at a glance.
When building digital products, we need more than a few icons. We need icon families that are part of the brand identity to use in various steps of the user’s journey.
So, what are the guidelines to keep in mind when creating an icon family? How do we build our set?
1. Personality
Icon families need to be unique to your product. Try to focus on what is original, think about the keywords, metaphors and brainstorm with your colleauges/team about the symbols to be used. What will your icons represent? How is your set different?
2. Clarity
Icons should be simple, meaningful and recognizable. They need to visually decribe the function or purpose to your target audience. The purpose of using sets in digital products is mostly navigate users and provide a better experience. Since they are universal across cultures, ages and backgrounds, the meaning can be easily understood if your icons are successful.
3. Unity
You need to choose a style and stick to it throughth the family. Is it going to be solid or outline? Or 3D? Or handdrawn? Or isometric? There are thousands of icon styles and families out there.
Take into consideration the interfaces your icons will be used in and sketch all of your ideas in a few styles to compare. It will help you to choose the one works for you the best.
Make sure you follow the brand guidelines to maintain a consistent style in your icon family. We wouldn’t call it a family if all icons look different from each other, right? Unity is the key for a succesful set. You will also need to choose colors that resonate with your audience and create a mood that represents your brand values.
4. Grids
Pixel based grids are used to design icons with the same size and set a boundry to keep whole set consistent.
Sometimes, you need to make some adjustments to make the icons more balanced and your design can exceeds the grid a little bit. Trust your eyes and do not feel obligated to stay within boundries of your grid system.
5. Sizes
Your icons should fit into the same square art board. There should be no hierarchical difference between them, they should look equal.
You will make the decision of size according to your product. If you’re designing a set for a mobile app (IOS or Anroid), it is necessary to check the design guidelines. For web products, always work with default sizes. Default sizes are 16x16, 24x24, 32x32, 48x48, 64x64, 96x96, 128x128, 256x256, 512x512.
6. Details
Attention to details really matter in icon sets! Your icons should be clear, recognizable but details make them unique. They can tell much more with little interventions.
One of the main rules to obey when creating a set, using the same objects throughout the set. Don’t reinvent the wheel in each icon!
7. Documentation
It won’t do any good to your product if you can’t successfully document how to implement the icons. Your work is not finished until you prepare a document or file with the details about the usage the icon family in your product. This file or document should be accessible to the members who may need them.
Remember to ask your team members for feedback and help in the process!
tio is a digital product studio based in Istanbul. We create beautiful digital products, human-centric digital experiences. Do you think we can work together? Contact us!
Find out about us more on Instagram and Twitter. Subscribe to our publication for upcoming stories. 🙌🏻
