Iconography
Using icons #
The icon system is built to use external, styleable, and scalable SVGs embedded in a sprite library (using a wonderful technique from Scott Jehl).
Choosing new icons #
Most icons are selected from the Font Awesome 5 Pro library, except when an icon for the matching paradigm isn't available. This helps to ensure consistency in style, weight, and sizing.
Icon code #
Interactive elements #
The sample code options below provide accessible examples for icons (via techniques shared by Sara Soueidan) appearing within interactive elements like buttons or links. The first is an example of an icon that is accompanied by text. The icon is thus hidden and unfocusable for screen readers. The second is for the rare occasions where we use icons on their own and want accompanying text for visually impaired users.
To change the icon displayed, change the ID value after the # to the icon you want from the icon list below.
Icon with text #
<button ... >
<svg aria-hidden="true" focusable="false">
<use href="/path/to/icons.svg#check-circle"></use>
</svg>
<span>Action</span>
</button>Icon without text #
<button ... >
<svg aria-hidden="true" focusable="false">
<use href="/path/to/icons.svg#check-circle"></use>
</svg>
<span class="visually-hidden">Action</span>
</button>Icon sizes #
Icons can use one of five utility classes to set their default size — ranging from 16 pixels up to 48 pixels — with a final option for filling the available space.
-
13-16 pixels
-
19-24 pixels
-
26-32 pixels
-
38-48 pixels
-
100%
Available icons #
-
Used for showing directions
-
Used for showing directions
-
Used for showing directions
-
Used for showing directions
-
To show successful operations
-
To denote the copy action
-
To denote the home page