Anvil2 Icons – Usage

Installation

pnpm add @servicetitan/anvil2-icons

React Native also needs the react-native-svg peer dependency.

Import

Platform	Import path	Styles
Web (AI Kit)	`@servicetitan/anvil2-icons`	Loaded automatically with the icon import
React Native	`@servicetitan/anvil2-icons/react-native`	No stylesheet

Web

import { IconPencil } from "@servicetitan/anvil2-icons";

<IconPencil size="large" color="tomato" label="Edit" />;

Importing any icon also loads the package stylesheet through your bundler, so no separate CSS import is needed in Vite, Webpack, or Next.js apps. Hosts that cannot load CSS from JavaScript can import @servicetitan/anvil2-icons/styles.css directly instead.

React Native

import { IconPencil } from "@servicetitan/anvil2-icons/react-native";

<IconPencil size="large" color="tomato" label="Edit" />;

Both entry points export the same Icon* allowlist. VizD owns the list; consumers cannot extend it from outside the package. Browse the allowlist on Overview.

Props

Every Icon* export shares the same surface.

string

Overrides inherited color. Fixed-color custom SVGs (status marks, brand logos) ignore color.

string

Accessible name. Omit when the icon is decorative.

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

default:"medium"

Maps to 12 / 16 / 24 / 32px. React Native also accepts a number in points.

Web icons also accept className and a forwarded ref on the wrapping span. React Native accepts testID and a forwarded View ref. Design sizing guidance for AI Kit lives in Iconography.

​Installation

​Import

​Web

​React Native

​Props

Installation

Import

Web

React Native

Props