System Icons

Usage Guidance

System icons are small symbols used to convey actions and functions. They can indicate status or provide wayfinding support to communicate functionality. They are the most common icons encountered in UI and help communicate metaphors and actions at a glance.

Purposeful Utility

System icons must serve a functional role by supporting actions or communicating state. Do not use icons purely for aesthetic interest; they should explicitly help a user understand what an element does or what a status means.

Predictable Patterns

Always strive to maintain a 1:1 relationship between a System icon and its function. Inconsistent usage across the extension forces users to relearn our UI, leading to friction and errors.

Clarity Through Context

To prevent ambiguity, icons should support text labels rather than replace them. Reserve icon-only buttons for high-density areas and ensure they include the proper accessibility labels.

Standardized Metaphors

Lean on globally recognized symbols. Novel or abstract icons often fail to communicate intent quickly. If the meaning isn’t immediately obvious, the icon is not fit for purpose.

Semantic Logic

Utilize color semantically to reinforce the icon’s message. Use purposeful tones—such as critical red for destruction or success green for completion—to communicate meaning rather than for visual variety.

Sizing

System icons are thoughtfully designed to a specific size standard with a default size of 24px. If you choose to scale an System icon, be sure to follow the icon sizing tokens illustrated below. Never scale System icons below 14px (mini).

Color

Most System icons are delivered with two layers; Fill and Accent. By default, both layers are Neutral 800. Each layer can be modified to highlight specific visual details or support interaction states. For more information on this visit the Layers section in the “Create Your Own” tab.

Some System icons include an additional background layer for further color customization. Any change from default should meet a minimum contrast ratio of (3.1) or as otherwise stated by WCAG guidelines for informational graphic contrast standards.

Universal Icons

Universal icons—such as the ‘home’ or ‘print’ symbols—function as a global shorthand. They transcend language barriers by relying on established mental models. When we deviate from these standards, we break the user’s trust in the interface’s predictability. Without a shared visual vocabulary, users can no longer rely on intuitive recognition, forcing them to guess at functionality and increasing the likelihood of errors.

Why Universal Icons Matter

• Reduced Cognitive Load: Users don’t have to “think” about what a magnifying glass does. It frees up their mental energy to focus on the actual task at hand.

• Speed of Navigation: Visual processing is significantly faster than reading text. Universal icons allow power users to navigate via “muscle memory” of the eyes.

• Cultural Bridge: In a localized products, icons provide a consistent anchor. While the translation for “Settings” might change, the gear System icon remains a constant reference point.

Universal System icons must be 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 interpretation 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.

Cultural 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 a System icon.

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 {SystemIcon} from '@workday/canvas-kit-react/icon';
import {activityStreamIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const Example = () => (
  <>
    <SystemIcon icon={activityStreamIcon} />
    <SystemIcon icon={activityStreamIcon} color={system.color.icon.primary.default} />
    <SystemIcon
      icon={activityStreamIcon}
      color={system.color.icon.primary.default}
      background={system.color.icon.primary.default}
      accent={system.color.icon.inverse}
    />
    <SystemIcon icon={activityStreamIcon} size={48} />
  </>
);

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

SystemIconCircle

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

import {SystemIconCircle} from '@workday/canvas-kit-react/icon';
import {activityStreamIcon} from '@workday/canvas-system-icons-web';
import {system} from '@workday/canvas-tokens-web';

const Example = () => (
  <>
    <SystemIconCircle icon={activityStreamIcon} />
    <SystemIconCircle
      icon={activityStreamIcon}
      color={system.color.icon.inverse}
      background={system.color.icon.primary.default}
    />
  </>
);

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

Gallery

Create Your Own

Can’t find the icon you need in our library? Why not make your own! Follow the steps outlined here to create your own icon to contribute back to the Canvas Design System. Before creating a new icon, make sure you have checked over the Gallery and searched for keywords to surface an icon that may already exist.

Looking to create an AI System Icon? Check out our guidance for contributing AI System Icons.

Follow this link to access the guided System Icon Workspace file in Figma.

Base Grid

System icons are built on a base grid, using a grid will help you draw your icon to Workdays brand specific parameters, keeping things consistent. Canvas maintains a base grid of 24x24 px for system icons.

Safe Area

The safe area ensures that the system icon remains fully visible should the icon be scaled up or down. No part of the icon should extend to the surrounding white space of the safe area.

Key Shapes

Using key shapes provides a consistent size and proportions across the entire system icon suite. They help maintain an icons optical alignment and visual style when in close proximity to other icons.

All Key Shapes

Strokes

Maintain a 2px inner stroke on all shapes used to build an icon. This includes the use of circles. An inner stroke allows the icon to remain consistent when a corner radius is applied later on.

Corners

A corner radius of 0.5px should be applied to a shape, creating a sharp interior in the process. Maintaining a consistent corner radius to ensure visual consistency.

Angles

Use 45° angles for even anti-aliasing on icons, maintain 15° steps when more extreme angles are required.

Density

Some icons require a compact use of the base grid, Canvas advise a minimum of 1px between each shape to ensure the icons can be accurately depicted on screen, anything less may diminish the icons appearance.

Layers

There are 3 layer options available for system icons, this allows parts of the icon to be modified or hidden in code as needed. By default all layers are set to Licorice 200 and background layers are hidden, these layers can be targeted in code to create richer icons.

Naming

Generic names make icons more discoverable and scalable, catering for more use cases. When naming an icon try to pick a generic name rather than something specific to your immediate need or unique to only your product area.

Contribution

Once you’re ready to submit your icon, go check out the information supplied in the Contributing Back To Canvas section of this site to help you make your submission.

Thank you for making a contribution!

Introduction

This guide summarizes the major web package changes for @workday/canvas-system-icons-web v4. All icons have been completely redesigned to align with new Workday branding. Use this guide when updating implementations, auditing screens, or migrating from deprecated names.

Layer Changes

The accent layer in the SVG structure has been replaced with background. This can change how icons render compared to earlier versions. To match the previous filled style, apply your fill to the background layer (or the equivalent path group in the exported SVG).

Icons where this applies (deprecated export names in parentheses where relevant):