Illustrations are an effective way to build an app’s visual identity and help convey complex ideas in a simple way.

They should be meaningful and reflect the user's context and emotional state.

Alternatives

Icon — For common actions, features, and themes

Usage

Use illustrations effectively to:

Welcome the user to the app, on Sign in or Splash screen
Introduce and explain a feature or the product itself
To congratulate and celebrate when the user completes a task
Provide help when something happens unexpectedly in the application

Types of illustrations

Scene

Scene illustrations are welcoming and positive. They usually come in a pair and are anchored to the bottom edges of a page.

Scene illustrations are sized at 400x348.

Edit in Playroom

<Stack gap="large">
  <Flex alignItems="center" justifyContent="center" padding="small">
    <SceneWaving />
  </Flex>
  <Flex alignItems="center" justifyContent="center" padding="small">
    <SceneThumbsUp />
  </Flex>
  <Columns gap="large">
    <AspectRatio ratio={400 / 348}>
      <SceneCoin />
    </AspectRatio>
    <AspectRatio ratio={400 / 348}>
      <SceneJetpack />
    </AspectRatio>
  </Columns>
</Stack>

Hero

Hero illustrations are more metaphorical in nature. They can contain more than one person in a broader scene with larger than life objects.

Hero illustrations are sized at 376x240

Edit in Playroom

<Stack gap="large" align="center">
  <HeroAuth />
  <HeroNotFound />
  <HeroPending />
  <HeroProject />
  <HeroSearch />
  <HeroWelcome />
</Stack>

Medium

Medium illustrations are slightly smaller versions of heroes. They contain a person (or two) doing a single task or representing a single concept.

Medium illustrations are sized at 200x200

Edit in Playroom

<Inline gap="large">
  <MediumBegin />
  <MediumProgress />
  <MediumReconcile />
  <MediumRelax />
  <MediumReview />
  <MediumSupport />
  <MediumUpgrade />
  <MediumDowngrade />
  <MediumReport />
</Inline>

Spot

Spot illustrations are the simplest and smallest illustration. They contain a single object or a part of the human body, usually a hand. They do not include any people.

Spot illustrations are sized at 80x80

Edit in Playroom

<Inline gap="large">
  <SpotAppreciate />
  <SpotAttention />
  <SpotCaution />
  <SpotCelebrate />
  <SpotNoResults />
  <SpotWave />
</Inline>

Size

All illustrations have a size (number) prop that can be used to overwrite the default width.

Edit in Playroom

<SceneJetpack size={240} />