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
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.