Icon component

When to use

To add simple visual context.
To clarify the purpose of a feature or draw attention to a commonly understood action.
With text so the context is accessible to everyone.

When not to use

For services such as payment methods—use a service logo.
For carriers for transport—use a carrier logo.
For general visual context—use an illustration.

Component status

Figma	React	iOS	Android
Released	Released	Released	Released

Content structure

Icon glyph: works best when accompanied by a clear label to improve usability.

Content

Use interactive icons for interactions

Some icons (like plus and close ) work well to show users that an interaction is possible (like adding an option or closing a dialog). Users are used to interacting with these icons, so they work well inside buttons.

Don’t use such icons in places where users can’t interact with them. This creates an expectation that clicking them does something, which can lead to users being frustrated when nothing happens.

Use non-interactive icons for settings other than interactions.

Radio buttons under the heading 'Select an option' with both icons related to baggage.

Don't

Using interactive icons creates the expectation that clicking the icon does something.

Radio buttons under the heading 'Select an option' with the first icon being X and the second related to baggage.

Use similar icons for lists

When creating lists and other repeated structures, make sure to use icons that seem visually consistent. For example, to show steps taken and not, use check-circle and close-circle to present similar visual cues.

Using consistent icons keeps it easy to scan.

A list with three steps all with circled icons.

Don't

Varying the icons creates confusion about the message.

A list with three steps with 1 circled icon and 2 non-cicled icons.

Use labels

Not everyone is able to see your carefully selected icon, no matter how perfectly its shape matches its meaning. Ensure everyone gets the same message by including a label with the icon.

The label should be short and match the meaning you want to convey with the icon.

You don’t need labels when the icon is just visually supporting a message that exists in text. In such cases, you should hide the icon from assistive technology.

See how it’s done in React:

Look & feel

Match the color

You can usually have icons inherit their color from the surrounding text. If you need a standalone icon, select from a status color or one of our icon colors:

Icon Primary

#252A31

rgba(37, 42, 49, 1)

colorIconPrimary

Icon Secondary

#4F5E71

rgba(79, 94, 113, 1)

colorIconSecondary

Icon Tertiary

#BAC7D5

rgba(186, 199, 213, 1)

colorIconTertiary

List of all icons

accommodation

4389

account-circle

7884

admin

1251

3493

air-conditioning

3120

airplane-down

5587

airplane-landing

3208

airplane-return

5270

airplane-takeoff

6458

airplane-up-off

7086

airplane-up

5323

airplane

2620

airport-security

4505

alert-circle

6774

alert-octagon

7716

alert

1366

all

3456

android

5941

anywhere

4517

app-notification

6839

apple

7217

arrow-down

7613

arrow-up

2436

atm

2564

attachment

3491

baggage-cabin-none

2261

baggage-cabin

6767

baggage-checked-10

4378

baggage-checked-20

7799

baggage-checked-30

5619

baggage-checked-none

7228

baggage-personal-none

3665

baggage-personal

2567

baggage-recheck

6137

baggage-set

2615

baggage-storage

6846

bank

2724

billing-details

7410

boarding-gate

3753

boat

7136

bookmark

7882

bug

1524

bus

1349

cake

1352

calendar-anytime

6361

calendar-duration

6980

calendar-range

2629

calendar-trip-length

6457

calendar

3492

camera

6780

car-door

2538

car-rental

7708

car

7870

chart

2461

chat

5538

check-circle

3088

check

7679

chevron-backward

5623

chevron-double-backward

3446

chevron-double-forward

2985

chevron-down

2454

chevron-forward

7600

chevron-up

7267

child-friendly

2054

child

4353

circle-empty

5105

circle-filled

7771

circle-small-empty

4807

circle-small

1236

circle

3649

city

4376

clock

4469

close-circle

6824

6292

cocktail

5605

code.kiwi

4288

code

2157

coffee

2012

color-picker

7743

colored-facebook

