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.

yarn add @workday/canvas-system-icons-web
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} />
</>
);

Layout Component

SystemIcon supports all props from thelayout component.

Props

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
icon

The icon to display from @workday/canvas-system-icons-web.

size number string undefined

The size of the SystemIcon in px.

accent

The accent color of the SystemIcon. This overrides color.

accentHover

The accent color of the SystemIcon on hover. This overrides colorHover.

background

The background color of the SystemIcon.

'transparent'
backgroundHover

The background color of the SystemIcon on hover.

'transparent'
color

The color of the SystemIcon. This defines accent and fill. color may be overriden by accent and fill.

colorHover

The hover color of the SystemIcon. This defines accentHover and fillHover. colorHover may be overriden by accentHover and fillHover.

fill

The fill color of the SystemIcon. This overrides color.

fillHover

The fill color of the SystemIcon on hover. This overrides colorHover.

styles
shouldMirrorboolean

If set to true, transform the SVG's x-axis to mirror the graphic

false
cs

The cs prop takes in a single value or an array of values. You can pass the CSS class name returned by , or the result of and . If you're extending a component already using cs, you can merge that prop in as well. Any style that is passed to the cs prop will override style props. If you wish to have styles that are overridden by the css prop, or styles added via the styled API, use wherever elemProps is used. If your component needs to also handle style props, use instead.

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';
// ...
// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.
return (
<Element
{...handleCsProp(elemProps, [
myStyles,
myModifiers({ size: 'medium' }),
myVars({ backgroundColor: 'red' })
])}
>
{children}
</Element>
)
childrenReactNode
asReact.ElementType

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.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

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).

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

Props extend from span. Changing the as prop will change the element interface.

NameTypeDescriptionDefault
background

The background color of the SystemIconCircle from @workday/canvas-colors-web.

icon

The icon to display from @workday/canvas-accent-icons-web.

size number

The size of the SystemIconCircle.

shouldMirrorboolean

If set to true, transform the SVG's x-axis to mirror the graphic

false
childrenReact.ReactNode
asReact.ElementType

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.forwardRefand spread extra props to a root element.

Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care.

span
refReact.Ref<R = span>

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).

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section