@servicetitan/anvil2-illustrations. There is no dedicated Illustration component.
Illustrations tell a small visual story. Use icons for compact glyphs inside controls.
Installation
Import
With SVGR configured, the default import is a React component:img:
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!