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

Edit preferences

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

Logo icons

Third-party logos used as icons in our interfaces should be harmonious with our icon set.


Logo wrapper

Size

When a wrapper is present, its size should be the icon size and the logo inside should be one scale less. For example, a 36px logo icon with a wrapper is composed of a 36px wrapper and a 24px icon inside.

Type

For some situations (such as social network links) we can use a square wrapper as well. Square with 0px or 2px rounded borders only.

Report an issue or share an idea