Iconography

Iconography uses images and symbols to represent an object visually. They communicate a message and should be distinct and informative
Fundamentals Icons
Maps and Transportation Icons
Utilities Icons
Action Icons
Editor Icons
Social Icons
Atomic Design Icons
Components Icons
Tools Icons
CMS Icons

Usage

Replace sgds-icon-iconName with the one you wish to use from above.

<span class="sgds-icon sgds-icon-iconName"></span>

Guidelines

Iconography should:

  • Be used sparingly throughout the product to provide clarity and reduce cognitive load on users
  • Be accessible as people with limited vision may not be able to see them

Feedback

Having troubles with the guide? Please give us more details and we'll get back to you soon.

Tell us more