The usability issues of text-heavy headers and the standard shopper behavior of wanting to read as little as possible has led to a reliance on icons in most designs. They look good, save space, reduce clutter, and make for a more seamless and minimalist design. 

But not all icons are created equal. Some are universally acknowledged while others either have multiple meanings, or just happen to have been made up by developers on the spot, making them impossible to decipher. 

 

Universal icons

These are icons that have become known and understood by everyone after years of common use. A few examples:

The cart, home, account, search, and delete icons.

Universal icons can be employed by designers without the risk of any significant usability issues because everyone understands what they mean.

 

Icons with multiple meanings

These are icons in common use with more than one meaning and often confuse customers. A few examples:

 


This icon can refer to either messages or comments.

 


This icon can be interpreted as either the refresh or redo function. Less keen users might even mistake it for the undo function even though the arrow is pointing in the wrong direction.

 


This can be a share icon, a back icon, or an undo icon.

 

Bespoke icons

These are pictographic representations made up on the spot by developers. There are no standards for bespoke icons as any shape can mean anything so they’re extremely confusing.

 

Use text labels

If you use bespoke icons or any other icon whose meaning would not be immediately apparent to a user, make sure those icons are accompanied by a text label to clarify any ambiguity.

 

Don’t mix icons with text links

The icons will draw all the attention and users will assume the text links are subordinate to the icons. Therefore, use icons for all header elements.

 

Use negative space

Make your icons stand out by surrounding them with enough white space to ensure they don’t blend into the surroundings.