Icon - Web

For development, import Icon from @servicetitan/anvil2. For design, find it in the Anvil2 file.

Anatomy

The Icon consists of two primary elements that work together to act as visual aids.

Icon
Bounding area

Options

The Icon supports multiple sizes, SVG support, and color configurations to accommodate various visual aid scenarios.

Sizes

Size	Height	When to use
Small	12px	For high dense pages. Not recommended for interactive Icons.
Medium	16px	Used within Buttons.
Large	24px	For supplementing information on the page, such as status.
Extra Large	32px	For low density, expressive pages.

SVG support

Icon accepts SVGs. This typically involves using Anvil’s provided icon library but also supports custom SVGs.

Color

Icons inherit a color provided to them. When providing a color, use a token value.

Behavior

The Icon responds to different size and color requirements while maintaining consistent visual representation.

Usage Guidelines

Standard	Requirement
DoEnhance understanding of a concept	Icons enhance the understanding of a concept. They also work well in places where space is a premium.
DoProvide a label for Icons	Provide a label for an Icon as a text label next to it, or as a Tooltip; a text label is generally preferred since most icons don’t have an obvious meaning; see Provide a label for Icons.
Don’tUse icons for their own sake	Avoid using Icons for the sake of having icons. Most icons have ambiguous meaning and result in confusion and an overwhelming visual design.
Don’tInconsistent icon usage	Consistent icon usage of status and actions brings familiarity — use the standard a product has adopted; see Consistent icon usage.

How to Use

Provide a label for Icons

An Icon’s label takes two forms: as a text label next to an icon, or as a Tooltip. A text label is generally preferred as most icons do not have an obvious meaning.

Labels can clarify what the icon is trying to represent.

Caution

More ambiguous actions are less discoverable when only providing a Tooltip.

Provide information without action

Icon provides indication for users and can be focused or hovered to convey more details. In these use cases, add tabIndex={0} to make icon focusable and use Tooltip with it.

Consistent icon usage

Consistent icon usage of status and actions brings familiarity. Use the standard that a product has adopted.

Don’t

Use semantic token colors for Icons

When using color for Icons, use a semantic token value. This ensures an icon is both themeable and internally consistent with other UI’s color usage.

Avoid custom icon resizing

Icons have a consistent set of dimensions. Resizing breaks the internal consistency and creates awkward vector scaling.

Content

Content within the Icon should be clear and recognizable, helping users understand the concept being represented.

Keyboard Interaction

Users can navigate the Icon using standard keyboard controls.

Accessibility

Non-interactive Icons

Pair Icons with a text label when possible. When using an Icon without text, provide an aria-label to the Icon directly, describing what the icon is. For more guidance on icon accessibility, see accessible icon usage best practices.

Code

Implementation
Icon Props

Common Examples

import { Icon } from "@servicetitan/anvil2";
import EditIcon from "@servicetitan/anvil2/assets/icons/material/round/Edit.svg";

function ExampleComponent() {
  return <Icon svg={EditIcon} color="var(--color-green-300)" size="large" />;
}

SVGR Config

Anvil2 icons are pure SVGs, and require a special loader to properly handle imports and rendering – SVGR. Any project using the @servicetitan/startup package version 23.5.0 or later will already have this configured. To use Anvil2 in a standalone app or other project, the SVGR plugin needs to be configured to properly render Anvil2 icons.Use the examples below for common build tools. For other build tools, check out the SVGR docs (or the specific build tool docs) for how to update the config object, and be sure to disable the removeViewbox option in the svgoConfig (see the examples for more details).

Webpack SVGR Config

{
  loader: "@svgr/webpack",
  options: {
    svgoConfig: {
      plugins: [
        {
          name: "preset-default",
          params: {
            overrides: {
              removeViewBox: false,
            },
          },
        },
      ],
    },
  },
}

Learn more about Webpack loaders.

Vite SVGR Config

import svgr from "vite-plugin-svgr";

export default {
  plugins: [
    svgr({
      svgrOptions: {
        svgoConfig: {
          plugins: [
            {
              name: "preset-default",
              params: {
                overrides: {
                  removeViewBox: false,
                },
              },
            },
          ],
        },
      },
    }),
  ],
};

React Accessibility

Non-interactive Icons

Icons that lack interaction and have no accompanying text only need an aria-label to describe what the Icon is. If paired with text, no additional elements are needed.Decorative icon paired with a text label<div><Icon svg={Warning} size="large" /> <BodyText>Label Text</BodyText> </div>Standalone icon with no text label<Icon svg={Warning} size="large" aria-label="Warning" />

Interactive Icons

Icon can be used to provide indication for users which can be focused or hovered to convey more details. In these use cases, add tabIndex={0} to make icon focusable and use Tooltip with it.For more guidance on icon accessibility, see accessible icon usage best practices.

<Icon
  svg={EditIcon}
  color="var(--color-green-300)"
  size="large"
  inherit={false}
  aria-label="Edit"
/>

`Icon` Props

In addition to the props listed below, the Icon component can accept any valid HTML span props.

Svg

required

Assets passed in using SVGR.

string

Accepts valid CSS color values, including CSS variables.

boolean

default:"false"

Allows the icon SVG to inherit its color.

"small" | "medium" | "large" | "xlarge"

default:"medium"

Concepts & Guidelines

Anvil2

Resources

Icon - Web

Anatomy

Options

Sizes

SVG support

Color

Behavior

Usage Guidelines

How to Use

Provide a label for Icons

Provide information without action

Consistent icon usage

Use semantic token colors for Icons

Avoid custom icon resizing

Content

Keyboard Interaction

Accessibility

Non-interactive Icons

Code

Common Examples

SVGR Config

Webpack SVGR Config

Vite SVGR Config

React Accessibility

Non-interactive Icons

Interactive Icons

`Icon` Props

​Anatomy

​Options

​Sizes

​SVG support

​Color

​Behavior

​Usage Guidelines

​How to Use

​Provide a label for Icons

​Provide information without action

​Consistent icon usage

​Use semantic token colors for Icons

​Avoid custom icon resizing

​Content

​Keyboard Interaction

​Accessibility

​Non-interactive Icons

​Code

​Common Examples

​SVGR Config

​Webpack SVGR Config

​Vite SVGR Config

​React Accessibility

​Non-interactive Icons

​Interactive Icons

​Icon Props

Anatomy

Options

Sizes

SVG support

Color

Behavior

Usage Guidelines

How to Use

Provide a label for Icons

Provide information without action

Consistent icon usage

Use semantic token colors for Icons

Avoid custom icon resizing

Content

Keyboard Interaction

Accessibility

Non-interactive Icons

Code

Common Examples

SVGR Config

Webpack SVGR Config

Vite SVGR Config

React Accessibility

Non-interactive Icons

Interactive Icons

`Icon` Props