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.

Accommodation
Use for hotels and similar accommodation services
AccountCircle
Use as icon for login, register and similar account related features.
Airplane
AirplaneDown
Deprecated, use 'airplane' icon instead
AirplaneLanding
Use for arrival date
AirplaneOff
AirplaneReturn
AirplaneRight
AirplaneTakeoff
Use for departure date
AirplaneUp
Use in lists when there is a chance to meet other transportation types
AirportSecurity
Use in trip timeline
Alert
Use for getting users attention, e.g. in warning message.
AlertCircle
Use when some action is blocking, e.g. in error message.
All
Use in filters & lists for "All" option
Anywhere
Use in search for discover feature
ArrowDown
ArrowUp
Atm
Use in map for ATMs
Attachment
Use for multi-type attachments, like images, etc.
BaggageCabin
BaggageChecked
BaggageNone
BaggagePersonalItem
the smallest baggage allowed
BaggageRecheck
BaggageSet
BaggageStorage
... or 'luggage storage' if you prefer πŸ™‚
BillingDetails
BoardingGate
Use in info about boarding gate & in timeline for gate
Boat
Bug
Used just for developer purposes
Bus
Calendar
CalendarAnytime
Use for calendar feature when removing specific date
CalendarRange
Use for calendar feature for setting range of dates
CalendarTripLength
Use for calendar feature for setting relative trip length
Camera
Use when you need to open phone's camera
Car
CarRental
Chat
Associated with customer support chat.
Check
CheckCircle
Use when confirming user's action.
ChevronDown
ChevronLeft
ChevronRight
ChevronUp
Child
Use when you need to select child as passenger
ChildFriendly
Circle
Use for radio buttons or status dot
CircleSmall
...or point, bullet or dot.
City
For destinations or 'careers' in side menu
Clock
Close
CloseCircle
Cocktail
Code
Basically for code.kiwi.com in menu
Coffee
Use in map for coffee places
Compare
Compass
Use for discover feature
ContactEmail
Also for newsletter features
CreditCard
Deals
DeviceDesktop
DeviceMobile
Document
Use when we want some text document from user.
Download
Use every time when user should download something from us.
Duplicate
alias: copy
Edit
EditOff
Use when you need to show that editing is not available anymore
Email
Entertainment
Use when there is an movie entertainement on board
Exchange
Use in map for exchange places
Facebook
Feedback
Filters
Shows additional options of filtering results, e.g. in search
FlightDirect
FlightMulticity
FlightNomad
FlightReturn
FlightServices
Use as general icon for in-flight services
FullScreen
FullScreenOff
GenderMan
GenderWoman
Google
Use this icon only in pre-defined colors
Gps
Use in map when you need to locate position of user
GpsIos
GpsOff
Use when GPS is not available
Grid
Gym
History
InformationCircle
Instagram
Insurance
InsuranceConfirmed
InsuranceOff
Invoice
ItemCompleted
Kiwicom
Our logo, use for company related links like Press Kit or About page.
KiwicomCare
KiwicomGuarantee
Only for Kiwi.com Guarantee!
Linkedin
List
Loading
Location
LocationA
LocationAdd
Use in multicity when adding new location
LocationB
LocationC
LocationD
LocationE
LocationF
LocationG
LocationH
LocationI
LocationJ
Lock
LockOpen
Logout
Lounge
Map
Meal
Use for meal on board, don't use for restaurants
Messages
MessagesOutline
Non-selected version for mobile menu.
Minus
MinusCircle
Money
MoneyTransferIn
MoneyTransferOut
Moon
MusicalInstruments
NewWindow
Nonstop
Notification
NotificationOff
NotificationOn
OnlineCheckin
OnlineCheckinOff
Parking
Partners
Passenger
PassengerAdd
PassengerOutline
Non-selected version for mobile menu
PassengerRemove
Passengers
Passport
Pet
Pharmacy
Phone
Playground
Plus
PlusCircle
Pool
PowerPlug
PowerPlugOff
PriorityBoarding
Profit
PromoCode
QuestionCircle
Refund
Relax
Reload
Remove
Replace
Use for switching from and to location in search form
Restaurant
RouteNoStops
Use as connecting symbol between locations for direct trip
RouteOneStop
Use as connecting symbol between locations for trip with one stop
RouteTwoStops
Use as connecting symbol between locations for trip with two stops
Seat
Security
Security articles, privacy policy, ...
SelfTransfer
Use when passengers need to transfer between locations on their own
Send
Use for send button for chat
Settings
For all possible settings, like cookies, etc.
Share
Use for every share action
ShareAndroid
Share version only for Android devices
ShareIos
Share version only for iOS devices
Shopping
ShowLess
ShowMore
Sightseeing
Smoking
SmokingOff
Sort
Spa
SportEquipment
Sports
StarEmpty
StarFull
Also for Top Routes
Subway
Suitcase
Sun
Sunrise
Taxi
TermsAndConditions
Also for Terms of Use and other similar features
ThumbDown
ThumbUp
Ticket
Use for generic tickets
TicketFlight
Use for flight tickets
TicketOutline
Non-selected icon for mobile menu
TicketTrain
Use for train tickets
Timelapse
Tips
Use when showing some interesting tips
Toilets
Train
Trip
Also good for general use or for 'Stories' section
Twitter
Uber
Upload
Use every time when user should upload something to our services.
Visa
Visibility
VisibilityOff
Walk
Wallet
Wheelchair
Wifi
WifiOff
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.