As a designer, I absolutely love the way icons look on a webpage. Great icons generally improve the user interface design and make a webpage more pleasing to the eyes. There are both pros and cons to using icons in your website design. How do you decide if icons, text or a combination of the two is right for you? 


Sometimes it’s less about how they look and more about  how they affect the user experience.  Do the icons direct users appropriately and aid them in their goals while visiting your website or using your application?

When it comes down to icons vs text, visuals are more likely to be recognized and recalled. You have to keep in mind that some icons can be very difficult to interpret if you are not already familiar with them. Try to steer clear from ambiguous, representational or abstract icons unless accompanied with text. (ex: representational icon would be an eraser standing for “delete”) The main problem with representational icons is that they have to be learned. This can lead to some major usability issues that will ultimately drive users away from your website if they are unable to interpret the icons you are using. To help solve this issue you can always introduce text into the mix.

If space allows – icons accompanied with text can be the optimal combination.  Those who have an aversion to reading can scan the page and use the visual icons to guide them. Those who are unfamiliar with conventional icons are able to read the text and find their way around your website. The text label will most likely play an important role during the early stages of a visit to your website when a visitor is just finding their way around.

As a rule of thumb, steer clear of using icons alone unless:

  • You have limited space.
  • You are using icons that are standardized.
  • You are using an icon that closely resembles an actual object (ex: printer).
  • You plan on accompanying them with text until you reach mobile device size in which case there may not be enough room so you lose the text.

If you do use icons be sure that they are the same style and share the same stroke size, color and all around weight. Icons really can be a wonderful addition to your website and I encourage you to use them whenever possible – just use them wisely and in a way that doesn’t hinder the user’s experience.

Do you use icons and other web design elements correctly?  Find out when you take our short web audit.

[do action=”web-audit-promo”]