Illustration

Communicates information in an interesting visual way.

When to use

  • To provide visual context.
  • To lead users to the next step in a flow.
  • With all essential information in text to be accessible to everyone.

When not to use

Component status

Figma

React

iOS

Android

Released
Released
N/A
N/A

Content structure

Image: adds emotion to your message.

Content

Present info nonvisually

Illustrations can add a lot to your designs. So you need to make sure everything necessary is presented to people who don’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 doesn’t help them.

Do

Use meaningful alt text.

A picture with alternative text underneath: Tell us how you feel about the app.

Don't

Don’t include unnecessary information that distracts from the main idea.

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.

Look & feel

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 (90px)
  • Small (120 px)
  • Medium (200px)
  • Large (280 px)
  • Display (460 px)

Available illustrations

Accommodation

AirHelp

AirportTransport

AirportTransportTaxi

AirportShuttle

AppQRCode

BaggageDrop

Boarding

BoardingPass

BusinessTravel

CabinBaggage

CompassCollectPoints

CompassDemoted

CompassEmailAdventurer

CompassEmailCaptain

CompassEmailPromoted

CompassEmailPromotedCaptain

CompassEmailScout

CompassPoints

CompassTravelPlan

CompassSaveOnBooking

DesktopSearch

EnjoyApp

Error

EVisa

Error404

FastTrack

Feedback

Help

Improve

Insurance

InviteAFriend

GroundTransport404

Login

Lounge

Mailbox

Meal

MobileApp

Money

MusicalInstruments

NetVerify

NoBookings

NoFavoriteFlights

Nomad

NomadNeutral

NoNotification

NoResults

Offline

OnlineCheckIn

OpenSearch

Parking

Pets

PlaceholderAirport

PlaceholderDestination

PlaceholderHotel

PlaceholderTours

PlaneAndMoney

PriorityBoarding

Rating

ReferAFriend

RentalCar

Seating

SpecialAssistance

SportsEquipment

Success

Time

TicketFlexi

TimelineBoarding

TimelineDropBaggage

TimelineLeave

TimelinePick

Tours

Train

TransportBus

TransportTaxi

WomanWithPhone