Icons

We use icons to draw attention to specific actions in our products.

1. Icon sizes

We use 2 icon sizes:Β Medium (24x24px) &Β Small (16x16px).

2. Icon colors

Colors are usually inherited from the text color paired with the icon. However, if you need to use a standalone icon, it’s good to use it with colors from these design tokens:

$colorIconAttention
#171b1e
$colorIconPrimary
#46515e
$colorIconSecondary
#7f91a8
$colorIconTerciary
#bac7d5

3. How to use icons

🏷

Tip: Don't use icons without a proper label. This creates confusion.

3.1 In Sketch

If you want to insert an icon into your Sketch, always use symbols starting with “Size: ” and then select the specific icon from the Overrides menu. It allows you to use color mask correctly.

3.2 In the React environment

To implement Icon component into your project you need to know its name. You can find it in the list of all icons. Then just add an import of the icon:

import Airplane from "@kiwicom/orbit-components/lib/icons/Airplane";

After adding import into your project you can use it simply like:

<Airplane />

Props

Table below contains all types of the props available for icons in general.

Name Type Default Description
className string The optional className of Icon.
color enum currentColor The color of the Icon.
customColor string The customColor of the Icon. See Functional specs
dataTest string Optional prop for testing purposes.
size enum "medium" The size of the Icon.

enum

color size
"attention" "small"
"primary" "medium"
"secondary" "large"
"tertiary"
"info"
"success"
"warning"
"critical"

Functional specs

  • If you don't pass customColor or color prop to Icon, it will inherit color from parent container with currentColor by default.

3.3 In the mobile application

We have the icon font ready for use in mobile applications, copy the code of the icon you need and apply where necessary.

3.4 Outside of our code base

If you need to use our icons outside of our React environment or mobile apps, you have 2 ways of doing so.

  • As SVG sprite
  • Standalone
    • Just download any icon you need from the icon list below and use SVG
    • Or download the whole icon set as a ZIP file

4. List of icons

πŸ’‘

Use CTRL/CMD+F to search icon by name or description.

