Essential Italy Hide all

Icons

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>
Heading sizes

.icon-h1

.icon-h2

.icon-h3

.icon-h4

.icon-h5

.icon-h6 

<span class="icon icon-h1">
    <svg>...
    </svg>
</span> 
<span class="icon icon-h2">
    <svg>...
    </svg>
</span> 
<span class="icon icon-h3">
    <svg>...
    </svg>
</span> 
<span class="icon icon-h4">
    <svg>...
    </svg>
</span> 
<span class="icon icon-h5">
    <svg>...
    </svg>
</span> 
<span class="icon icon-h6">
    <svg>...
    </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>