Accent Icons

Accent Icons add clarity, and visual interest, they bring delight to the experience by communicating the overall tone and meaning of a page.

yarn add @workday/canvas-accent-icons-web
Web Install
yarn add @workday/canvas-accent-icons-web

Usage Guidance

Accent icons are intended to be used as simplified illustrative elements to add visual interest without distracting your audience from their intended task. Accent icons are not intended to be actionable, or to be used as entry points between pages.


Use Accent Icons for illustrative purposes.


Use Accent Icons in place of System Icons.


Accent icons are Blueberry 400 by default, though this can be overridden to other Canvas colors for branding/theming as long as these meet a minimum contrast ratio of (3.1) or as otherwise stated by WCAG guidelines for informational graphic contrast standards.

Example of Accent Icon color contrast.

Background Color

Accent icons should be recolored to pass color contrast standards when the icon is presented on a colored or dark background.

Example of Accent Icon color options.


Accent icons should be center aligned vertically or horizontally depending on the situation, this ensures that the icons look visually balanced when in close proximity to another asset. When using text next to an icon, icons should be center aligned to the text.

Example of Accent Icon alignment.


Accent icons are made to a specific standard, changing the size of an icon can cause images to blur, 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 8 pixels. Do not scale Accent Icons below 40px.

Example of Accent Icon scaling.

Web Examples

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

import React from 'react';
import {colors} from '@workday/canvas-kit-react/tokens';
import {AccentIcon} from '@workday/canvas-kit-react/icon';
import {shieldIcon} from '@workday/canvas-accent-icons-web';
export default () => (
<AccentIcon icon={shieldIcon} />
<AccentIcon icon={shieldIcon} color={colors.pomegranate500} />
<AccentIcon icon={shieldIcon} size={80} />

Layout Component

AccentIcon supports all props from thelayout component.


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


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


The size of the AccentIcon in px.


The fill color of the AccentIcon.


If true, set the background fill of the AccentIcon to transparent. If false, set the background fill of the AccentIcon to base.frenchVanilla100.


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


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 (
{...handleCsProp(elemProps, [
myModifiers({ size: 'medium' }),
myVars({ backgroundColor: 'red' })

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.

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