/E085
accommodation
Use for hotels and similar accommodation services
/E134
account-circle
Use as icon for login, register and similar account related features.
/a
airplane
/E101
airplane-down
Deprecated, use 'airplane' icon instead
/%
airplane-landing
Use for arrival date
/E102
airplane-off
/E159
airplane-return
/E103
airplane-right
/*
airplane-takeoff
Use for departure date
/E160
airplane-up
Use in lists when there is a chance to meet other transportation types
/E035
airport-security
Use in trip timeline
/E07F
alert
Use for getting users attention, e.g. in warning message.
/U
alert-circle
Use when some action is blocking, e.g. in error message.
/E061
all
Use in filters & lists for "All" option
/g
anywhere
Use in search for discover feature
/E0A0
arrow-down
/E09F
arrow-up
/E02C
atm
Use in map for ATMs
/E104
attachment
Use for multi-type attachments, like images, etc.
/E106
baggage-cabin
/h
baggage-checked
/E021
baggage-none
/E156
baggage-personal-item
the smallest baggage allowed
/E105
baggage-recheck
/E107
baggage-set
/E147
baggage-storage
... or 'luggage storage' if you prefer πŸ™‚
/E108
billing-details
/E00A
boarding-gate
Use in info about boarding gate & in timeline for gate
/E139
boat
/N
bug
Used just for developer purposes
/<
bus
/f
calendar
/A
calendar-anytime
Use for calendar feature when removing specific date
/z
calendar-range
Use for calendar feature for setting range of dates
/E109
calendar-trip-length
Use for calendar feature for setting relative trip length
/E017
camera
Use when you need to open phone's camera
/E03A
car
/E030
car-rental
/9
chat
Associated with customer support chat.
/V
check
/S
check-circle
Use when confirming user's action.
/E09D
chevron-down
/!
chevron-left
/E01F
chevron-right
/m
chevron-up
/E050
child
Use when you need to select child as passenger
/E05D
child-friendly
/E013
circle
Use for radio buttons or status dot
/E148
circle-small
...or point, bullet or dot.
/c
city
For destinations or 'careers' in side menu
/e
clock
/X
close
/t
close-circle
/E038
cocktail
/E141
code
Basically for code.kiwi.com in menu
/E02F
coffee
Use in map for coffee places
/E155
compare
/E07E
compass
Use for discover feature
/v
contact-email
Also for newsletter features
/u
credit-card
/E142
deals
/E158
device-desktop
/E157
device-mobile
/E110
document
Use when we want some text document from user.
/E014
download
Use every time when user should download something from us.
/E154
duplicate
alias: copy
/E
edit
/E00D
edit-off
Use when you need to show that editing is not available anymore
/G
email
/E06E
entertainment
Use when there is an movie entertainement on board
/E032
exchange
Use in map for exchange places
/E002
facebook
/E140
feedback
/&
filters
Shows additional options of filtering results, e.g. in search
/C
flight-direct
/]
flight-multicity
/E150
flight-nomad
/s
flight-return
/E049
flight-services
Use as general icon for in-flight services
/E0A6
full-screen
/E111
full-screen-off
/E152
gender-man
/E151
gender-woman
/E003
google
Use this icon only in pre-defined colors
/"
gps
Use in map when you need to locate position of user
/E161
gps-ios
/E01C
gps-off
Use when GPS is not available
/E06D
grid
/E089
gym
/E153
history
/R
information-circle
/E112
instagram
/'
insurance
/r
insurance-confirmed
/:
insurance-off
/E113
invoice
/E149
item-completed
/E143
kiwicom
Our logo, use for company related links like Press Kit or About page.
/E144
kiwicom-care
/E145
kiwicom-guarantee
Only for Kiwi.com Guarantee!
/E114
linkedin
/E115
list
/
loading
/$
location
/j
location-a
/?
location-add
Use in multicity when adding new location
/k
location-b
/^
location-c
/_
location-d
/`
location-e
/{
location-f
/|
location-g
/}
location-h
/~
location-i
/\
location-j
/E169
lock
/E170
lock-open
/E0A7
logout
/E04E
lounge
/E001
map
/E116
meal
Use for meal on board, don't use for restaurants
/E135
messages
/E136
messages-outline
Non-selected version for mobile menu.
/E118
minus
/E119
minus-circle
/@
money
/E167
money-transfer-in
/E168
money-transfer-out
/E090
moon
/E086
musical-instruments
/E05E
new-window
/E120
nonstop
/E018
notification
/E023
notification-off
/E025
notification-on
/E00F
online-checkin
/E00E
online-checkin-off
/E03E
parking
/E164
partners
/w
passenger
/)
passenger-add
/E137
passenger-outline
Non-selected version for mobile menu
/(
passengers
/Q
passport
/E043
pet
/E034
pharmacy
/E058
phone
/E053
playground
/E122
plus
/E027
plus-circle
/E123
pool
/E06F
power-plug
/3
power-plug-off
/E08D
priority-boarding
/E166
profit
/E081
promo-code
/F
question-circle
/E165
refund
/E046
relax
/2
reload
/W
remove
/I
replace
Use for switching from and to location in search form
/1
restaurant
/o
route-no-stops
Use as connecting symbol between locations for direct trip
/q
route-one-stop
Use as connecting symbol between locations for trip with one stop
/p
route-two-stops
Use as connecting symbol between locations for trip with two stops
/E02A
seat
/E146
security
Security articles, privacy policy, ...
/E020
self-transfer
Use when passengers need to transfer between locations on their own
/M
send
Use for send button for chat
/8
settings
For all possible settings, like cookies, etc.
/E016
share
Use for every share action
/E068
share-android
Share version only for Android devices
/E163
share-ios
Share version only for iOS devices
/E036
shopping
/E124
show-less
/E125
show-more
/E015
sightseeing
/E037
smoking
/E126
smoking-off
/E04A
spa
/E127
sport-equipment
/E042
sports
/E08C
star-empty
/#
star-full
Also for Top Routes
/E06A
subway
/E02D
suitcase
/E096
sun
/E08E
sunrise
/;
taxi
/E0A4
terms-and-conditions
Also for Terms of Use and other similar features
/E128
thumb-down
/E01B
thumb-up
/.
ticket
Use for generic tickets
/6
ticket-flight
Use for flight tickets
/E138
ticket-outline
Non-selected icon for mobile menu
/E084
ticket-train
Use for train tickets
/E000
timelapse
/E047
tips
Use when showing some interesting tips
/E129
toilets
/E028
train
/E130
trip
Also good for general use or for 'Stories' section
/E131
twitter
/E162
uber
/E132
visa
/E005
visibility
/E004
visibility-off
/E052
walk
/E133
wallet
/E088
wheelchair
/E062
wifi
/Z
wifi-off
When wifi is not available.

5. Request for a new icon

Our icons are based on Material design icon guidelines.Β We’re using a few different icon packs from which we select the best possible icon for us.

Just select an icon that is best suited for you and contact @honza on Slack.