Icon

Draws attention to specific actions and features.

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

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.

Do

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.

Do

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

283

account-circle

282

admin

228

ai

280

air-conditioning

279

airplane-down

258

airplane-landing

276

airplane-return

275

airplane-takeoff

274

airplane-up-off

272

airplane-up

254

airplane

278

airport-security

271

alert-circle

273

alert-octagon

242

alert

270

all

271

android

43

anywhere

265

app-notification

241

apple

42

arrow-down

63

arrow-up

62

atm

260

attachment

250

baggage-cabin-none

257

baggage-cabin

258

baggage-checked-10

248

baggage-checked-20

247

baggage-checked-30

246

baggage-checked-none

245

baggage-personal-none

251

baggage-personal

252

baggage-recheck

247

baggage-set

249

baggage-storage

245

billing-details

247

boarding-gate

246

boat

245

bookmark

229

bug

243

bus

242

cake

241

calendar-anytime

239

calendar-range

238

calendar-trip-length

229

calendar

240

camera

236

car-door

226

car-rental

233

car

235

care-kiwi.com

224

chart

231

chat

222

check-circle

228

check

217

chevron-double-left

227

chevron-double-right

226

chevron-down

54

chevron-left

55

chevron-right

53

chevron-up

52

child-friendly

220

child

221

circle-empty

218

circle-filled

217

circle-small

216

circle

219

city

207

clock

214

close-circle

212

close

211

cocktail

211

code.kiwi

40

code

210

coffee

208

color-picker

193

colored-facebook

2

colored-imessage

5

colored-messenger

3

colored-signal

8

colored-telegram

6

colored-twitter

1

colored-viber

7

colored-whatsapp

4

compare

206

compass

205

contact-email

196

credit-card

195

customer-support

195

dashboard

227

deals-v2

191

deals

200

device-desktop

198

device-mobile

197

diamond

188

document

195

download

194

duplicate

193

edit-off

191

edit

192

email

190

entertainment

189

exchange

188

facebook

187

family-all

170

family-half

169

feedback

176

filters

183

flash

182

flight-direct

181

flight-multicity

180

flight-nomad

179

flight-return

178

flight-services

177

fuel

168

full-screen-off

174

full-screen

175

gender-man

172

gender-woman

171

github

170

google

9

gps-fixed

169

gps-ios

181

gps-not-fixed

167

gps-off

166

grid

165

gym

163

history

162

inbox

161

infant

160

information-circle

150

instagram

149

insurance-confirmed

156

insurance-off

155

insurance

174

invoice

145

item-completed

153

kiwicom-care

224

kiwicom-guarantee

164

kiwicom-no-guarantee

114

kiwicom

143

leisure

142

linkedin

149

list

148

location-a

137

location-add

145

location-b

135

location-c

134

location-d

133

location-e

132

location-f

140

location-g

139

location-h

138

location-i

137

location-j

136

location

147

lock-open

125

lock

126

logout

133

lounge

132

map

122

markdown

130

meal

129

messages-outline

124

messages

125

minus-circle

122

minus

143

money-transfer-in

111

money-transfer-out

110

money

112

moon

159

musical-instruments

117

new-window

116

no-flash

115

no-refund

134

no-rescheduling

198

nonstop

111

notification-add

107

notification-off

109

notification-on

108

notification

110

notificiation-add

141

online-checkin-off

96

online-checkin

106

outlook

104

parking

102

partners

101

passenger-add

99

passenger-outline

98

passenger-remove

97

passenger

100

passengers

96

passport

86

pet

94

pharmacy

93

phone

129

placeholder

274

playground

90

plus-circle

88

plus-minus

275

plus

123

pool

77

power-plug-off

84

power-plug

85

priority-boarding

128

profit

82

promo-code

72

qr-code

102

question-circle

70

radar

101

refund

76

relax

75

reload

74

remove

73

replace

72

restaurant

71

route-no-stops

70

route-one-stop

69

route-two-stops

68

seat-aisle

65

seat-extra-legroom

64

seat-window

63

seat

66

security

62

self-transfer

61

send

118

settings

59

share-android

37

share-ios

56

share

36

shopping

55

show-less

54

show-more

53

sightseeing

52

sign

115

smoking-off

49

smoking

50

sms

114

sort

47

spa

46

sport-equipment

45

sports

35

stackoverflow

51

star-empty

42

star-full

2

subway

31

suitcase

30

sun

38

sunrise

37

taxi

27

terminal

26

terms-and-conditions

34

thumb-down

33

thumb-up

32

ticket-outline

30

ticket

22

timelapse

29

timer

19

tips

27

toilets

26

train

16

transmission

108

trip

14

twitter

22

uber

12

upload

20

user-group

34

visa

18

visibility-off

16

visibility

17

walk

15

wallet

14

wheelchair

13

wifi-off

11

wifi

12

youtube

10