Accent Icons

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.

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.

Background Color

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

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.

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.

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

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

Create Your Own

Can’t find the icon you need in our library? Why not make your own! Follow the steps outlined below 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.

Base Grid

Accent 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 56x56px for Accent icons.

Safe Area

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

Key Shapes

Using a key shape provides a consistent size for basic shapes and proportions across the entire Accent icon suite. They help maintain a common visual style.

All Key Shapes

Secondary Element

This area allows you to add additional emphasis or information such as a plus or minus in a consistent manner. Utilize this element only when your Accent Icon requires it for differentiation from others.

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 2px should be applied to a shape, maintaining a consistent corner radius on all shapes to ensure visual consistency across the entire Accent icon suite.

Angles

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

Density

Canvas advise a minimum of 2px between each shape to ensure the icons can be accurately depicted on screen, anything less may diminish the icons appearance.

Layers

There are 2 layer options available for Accent Icons, Outline layers are set to Blueberry 400 by default, Fill layers are set to white. These layers can be targeted in code to customize the colors.

Naming

Generic names make icons more discoverable and scalable, catering for more use cases. When naming an icon try to pick a generic name that describes the object itself, rather than something specific to your product or use case.