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

Edit preferences
menu
more_horiz
  • More

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.

Best practices

Position

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

check_circleDo
  • Icon with label

  • Only icon

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.

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

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