Style guide

Icon

<span class="icon"> 
    <svg id="oven" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" title="" > 
        <path d="M21.64,1.61H2.36c-.41,0-.75.34-.75.75v19.29c0,.41.34.75.75.75h19.29c.41,0,.75-.34.75-.75V2.36c0-.41-.34-.75-.75-.75ZM20.89,20.89H3.11V3.11h17.79v17.79ZM16.47,5.97c0-.53.37-.96.86-1.09.09-.04.19-.06.29-.06s.2.02.29.06c.49.13.86.56.86,1.09s-.37.96-.86,1.09c-.09.04-.19.06-.29.06s-.2-.02-.29-.06c-.49-.13-.86-.56-.86-1.09ZM12.46,5.97c0-.53.37-.96.86-1.09.09-.04.19-.06.29-.06s.2.02.29.06c.49.13.86.56.86,1.09s-.37.96-.86,1.09c-.09.04-.19.06-.29.06s-.2-.02-.29-.06c-.49-.13-.86-.56-.86-1.09ZM5.22,5.97c0-.53.37-.96.86-1.09.09-.04.19-.06.29-.06s.2.02.29.06c.49.13.86.56.86,1.09s-.37.96-.86,1.09c-.09.04-.19.06-.29.06s-.2-.02-.29-.06c-.49-.13-.86-.56-.86-1.09ZM15.16,13.21c0,.41-.34.75-.75.75h-4.82c-.41,0-.75-.34-.75-.75s.34-.75.75-.75h4.82c.41,0,.75.34.75.75ZM5.97,18.78h12.05c.41,0,.75-.34.75-.75v-8.04c0-.41-.34-.75-.75-.75H5.97c-.41,0-.75.34-.75.75v8.04c0,.41.34.75.75.75ZM6.72,10.74h10.55v6.54H6.72v-6.54Z" fill="currentColor" stroke-width="0"/> 
        </svg> 
    </span>

Other sizes

.icon-7

.icon-8

.icon-9

.icon-10

.icon-base

.icon-1qx

.icon-1hx

.icon-1tx

.icon-2x

.icon-2qx

.icon-2hx

.icon-2tx

.icon-3x

.icon-3qx

.icon-3hx

.icon-3tx

.icon-4x

.icon-4qx

.icon-4hx

.icon-4tx

.icon-5x

.icon-5qx

.icon-5hx

.icon-5tx

<span class="icon icon-7">
    <svg>...
    </svg>
</span> 
<span class="icon icon-8">
    <svg>...
    </svg>
</span> 
<span class="icon icon-9">
    <svg>...
    </svg>
</span> 
<span class="icon icon-10">
    <svg>...
    </svg>
</span> 
<span class="icon icon-base">
    <svg>...
    </svg>
</span> 
<span class="icon icon-1qx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-1hx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-1tx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-2x">
    <svg>...
    </svg>
</span> 
<span class="icon icon-2qx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-2hx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-2tx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-3x">
    <svg>...
    </svg>
</span> 
<span class="icon icon-3qx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-3hx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-3tx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-4x">
    <svg>...
    </svg>
</span> 
<span class="icon icon-4qx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-4hx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-4tx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-5x">
    <svg>...
    </svg>
</span> 
<span class="icon icon-5qx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-5hx">
    <svg>...
    </svg>
</span> 
<span class="icon icon-5tx">
    <svg>...
    </svg>
</span>

Colours

.icon-ei-autumn

.icon-black

.icon-ei-brand

.icon-ei-fog

.icon-green

.icon-ei-khaki

.icon-ei-lemongrass

.icon-ei-light-brand

.icon-ei-light-grey

.icon-ei-light-taupe

.icon-ei-mauve

.icon-pink

.icon-ei-sand

.icon-ei-taupe

.icon-teal

.icon-ei-terracotta

.icon-yellow

.icon-primary

.icon-secondary

.icon-danger

.icon-warning

.icon-success

.icon-light

.icon-blue

.icon-indigo

.icon-purple

.icon-red

.icon-orange

.icon-cyan

.icon-white

.icon-gray-100

.icon-gray-200

.icon-gray-300

.icon-gray-400

.icon-gray-500

.icon-gray-600

