System Icons

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.

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.

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.

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

Icon	Cultural Context
	Not everyone uses Dollars as currency. For example, some Workday customers use Euros.
	Hash mark does not mean “number” in some countries. Instead, it is recognized in the context of social media only.
	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.

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.

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.

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

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.

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} />
  </>
);

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} />
  </>
);