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.

<Icons.TrophyIcon />
<Icons.AlertIcon size="small" />
<Icons.FreeNowArrowIcon size="large" color={Colors.FREEDOM_RED_900} />

<Icons.TrophyIcon />
<Icons.AlertIcon size="small" />
<Icons.FreeNowArrowIcon size="large" color={Colors.FREEDOM_RED_900} />

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.

Country Code

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

Default (24px)Service Types (28px)Inline (12px)

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

Used as unique brand style

Not used when meaning of icon breaksNot used in multimobility icons

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

Combination of 2px and 0px corder radius for solidityReplacing a circle shape with 2px corner radius used on four corners

Don’t add corner radius of 2px to every circle if it breaks the meaning of the icon

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

Colors for fuel/battery icons to indicate remaining percentExternal icons such e.g. the Paypal icon uses their own brand colorsActive/selected tab bar icons are colored in Action Blue 900

The default color for our icons is Authentic Blue 900.