.icon-gray-700

.icon-gray-800

.icon-gray-900

<span class="icon icon-ei-autumn">
    <svg>...
    </svg>
</span> 
<span class="icon icon-black">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-brand">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-fog">
    <svg>...
    </svg>
</span> 
<span class="icon icon-green">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-khaki">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-lemongrass">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-light-brand">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-light-grey">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-light-taupe">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-mauve">
    <svg>...
    </svg>
</span> 
<span class="icon icon-pink">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-sand">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-taupe">
    <svg>...
    </svg>
</span> 
<span class="icon icon-teal">
    <svg>...
    </svg>
</span> 
<span class="icon icon-ei-terracotta">
    <svg>...
    </svg>
</span> 
<span class="icon icon-yellow">
    <svg>...
    </svg>
</span> 
<span class="icon icon-primary">
    <svg>...
    </svg>
</span> 
<span class="icon icon-secondary">
    <svg>...
    </svg>
</span> 
<span class="icon icon-danger">
    <svg>...
    </svg>
</span> 
<span class="icon icon-warning">
    <svg>...
    </svg>
</span> 
<span class="icon icon-success">
    <svg>...
    </svg>
</span> 
<span class="icon icon-light">
    <svg>...
    </svg>
</span> 
<span class="icon icon-blue">
    <svg>...
    </svg>
</span> 
<span class="icon icon-indigo">
    <svg>...
    </svg>
</span> 
<span class="icon icon-purple">
    <svg>...
    </svg>
</span> 
<span class="icon icon-red">
    <svg>...
    </svg>
</span> 
<span class="icon icon-orange">
    <svg>...
    </svg>
</span> 
<span class="icon icon-cyan">
    <svg>...
    </svg>
</span> 
<span class="icon icon-white">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-100">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-200">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-300">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-400">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-500">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-600">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-700">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-800">
    <svg>...
    </svg>
</span> 
<span class="icon icon-gray-900">
    <svg>...
    </svg>
</span>

List icons

Copy ac

Copy accessibility

Copy airport

Copy arrow-bottom

Copy arrow-down-sm

Copy arrow-left-lg

Copy arrow-left-sm

Copy arrow-right-lg

Copy arrow-right-sm

Copy arrow-top

Copy arrow-top-sm

Copy babysitting

Copy bar

Copy bath

Copy bbq

Copy bed

Copy bicycle

Copy bluetooth-speaker

Copy boat

Copy bus

Copy calendar

Copy cleaning

Copy cloche

Copy close

Copy close-circle

Copy coffee

Copy cook

Copy cot

Copy dishwasher

Copy dvd-player

Copy edit

Copy email

Copy favourite

Copy guests

Copy gym

Copy hairdryer

Copy heart

Copy heart-rounded

Copy heated-pool

Copy heating

Copy help

Copy highchair

Copy horse-riding

Copy hot-tub

Copy id-card

Copy info-square

Copy ipod-dock

Copy iron

Copy kids-club

Copy kitchen

Copy laundry

Copy map

Copy menu

Copy microwave

Copy minus-circle

Copy net

Copy no-ac

Copy no-dishwasher

Copy no-oven

Copy no-restaurant

Copy no-washing-machine

Copy no-wifi

Copy open-fire

Copy outside-kitchen

Copy oven

Copy parking

Copy phone

Copy photos

Copy playground

Copy plus-circle

Copy pool

Copy printer

Copy question

Copy restaurant

Copy safe

Copy sea

Copy search

Copy settings

Copy shop

Copy sign

Copy signature

Copy smart-tv

Copy spa

Copy star

Copy stove

Copy sunbed

Copy sunset

Copy table-tennis

Copy tennis

Copy toaster

Copy towel

Copy tv

Copy umbrella

Copy user-circle

Copy user-info

Copy users-circle

Copy warning-diamond

Copy warning-square

Copy warning-triangle

Copy washing-machine

Copy watersport

Copy wifi

// Insert the icon manually 
<span class="icon">
    <svg>...
    </svg>
</span> // Or use our built in component 
<span class="icon">
    <x-icon icon="airport">
    </x-icon>
</span> 
<span class="icon">
    <x-icon icon="coffee">
    </x-icon>
</span>

Icons