Switch to M&T
Overview

Iconography

Icons are symbols that represent concepts, objects or actions, and have semantic purpose within a layout. They should always be recognizable, functional and easily understood.

Icon Font

Icons may be added to any inline element. To add an icon, include the icon class as well as the class name of the specific icon you want to use. Icon names reflect what the icon shows, not what it means, and are dash separated, e.g. icon--card-in-slot.

<i class="icon icon--bar-graph"/>
Copy

Icon Sizes

Icons can be modified from their base size (1em) using modifier classes:

ClassSizeExample
(default)1em
.icon--sm.75em
.icon--lg1.5em
.icon--xl2em

Accessibility

Elements with an icon class must also have an aria-labelledby attribute whose value matches that of the id attribute on the element with the icon's associated text label.

<label id="check"/>Order Checks</label>


<i aria-labelledby="check" class="icon icon--check"/>


Icon Library