Illustration

Communicates information in an interesting visual way.

GuidelinesReact

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
Released
Released

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

AppKiwi

Accommodation

AirHelp

AirportShuttle

AirportTransport

AirportTransportTaxi

AppQRCode

BaggageDrop

Boarding

BoardingPass

BusinessTravel

CabinBaggage

Chatbot

CompassCollectPoints

CompassDemoted

CompassEmailAdventurer

CompassEmailCaptain

CompassEmailPromoted

CompassEmailPromotedCaptain

CompassEmailScout

CompassPoints

CompassSaveOnBooking

CompassTravelPlan

DesktopSearch

EnjoyApp

Error

Error404

EVisa

FastTrack

FastTrackMan

FareLock

FareLockSuccess

Feedback

GroundTransport404

Help

Improve

Insurance

InviteAFriend

Login

Lounge

Mailbox

Meal

MobileApp

Money

MusicalInstruments

NetVerify

NoBookings

NoFavoriteFlights

Nomad

NomadNeutral

NoNotification

NoResults

Offline

OnlineCheckIn

OpenSearch

Parking

Pets

PlaceholderAirport

PlaceholderDestination

PlaceholderHotel

PlaceholderTours

PlaneAndMoney

PlaneDelayed

PriorityBoarding

Rating

ReferAFriend

RentalCar

Seating

SpecialAssistance

SportsEquipment

Success

TicketFlexi

Time

TimelineBoarding

TimelineDropBaggage

TimelineLeave

TimelinePick

Tours

Train

TransportBus

TransportTaxi

WomanWithPhone