UI Components

Icons

General Icons

Alert – .c-icon--alert

Example

<svg class="c-icon c-icon--alert" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-alert" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Basket – .c-icon--basket

Example

<svg class="c-icon c-icon--basket" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-basket" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Collection – .c-icon--collection

Example

<svg class="c-icon c-icon--collection" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-collection" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Collection Bag– .c-icon--collectionBag

Example

<svg class="c-icon c-icon--collectionBag" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-collectionBag" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Delivery – .c-icon--delivery

Example

<svg class="c-icon c-icon--delivery" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-delivery" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Delivery Small – .c-icon--delivery--small

Example

<svg class="c-icon c-icon--delivery c-icon--delivery--small" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-delivery" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Info – .c-icon--info

Example

<svg class="c-icon c-icon--info" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-info" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Padlock – .c-icon--padlock

Example

<svg class="c-icon c-icon--padlock" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-padlock" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Nut Allergy – .c-icon--nutAllergy

Example

<svg class="c-icon c-icon--nutAllergy" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-nutAllergy" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Offer – .c-icon--offer

Example

<svg class="c-icon c-icon--offer" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-offer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Offer Small – .c-icon--offer--small

Example

<svg class="c-icon c-icon--offer c-icon--offer--small" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-offer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Spicy – .c-icon--spicy

Example

<svg class="c-icon c-icon--spicy" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-spicy" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Tick – .c-icon--tick

Example

<svg class="c-icon c-icon--tick" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-tick" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Vegetarian – .c-icon--vegetarian

Example

<svg class="c-icon c-icon--vegetarian" >
    <use xlink:href="/assets/img/sprite.svg#icons-general-vegetarian" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Local legends – .c-icon--localLegend

Example

{$ASYNCID$1$2821$}

Local legends condensed – .c-icon--localLegendCondensed

Example

{$ASYNCID$1$2822$}

Tool Icons

Eyeglass – .c-icon--eyeglass

Example

<svg class="c-icon c-icon--eyeglass" >
    <use xlink:href="/assets/img/sprite.svg#icons-tools-eyeglass" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Horizontal Sliders – .c-icon--slidersHorizontal

Example

<svg class="c-icon c-icon--slidersHorizontal" >
    <use xlink:href="/assets/img/sprite.svg#icons-tools-slidersHorizontal" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Sort Amount – .c-icon--sortAmount

Example

<svg class="c-icon c-icon--sortAmount" >
    <use xlink:href="/assets/img/sprite.svg#icons-tools-sortAmount" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Map Pin – .c-icon--mapPin

Example

<svg class="c-icon c-icon--mapPin" >
    <use xlink:href="/assets/img/sprite.svg#icons-tools-mapPin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Arrow Icons

Chevron – .c-icon--chevron

Example

<svg class="c-icon c-icon--chevron" >
    <use xlink:href="/assets/img/sprite.svg#icons-arrows-chevron" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Chevron Small – .c-icon--chevron--small

Example

<svg class="c-icon c-icon--chevron c-icon--chevron--small" >
    <use xlink:href="/assets/img/sprite.svg#icons-arrows-chevron" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Chevron Up – .c-icon--chevron--up

Example

<svg class="c-icon c-icon--chevron c-icon--chevron--up" >
    <use xlink:href="/assets/img/sprite.svg#icons-arrows-chevron" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Chevron Right – .c-icon--chevron--right

Example

<svg class="c-icon c-icon--chevron c-icon--chevron--right" >
    <use xlink:href="/assets/img/sprite.svg#icons-arrows-chevron" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Chevron Light – .c-icon--chevron--light

Example

{$ASYNCID$1$2839$}

Card Icons

Amex – .c-icon--amex

Example

<svg class="c-icon c-icon--amex" {$ASYNCID$1$2840$}>
    <use xlink:href="/assets/img/sprite.svg#icons-cards-amex" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Amex Safekey – .c-icon--amex--safekey

Example

<svg class="c-icon c-icon--amex--safekey" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-amex--safekey" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Dankort – .c-icon--dk

Example

{$ASYNCID$1$2844$}

Interac – .c-icon--interac

Example

<svg class="c-icon c-icon--interac" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-interac" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

MasterCard – .c-icon--mastercard

Example

<svg class="c-icon c-icon--mastercard" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-mastercard" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

MasterCard Secure Code – .c-icon--mastercard--securecode

Example

<svg class="c-icon c-icon--mastercard--securecode" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-mastercard--securecode" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

PayPal – .c-icon--paypal

Example

<svg class="c-icon c-icon--paypal" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-paypal" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Visa – .c-icon--visa

Example

<svg class="c-icon c-icon--visa" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-visa" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Visa Verified – .c-icon--visa--verified

Example

<svg class="c-icon c-icon--visa--verified" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-visa--verified" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Maestro – .c-icon--maestro

Example

<svg class="c-icon c-icon--maestro" >
    <use xlink:href="/assets/img/sprite.svg#icons-cards-maestro" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Certificate Icons

Confianza – .c-icon--confianza

Example

<svg class="c-icon c-icon--confianza" >
    <use xlink:href="/assets/img/sprite.svg#icons-certificates-confianza" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Flag Icons

Australia – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.au" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Brazil – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.br" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Canada – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.ca" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Denmark – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.dk" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Spain – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.es" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

France – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.fr" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

United Kingdom – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.gb" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Ireland – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.ie" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Italy – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.it" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Norway – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.no" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

New Zealand – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.nz" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Switzerland – .c-icon--flag

Example

<svg class="c-icon c-icon--flag" >
    <use xlink:href="/assets/img/sprite.svg#icons-flags-flag.ch" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Operator Icons

Cross – .c-icon--cross

Example

<svg class="c-icon c-icon--cross" >
    <use xlink:href="/assets/img/sprite.svg#icons-operators-cross" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Minus – .c-icon--minus

Example

<svg class="c-icon c-icon--minus" >
    <use xlink:href="/assets/img/sprite.svg#icons-operators-minus" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Plus – .c-icon--plus

Example

<svg class="c-icon c-icon--plus" >
    <use xlink:href="/assets/img/sprite.svg#icons-operators-plus" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Plus – .c-icon--plus--thin

Example

<svg class="c-icon c-icon--plus--thin" >
    <use xlink:href="/assets/img/sprite.svg#icons-operators-plus--thin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Rating Icons

Star – .c-icon--star

Example

<svg class="c-icon c-icon--star" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--empty" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
<svg class="c-icon c-icon--star" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--filled" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Star Medium – .c-icon--star

Example

<svg class="c-icon c-icon--star--medium" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--empty" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
<svg class="c-icon c-icon--star--medium" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--filled" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Star Large – .c-icon--star

Example

<svg class="c-icon c-icon--star--large" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--empty" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
<svg class="c-icon c-icon--star--large" >
    <use xlink:href="/assets/img/sprite.svg#icons-stars-star--filled" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Social Icons

Facebook – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-facebook" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Google Plus – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-google-plus" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Instagram – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-instagram" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Pinterest – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-pinterest" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

RSS – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-rss" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Twitter – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-twitter" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

Youtube – .c-icon--social

Example

<svg class="c-icon c-icon--social" >
    <use xlink:href="/assets/img/sprite.svg#icons-social-icon-youtube" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>