That the use of icons is something that is the order of the day, it is something that I take for granted that you know. The problem comes when you have to use them. At first glance, it seems easy: you download an icon, or several, and put it where you want, right?
But reality is not like that. When the icons you use are not the same style, they do not work well. And therein lies the complication of knowing how to correctly choose the icons with which you are going to work.
In this post I am going to tell you how to choose your iconography correctly, know how to work it and make it work so that it gives you good results and is visually aesthetic.
You may have seen billions of examples of web pages, PDFs, brochures, etc. in which icons are used. And even so, there are some that enter directly by sight and others that not so much. That is because the icons that have been chosen are not well worked.
Ideally, when you want to use icons, it is a logo designer or illustrator or mobile app developer/designer who makes them for you. But, realistically, something like this rarely happens. That’s why I want to tell you everything you need to know when working with iconography, so that you avoid some very common mistakes and your icons succeed.
Ready? Well let’s get started!
First Trick: Line Thickness
This is a basic and very, very common mistake. Many times I have seen websites in which iconography is used very often (that is, three icons together, for example) in which each element had a different thickness. Visually, it creates a very unaesthetic effect.
The thickness of the icon lines should be the same or, at least, visually feel that way.
Second trick: rounded or square?
Take into account how the lines of the icons end: rounded or square.
It seems silly, but it is an important detail because it can make the icon family perfect or not. Try that all the icons you use have the same ending.
Third Tip: The Style of the Icon
There are thousands of ways to create an iconography. You must be careful not to mix linear icons with filled icons and icons that are embedded in geometric shapes. They all have to be the same, in that sense.
That is, if you always use linear icons inside circles, try to make them all the same. It makes no sense that one is inside a round, and the other is “loose” and completely painted.
Trick 4: The Filling Makes the Difference
You have to be careful with the filling of the icon, that is, how it is painted. It is not good to mix icons that are fully filled with others that are partially filled or that, directly, are purely linear.
As always, look for all of them to have the same type of padding so that they give a sense of visual coherence.
Fifth Trick: The Size
You have to try that the icons are aligned with each other and that they all have the same size.
Of course, we must bear in mind that sometimes the human eye is deceiving and although they are all the same size, it seems that some are smaller than others. So adjust them so that visually they all look the same.
Now you have the five necessary tricks to choose your icons and work with them ensuring success. Try to follow them and you will see how it changes the feeling it gives you wherever you use them.
You will go from scruffy icons to well-structured, ordered and consistent icons in just a few steps. You dare?