Our system uses Google’s Material Icon “Rounded” set.
Introducing new icons to our system is permissable, as long as they are from the Google Material Icon set and follow usage guidelines.
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)
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.
Provide “alt-text” for all graphic assets to meet Section 508 and the
Web Content Accessibility Guidelines 2.0. Learn more.
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.
1. Icon Asset
The vector icon asset.
Extra space surrounding the icon asset.
Use 8px of space between icons and text.