> ## 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 – Lucide

> Browse and use the shared Lucide and custom icon allowlist on Web, React Native, iOS, and Android.

**Catalog**

Click an icon to copy the .

**Usage**

`@servicetitan/anvil2-icons` is the allowlist of [Lucide](https://lucide.dev/) icons and custom ServiceTitan SVGs. Web and React Native import from that package. iOS and Android use the generated `Anvil2Icon` enum, one case per Web export. Core Anvil2 Material and ST SVG icons stay on the [Material catalog](https://anvil.servicetitan.com/docs/icons/material.md).

VizD owns the allowlist. Consumers cannot add icons from outside the package.

## Web

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

```tsx theme={null}
import { IconPencil } from "@servicetitan/anvil2-icons";

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

Importing any icon loads the package stylesheet through the bundler. Vite, Webpack, and Next.js need no separate CSS import. A host that cannot load CSS from JavaScript imports `@servicetitan/anvil2-icons/styles.css` directly.

Every `Icon*` export accepts the same props.

**color** `string`

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

**label** `string`

Accessible name. Omit when the icon is decorative.

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

Maps to 12 / 16 / 24 / 32px.

Web icons also accept `className` and a forwarded ref on the wrapping span.

Design sizing guidance for AI Kit lives in [Iconography](https://anvil.servicetitan.com/docs/building-agentic-experiences/foundations/iconography.md).

## React Native

Install the package and the `react-native-svg` peer dependency.

```bash theme={null}
pnpm add @servicetitan/anvil2-icons react-native-svg
```

```tsx theme={null}
import { IconPencil } from "@servicetitan/anvil2-icons/react-native";

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

The React Native entry exports the same `Icon*` names as Web. There is no stylesheet. `size` also accepts a number in points. Icons accept `testID` and a forwarded `View` ref. `color` and `label` match Web.

## iOS

Icons ship as the `Anvil2Icons` product in the [anvil2-ios](https://github.com/servicetitan/anvil2-ios) package. Add the Swift package the same way as the other iOS libraries. See [Getting Started for iOS](https://anvil.servicetitan.com/docs/getting-started/ios.md).

`Anvil2Icon` has one case per Web export, named without the `Icon` prefix. `IconArrowDown` is `.arrowDown`. `IconPencil` is `.pencil`.

```swift theme={null}
import Anvil2Icons

Anvil2Icon.pencil.image
  .foregroundStyle(theme.semantic.foreground.color.standard)
```

Tintable icons take the foreground style. Multicolour icons (`isTintable == false`) keep their own colours. Status marks and brand logos are the multicolour cases.

## Android

Icons ship in `com.servicetitan:anvil2-android-icons`. Add that module the same way as the other Android libraries. See [Getting Started for Android](https://anvil.servicetitan.com/docs/getting-started/android.md).

`Anvil2Icon` has one entry per Web export, named without the `Icon` prefix. `IconArrowLeft` is `Anvil2Icon.ArrowLeft`. `IconPencil` is `Anvil2Icon.Pencil`. Each entry has `drawableRes` and `isTintable`.

```kotlin theme={null}
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.res.painterResource
import com.servicetitan.anvil2.icons.Anvil2Icon

val icon = Anvil2Icon.Pencil

Image(
    painter = painterResource(icon.drawableRes),
    contentDescription = null,
    colorFilter = if (icon.isTintable) ColorFilter.tint(color) else null,
)
```

Tint tintable icons. Draw multicolour icons (`isTintable == false`) with no color filter so they keep their own colours.


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