@servicetitan/anvil2-illustrations. See Illustrations for the full catalog.
Illustrations tell a small visual story. Use icons for compact glyphs inside controls.
Installation
Import
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 readillustration.color.* tokens and follow AnvilProvider. Do not swap files for dark mode.
Carto and AI Kit
Those apps do not wrap the tree inAnvilProvider, so CSS variables do not theme. Import the generated -light or -dark SVG.
In context
Compose the SVG with Anvil2 layout primitives. Set one dimension and let the other scale from the 453:380 viewBox. Empty-state examples useheight={200}.
Accessibility
- When title and body already explain the state, treat the illustration as decorative (
aria-hiddenor emptyalt). - When the illustration alone conveys meaning, provide
altthat describes the outcome, not the drawing style.
Design guidance
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.Connect with us
Get help on Slack
You can reach the Anvil team in the #ask-designsystem Slack channel.
Schedule office hours
Join the Anvil team for office hours on Mondays or Wednesdays to get hands-on help.
Report an issue
Ran into a bug in the code or design? We use Jira to track outstanding
issues with Anvil.
Suggest an idea
Have an idea for a component, pattern, or documentation? Fill out the Feature Request Form in Slack.
View roadmap
View what is coming up this year for the design system.
Contribute to Anvil2
Interested in contributing to Anvil? Read our contribution guide to learn
more!