Foundations
Colors
Iconography
Grid + Spacing
Responsive
Shadows
Typography

Layout
Modals
Modals / Confirmation
Panels
Tabs

Actions & Inputs
Buttons
Checkboxes
Dropdowns
Forms
Links
Radio Buttons
Selects
Text Fields

Status & Feedback
Badges
Progress Indicators
Tooltips

Icons are a simple, graphical representation of actions and statuses within the context of our product experience.

◢

Overview 

Our system uses Google’s Material Icon “Rounded” set.
See: material.io/icons

Introducing new icons to our system is permissable, as long as they are from the Google Material Icon set 
and follow usage guidelines.

ICON SIZES:

Our system uses 2 sets of sizes to allow for flexibilty of use cases. Padding is built into icon assets. Icons 
should not be used outside of their frame.

24px: Our primary icon set
16px: Our dense UI set (To be used when space is constrained or in conjunction with in-line copy)

ICON TYPES:

Status icons, or non-actionable icons, are used to provide additional visual cues. 
They are used in conjunction with text. 


Action icons can be interacted with and can either be used independantly or in conjunction with text.

ALTERNATE TEXT FOR VISUALLY IMPARED USERS

Provide “alt-text” for all graphic assets to meet Section 508 and the 
Web Content Accessibility Guidelines 2.0. Learn more.
 

USE CASES:

Order Details: icons are used as visual cues to differentiate many different data types.

Bulk Edit: Edit and Delete icons are used in lieu of copy due to space considerations.

Catalog Import/Export: Confirmation and Error icons are used to provide additional context 
into Import/Export status.

Anatomy

Examples