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.

Chat with the team