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.

Chat with the team