Icons and Text

When to Use

Combining icons and text can be used to identify data and actions in a user interface. Examples include toolbar actions, file and folder displays in a file manager, application listings, and notifications. The layout should be consistent.

How to Use

Alignment of text and icons.

Attention

Make sure to read about how units and measurements are used for design and development.

  • Where icons are shown with text, use the layout guidelines above.

Implementation

  • For 16x16px icons and smaller, the 8px margins may be reduced to 4px.

  • Where icons are shown without text, always provide tooltip text and alternate text for accessibility.

  • If Secondary Text is normally present, but is empty in a particular instance, align the Primary Text to the vertical center.