Reading list Switch to dark mode

    Basics of Icon usage in UI design

    Updated 13 November 2019

    There are 2 things in Iconography one is Designing the Icon and another is Icon usage. where designers masters the designing process but underestimates the the Icon usage ways.
    This may sound like really little thing that who cares the usage but it does specially when someone land on your product page of sees your information on a Infographic and point s the poor design.
    Instead of reading the long paras users generally focuses on the Icons and their placement.

    Few Examples of the Icons 

    Few Examples of the Icons 

    Use Labels Whenever Possible

    Before continuing further look at 1st Image 

    can you Identify what’s point for any of Icons without reading the whole text below?..obviously NO!! Now look at the Image 2nd it take hardly few seconds to relate the point to the Icons.
    Icons have been used to give a context to a point but Label or text just hits the point in seconds. So wherever in doubt use labels.

    Icons with and without labels

    Give icons a background

    As you can clearly see the Image 1 has the Icons same as the Image 2 but the difference is 1st one is looking a bit off as seems like the Icons are floating.
    While just by giving a Background everything looks so systematic.

    Icons with and without background

    Ready to use Free and Open Source SVG Icons Pack JavaScript Library. Vivid.js

    Start your headless eCommerce
    Find out More

    Use Colors to Match not to Mismatch (Consistency is the key)

    Just at the first glance the icons in the Image is distracting our eyes as there color variation. which is not a good UX where as in image 2 Every thing has been done according to the Design System as it is more consistent and more professional then the Image 1.

    Consistent Icons

    Get coolest handpicked gradient colors collection palette for your next project and Icons CoolHue, alternatively copy css or download as image too.

    I hope from next time you will feel easy while placing icons in your project.

    Thank you for giving your precious time.

    . . .

    Leave a Comment

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

    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home