Editor’s Note on July 21, 2021: Some additional details about user interface design have been added – the updated notes appear in bold, italic text below.

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. So, how do you decide if icons, text, or a combination of the two is right for you?

The User Experience

Sometimes it’s less about how the icons look and more about how they affect the user experience. Do they direct users appropriately and aid them in their goals while visiting your website or using your application? As people spend more time on the internet, they expect the websites they visit to work in a certain way. So, if your icons aren’t benefiting those that are visiting your site, it might be best to remove them.

Icons vs. Text

Do people recognize icons faster than words? 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’re not already familiar with them. Try to steer clear from ambiguous, representational, or abstract icons unless accompanied by a 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’re unable to interpret the icons you’re using. To help solve this issue, you can always introduce text into the mixture!

Icons and Text

Iconography can be one of the biggest design elements that help make a brand recognizable. But, that doesn’t mean you should use only icons. In some instances, it’s best to use icons in conjunction with text. As mentioned above, if you’re using a pretty odd icon, some visitors might not understand its significance. So, when thinking about your user interface design, keep your visitors in mind and not just overall aesthetics.

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.

Your User Interface Design

When thinking about your user interface design, as a rule of thumb, steer clear of using icons alone unless:

• You have limited space
• You’re using icons that are standardized
• You’re 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’re 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.

​