iconandtext.md 996 Bytes
Newer Older
Carl Schwan's avatar
Carl Schwan committed
1
2
---
title: Icons and Text
Carl Schwan's avatar
Carl Schwan committed
3
weight: 3
Carl Schwan's avatar
Carl Schwan committed
4
---
Carl Schwan's avatar
Carl Schwan committed
5
6
7
8
9
10
11
12
13
14
15
16

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

Carl Schwan's avatar
Carl Schwan committed
17
![Alignment of text and icons.](/hig/HIGPatternIconsAndText.png)
Carl Schwan's avatar
Carl Schwan committed
18

Carl Schwan's avatar
Carl Schwan committed
19
{{< alert color="warning" title="Attention" >}}
20
Make sure to read about how [units and measurements]({{< relref "units" >}})
Carl Schwan's avatar
Carl Schwan committed
21
are used for design and development.
Carl Schwan's avatar
Carl Schwan committed
22
{{< /alert >}}
Carl Schwan's avatar
Carl Schwan committed
23
24
25
26
27
28
29
30
31
32
33
34

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