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.

Web GitHubWeb Storybook
yarn add @workday/canvas-accent-icons-web
Sources
Web GitHubWeb Storybook
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.

Image demonstrating the use of Accent Icons for illustrative purposes.

Do

Use Accent Icons for illustrative purposes.

Don't

Use Accent Icons in place of System Icons.

Color

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.

Alignment

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.

Sizing

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

Props

NameTypeDefaultDescription
icon*CanvasAccentIconThe icon to display from `@workday/canvas-accent-icons-web`.
sizenumber | undefined56The size of the AccentIcon in `px`.
colorstring | undefinedcolors.blueberry500The fill color of the AccentIcon.
transparentboolean | undefinedIf true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
cssInterpolationWithTheme<any>
stylesCSSObject | undefined
shouldMirrorboolean | undefinedfalseIf set to `true`, transform the SVG's x-axis to mirror the graphic
refReact.Ref<any>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`).
as"symbol" | "object" | "small" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 156 more ... | React.ComponentType<any>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.forwardRef` and spread extra props to a root element.