• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • About Us
  • Write for Us

Orangetitles

    • Marketing
      • Social Media
    • Management
    • Design
    • Top Examples
    Orangetitles » Design » Icon Design Best Practices – Tips and Design Guidelines

    Icon Design Best Practices – Tips and Design Guidelines

    26.12.2019 By Alex Kirianov Leave a Comment

    Nowadays icons are considered to be the most universal and understandable language in the world. In fact, people have always used them in different forms or styles. Even Egyptian hieroglyphs or cave paintings are nothing else but icons, and people understand some of them even now. 

    So there is no surprise that icons really matter in the digital world. You can speak any language, but you will get messages from icons because sometimes they are louder than any words. They help to navigate in a business center, shopping mall, airport, to perform a particular action using the software. There’re a lot of options for using these little images. And if you’re going to create your personal ones, we’re here to share icon best practices.

    Why Do You Need Icons

    Here are a few reasons for using icons in design:

    • They are easy to recognize. Icons will attract the attention of the audience and help people to navigate at your web-site.
    • They save space. This advantage is especially important for displaying a website on a mobile screen.
    • They are comfortable. It’s convenient for users to click on them with a finger and the number of clicks on the link also increases.
    • They are universal and understandable for people of any gender, age, from any country.
    • They are aesthetically attractive. Icon design best practices help make a website or application more appealing.

    Here is a couple of some award winning great icon design examples.

    Science icons. Source

    Star Wars Icons. Source

    Food and Beverage icons. Source

    Icons as Part of an Awesome UX | Common mistakes

    At first glance, it seems that there is nothing easier than creating a good icon. In fact, many professional designers make mistakes that are fraught with poor UX and icon usability.

    The biggest mistake is that we think users will understand the meaning of our icons. There is even a story about Microsoft Outlook. They designed a toolbar for icons only, but users were at a loss because they didn’t understand them at all. MO had to add text labels to save the situation. Therefore, you need to make sure that the icons are both creative and recognizable. Do not create too many graphic parts and do not reinvent the wheel. Take care of text labels for user experience icons just in case.

    7 Icon Design Tips

    There are several common recommendations on how to make the grade at the icon creation. If you need icons for a mobile application, you can also use Apple or Google Play icon guidelines with all the necessary requirements.

    1. Decide on the style

    Your first and most essential task is to choose the appropriate style. You can decide on the outline, plain, color, filled or the mixed style, it doesn’t matter. But make sure that all your icons in the set follow it. Indeed, if there are contour and filled icons at the same time, the second ones will attract more attention, and the set with different types of icons design will not be harmonious.

    2. Use simple metaphors

    Users should understand your point or message from first glance. After all, icons are needed for the quick perception of information through a visual image. To realize this you can use common and popular forms, colors, symbols. Follow the 5-seconds rule. If people need more than 5 seconds to think about the icon, that is the bad icon. 

    3. Bet on grid

    Ideal pixels are what you should remember and check throughout your work. Because of the grid, the icons will have clear lines and borders. This will make your work better. You can use the 8-pixel grid and 12-column layout, they are more flexible than the decimal matrix. That’s why they’re used for many interfaces. It is possible to divide 12 into two, three, four and six. Thus, 24- or 48-pixel icon areas have become standard. If a larger size is required, scale these icons. It is also important to observe line thickness. You can make 2 px. for large parts and for small ones 1px. 

    4. Rounded corners

    If you’ve created some of the icons with rounded corners, make sure that all others follow this rule. It may seem that this is a trifle, but it will also provide your set with organicity and unity of form.

    5. Details matter

    The details amount depends on the size of the ux design icon. The smaller it is, the less different details you need. Then the icon will not merge into a color spot. It is up to you whether you’ll make the icons detailed or minimalistic, but if they have high details, it is advisable to use finer lines.

    Set of icons for Summer Olympics in Munich by Otl Aicher (1972)

    6. Color

    Don’t create icons set of different colors if it is not dictated by the features of the interface. For example, it is important to distinguish the confirmation and cancel icons. In other cases, use the same color for plain icons, or the same color combination for multi-colored ones. It would be nice to use your brand colours that the audience is already used to.

    7. Add features

    To combine your set into a single whole, you can add something to make them more interesting, e.g, you can use open contour lines. Experiment with different styles to create your own original product. Combine fill and outline, or add color spots.

    Thus, it’s all yours to make icon something more than just a beautiful element for a website. They can become one of the ways to promote a business, increase brand-awareness and customer loyalty.

    The example of how the complexity of real object was reduced.

    Filed Under: Design

    About Alex Kirianov

    Digital Marketing Professional. Founder of Orangetitles.com. Follow me on twitter or instagram.

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    NEW ARTICLES

    entrepreneurship skills needed

    What skills are needed to be an entrepreneur and start a business

    solopreneur definition a business owner

    The Ultimate Secret Of Solopreneurship

    how to attract customers

    How to Attract New Customers to Your Business

    Topic Categories

    • Design
    • Management
    • Marketing
    • Social Media
    • Top Examples

    FEATURED STORIES

    • What skills are needed to be an entrepreneur and start a business

      What skills are needed to be an entrepreneur and start a business
    • The Ultimate Secret Of Solopreneurship

      The Ultimate Secret Of Solopreneurship
    • How to Attract New Customers to Your Business

      How to Attract New Customers to Your Business
    • The Philosophy Of Teamwork

      The Philosophy Of Teamwork
    • Best Websites Design for Law Firms

      Best Websites Design for Law Firms

    FOLLOW US ONLINE

    • Facebook
    • Medium
    • Pinterest
    • Twitter
    • YouTube
    Copyright © 2023 Orangetitles