Select Language

Support Icons With Labels

Back to List

Icons can often confuse users or get misinterpreted by different people due to their experience level or even due to their culture.

Fix this accessibility issue is by adding a subtle text label near the icon which will describe its usage.

Keep this information in mind especially for mobile interfaces which don't support hover effects.

More to explore

A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels.

A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels.

A smart use case for labels is on color pickers with predefined values. Depending on the app's context you can even omit labels.

Complement your link copy with a visual representation of the selected value. In this example, the labels show you how capitalization will look.

Complement your link copy with a visual representation of the selected value. In this example, the labels show you how capitalization will look.

Complement your link copy with a visual representation of the selected value. In this example, the labels show you how capitalization will look.

Keyboard shortcuts boost productivity and save time for power users. Yet it's sometimes difficult to remember them.

Keyboard shortcuts boost productivity and save time for power users. Yet it's sometimes difficult to remember them.

Keyboard shortcuts boost productivity and save time for power users. Yet it's sometimes difficult to remember them.