Applet Icons
Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.
yarn add @workday/canvas-applet-icons-web
yarn add @workday/canvas-applet-icons-web
Usage Guidance
Applet Icons act as the brand or logo of a product, service or tool, they convey the core concept of the products that they depict. Applet icons should be used to specifically convey entry points to related products and services. They should never be used as standard icons as this can impact an individual's understanding or trust of a product's entry point when misused.
Color
Applet icons can be themed to match the color of Workday customer branding (Blueberry by default). Rather than specifying a specific color, a shade level (100-600) is assigned for each layer. Depending on which color is selected, the icon will automatically update all layers to the various shades of that color. Do not override any layers within an Applet icon to a specific color, as this will break the theming support. For more information, check out the Layers section on the "Create Your Own" tab.
Labeling
Labels should always accompany Applet icons to reinforce and make clear to an individual which entry point they are seeking out.
Sizing
Applet icons are made to a specific standard, changing the size of an icon can cause anti-aliasing issues. Canvas does not recommend scaling applet 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.
Alignment
App 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. Text should also be center aligned to an app icon.
Web Examples
The icons shipped in @workday/canvas-applet-icons-web
are just SVGs with some additional metadata.
If you'd like to easily use them in React, use the AppletIcon
component from
@workday/canvas-kit-react/icon
:
import React from 'react';import {AppletIcon} from '@workday/canvas-kit-react/icon';import {benefitsIcon} from '@workday/canvas-applet-icons-web';export default () => (<><AppletIcon icon={benefitsIcon} /><AppletIcon icon={benefitsIcon} color={AppletIcon.Colors.Pomegranate} /><AppletIcon icon={benefitsIcon} size={60} /></>);
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 AppletIcon in | 92 |
color |
| The icon color hue. Must use a member of the |
|
shouldMirror | boolean | If set to | false |
cs |
| The
| |
children | React.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 |
AppletIcon.Colors
Name | Type | Description | Default |
---|---|---|---|
Cinnamon | 'cinnamon' | ||
Peach | 'peach' | ||
ChiliMango | 'chiliMango' | ||
Cantaloupe | 'cantaloupe' | ||
SourLemon | 'sourLemon' | ||
JuicyPear | 'juicyPear' | ||
Kiwi | 'kiwi' | ||
GreenApple | 'greenApple' | ||
Watermelon | 'watermelon' | ||
Jewel | 'jewel' | ||
Toothpaste | 'toothpaste' | ||
Blueberry | 'blueberry' | ||
Plum | 'plum' | ||
BerrySmoothie | 'berrySmoothie' | ||
Blackberry | 'blackberry' | ||
IslandPunch | 'islandPunch' | ||
GrapeSoda | 'grapeSoda' | ||
Pomegranate | 'pomegranate' | ||
FruitPunch | 'fruitPunch' | ||
RootBeer | 'rootBeer' | ||
ToastedMarshmallow | 'toastedMarshmallow' | ||
Cappuccino | 'cappuccino' | ||
Licorice | 'licorice' | ||
BlackPepper | 'blackPepper' |
Create Your Own
Can’t find the icon you need in our library? Why not make your own! Follow the steps outlined here 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
Applet 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 92x92 px for Accent icons.
Safe Area
The safe area ensures that the Applet icon remains fully visible when motion is applied to the Icon. No part of the icon should extend past the surrounding white space of the safe area.
Underlying Grid
The underlying grid can be used to support visual harmony and balance by unifying the geometric proportions of and icons shapes.
Key Shapes
Using a key shape provides a consistent size for basic shapes and proportions across the entire App icon suite. They help maintain a common visual style.
All Key Shapes
Background Circle
All Applet icons are placed on a background circle to highlight and distinguish their place within Workdays UI and set them apart from system and accent icons. This element should never be removed from the Applet icon.
Strokes
Maintain a 2px outer stroke on all shapes used to build an icon, this includes the use of circles. An outer stroke allows the icon to remain consistent when a corner radius is applied later on.
Corners
A minimum corner radius of 1px should be applied to a shape, maintaining a consistent corner radius on all shapes to ensure visual consistency across the entire Applet icon suite.
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
Layers are categorized by the colors they represent and are named to reference corresponding colors ranges, for example ‘color-200’ references all shades of 200 on the Canvas Color palette. This allows Workday customers to configure applet icons to match their brand color.
Grouping and Motion
When layers are grouped they can be targeted with a number of predefined motions when named after Canvas Motion tokens. This is done to add visual attitude or flair to an Applet icon. Not all layers require motion - it is best used sparingly to create a subtle and memorable icon. Reference the table below when using motion layer names. Motion tokens can also be combined together. An example of this is 'animate-float-rotate-left', a combination of 'float' and 'rotate-left'.
Motion Variables
Variable Name | Expected action |
---|---|
animate-float | Group moves up |
animate-sink | Group moves down |
animate-left | Group moves left |
animate-right | Group moves right |
animate-grow | Group increases size |
animate-shrink | Group decreases size |
animate-rotate-left | Group rotates 15° left |
animate-rotate-right | Group rotates 15° right |
animate-spin | Group rotates 180° clockwise |
Naming
Applet icons are named after their related product or key function, they are named as such to distinguish their place in Workdays product suite.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section