Overview
Iconography uses images and symbols to represent an object visually. They communicate messages by being distinct and informative.
Usage
Replace sgds-icon-iconName with the one you wish to use from the lists below.
<span class="sgds-icon sgds-icon-iconName" role="img" aria-label="iconName"></span>Guidelines
Icon usage guidelines
- Use icons sparingly throughout your pages to provide clarity and reduce cognitive load on users
- Be mindful of accessibility; do not only rely on icons to convey meaning as people with limited vision may not be able to see them well
Types
Mandatory Icons
Fundamentals Icons
Maps and Transportation Icons
Utilities Icons
Action Icons
Editor Icons
Social Icons
Atomic Design Icons
Components Icons
Tools Icons
CMS Icons
Can't find a component?
Let us know what you need and we’ll be happy to look into it