- orbit.kiwi
- / Components
- / Icon
Icon
Draws attention to specific actions and features.
Icons add simple visual context so users can understand the context at a glance. They can help clarify a feature’s main purpose or draw attention to a commonly understood action.
Remember that while visual cues like icons can help many people process the message, not everyone will benefit from them. Make sure your content is accessible to everyone by including a label or other text to make the message clear.
Component status
FigmaReleased
Web (React)Released
iOS (Swift)n/a
Android (Kotlin)n/a
SketchReleased
Content structure
Guidelines
Use labels
Not everyone will be 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:
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";() => (
<Stack>
<Text>
<Passengers ariaLabel="Passengers" /> 4
</Text>
<Text>
<Airplane ariaHidden /> Flights
</Text>
</Stack>
)
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:
colorIconPrimary
colorIconPrimary
#252A31
rgb(37, 42, 49)
colorIconSecondary
colorIconSecondary
#5F738C
rgb(95, 115, 140)
colorIconTertiary
colorIconTertiary
#BAC7D5
rgb(186, 199, 213)
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";() => (
<Stack direction="column">
<Stack flex>
<Stack flex>
<Stack>
<Text>Inherited color</Text>
<Text type="success">
<Airplane ariaLabel="Airplane" /> Price alerts
</Text>
</Stack>
</Stack>
</Stack>
<Stack flex>
<Stack>
<Text>Primary</Text>
<Airplane color="primary" ariaLabel="Airplane" />
</Stack>
<Stack>
<Text>Secondary</Text>
<Airplane color="secondary" ariaLabel="Airplane" />
</Stack>
<Stack>
<Text>Teriary</Text>
<Airplane color="tertiary" ariaLabel="Airplane" />
</Stack>
<Stack>
<div />
</Stack>
</Stack>
<Stack flex>
<Stack>
<Text>Informational</Text>
<Airplane color="info" ariaLabel="Airplane" />
</Stack>
<Stack>
<Text>Success</Text>
<Airplane color="success" ariaLabel="Airplane" />
</Stack>
<Stack>
<Text>Warning</Text>
<Airplane color="warning" ariaLabel="Airplane" />
</Stack>
<Stack>
<Text>Critical</Text>
<Airplane color="critical" ariaLabel="Airplane" />
</Stack>
</Stack>
<Stack flex>
<Stack>
<Text>Custom color</Text>
<Airplane customColor="#ffc0cb" ariaLabel="Airplane" />
</Stack>
</Stack>
</Stack>
)
List of all icons
-
QR-codeE193
-
accommodationE085
-
account-circleE134
-
air-conditioningE184
-
airplane0061
-
airplane-downE101
-
airplane-landing0025
-
airplane-returnE159
-
airplane-takeoff002a
-
airplane-upE160
-
airplane-up-offE102
-
airport-securityE035
-
alertE07F
-
alert-circle0055
-
allE061
-
anywhere0067
-
appleE199
-
arrow-downE0A0
-
arrow-upE09F
-
atmE02C
-
attachmentE104
-
baggage-cabinE106
-
baggage-cabin-noneE174
-
baggage-checked0068
-
baggage-checked-noneE021
-
baggage-personal-itemE156
-
baggage-personal-item-noneE175
-
baggage-recheckE105
-
baggage-setE107
-
baggage-storageE147
-
billing-detailsE108
-
boarding-gateE00A
-
boatE139
-
bug004e
-
bus003c
-
cakeE187
-
calendar0066
-
calendar-anytime0041
-
calendar-range007a
-
calendar-trip-lengthE109
-
cameraE017
-
carE03A
-
car-doorE185
-
car-rentalE030
-
chartE176
-
chat0039
-
check0056
-
check-circle0053
-
chevron-downE09D
-
chevron-left0021
-
chevron-rightE01F
-
chevron-up006d
-
childE050
-
child-friendlyE05D
-
circleE013
-
circle-emptyE179
-
circle-filledE180
-
circle-smallE148
-
city0063
-
clock0065
-
close0058
-
close-circle0074
-
cocktailE038
-
codeE141
-
coffeeE02F
-
color-pickerE200
-
compareE155
-
compassE07E
-
contact-email0076
-
credit-card0075
-
customer-supportE194
-
dealsE142
-
device-desktopE158
-
device-mobileE157
-
diamondE197
-
documentE110
-
downloadE014
-
duplicateE154
-
edit0045
-
edit-offE00D
-
email0047
-
entertainmentE06E
-
exchangeE032
-
facebookE002
-
feedbackE140
-
filters0026
-
flight-direct0043
-
flight-multicity005d
-
flight-nomadE150
-
flight-return0073
-
flight-servicesE049
-
fuelE183
-
full-screenE0A6
-
full-screen-offE111
-
galleryE064
-
gender-manE152
-
gender-womanE151
-
googleE003
-
gps-fixed0022
-
gps-iosE161
-
gps-not-fixedE191
-
gps-offE01C
-
gridE06D
-
gymE089
-
historyE153
-
infantE186
-
information-circle0052
-
instagramE112
-
insurance0027
-
insurance-confirmed0072
-
insurance-off003a
-
invoiceE113
-
item-completedE149
-
kiwicomE143
-
kiwicom-careE144
-
kiwicom-guaranteeE145
-
leisureE178
-
linkE057
-
linkedinE114
-
listE115
-
location0024
-
location-a006a
-
location-add003f
-
location-b006b
-
location-c005e
-
location-d005f
-
location-e0060
-
location-f007b
-
location-g007c
-
location-h007d
-
location-i007e
-
location-j005c
-
lockE169
-
lock-openE170
-
logoutE0A7
-
loungeE04E
-
mapE001
-
mealE116
-
menu-hamburger0044
-
menu-kebabE117
-
menu-meatballsE07D
-
messagesE135
-
messages-outlineE136
-
minusE118
-
minus-circleE119
-
money0040
-
money-transfer-inE167
-
money-transfer-outE168
-
moonE090
-
musical-instrumentsE086
-
new-windowE05E
-
nonstopE120
-
notificationE018
-
notification-addE195
-
notification-offE023
-
notification-onE025
-
online-checkinE00F
-
online-checkin-offE00E
-
outlookE181
-
paidE121
-
parkingE03E
-
partnersE164
-
passenger0077
-
passenger-add0029
-
passenger-outlineE137
-
passenger-removeE173
-
passengers0028
-
passport0051
-
petE043
-
pharmacyE034
-
phoneE058
-
playgroundE053
-
plusE122
-
plus-circleE027
-
poolE123
-
power-plugE06F
-
power-plug-off0033
-
priority-boardingE08D
-
profitE166
-
promo-codeE081
-
question-circle0046
-
radarE198
-
radius-search0064
-
refundE165
-
relaxE046
-
reload0032
-
remove0057
-
replace0049
-
restaurant0031
-
route-no-stops006f
-
route-one-stop0071
-
route-two-stops0070
-
searchE07C
-
seatE02A
-
seat-aisleE189
-
seat-extra-legroomE190
-
seat-windowE188
-
securityE146
-
self-transferE020
-
send004d
-
settings0038
-
shareE016
-
share-androidE068
-
share-iosE163
-
shoppingE036
-
show-lessE124
-
show-moreE125
-
sightseeingE015
-
smokingE037
-
smoking-offE126
-
sortE171
-
spaE04A
-
sport-equipmentE127
-
sportsE042
-
star-emptyE08C
-
star-full0023
-
subwayE06A
-
suitcaseE02D
-
sunE096
-
sunriseE08E
-
taxi003b
-
terminalE196
-
terms-and-conditionsE0A4
-
thumb-downE128
-
thumb-upE01B
-
ticket002e
-
ticket-outlineE138
-
timelapseE000
-
timerE177
-
tipsE047
-
toiletsE129
-
trainE028
-
transmissionE182
-
tripE130
-
twitterE131
-
uberE162
-
uploadE172
-
user-groupE192
-
visaE132
-
visibilityE005
-
visibility-offE004
-
walkE052
-
walletE133
-
wheelchairE088
-
wifiE062
-
wifi-off005a