System Icons

System Icons are symbols used to convey simple actions and functions, they are the most common icons encountered in products and help communicate metaphors at a glance.

Web GitHubWeb Storybook
yarn add @workday/canvas-system-icons-web
Sources
Web GitHubWeb Storybook
Web Install
yarn add @workday/canvas-system-icons-web

Usage Guidance

System icons are designed to display essential characteristics that can communicate metaphors at a glance. Some icons have specific meaning at Workday, while others are universally recognized to display a specific function. In this section you will find guidance on the use of System icons.

Universal Icons

Some icons are universally understood, for example, common icons like ‘home’ or ‘print’ share the same standardized meaning in many countries and cultures. An absence of this standard can impact our shared understanding, and we can no longer rely on the same functionality when a universal icon is encountered.

While universal icons are rare, it is advised that these icons are used for their specific intended purpose, below are some examples of universal icons encountered in the Canvas Design System.

Example of universally understood System Icons.

Directional Icons

Icons are commonly used to help us navigate from page to page, being consistent with the direction that these icons will take us in is important when we expect to be taken in the direction we choose. If a consistent pattern is not maintained, trust is diminished. The general rule of thumb is to point in the direction you expect to be taken.

Example of directional System Icons.

Bidirectionality

Some icons should be mirrored for bidirectional support so the same interpertation of an icon is correct for languages read in different directions. Navigation icons are most commonly mirrored, icons that deptic text, movement or interactable elements should also do this. For more info on this, check out our article on RTL and Bidirectionality.

Example of bidirectional System Icons.

Cultural Context

It is important to be aware how people from other cultures may view your chosen icon. Users around the globe may have different interpretations of what the icon represents and the action or message the icon is trying to convey. A misinterpretation can affect someone's ability to understand the icon’s meaning, or in certain instances, it may be viewed as offensive.

Users have several controls related to how things will be formatted and displayed within Workday:

  • Language: Controls the language itself
  • Locale: Controls the locale setting, like date and currency formats
  • Currency: Displays the users preferred currency

It is important to keep these controls in mind when selecting icons that contain text, currency, date, and time. Workday aims to deliver a culturally and linguistically inclusive user experience to our 20+ million customers in over 160 countries, with more than 75% of people speaking a non-English language.

Web Examples

IconCultural Context
dollar-example Not everyone uses Dollars as currency. For example, some Workday customers use Euros.
hash-example Hash mark does not mean “number” in some countries. Instead, it is recognized in the context of social media only.
academic-example Not all countries use graduation caps. Consider other customs when designing for students globally.

Functionality

Icons are can be used to add an additional layer of context and recognizability to actions. In the sections below you will find guidance for using system icons in this way.

Using Labels

Icons must provide an equivalent text alternative for users who cannot perceive them, unless their meaning can be derived elsewhere in text. Icons that do not communicate anything about the UI, or have adjacent labels in text, may be considered decorative or redundant. Placing them in close proximity to an associated task can be beneficial for those with low or partial vision. If an icon cannot be labeled, a Tooltip can be used to display an icon's name or functionality, read more about that below.

Do

Label icons to display its name or function.

Caution

When an icon cannot be labeled, use a tooltip.

Using Tooltips

Tooltips are used to provide additional information or context. They should never contain information that is vital to completing a task, as this is hidden from plain sight when tooltips are used.

Tooltips can also be used to display an icon's action (usually implemented with an Icon Button). It is important to be aware that tooltips are not easily accessible on mobile devices, so labels are preferred where possible.

Do

Use tooltips to provide additional information that is non-essential for completing a task.

Don't

Hiding essential information behind a tooltip makes it harder to discover.

Applying Touch Targets

A minimum touch target of 48px is required around a system icon to achieve a usable touch target. This is handled automatically when you use an Icon Button. Smaller touch targets make interacting with an icon difficult, especially when interacted with by an individual who may be on the move or with declining mobility.

Example of touch target clearance used with System Icons.

Alignment

System icons should be center aligned vertically or horizontally depending on how they are stacked. This ensures that icons look visually balanced when in close proximity to another icon. The same rule should be followed when text accompanies an icon

Example of icon alignment.

Sizing

