System Icons

Overview

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

Caution

Use a icon size tokens, min 14px, max 32px. 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: 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 Create Your Own.

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

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.

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.

Examples

SystemIcon

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:

'use client';

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

export default function SystemIconExample() {
  return (
    <>
      <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.

'use client';

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

export default function SystemIconCircleExample() {
  return (
    <>
      <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>
)