Icons
Usage
For each icon the library exposes a specific React component, which has the same name as the icon. They will render the connected SVG and allow you to change the size and (with some exceptions) color to suit your needs.
<AlertIcon />
Properties
Name | Type | Default |
---|---|---|
color | string Override the default color of the icon | |
size | "medium" | "small" | number Adjusts the size of the icon with defaults or the size in pixels | "medium" |
Examples
To allow using all icons, they are imported with import * as Icons from
, so you need to prefix every icon with Icon.
so it can be rendered in the example area. This isn't necessary in your project, as you can import the icons explicitly.
Available Icons
Actions
AlertIcon
CheckCircleOutlineIcon
CheckCircleSolidIcon
CheckIcon
CloseCircleOutlineIcon
CloseCircleSolidIcon
CloseIcon
CopyIcon
DownloadIcon
EnvelopeReinviteIcon
EnvelopeIcon
ExitIcon
EyeClosedIcon
EyeOpenIcon
MagnifyingGlassIcon
MinusCircleOutlineIcon
MinusCircleSolidIcon
MinusIcon
PenIcon
PlusCircleOutlineIcon
PlusCircleSolidIcon
PlusIcon
ShareIcon
ThumbDownOutlineIcon
ThumbDownSolidIcon
ThumbUpOutlineIcon
ThumbUpSolidIcon
TrashBinIcon
WarningSolidIcon
FilterDisabledIcon
FilterIcon
SoundAlertsOnlyIcon
SoundOffIcon
SoundOnIcon
Arrows & Chevron
ArrowDownLeftIcon
ArrowDownRightIcon
ArrowDownIcon
ArrowLeftIcon
ArrowRightIcon
ArrowUpLeftIcon
ArrowUpRightIcon
ArrowUpIcon
BackwardLastIcon
BackwardIcon
ChevronDownIcon
ChevronLeftIcon
ChevronRightIcon
ChevronUpIcon
DoubleArrowDownIcon
DoubleArrowUpIcon
DropdownSelectIcon
DropupSelectIcon
ForwardLastIcon
ForwardIcon
Basic
AnchorHamburgIcon
ClockIcon
DogIcon
FlagOutlineIcon
FreeNowArrowIcon
MegaphoneOutlineIcon
MegaphoneSolidIcon
ParcelIcon
StarCircleSolidIcon
TrophyIcon
Cities
BerlinIcon
CologneIcon
DanzigIcon
DuesseldorfIcon
FallbackIcon
HamburgIcon
MunichIcon
TurinIcon
WroclawIcon
Trip
AutomaticIcon
ChangeDestinationIcon
DestinationIcon
DriverHeartIcon
GiftIcon
HelmetIcon
LabelCheckedIcon
LabelOutlineIcon
LabelPlusIcon
LabelSolidIcon
LabelIcon
ManualIcon
MapIcon
PedestrianIcon
People5Icon
People6Icon
People7Icon
People8Icon
People9Icon
PersonOutlineIcon
PersonSolidIcon
PickUpIcon
SurgeCircleOutlineIcon
SurgeCircleSolidIcon
VipIcon
DriverIcon
TrendingUpIcon
Battery & Fuel
Battery10Icon
Battery100Icon
Battery25Icon
Battery50Icon
Battery75Icon
BatteryChargingIcon
BatteryEmptyIcon
BatteryGenericIcon
Fuel0Icon
Fuel10Icon
Fuel100Icon
Fuel25Icon
Fuel50Icon
Fuel75Icon
FuelGenericIcon
Mobility
BikeRiderOutlineIcon
BikeRiderSolidIcon
BikeScooterOutlineIcon
BikeScooterSolidIcon
BlackCabOutlineIcon
BlackCabSolidIcon
BusOutlineIcon
BusSolidIcon
CarLIcon
CarMIcon
CarOutlineIcon
CarSIcon
CarSolidIcon
CarXlIcon
CarXsIcon
KeyOutlineIcon
KeySolidIcon
MopedOutlineIcon
MopedSolidIcon
PersonHailingOutlineIcon
PersonHailingSolidIcon
ScooterOutlineIcon
ScooterSolidIcon
TrainOutlineIcon
TrainSolidIcon
VanIcon
Navigation
BriefcaseIcon
CompassIcon
CrosshairsOffIcon
CrosshairsIcon
DirectionArrowCircleOutlineIcon
DirectionArrowOutlineIcon
DirectionArrowSolidIcon
HotelIcon
HouseIcon
MortarboardIcon
ParkingIcon
PinIcon
PlaneIcon
Options
BlockIcon
CalculatorIcon
CalendarCheckedIcon
CalendarIcon
CameraIcon
CogIcon
DiamondIcon
DotsHorizontalBottomIcon
DotsHorizontalIcon
DotsVerticalIcon
EmojiCryingIcon
EmojiHappyIcon
EmojiKissIcon
EmojiLoveIcon
EmojiSadIcon
FavoriteBannerOutlineIcon
FavoriteBannerSolidIcon
FlashlightOffIcon
FlashlightOnIcon
GlobeIcon
HeartOutlineIcon
HeartSolidIcon
InfoCircleOutlineIcon
InfoCircleSolidIcon
KeyboardAlphabeticalIcon
KeyboardNumericIcon
KeyboardIcon
LegalBannerOutlineIcon
LegalBannerSolidIcon
ListIcon
LockClosedIcon
LockOpenIcon
LuggageIcon
MenuIcon
MicIcon
PhoneIcon
ProfileOutlineIcon
ProfileSolidIcon
QrCodeIcon
QuestionmarkIcon
SettingsIcon
SheetOutlineIcon
SheetSolidIcon
ShieldIcon
ShoppingCartIcon
SpeechbubblesCommentIcon
SpeechbubblesPairIcon
SpeechbubblesSingleIcon
SpeedometerIcon
StarOutlineIcon
StarSolidIcon
StopWatchIcon
WrenchIcon
Payment
BankNoteIcon
CreditCardPlusIcon
CreditCardIcon
DigitalPaymentIcon
FaceIdIcon
TippingIcon
TouchIdIcon
TravelExpensesIcon
VoucherIcon
WalletIcon
PaymentIcon
RefundIcon
Brand
AmericanExpressIcon
ApplePayIcon
AppleIcon
BrandsConcurIcon
BrandsMercedesIcon
BrandsMilesAndMoreIcon
FacebookIcon
GooglePayIcon
GoogleIcon
MastercardIcon
MilesIcon
PayPalIcon
VisaIcon
AdyenIcon
BraintreeIcon
CytricIcon
EcCardIcon
MoovelIcon
StripeIcon
WirecardIcon
Service Type
BoltCircleIcon
BoltOutlineIcon
BoltSolidIcon
LeafCircleIcon
LeafOutlineIcon
LeafSolidIcon
LightningIcon
LiteCircleIcon
TwoPeopleCircleIcon
TwoPeopleOutlineIcon
TwoPeopleSolidIcon
WheelchairCircleIcon
WheelchairOutlineIcon
WheelchairSolidIcon
Country Flags
This library provides flags for almost every country of the world, identified by their two-character
(ISO 3166-1 alpha-2) country code. The icon can be accessed by using the <Flag />
component and the provided country code with the property code
.
code="EU"
code="DE"
code="AT"
code="NL"
code="BE"
code="ES"
code="PE"
code="RO"
code="IT"
code="SE"
code="US"
<Flag code="US" />
It is also possible to preview all flags included in this library with the selector below.
Special Flags
There are a few additional, special flags included in this library, that do not represent a single country. You can find them below.
code="EU"
code="WW"
code="CAF"
code="CAS"
code="CEU"
code="CNA"
code="CSA"
code="COC"
Design Documentation
Specs
Icon sizes
The content of an icon should remain inside of the inner safe zone and should only extend into the padding between the save and trim area if additional visual weight is needed. Do not place any part of the icon outside of the trim area.
Gap
Most of the icons contain an open edge which is part of our unique brand style. The 2x width gap is only used in icons, where it is not breaking the meaning of the icon. The multimodality icons, which are used in the tab bar are not including the gap.
Corner Radius
The border radius of 2px is used in every icon where it makes sense. The corner radius is based on our UI components e.g. buttons and annotations. Often it is a combination of 2px and 0px border radius to create a round and friendly but also stable icon.
Color
The default color for our icons is Authentic Blue 900.