Applet Icons

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

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

NameTypeDefaultDescription
icon*CanvasAppletIconThe icon to display from `@workday/canvas-applet-icons-web`.
sizenumber | undefined92The size of the AppletIcon in `px`.
colorBrandingColor | undefinedBrandingColor.BlueberryThe icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
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.