Iconography

Overview

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


Usage

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

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

Guidelines

  • 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

Types

Fundamentals Icons


Maps and Transportation Icons


Utilities Icons


Action Icons


Editor Icons


Social Icons


Atomic Design Icons


Components Icons


Tools Icons


CMS Icons



Feedback

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

Chat with the team