> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Anvil2 Icons – Usage

> Install and use @servicetitan/anvil2-icons on web and React Native.

## Installation

```bash theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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](/docs/kits/anvil2-icons).

## Props

Every `Icon*` export shares the same surface.

<ParamField path="color" type="string">
  Overrides inherited color. Fixed-color custom SVGs (status marks, brand logos)
  ignore `color`.
</ParamField>

<ParamField path="label" type="string">
  Accessible name. Omit when the icon is decorative.
</ParamField>

<ParamField path="size" type={`"small" | "medium" | "large" | "xlarge"`} default="medium">
  Maps to 12 / 16 / 24 / 32px. React Native also accepts a number in points.
</ParamField>

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](/docs/kits/ai-kit/foundations/iconography).