Skip to content

Simply put, icons are symbols that cancel out parts of the text or explain it more closely, making it visually more interesting and clear. Older generations are likely to associate icons with Windows, while on the other hand younger users will probably link the icon to Google Play or Apple App Store. However, we will agree that it is today 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 customized to users.

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

Pictograms are images and symbols that clearly replace words. And their application was strictly functional 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 Olympics.

 

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, consistency, distinctive design and ease of use.

Clarity

The primary goal of the icon is to convey information quickly and clearly.

In order for the content to be as clear as possible, the last thing you need is for the user to ask "What did the writer want to say". That is why it is important to use simple metaphors without too much complication.

Readability

When you meet the primary goal and create an understandable symbol, make sure it is readable as well.

Icons can often be tiny, like those on business cards or if you want to use them in the footer of your website. That is why it is necessary for them to have as few details as possible and to be created from simple shapes. It is also important that the icons are well balanced, so take care of the alignment (Alignment). That is, all elements should be exactly centralized on the icons.

When designing application icons, you should take into account that they will be displayed on the screen of mobile devices, tablets and laptops, so the appropriate amount of detail and color gives greater depth which can make them more visually attractive and recognizable to users than the brand or product.

Compatibility

It will often be necessary to create a whole set of icons, especially for projects such as websites or mobile applications. In order to maintain harmony for the whole set, it is important to adhere to all the style rules that you have previously determined.

Thus determined deviations in size, basic shape, thickness of lines (Stroke) or color content (Fill) can disrupt the hierarchy of your icons and create the illusion that some icons are more important than others.

To avoid this, it may be important to do and before you start creating icons grid. That is, the auxiliary lines that you will follow.

Many things in digital design depend on the grid, so 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 that your icons fit into the grid is to stick to round numbers in determining, for example, the thickness of the line.

Characteristic design

A distinctive design, or better yet, a design must have “Personality "  more precisely what makes your icon or set unique.

Guided by the rules of UX design or 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 forbids you to draw a magnifying glass in your own way.

Easy to use

When you create a new icon set, make it "User friendly“. So in addition to being important that your icons are simple, readable and aligned, it is important that they can be easily applied or implemented in multiple projects.

Additional testing is needed to make your icon set understandable to your collaborators so that other designers can expand it with new icons or, more importantly, so that developers can easily encode and optimize it for a website or mobile app.

That is why it is especially important that your icons are organized, ie clearly named and archived in folders.

Creating new icon sets will be considered unnecessary by many because there is already a large selection on the Internet that are "free download“But it will definitely mean for your brand and its positioning in the market. Thinking about details like “custom made icon set“It 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 Spasic - Senior Graphic Designer @Digitizer

Sign Up Now.

Follow.

Chat.

Contact Form.

    Name and surname*
    E-mail*
    Do you want to leave a mobile phone number?*
    Mobile phone number
    Company/Organization*
    Website
    What does your company/organization need?
    Do you know what results you want to achieve?*
    What results do you want to achieve?


      Name and surname*
      E-mail*
      Do you want to leave a mobile phone number?*
      Mobile phone number
      Company/Organization*
      Website
      What date would you like to make an appointment?
      What time?


        Name and surname*
        E-mail*
        Do you want to leave a mobile phone number?*
        Mobile phone number
        Company/Organization*
        Website
        Do you know what results you want to achieve?*
        What results do you want to achieve?


        Mobile & Email.

        Links.