Skip to main content

​
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.
Last modified on January 23, 2026