The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

info
Didn’t find the component you were looking for? Take a look on what’s coming next or contact us.
Looking for components? what’s next or contact us.
close

Icon UX

Icons serve as an effective visual aid and are also useful to save space on the screen. Done correctly, icons can help guide users intuitively through a workflow without relying on too much copy.


Eye tracking research has shown that users scan from the left in a vertical movement. In order for icons to serve as a visual scanning aid, users need to see them before they see the button label. Placing them to the left of a label allows users to see the icon first. If you place icons to the right of your label, users read the label first and therefore the icon serves no purpose other than decoration.

For clearer usability, always use labels with abstract or unfamiliar icons.


linkBest practices

Position

Place icons before labels in order for users to see them first.

check_circleDo
  • Icon with label

    Icons with labels

  • Only icon

    Horizontal list of icons

Align the icon vertically with the label heading, instead of centering it with the heading and body.

cancelDo
dashboard

Heading

Quisque cursus ipsum a magna euismod. vel maximus augue efficitur Mauris finibus erat.

check_circleDon't
dashboard

Heading

Quisque cursus ipsum a magna euismod. vel maximus augue efficitur Mauris finibus erat.

When placing icons inside the buttons always place them left of the text.

cancelDo

check_circleDon't


Spacing

Icons should be separated by 8px of space or more to prevent users from activating the wrong icon and invoking the wrong action.

check_circleDo

Icon spacing example


Tooltip

Use a tooltip if an icon has no label and needs some short explanation. For example, toolbar controls and command buttons without labels should have tooltips.

check_circleDo
Icons with tooltip