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
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.
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} /></>);
Layout Component
AccentIcon
supports all props from thelayout component.
Props
Props extend from span. Changing the as
prop will change the element interface.
Name | Type | Description | Default |
---|---|---|---|
icon |
| The icon to display from | |
size | number | The size of the AccentIcon in | 56 |
color |
| The fill color of the AccentIcon. |
|
transparent | boolean | If true, set the background fill of the AccentIcon to | false |
shouldMirror | boolean | If set to | false |
cs |
| The
| |
children | ReactNode | ||
as | React.ElementType | 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 Note: Not all elements make sense and some elements may cause accessibility issues. Change this value with care. | span |
ref | React.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 |
Technology
Education
Shapes
Science
Awards
Health
Commerce
Office
Buildings
Food
Calendars
People
Fun
Charts
Papers
Energy
Presentation
Data
Eco
Hands
Chat
Legal
Protection
Media
Tools
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.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section