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

AlertIcon

ArrowDownLeftIcon

ArrowDownRightIcon

ArrowDownIcon

ArrowLeftIcon

ArrowRightIcon

ArrowUpLeftIcon

ArrowUpRightIcon

ArrowUpIcon

BackwardLastIcon

BackwardIcon

BrandsMilesAndMoreIcon

CheckCircleOutlineIcon

CheckCircleSolidIcon

ChevronDownIcon

ChevronLeftIcon

ChevronRightIcon

ChevronUpIcon

ClockIcon

CloseCircleOutlineIcon

CloseCircleSolidIcon

CloseIcon

CogIcon

CompassIcon

CrosshairsIcon

DirectionArrowCircleOutlineIcon

DirectionArrowOutlineIcon

DirectionArrowSolidIcon

DoubleArrowUpIcon

DownloadIcon

EnvelopeReinviteIcon

EnvelopeIcon

FaceIdIcon

ForwardLastIcon

ForwardIcon

GlobeIcon

HeartOutlineIcon

HeartSolidIcon

InfoCircleOutlineIcon

InfoCircleSolidIcon

KeyboardAlphabeticalIcon

KeyboardNumericIcon

KeyboardIcon

LegalBannerOutlineIcon

LegalBannerSolidIcon

ListIcon

LockClosedIcon

LockOpenIcon

MagnifyingGlassIcon

MenuIcon

PhoneIcon

PlusCircleOutlineIcon

PlusCircleSolidIcon

QrCodeIcon

QuestionmarkIcon

SettingsIcon

ShareIcon

SheetOutlineIcon

SheetSolidIcon

ShieldIcon

SpeechbubblesPairIcon

SpeechbubblesSingleIcon

SpeedometerIcon

StarCircleSolidIcon

StopWatchIcon

TouchIdIcon

TrashBinIcon

TravelExpensesIcon

PlusIcon

TrophyIcon

LightningIcon

PenIcon

EyeOpenIcon

EyeClosedIcon

MinusIcon

CopyIcon

BriefcaseIcon

CalendarCheckedIcon

CalendarIcon

DestinationIcon

FlashlightOffIcon

FlashlightOnIcon

GiftIcon

HouseIcon

LabelCheckedIcon

LabelPlusIcon

LabelIcon

MapIcon

MortarboardIcon

PedestrianIcon

PersonOutlineIcon

PersonSolidIcon

PickUpIcon

PinIcon

StarOutlineIcon

StarSolidIcon

SurgeCircleOutlineIcon

SurgeCircleSolidIcon

WrenchIcon

ChangeDestinationIcon

FlagOutlineIcon

Battery10Icon

Battery100Icon

Battery25Icon

Battery50Icon

Battery75Icon

BatteryChargingIcon

BatteryEmptyIcon

BatteryGenericIcon

Fuel0Icon

Fuel10Icon

Fuel100Icon

Fuel25Icon

Fuel50Icon

Fuel75Icon

FuelGenericIcon

BikeRiderOutlineIcon

BikeRiderSolidIcon

BlackCabOutlineIcon

BlackCabSolidIcon

BusOutlineIcon

BusSolidIcon

CarOutlineIcon

CarSolidIcon

FreeNowArrowIcon

PersonHailingOutlineIcon

PersonHailingSolidIcon

ScooterOutlineIcon

ScooterSolidIcon

TrainOutlineIcon

TrainSolidIcon

BrandsConcurIcon

BrandsMercedesIcon

DogIcon

DriverHeartIcon

FavoriteBannerOutlineIcon

FavoriteBannerSolidIcon

ParcelIcon

PlaneIcon

SpeechbubblesCommentIcon

VanIcon

BankNoteIcon

CreditCardPlusIcon

CreditCardIcon

CalculatorIcon

DigitalPaymentIcon

TippingIcon

WalletIcon

VoucherIcon

AmericanExpressIcon

ApplePayIcon

GooglePayIcon

MastercardIcon

PayPalIcon

VisaIcon

BoltOutlineIcon

BoltSolidIcon

LabelOutlineIcon

LabelSolidIcon

LeafOutlineIcon

LeafSolidIcon

TwoPeopleOutlineIcon

TwoPeopleSolidIcon

WheelchairOutlineIcon

WheelchairSolidIcon

BoltCircleIcon

LeafCircleIcon

LiteCircleIcon

TwoPeopleCircleIcon

WheelchairCircleIcon

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.