Developer mode
Opens components on the React tab by default.
Your bookmarks

Illustration

Communicates information in an interesting visual way.

Most people process visual information faster than text. Help them understand and connect to your message by including one of our illustrations that relates to the content.

Remember that though illustrations help most people, they don’t help everyone. Make sure your content is accessible to everyone by presenting all essential information in text form and not just visuals.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Illustration image: adds emotion to your message.

Illustration types

You can set two things about illustrations. The first is the illustration itself, which you can choose from the complete list of illustrations.

The second is the size. We have five different sizes to offer, which are based around the maximum height of the illustration.

  • Extra small (90 px)
  • Small (120 px)
  • Medium (200 px)
  • Large (280 px)
  • Display (460 px)

Guidelines

Present info nonvisually

Illustrations can add a lot to your designs. So you need to make sure everything necessary is presented to people who won’t see the illustration as alternative text.

Meaningful alternative text includes the context and function of the illustration. Make sure everything you want users to know to continue in the flow is available to them.

You can include alternative text through means like the `alt` attribute. Or you can present necessary alternative text next to the illustration as text or headings, in which case you can set the `alt` attribute to an empty string.

If an illustration is only for decoration, leave the alternative text blank. Providing a description just gives users extra information that does not help them.

  # Use meaningful alt text
A picture with alternative text underneath: Tell us how you feel about the app.
A picture with alternative text underneath: A man and a woman stand next to a bench with the woman’s thumb pointing down and man’s thumb pointing up.

Related components

AirportIllustration

Airport illustrations are more specific examples of illustrations, useful for showing details at specific airports.

Available illustrations

  • Accommodation
  • AirHelp
  • AirportShuttle
  • AirportTransport
  • AirportTransportTaxi
  • AppQRCode
  • BaggageDrop
  • Boarding
  • BoardingPass
  • BusinessTravel
  • CabinBaggage
  • CompassCollectPoints
  • CompassDemoted
  • CompassEmailAdventurer
  • CompassEmailCaptain
  • CompassEmailPromoted
  • CompassEmailPromotedCaptain
  • CompassEmailScout
  • CompassPoints
  • CompassSaveOnBooking
  • CompassTravelPlan
  • DesktopSearch
  • EnjoyApp
  • Error
  • Error404
  • FastTrack
  • Feedback
  • Help
  • Improve
  • Insurance
  • InviteAFriend
  • Login
  • Lounge
  • Mailbox
  • Meal
  • MobileApp
  • Money
  • MusicalInstruments
  • NetVerify
  • NoBookings
  • NoFavoriteFlights
  • NoNotification
  • NoResults
  • Nomad
  • NomadNeutral
  • Offline
  • OnlineCheckIn
  • OpenSearch
  • Parking
  • Pets
  • PlaceholderAirport
  • PlaceholderDestination
  • PlaceholderHotel
  • PlaceholderTours
  • PlaneAndMoney
  • PriorityBoarding
  • Rating
  • ReferAFriend
  • RentalCar
  • Seating
  • SpecialAssistance
  • SportsEquipment
  • Success
  • Time
  • TimelineBoarding
  • TimelineDropBaggage
  • TimelineLeave
  • TimelinePick
  • Tours
  • Train
  • TransportBus
  • TransportTaxi
  • WomanWithPhone