Icon

Draws attention to specific actions and features.

GuidelinesReact

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


Released	Released	n/a	n/a	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.

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

Use non-interactive icons for settings other than interactions.

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

Don't

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

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.

A list with three steps all with circled icons.

Using consistent icons keeps it easy to scan.

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

Don't

Varying the icons creates confusion about the message.

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

#5F738C

rgba(95, 115, 140, 1)

colorIconSecondary

Icon Tertiary

#BAC7D5

rgba(186, 199, 213, 1)

colorIconTertiary

List of all icons

accommodation

E085

account-circle

E134

air-conditioning

E184

airplane-down

E101

airplane-landing

0025

airplane-return

E159

airplane-takeoff

002a

airplane-up-off

E102

airplane-up

E160

airplane

0061

airport-security

E035

alert-circle

0055

alert

E07F

all

E061

anywhere

0067

apple

E199

arrow-down

E0A0

arrow-up

E09F

atm

E02C

attachment

E104

baggage-cabin-none

E174

baggage-cabin

E106

baggage-checked-10

E204

baggage-checked-20

E205

baggage-checked-30

0068

baggage-checked-none

E021

baggage-personal-none

E175

baggage-personal

E156

baggage-recheck

E105

baggage-set

E107

baggage-storage

E147

billing-details

E108

boarding-gate

E00A

boat

E139

bug

004e

bus

003c

cake

E187

calendar-anytime

0041

calendar-range

007a

calendar-trip-length

E109

calendar

0066

camera

E017

car-door

E185

car-rental

E030

car

E03A

chart

E176

chat

0039

check-circle

0053

check

0056

chevron-double-left

E202

chevron-double-right

E203

chevron-down

E09D

chevron-left

0021

chevron-right

E01F

chevron-up

006d

child-friendly

E05D

child

E050

circle-empty

E179

circle-filled

E180

circle-small

E148

circle

E013

city

0063

clock

0065

close-circle

0074

0058

cocktail

E038

code

E141

coffee

E02F

color-picker

E200

compare

E155

compass

E07E

contact-email

0076

credit-card

0075

customer-support

E194

deals

E142

device-desktop

E158

device-mobile

E157

diamond

E197

document

E110

download

E014

duplicate

E154

edit-off

E00D

edit

0045

0047

entertainment

E06E

exchange

E032

facebook

E002

feedback

E140

filters

0026

flight-direct

0043

flight-multicity

005d

flight-nomad

E150

flight-return

0073

flight-services

E049

fuel

E183

full-screen-off

E111

full-screen

E0A6

gallery

E064

gender-man

E152

gender-woman

E151

google

E003

gps-fixed

0022

gps-ios

E161

gps-not-fixed

E191

gps-off

E01C

grid

E06D

gym

E089

history

E153

infant

E186

information-circle

0052

instagram

E112

insurance-confirmed

0072

insurance-off

003a

insurance

0027

invoice

E113

item-completed

E149

kiwicom-care

E144

kiwicom-guarantee

E145

kiwicom

E143

leisure

E178

link

E057

E114

list

E115

location-a

006a

location-add

003f

location-b

006b

location-c

005e

location-d

005f

location-e

0060

location-f

007b

location-g

007c

location-h

007d

location-i

007e

location-j

005c

location

0024

lock-open

E170

lock

E169

logout

E0A7

lounge

E04E

map

E001

markdown

E201

meal

E116

messages-outline

E136

messages

E135

minus-circle

E119

minus

E118

money-transfer-in

E167

money-transfer-out

E168

money

0040

moon

E090

musical-instruments

E086

new-window

E05E

nonstop

E120

notification-add

E195

notification-off

E023

notification-on

E025

notification

E018

online-checkin-off

E00E

online-checkin

E00F

outlook

E181

paid

E121

parking

E03E

partners

E164

passenger-add

0029

passenger-outline

E137

passenger-remove

E173

passenger

0077

passengers

0028

passport

0051

pet

E043

pharmacy

E034

phone

E058

playground

E053

plus-circle

E027

plus

E122

pool

E123

power-plug-off

0033

power-plug

E06F

priority-boarding

E08D

profit

E166

QR-code

E193

question-circle

0046

radar

E198

radius-search

0064

refund

E165

relax

E046

reload

0032

remove

0057

replace

0049

restaurant

0031

route-no-stops

006f

route-one-stop

0071

route-two-stops

0070

E07C

seat-aisle

E189

seat-extra-legroom

E190

seat-window

E188

seat

E02A

security

E146

self-transfer

E020

send

004d

settings

0038

shopping

E036

show-less

E124

show-more

E125

sightseeing

E015

smoking-off

E126

smoking

E037

sort

E171

spa

E04A

sport-equipment

E127

sports

E042

star-empty

E08C

star-full

0023

subway

E06A

suitcase

E02D

sun

E096

sunrise

E08E

taxi

003b

terminal

E196

terms-and-conditions

E0A4

thumb-down

E128

thumb-up

E01B

ticket-outline

E138

ticket

002e

timelapse

E000

timer

E177

tips

E047

toilets

E129

train

E028

transmission

E182

trip

E130

twitter

E131

uber

E162

upload

E172

user-group

E192

visa

E132

visibility-off

E004

visibility

E005

walk

E052

wallet

E133

wheelchair

E088

wifi-off

005a

wifi

E062