Let’s be honest – symbol design is highly effective. With the fast pace of life, everyone is more likely to skim through the text than actually read it. That’s when icons come in handy – they’re quick, easy to understand, and, most of all, universal unless you have an excellent icon set. Either way, there are two ways to do that: you can use some of the icon libraries or design some icons yourself!
However, creating a fairly sufficient icon system for the user interface isn’t enough. The icons have to be scalable and responsive as well as they should suit various devices. That’s why it requires experience and following certain rules. Here’s what you need to know about icon design step-by-step.
In this article, you’ll get to know:
- what is an icon set,
- how to create a consistent set,
- types of icons,
- why icon libraries are sometimes a better option.
Let’s get right into it!
The definition of icon set
Iconography is about the visual elements, symbols that communicate ideas and functions. Overall, they help us navigate through various products.
So, icons create a kind of language where each icon has its own meaning. Thus, we should make them cohesive not to mix the “languages” when creating the icon set. This way, a user won’t be confused when using the app.
The same style as opposed to a different style, simple shapes, and the same visual weight of the icons – these are just 3 of the core factors that impact how a given icon is received.
The universal nature of icons
So when we design an icon, it should be simple and logical. Since the icon doesn’t have any text within itself, it should convey the meaning visually. In other words, users should recognize what a given icon stands for just by looking at it. The more precise your icon’s metaphor is, the sooner it can be “read”. And this is the first thing to be aware of when creating icons.
That’s why most of the icons are almost identical because there are generally accepted schemes of those icons that function for many years. For example, magnifying glass icon is associated with the action of looking for something. Hence, when designing icons, we have to follow those schemes. Otherwise, we may waste our time and money creating something that won’t be used.
Types of icons
- UI icons – such as arrows, magnifying glass or icons for settings. Because those icons are designed for user interfaces, they’re usually small, so they have to be readable and clear.
- Decorative – they’re bigger and can be in the form of illustrations. We can call them micro-illustrations. For example, take a look out our career section. Different sparrows represent different meanings.
How to create your own icon set?
Enough space and contrast are just two factors worth paying attention to while creating an icon set. Let’s take a look at the other few that are just as impactful.
The simpler, the better
One of the golden rules of creating icon sets is keeping it simple. Otherwise, they’ll be too noisy and, thus, confusing for the users. The more detail, the worse it gets. Clarity is crucial here. You have to pay attention to the context of using the icon. For example, the same house icon will have different meanings for the browser interface and maps. So get rid of anything that could blur the communication.
Stick to one style & stylistics
There are various styles and their variations. Plus, the stylistics is vital as well. Once you pick the one you want, stick to it. The thickness of the lines, whether the edges should be rounded or sharp, filled icons or empty ones, and more. Those decisions are extremely important since they may give out the overall mood of the app, which is connected with the psychology of design.
Psychology matters
The icons with straight lines and sharp edges are perceived as more professional, whereas rounded ones are more mild and friendly. Hence, when creating an icon set, pay attention to the entire business you’re designing the set for. What’s their brand message? How do they want to be perceived?
Pay attention to the size
It can look different on the same-sized basic shapes: a diagonal rectangle, a circle, a triangle, a square.
Let’s take a look at a circle and square. In this case, the square will always look bigger as it takes more space. So, to make them look equal when creating icons, you should make some minor changes that will make them visually the same.
Color palette matters too
Just as you stick to the one stylistics throughout the whole icon set, you should also stick to color combinations. So pick the colors and use them in your icon set.
You can learn more about colors from the article How to use colors in UI design by Bartek, our UX/UI Designer.
Pixel grid
Once we have that figured out, let’s move on to more technical principles that will help us create a system with transparent rules. Beginning with choosing a base grid. All icons will be built on the grid’s foundation. Moreover, you should place every icon part within this pixel grid.
When it comes to the sizes of the grids, they’re different depending on the task. The most common sizes are 16×16, 24×24, 32×32, 48×48, 64×64, 96×96. How do we know which size to pick? The size of the grid depends on the reason for using icons, guidelines, and operating system features.
A grid can help align pixels and make finding similarities between icons in the same set easier. Using a grid also helps keep things symmetrical, mainly in the situation when we’re using various angles and curves. Symmetry and alignment are essential parts of icon design.
Pixel-perfect
Stroke width, inner elements, perspective, scaling, amount of details – these are just a few factors that help to define if the icon is pixel perfect. As you can see, you have to consider every detail of an icon, every individual pixel, to make it pixel-perfect. Remember, the simpler the design, the easier it is to export without compromising the design elements.
So that’s pixel-perfect design: Each pixel is being used to the fullest for the sharpest and cleanest look. Everything is immaculate, sharp, and intentional.
Why do we use ready-made sets?
Sure, it all depends on our goal (why we need those icons), but in most cases, we turn to ready-to-use icons libraries with 500 icons that we can add to the project right away. Why is that? Well, the easiest answer is – it saves time and money.
As you can see, designing a set of icons isn’t a piece of cake. It requires time and focus, which, in turn, translates to the client’s money.
Also, some designers do it professionally and know how to do it right (because, as I said before, the icon design is universal, so there’s no use in coming up with something different from what’s already preserved in the users’ minds). Thanks to them, the crucial part of designing elements is done, and now, we can use those icons to create the final product. Plus, who said, we can’t customize them a bit, add some small details, to make them even better.
Here are a few icon libraries that we use in our projects.
Final words on icon design
So there you have it! Now that you know the basics about the icon sets, you can decide – use ready-made icon libraries or create your own. The choice is yours! So check out the tools I use and recommend, or you may simply start sketching! And if you need any design-related advice, reach out to us by filling the form below.
Have a project in mind?
Let’s meet - book a free consultation and we’ll get back to you within 24 hrs.
Other worthy reads
