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


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

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


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


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

Tell us more