- Catalog
- Usage
Illustrations are SVGs for empty and outcome states, plus header art. Use Icons for compact glyphs in controls. Compose empty-state layout and copy with the Empty States pattern.Choose a platform, then click a cell to copy that platform’s snippet. Previews follow the docs light and dark theme.
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 Named exports read Set one dimension from the file viewBox and let the other scale. Empty states use The file name is the illustration name plus The file name is the illustration name plus
Anvil2Illustration enum, which picks the light or dark asset from the current appearance.Web
pnpm add @servicetitan/anvil2-illustrations
illustration.color.* tokens and follow AnvilProvider. Importing the -light or -dark file under AnvilProvider is deprecated. Use the named export.import { EmptyStateNoSearchResults } from "@servicetitan/anvil2-illustrations";
<EmptyStateNoSearchResults aria-hidden="true" height={200} />;
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.import NoResultsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-no-search-results-light.svg";
<img src={NoResultsLight} alt="" width={240} height={180} />;
-light.svg or -dark.svg.Compose the SVG with Anvil2 layout primitives.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.import NoResultsLight from "@servicetitan/anvil2-illustrations/illustrations/empty-state-no-search-results-light.svg";
-light.svg or -dark.svg.iOS
Illustrations ship as theAnvil2Illustrations product in the anvil2-ios package. Add the Swift package the same way as the other iOS libraries. See Getting Started for iOS.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.import Anvil2Illustrations
Anvil2Illustration.emptyStateNoSearchResults.image
.resizable()
.scaledToFit()
Android
Illustrations ship incom.servicetitan:anvil2-android-illustrations. Add that module the same way as the other Android libraries. See Getting Started for Android.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.import androidx.compose.ui.res.painterResource
import com.servicetitan.anvil2.illustrations.Anvil2Illustration
Image(
painter = painterResource(Anvil2Illustration.EmptyStateError.drawableRes),
contentDescription = null,
)
Accessibility
Provide meaningfulalt 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
Illustration language: style, color, form, perspective, line work, texture, and character.
Empty states
Trade personalization, scenario guidance, and sample copy.
Figma library
Design source for illustration language and empty-state usage.
Package source
SVG files in
@servicetitan/anvil2-illustrations.