Guide towards usability of Icons in UI Design


27 May, 2024

Guide towards usability of Icons in UI Design

There should be a purpose for each of an icon within the interface irrespective of whether a website or an app is being designed for your business. Icons help a lot by saving enormous space within the screen. Moreover, icons can help in assisting users if it has been properly included within the user interface design. With icons, you can guide the website visitors intuitively through a workflow without depending much on the copy included in the app or website. However if the icons are not properly included, then it can have adverse effect on your brand reputation as users can get confused and result in providing them with a very bad user experience.

Let’s take a close look on some of the most popular icons and the impact it had on users.

Easy Icons

easy icons

The easiest of the icons are obviously the home shaped icons and shopping cart shaped icons. The home shaped icons makes it easier for the users to know that it will take users to the home page of the app or website whereas the shopping cart icon will take users to the shopping cart page. It is always desirable to keep the icons as simple as possible at the same time include creativity within those icons. However including over clever icons for basic functions can ruin the user experience. It has to be understood that the main purpose of an icon is to simply guide the users.

Icons with Contradictory Meaning

contadictory icons

Not all commonly used icons can be user-friendly. There are several icons that have contradictory meanings which can further make the users too confused. For example a heart shaped icon is commonly used to indicate when the users like something or want to save the item towards a list of their favourites. But with a heart shaped icon, users can get confused because several thoughts would run in to their mind. For example, users would think that whether tapping the icon will notify someone that they have liked the item, will those preferences be saved and similar items pop up on their feeds in future or whether it is a general expression of approval etc.

There are several other icons that have contradictory meanings such as the Star icon, Pencil icon, chat icon, menu icon and share icon etc. In addition to it, different operating systems are more likely to provide different experiences with the app for users since the standard bar icons can differ from one operating system to another operating system and thereby creating extra confusion among the users.

Icons that are Outdated


There are several icons that are outdated. For example, telephone icons that users normally view in apps or websites especially denotes ‘Contact Us’ information. However the younger generation might not be used to such icons as they are living in an era where smartphones are popular rather than a telephone receiver which has become less popular nowadays. Similar would be a floppy disk which denotes the ‘Save’ symbol, however the younger generations have not even heard of floppy disks and it might seem strange for them that such an icon has been used to denote the ‘Save’ symbol.

Icons that are Unique

unique icons

There are instances wherein unique icons were able to connect effectively with first time users and also experienced users as well. The quill pen icon in Twitter makes it very easy to understand users what that icon is supposed to do. By placing the quill pen icon next to the ‘take photo’ icon and ‘uploading of an image’ icon makes it quite easy for users to imagine what the unique quill pen icon is all about. Twitter has also incorporated the brand with the quill pen symbol by including the ‘feathers’ icon that is visible in both Twitter icon and the quill pen icon used to tweet.

Points to remember while including Icons

  • Do not use icons that have conflicting meanings that might create confusion among the users.
  • Do not try to be too clever or create icons that are too fancy.
  • Try to incorporate labels wherever it can be of use for the user.
  • Always think twice about the design choices of icons and test those icons before implementing it within the app or website.

Janbask Digital Design is the best Web Development & Graphic Design Company in Virginia, offers logo design, icon design, brochure design, banner design and many more services. Visit to know us more

Get a Quote