Applet Icons

Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.

yarn add @workday/canvas-applet-icons-web
Web Install
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.

Example of an Applet icons use of color.

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.

Example of resizing an Applet icon.

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.

Example of a Applet icon alignment.

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.

NameTypeDescriptionDefault
icon

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

sizenumber

The size of the AppletIcon in px.

92
color

The icon color hue. Must use a member of the AppletIcon.Colors static enum.

shouldMirrorboolean

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

false
childrenReact.ReactNode
asReact.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 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.

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

AppletIcon.Colors

NameTypeDescriptionDefault
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'

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section