Skip to content

In the simplest terms, icons are symbols that change parts of the text or explain it more closely, thus making it more visually interesting and clear. Older generations will probably associate the icons with Windows, while on the other hand, younger users will probably associate the icons with Google Play or the Apple App Store. However, we will agree that today is UI design almost unthinkable without creating and applying icons. Through this text, we will try to show you how to design icons that will be recognizable and user-friendly.

If we were to go back a little further through the history of design, the forerunners of today’s icons would probably be pictograms.

Pictograms are pictures and symbols that clearly replace words. And their application was strictly functional in order to make certain information clear and understandable in multiple languages, something like traffic signs, warning signs on product packaging or symbols representing certain sports at the Olympic Games.

 

How to design icons

Today, icons have found a much wider application, but the creation process has remained relatively the same, so we should follow a few basic rules when designing. Clarity, readability, compliance, distinctive design and ease of use.

Clarity

The primary goal of an icon is to convey information quickly and clearly. In order to make the content as transparent as possible, the last thing you need is for the user to ask himself “What did the writer want to say”. That’s why it’s important to use simple metaphors without overcomplicating them.

Readability

Once you’ve accomplished your primary goal and created an understandable symbol, make sure it’s also legible. Icons can often be small, like those on business cards or if you want to use them in the footer of your website. That is why it is necessary that they have as few details as possible and be created from simple shapes. It is also important that the icons are well balanced, so take care of the alignment . That is, that all elements are exactly centralized on the icon. When designing application icons, you should take care that they will be displayed on the screen of mobile devices, tablets and laptops, so the right amount of details and colors gives greater depth, which can make them more visually attractive and recognizable to users than the brand or product itself.

Compliance

It will often happen that it is necessary to create a whole set of icons, especially for projects such as websites or mobile applications. In order to maintain harmony throughout the set, it is important to adhere to all the style rules you have previously determined. Thus certain deviations in size, basic shape, thickness of lines ( Stroke ) or filling with color ( Fill ) can break the hierarchy of your icons and create the impression that some icons are more important than others. In order to avoid this, it may be important to create a grid before you start creating icons. That is, the help lines that you will adhere to.

Many things in digital design depend on the grid, and icons are no exception. That’s why it’s important to set up a grid that will mark your pixels and how the created icon fits into them. The easiest way to make sure your icons fit in the grid is to stick to round numbers when specifying, for example, line thickness.

Characteristic design

Characteristic design or better said, design must have ” Personality” or rather what makes your icon or set unique. Guided by the rules of UX design, i.e. user habits, your design should not deviate too much from it. For example, for “Search” you must not use anything other than a magnifying glass because it will confuse users, but no one is stopping you from drawing the magnifying glass in your own way.

Easy to use

When you create a new set of icons make it ” User-friendly “. So, apart from the fact that it is important that your icons are simple, legible and coordinated, it is also important that they can be easily applied or implemented in several projects. Additional testing is necessary so that your icon set is understandable to your collaborators so that other designers can extend it with new icons or, what is even more important, so that developers can easily code and optimize it for a website or mobile application. That is why it is especially important that your icons are organized, i.e. clearly named and archived in folders. Creating new sets of icons will be considered unnecessary by many because there is already a large selection on the Internet that are ” free downloads “, but it will certainly mean something for your brand and its positioning on the market. Thinking about details like ” custom made icon set ” is definitely something that will not go unnoticed by your users.

 

For more news and interesting stories from digital marketing, visit our blog page or follow our Instagram profile.

Made by Sava Spasić – Senior Graphic Designer @Digitizer