> ## 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.

# Icons – Material

> Install and use core Anvil2 Material icons and ServiceTitan SVGs with the Icon component.

**Catalog**

> [!NOTE]
>
> This catalog is the older core Anvil2 set: Material icons and ServiceTitan
> SVGs used with the [Icon](https://anvil.servicetitan.com/docs/components/icon/web.md) component. Lucide
> icons for AI Kit and React Native live in the [Lucide
> catalog](https://anvil.servicetitan.com/docs/icons/lucide.md).

Browse Material and ServiceTitan assets below. Pair each asset with `Icon` as
shown under Usage.

**Usage**

## Installation

Material and ServiceTitan SVG assets ship with `@servicetitan/anvil2`. Install
the core package; there is no separate icons package for this set.

```bash theme={null}
pnpm add @servicetitan/anvil2
```

Anvil2 icons are pure SVGs and require
[SVGR](https://react-svgr.com/docs/getting-started/) so imports resolve to
React components. Projects on `@servicetitan/startup` `23.5.0` or later
already configure SVGR. Standalone apps must keep `removeViewBox` disabled
in `svgoConfig` (see [Icon](https://anvil.servicetitan.com/docs/components/icon/web.md) for Webpack and
Vite examples).

## Import

Import the `Icon` wrapper from `@servicetitan/anvil2` and each SVG from the
package asset path. Material round icons live under
`assets/icons/material/round/`. ServiceTitan SVGs live under
`assets/icons/st/`.

```tsx theme={null}
import { Icon } from "@servicetitan/anvil2";
import Warning from "@servicetitan/anvil2/assets/icons/material/round/warning.svg";

<Icon svg={Warning} size="large" aria-label="Warning" />;
```

```tsx theme={null}
import { Icon } from "@servicetitan/anvil2";
import AiChat from "@servicetitan/anvil2/assets/icons/st/ai_chat.svg";

<Icon svg={AiChat} size="medium" />;
```

The package exports `./assets/*` from the built `dist/assets` tree. Do not
import Material icons from `@servicetitan/anvil2-icons` for core Web product
UI.

## Props

`Icon` accepts the SVG component through `svg` and sizes the wrapper. Props
match the published `IconProps` surface.

**svg** `Svg` *required*

Assets passed in using SVGR.

**color** `string`

Sets the wrapper color used by the SVG. Accepts CSS colors and CSS
variables.

**inherit** `boolean` (default: false)

Uses the parent text color when no explicit `color` is set.

**size** `"small" | "medium" | "large" | "xlarge"` (default: medium)

Icon scale.

`Icon` also accepts layout utility props (except flex grow/shrink/basis) and
any valid HTML `span` props, including `className`, `style`, `aria-label`,
and a forwarded ref.

Full behavior, accessibility, and SVGR config live on the
[Icon](https://anvil.servicetitan.com/docs/components/icon/web.md) component page.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.