Iconography uses images and symbols to represent an object visually. They communicate messages by being distinct and informative.


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>


  • 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


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


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

Chat with the team