Styles menu
Icons
Icons are small images that help users identify important content and interact with components and patterns.
Icons in the Design Standards
The Design Standards components and patterns use Font Awesome icons.
For example, site cards uses a right arrow icon
Find and use icons
You can browse Font Awesome icons to find some icons you like and then add the icon name and style as CSS classes to an HTML <i> tag.
The Brand Standards uses the solid, regular and brand style icons.
- Solid
<i class="fa-solid fa-coffee" aria-hidden="true"></i> - Regular
<i class="fa-regular fa-coffee" aria-hidden="true"></i> - Brand
<i class="fa-brands fa-github-square" aria-hidden="true"></i>
Relative sizing
Font Awesome includes a range of t-shirt based sizes that not only increase or decrease an icon’s size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This is great for increasing/decreasing an icon’s size while maintaining legibility and alignment alongside UI elements.
The relative sizing scale is created with modern browsers’ default 16px font-size in mind and creates steps up/down from there.
| Relative sizing class | Font size | Equivalent in pixels |
|---|---|---|
fa-2xs |
0.625em | 10px |
fa-xs |
0.75em | 12px |
fa-sm |
0.875em | 14px |
fa-lg |
1.25em | 20px |
fa-xl |
1.5em | 24px |
fa-2xl |
2em | 32px |
Sizing on the smaller side
Font Awesome’s icons are designed to render crisply at the equivalent of 16px. While they provide utilities to decrease their size, it’s industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.
Icon colour
Icons use the colour of the text around them by default.
Accessibility
Use aria-hidden="true" for decorative icons so screen readers will ignore them. When it’s important that a screen reader tells the user about an icon, place a hidden element with a text label.
<a class="social--icons" href="#">
<i class="fa-brands fa-x-twitter" aria-hidden="true"></i>
<span class="visually-hidden visually-hidden-focusable"> X Twitter </span>
</a>