Introduction
Design PrinciplesAccessibility
Foundation
ColorGridIconographyIllustrationsShadowsTypography
Product Writing Guide
OverviewProduct's PersonalityBest PracticesInclusive LanguageWriting AccessiblyWriting GloballyGrammar RulesGlossaries
Components
ACTIONS
ButtonDropdownDropdown FlyoutToggle ButtonSegmented Controller
DISPLAY
AvatarAvatar StackContact ItemFile ListPillTokenThumbnail
INPUT
CheckboxDate SelectDropzoneFile SelectGroup SelectMenuMulti SelectNumber/Currency InputPill SelectRadio ButtonSingle SelectSliderSwitchText AreaText Editor (RTF)Text InputTiered Select
LOADING
Progress BarSpinner
MESSAGING
BannerEmpty StateToastTooltip
navigation
BreadcrumbsLinkPaginationSearchTabsTree
overlays & surfaces
CardModalPanelPopoverTearsheet
Layouts
DetailDockEmailPage TemplateRelated Items
Patterns
Content FlowFormForm Empty StateIn-Line Error ValidationOverlay UsageTitle LockupEmail Notifications
Views
Data Table
Data TableCells & RowsLocation Filter
ListLists vs TablesTile
DST Resources
ContributeDevelopmentFigma LibrariesSpotlightUser TestingFeedback

Iconography

Icons are used to express actions, an item’s state, and even to categorize data. All icons created and added to the system must be clear, intuitive, and consistent. They should be used sparingly and in a way that is consistent with their original intent.
Demo and Developer Guidelines
Figma Document

System Set

Style

When creating an icon it is important to understand the grid and styling decisions made to unify that icon within a family of icons. Use a 24px grid when designing for standard icons. A 16px grid can be used to design icons that are primarily or commonly displayed at smaller sizes.

Filled vs. Outlined

Our icons predominantly consist of filled icons because they offer ideal contrast to the heavy content throughout our product.
Correct
Incorrect

Radius

Our icons should be crisp and punchy. When creating new icons, use a radius on corners only when needed.

Naming

When possible, icons are named after the physical object they represent. For example, we would call an icon trash instead of delete.

Sizing

The default recommended sizing for icons is 24px x 24px. Icons can also be used at 16px x 16px for small sizing and 32px x 32px for large.

Sizing

Colored icons can be used for emphasis and to indicate status. Use color sparingly bring attention to items.

Adding New Icons to the System Set

Steps to follow:

1. UX Designer checks the current system set to see if an existing icon can be used

2. If no icon exists in the system that is appropriate, the UX Designer can explore a new icon to be used during the conceptual phase

3. UX Designer works with the Design Systems Team during this process to ensure the new icon meets the established design guidelines

4. Once the new icon design is approved and ready for development, the icon can be requested by the engineering team to be added to CORE for the next release

5. NOTE: If a specialty icon is needed that will not be used system wide, an .svg version can still be used in development, if needed