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

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" role="img" aria-label="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

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