Illustrations

Illustrations are SVGs for empty and outcome states, plus header art. Import the named export from @servicetitan/anvil2-illustrations. Use Icons for compact glyphs in controls. Compose empty-state layout and copy with the Empty States pattern. The grid lists every token illustration. Click a cell to copy the named Anvil2 import. Previews follow the docs light and dark theme.

Import

Install @servicetitan/anvil2-illustrations separately.

Consumer	Import
Anvil2 under `AnvilProvider`	Named TSX export (`EmptyStateError`, …)
Carto or AI Kit	`-light` or `-dark` SVG

Anvil2 file-swapping (-light / -dark under AnvilProvider) is deprecated; use the named export. Dual files stay the API for Carto, AI Kit, <img>, and React Native until a native port. Removal of Anvil2 file-swapping is TBD in a later major.

Anvil2

Named exports read illustration.color.* tokens (--a2-illustration-color-*) and follow AnvilProvider. Do not swap files for dark mode.

import { EmptyStateNoSearchResults } from "@servicetitan/anvil2-illustrations";

<EmptyStateNoSearchResults aria-hidden="true" />;

Token sources live in src/svg/ and are not a published import. Set one dimension from the file viewBox and let the other scale. Empty states use height={200}.

Carto and AI Kit

Carto and AI Kit do not wrap the tree in AnvilProvider, so CSS variables do not theme. Import the generated -light or -dark SVG.

import NoResultsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-no-search-results-light.svg";

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

Accessibility

Provide meaningful alt text when the illustration conveys information. Use empty alt or aria-hidden when adjacent title and body already explain the state.

Anvil2 Web

Resources

Import

Anvil2

Carto and AI Kit

Accessibility

​Import

​Anvil2

​Carto and AI Kit

​Accessibility

Import

Anvil2

Carto and AI Kit

Accessibility