8313

colored-imessage

5611

colored-messenger

6309

colored-signal

5871

colored-telegram

6530

colored-twitter

5150

colored-viber

6742

colored-whatsapp

6477

compare

7994

compass

3496

contact-email

3270

copy

6653

credit-card

2078

customer-support

2517

dashboard

6778

deals-v2

7369

deals

6765

device-desktop

4347

device-mobile

2738

diamond

7976

document

5574

download

3397

duplicate

2541

edit-off

3284

edit

1955

2584

entertainment

3470

exchange

6511

facebook

5309

family-all

6827

family-half

6514

feedback

7645

filters

4295

flash

7677

flight-direct

7388

flight-multicity

7555

flight-nomad

7576

flight-return

6831

flight-services

8005

fuel

3660

full-screen-off

1253

full-screen

7552

gallery

1338

gender-man

4414

gender-woman

1515

github

6405

google-play

1760

google

5463

gps-fixed

4387

gps-ios

2120

gps-not-fixed

3444

gps-off

7518

grid

4487

gym

1373

history

7152

inbox

1658

infant

1284

information-circle

1512

instagram

6900

insurance-confirmed

7867

insurance-off

3827

insurance

5298

invoice

7621

item-completed

1610

kiwicom-care

5241

kiwicom-guarantee

2694

kiwicom-no-guarantee

7890

kiwicom

1252

leisure

5037

link

7930

4311

list

7354

location-a

2761

location-add

3201

location-b

2693

location-c

7862

location-d

5061

location-e

2677

location-f

2691

location-g

7150

location-h

5151

location-i

6611

location-j

1894

location

4090

lock-open

5935

lock

1313

logout

7110

lounge

2118

map

7983

markdown

5908

meal

2640

messages-outline

6790

messages

2718

minus-circle

2194

minus

1972

money-transfer-in

1341

money-transfer-out

6849

money

5608

moon

6138

musical-instruments

2094

new-window

1780

no-flash

1933

no-refund

2125

no-rescheduling

7378

nonstop

2712

notification-add

6443

notification-off

2032

notification-on

1867

notification

2051

online-checkin-off

1921

online-checkin

5220

outlook

5299

paid

7737

parking

7063

partners

2168

passenger-add

5107

passenger-outline

2179

passenger-remove

6115

passenger

2188

passengers

7844

passport

1232

pet

7174

pharmacy

2171

phone

1321

5330

placeholder

7587

play

4213

playground

6810

plus-circle

5551

plus-minus

7074

plus

2147

pool

2148

power-plug-off

1339

power-plug

1618

priority-boarding

1126

profit

1061

qr-code

2165

question-circle

1362

radar

7558

radius-search

7593

refund

5833

relax

7052

reload

2076

remove

5291

replace

7352

restaurant

1342

route-no-stops

6105

route-one-stop

5585

route-two-stops

2050

1609

seat-aisle

6368

seat-extra-legroom

2119

seat-window

6797

seat

7774

security

6380

self-transfer

1573

send

7441

settings

2189

shopping

1045

show-less

7699

show-more

6396

sightseeing

1316

sign

6555

smoking-off

5062

smoking

5209

sms

1634

sort

5208

spa

1054

sport-equipment

5537

sports

6384

stackoverflow

5568

star-empty

1360

star-full

5196

subway

5191

suitcase

2162

sun

6487

sunrise

5205

taxi

2253

terminal

1444

terms-and-conditions

5167

thumb-down

2369

thumb-up

1006

ticket-outline

6106

ticket

2699

tiktok

6190

timelapse

4820

timer

6822

tips

6768

toilets

5952

train

6564

transmission

5891

trip

5730

twitter

2937

uber

6152

upload

6192

user-group

5875

visa

6858

visibility-off

7017

visibility

6740

walk

6026

wallet

5159

wheelchair

6489

wifi-off

6837

wifi

5275

youtube

6223