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

# Illustrations

> Browse Anvil2 illustrations and use them on Web, React Native, iOS, and Android.

**Catalog**

Illustrations are SVGs for empty and outcome states, plus header art. Use [Icons](https://anvil.servicetitan.com/docs/icons) for compact glyphs in controls. Compose empty-state layout and copy with the [Empty States](https://anvil.servicetitan.com/docs/patterns/empty-states/web.md) pattern.

Choose a platform, then click a cell to copy that platform's snippet. Previews follow the docs light and dark theme.

Click an illustration to copy the .

**Usage**

Each illustration has one name. Web uses the named component. React Native imports the baked light and dark SVG. iOS and Android use the generated `Anvil2Illustration` enum, which picks the light or dark asset from the current appearance.

## Web

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

Named exports read `illustration.color.*` tokens and follow `AnvilProvider`. Importing the `-light` or `-dark` file under `AnvilProvider` is deprecated. Use the named export.

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

<EmptyStateNoSearchResults aria-hidden="true" height={200} />;
```

Set one dimension from the file viewBox and let the other scale. Empty states use `height={200}`. The viewBox is 453:380.

AI Kit does not wrap the tree in `AnvilProvider`, so the named export's CSS variables do not theme there. Import the baked `-light` or `-dark` SVG and choose the file for the appearance you are rendering.

```tsx theme={null}
import NoResultsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-no-search-results-light.svg";

<img src={NoResultsLight} alt="" width={240} height={180} />;
```

The file name is the illustration name plus `-light.svg` or `-dark.svg`.

Compose the SVG with Anvil2 layout primitives.

illustrations-kit-empty-search

[StackBlitz demo](https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples/illustrations-kit-empty-search?file=src/App.tsx)

```tsx lines theme={null}
import {
  AnvilProvider,
  Button,
  Card,
  Flex,
  Text,
  usePrefersColorScheme,
} from "@servicetitan/anvil2";
import { EmptyStateNoSearchResults } from "@servicetitan/anvil2-illustrations";

function App() {
  const { mode } = usePrefersColorScheme();

  return (
    <AnvilProvider themeData={{ mode }}>
      <Card padding="large">
        <Flex direction="column" alignItems="center" gap={4}>
          <EmptyStateNoSearchResults aria-hidden="true" height={200} />
          <Text variant="headline" el="h2">
            No matching jobs
          </Text>
          <Text subdued style={{ textAlign: "center" }}>
            Try a different name or clear filters to see all jobs.
          </Text>
          <Button appearance="secondary">Clear Filters</Button>
        </Flex>
      </Card>
    </AnvilProvider>
  );
}

export default App;
```

## React Native

React Native has no illustration component. Import the baked light or dark SVG and choose the file for the appearance you are rendering.

```tsx theme={null}
import NoResultsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-no-search-results-light.svg";
```

The file name is the illustration name plus `-light.svg` or `-dark.svg`.

## iOS

Illustrations ship as the `Anvil2Illustrations` 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).

`Anvil2Illustration` has one case per illustration, named after the file in lower camel case. `empty-state-no-search-results` is `.emptyStateNoSearchResults`. `header-commercial-location` is `.headerCommercialLocation`. The image resolves to the light or dark asset from the current appearance.

```swift theme={null}
import Anvil2Illustrations

Anvil2Illustration.emptyStateNoSearchResults.image
  .resizable()
  .scaledToFit()
```

## Android

Illustrations ship in `com.servicetitan:anvil2-android-illustrations`. 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).

`Anvil2Illustration` has one entry per illustration, named after the file in Pascal case. `empty-state-error` is `Anvil2Illustration.EmptyStateError`. `drawableRes` resolves to the dark VectorDrawable under the `night` qualifier and the light VectorDrawable otherwise.

```kotlin theme={null}
import androidx.compose.ui.res.painterResource
import com.servicetitan.anvil2.illustrations.Anvil2Illustration

Image(
    painter = painterResource(Anvil2Illustration.EmptyStateError.drawableRes),
    contentDescription = null,
)
```

## Accessibility

Provide meaningful `alt` text, or a content description, when the illustration conveys information. Use empty `alt` or `aria-hidden` when the adjacent title and body already explain the state. On iOS and Android, pass `nil` or `null` for a decorative image.

## Additional resources

> **[Illustration foundations](https://anvil.servicetitan.com/docs/foundations/illustration.md)**
>
> Illustration language: style, color, form, perspective, line work, texture, and character.

> **[Empty states](https://anvil.servicetitan.com/docs/illustrations/empty-states.md)**
>
> Trade personalization, scenario guidance, and sample copy.

> **[Figma library](https://www.figma.com/design/9AdQ0X9Wgx54HHFPM1xkOT/%E2%9C%A8NEW%E2%9C%A8-Illustration-Library?m=auto\&node-id=2120-2)**
>
> Design source for illustration language and empty-state usage.

> **[Package source](https://github.com/servicetitan/hammer/tree/main/packages/anvil2-illustrations)**
>
> SVG files in `@servicetitan/anvil2-illustrations`.


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