Skip to contentShopify logoPolaris

Icons → Using icons

Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.

Streamlining

Icons serve a critical role in streamlining content and facilitating navigation. They represent actions or information visually, aiding in quick comprehension and efficient interaction.

Shopify’s admin main navigation, where each item has it’s own icon.

Common actions

Common actions like edit, delete, and search have established icons that are universally understood. Leveraging pre-existing knowledge will improve clarity and help reduce clutter, since these icons require no text label.

A card with customer information, with a pencil icon representing the edit action, and a clipboard icon representing the copy to clipboard action.
Do

Use icons to replace text for common actions with universally understood icons.

A series of abstract icon buttons with no labels.
Don't

Use ambiguous icons without a text label, as that can lead to confusion and misinterpretation.

Common objects

Consistently pairing specific icons with objects enables users to quickly recognize them, which promotes a more efficient and intuitive interaction with the interface.

An inbox icon representing orders in the navigation menu, in the search results and in an information card.
Do

Use icons consistently once a meaning is assigned to them.

An inbox icon next to a number, representing an order number.
Do

Use icons to identify common objects, and to improve the overall clarity of the interface.

A series of inbox icons in a table with all the orders.
Don't

Overuse icons. Redundant icons lead to visual clutter and increased cognitive load.

Icon sizing

Icon size and weight was specifically crafted to pair with typography.

An icon next to text, highlighting the vertical alignment between the two elements.
Do

Align icons vertically with accompanying typography.

Three oversized icons next to text.
Don't

Resize icons. Resizing them will distort the relationship that was established with typography.

    On this page