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

2698

account-circle

2008

admin

2679

9860

air-conditioning

2858

airplane-down

2681

airplane-landing

2720

airplane-return

5982

airplane-takeoff

2864

airplane-up-off

9310

airplane-up

9442

airplane

4947

airport-security

5410

alert-circle

2685

alert-octagon

2724

alert

2690

all

3671

ambulance-light

596

android

2402

anywhere

3751

app-notification

5083

apple

1211

arrow-back

200

arrow-down

9572

arrow-up

2781

atm

2728

attachment

4440

baggage-cabin-light

2521

baggage-cabin-none-light

3427

baggage-cabin-none

2826

baggage-cabin

2799

baggage-checked-10-light

9187

baggage-checked-10-none-light

226

baggage-checked-10

9038

baggage-checked-20-light

1706

baggage-checked-20-none-light

245

baggage-checked-20

2806

baggage-checked-30-light

4855

baggage-checked-30

2813

baggage-checked-none-light

2193

baggage-checked-none

2836

baggage-personal-light

2461

baggage-personal-none-light

1701

baggage-personal-none

2660

baggage-personal

2909

baggage-recheck

7766

baggage-set-light

3296

baggage-set

8851

baggage-storage

2845

bank

6692

billing-details

2707

boarding-gate

9372

boat

2788

bookmark

9344

bug

2726

bus

2808

cake

4460

calendar-anytime

4527

calendar-duration

4904

calendar-range

5952

calendar-trip-length

3556

calendar

2661

camera

2768

car-door

2665

car-rental

2862

car

2664

chart

6925

chat

8647

check-circle

2740

check

2903

chevron-backward

2822

chevron-double-backward

2264

chevron-double-forward

7058

chevron-down

2667

chevron-forward

2668

chevron-up

2669

child-friendly

2671

child

2670

circle-empty

5486

circle-filled

2674

circle-small-empty

9571

circle-small

8053

circle

2672

city

2914

clock

8108

close-circle

2853

2889

cocktail

2927

code.kiwi

5988

code

5056

coffee

2713

color-picker

8770

colored-facebook

2129

colored-imessage

9052

colored-messenger

4407

colored-signal

4623

colored-telegram

5916

colored-viber

6059

colored-whatsapp

3046

compare

2680

compass

4816

contact-email

2684

copy

7844

credit-card

2686

customer-support

2688

dashboard

1469

deals-v2

6728

deals

2691

device-desktop

1774

device-mobile

3069

diamond

8630

document

2696

download

2697

duplicate

9494

edit-off

3372

edit

6036

3953

entertainment

2709

exchange

1707

facebook

4121

family-all

2745

family-half

2714

feedback

2751

filters

2715

flash

9010

flight-direct

7084

flight-multicity

7878

flight-nomad

2723

flight-return

8043

flight-services

8447

fuel

9902

full-screen-off

6821

full-screen

2730

gallery

2731

gender-man

7062

gender-woman

2734

github

8955

google-play

1038

google

5959

gps-fixed

6683

gps-ios

8993

gps-not-fixed

1504

gps-off

2737

grid

5681

gym

7005

heart-outline

1019

heart

1009

history

2803

hospital-sign-light

581

inbox

6431

infant

9347

information-circle-light

257

information-circle

2814

instagram

7300

insurance-confirmed

2786

insurance-off

4031

insurance

2805

invoice

2702

item-completed

5244

kiwicom-care

9753

kiwicom-guarantee

2319

kiwicom-no-guarantee

2775

kiwicom

2844

legal-experts-light

935

leisure

8309

link

9259

9652

list

7893

location-a

9233

location-add

6403

location-b

2850

location-c

2875

location-d

2710

location-e

1680

location-f

2869

location-g

2750

location-h

3445

location-i

1974

location-j

2924

location

9892

lock-open

2755

lock

2753

logout

3794

lounge

2880

map

2758

markdown

8187

meal-light

262

meal

2760

medical-insurance-light

586

medical-protection-light

578

messages-outline

9970

messages

2764

minus-circle

4552

minus

2766

money-transfer-in

9169

money-transfer-out

2770

money

8910

moon

2771

musical-instruments

2802

new-window

2101

no-flash

6933

no-refund

2776

no-rescheduling

2777

no-wifi-light

566

nonstop

2778

notification-add

9535

notification-off

7252

notification-on

9742

notification

2779

online-checkin-off

8777

online-checkin

8410

outlook

5080

paid

2886

parking

2865

partners

2883

passenger-add

4935

passenger-outline

6092

passenger-remove

2867

passenger

2832

passengers

2111

passport

5491

pet

2893

pharmacy

2925

phone-updates-light

562

phone

2783

pin-outline

1081

3914

placeholder

1255

play

6189

playground

6111

plus-circle

2789

plus-minus

4217

plus

3586

pool

9337

power-plug-off

8785

power-plug

2827

price-change

3027

priority-boarding-light

218

priority-boarding

2874

profit

7636

qr-code

2801

question-circle

2915

radar

2797

radius-search

2785

rebooking-light

7002

rebooking-none-light

8997

refund-light

9565

refund-none-light

7572

refund

2754

relax

9709

reload

2752

remove

2807

replace

9641

restaurant

8995

route-no-stops

1734

route-one-stop

5253

route-two-stops

8469

2887

seat-aisle-light

541

seat-aisle

2999

seat-default-light

539

seat-extra-legroom

2817

seat-light

4998

seat-window-light

540

seat-window

9964

seat

2833

security

8185

self-transfer

2787

send

2821

settings

2825

shopping

2896

show-less

2884

show-more

5137

sightseeing

3309

sign

2841

smoking-off

4702

smoking

7198

sms

7270

sort

1188

spa

2870

sport-equipment

2855

sports

2916

stackoverflow

3239

star-empty

2866

star-full

2876

subway

7603

suitcase

2908

sun

2712

sunrise

2881

taxi

1833

terminal

2165

terms-and-conditions

2843

thumb-down

4945

thumb-up

9504

ticket-outline

2476

ticket

2888

tiktok

2167

timelapse

2894

timer

2231

tips

4114

toilets

7816

train

1576

transmission

8486

trip-updates-light

564

trip

2911

uber

7053

upload

2746

user-group

2757

user-single-light

224

visa

3991

visibility-off

4122

visibility

7489

walk

8879

wallet

3772

wheelchair

2919

wifi-light

565

wifi-off

1140

wifi

4322

1007

youtube

7992