SGDS v2.0 is here!
Check out the brand new v2.0 portal or click here for more information



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

Can't find a component?

Let us know what you need and we’ll be happy to look into it

Request component