System icons are made to a specific standard. Changing the size of an icon will greatly diminish its quality. Canvas does not recommend scaling icons. If for a specific reason you do need to scale an icon we recommend following Canvas spacing rules resizing in increments of 4 pixels, never go below 20px.

Caution

Use a standard size icon whenever possible and use Canvas spacing rules to scale an icon if needed.

Don't

Use inconsistant sizes, always refer to Canvas spacing rules when scaling assets.

Color

A variety of system icons can be modified to highlight specific details that you wish to call attention to, there are 3 interactive layers where the color can be changed at an individual level. For more information on this check out the Layers section in the "Create Your Own" tab.

Web Examples

The icons shipped in @workday/canvas-system-icons-web are just SVGs with some additional metadata. If you'd like to easily use them in React, use the SystemIcon component from @workday/canvas-kit-react/icon:

import React from 'react';
import {colors} from '@workday/canvas-kit-react/tokens';
import {SystemIcon} from '@workday/canvas-kit-react/icon';
import {activityStreamIcon} from '@workday/canvas-system-icons-web';
export default () => (
<>
<SystemIcon icon={activityStreamIcon} />
<SystemIcon icon={activityStreamIcon} color={colors.blueberry500} />
<SystemIcon
icon={activityStreamIcon}
accent={colors.frenchVanilla100}
fill={colors.blueberry500}
background={colors.blueberry500}
/>
<SystemIcon icon={activityStreamIcon} size={48} />
</>
);

Props

NameTypeDefaultDescription
icon*CanvasSystemIconThe icon to display from `@workday/canvas-system-icons-web`.
sizenumber | undefinedThe size of the SystemIcon in `px`.
accentstring | undefinedThe accent color of the SystemIcon. This overrides `color`.
accentHoverstring | undefinedThe accent color of the SystemIcon on hover. This overrides `colorHover`.
backgroundstring | undefinedtransparentThe background color of the SystemIcon.
backgroundHoverstring | undefinedtransparentThe background color of the SystemIcon on hover.
colorstring | undefinediconColors.standardThe color of the SystemIcon. This defines `accent` and `fill`. `color` may be overriden by `accent` and `fill`.
colorHoverstring | undefinediconColors.hoverThe hover color of the SystemIcon. This defines `accentHover` and `fillHover`. `colorHover` may be overriden by `accentHover` and `fillHover`.
fillstring | undefinedThe fill color of the SystemIcon. This overrides `color`.
fillHoverstring | undefinedThe fill color of the SystemIcon on hover. This overrides `colorHover`.
cssInterpolationWithTheme<any>
stylesCSSObject | undefined
shouldMirrorboolean | undefinedfalseIf set to `true`, transform the SVG's x-axis to mirror the graphic
refReact.Ref<any>Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
as"symbol" | "object" | "small" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 156 more ... | React.ComponentType<any>Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef` and spread extra props to a root element.

SystemIconCircle

This is another component provided to quickly render a system icon with a colored background of your choice.

import React from 'react';
import {colors} from '@workday/canvas-kit-react/tokens';
import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
import {activityStreamIcon} from '@workday/canvas-system-icons-web';
export default () => (
<>
<SystemIconCircle icon={activityStreamIcon} />
<SystemIconCircle icon={activityStreamIcon} background={colors.pomegranate500} />
</>
);

Props

NameTypeDefaultDescription
backgroundstring | undefinedcolors.soap300The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
icon*CanvasSystemIconThe icon to display from `@workday/canvas-accent-icons-web`.
sizenumber | undefinedSystemIconCircleSize.lThe size of the SystemIconCircle.
shouldMirrorboolean | undefinedfalseIf set to `true`, transform the SVG's x-axis to mirror the graphic
refReact.Ref<any>Optional ref. If the component represents an element, this ref will be a reference to the real DOM element of the component. If `as` is set to an element, it will be that element. If `as` is a component, the reference will be to that component (or element if the component uses `React.forwardRef`).
as"symbol" | "object" | "small" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 156 more ... | React.ComponentType<any>Optional override of the default element used by the component. Any valid tag or Component. If you provided a Component, this component should forward the ref using `React.forwardRef` and spread extra props to a root element.