<div class="icon-container">
<svg class="icon icon-add" data-element="icon" data-category="general">
<use xlink:href="#add"></use>
</svg>
<span>add</span>
</div>
<div class="icon-container">
<svg class="icon icon-address-book" data-element="icon" data-category="general">
<use xlink:href="#address-book"></use>
</svg>
<span>address-book</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-big" data-element="icon" data-category="general">
<use xlink:href="#arrow-big"></use>
</svg>
<span>arrow-big</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-circle" data-element="icon" data-category="general">
<use xlink:href="#arrow-circle"></use>
</svg>
<span>arrow-circle</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-corner-big" data-element="icon" data-category="general">
<use xlink:href="#arrow-corner-big"></use>
</svg>
<span>arrow-corner-big</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-corner-small" data-element="icon" data-category="general">
<use xlink:href="#arrow-corner-small"></use>
</svg>
<span>arrow-corner-small</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-small-back" data-element="icon" data-category="general">
<use xlink:href="#arrow-small-back"></use>
</svg>
<span>arrow-small-back</span>
</div>
<div class="icon-container">
<svg class="icon icon-arrow-small" data-element="icon" data-category="general">
<use xlink:href="#arrow-small"></use>
</svg>
<span>arrow-small</span>
</div>
<div class="icon-container">
<svg class="icon icon-calendar" data-element="icon" data-category="general">
<use xlink:href="#calendar"></use>
</svg>
<span>calendar</span>
</div>
<div class="icon-container">
<svg class="icon icon-checkbox-null" data-element="icon" data-category="general">
<use xlink:href="#checkbox-null"></use>
</svg>
<span>checkbox-null</span>
</div>
<div class="icon-container">
<svg class="icon icon-checked" data-element="icon" data-category="general">
<use xlink:href="#checked"></use>
</svg>
<span>checked</span>
</div>
<div class="icon-container">
<svg class="icon icon-close-circle" data-element="icon" data-category="general">
<use xlink:href="#close-circle"></use>
</svg>
<span>close-circle</span>
</div>
<div class="icon-container">
<svg class="icon icon-close" data-element="icon" data-category="general">
<use xlink:href="#close"></use>
</svg>
<span>close</span>
</div>
<div class="icon-container">
<svg class="icon icon-download" data-element="icon" data-category="general">
<use xlink:href="#download"></use>
</svg>
<span>download</span>
</div>
<div class="icon-container">
<svg class="icon icon-drop-down" data-element="icon" data-category="general">
<use xlink:href="#drop-down"></use>
</svg>
<span>drop-down</span>
</div>
<div class="icon-container">
<svg class="icon icon-drop-left" data-element="icon" data-category="general">
<use xlink:href="#drop-left"></use>
</svg>
<span>drop-left</span>
</div>
<div class="icon-container">
<svg class="icon icon-drop-right" data-element="icon" data-category="general">
<use xlink:href="#drop-right"></use>
</svg>
<span>drop-right</span>
</div>
<div class="icon-container">
<svg class="icon icon-drop-up" data-element="icon" data-category="general">
<use xlink:href="#drop-up"></use>
</svg>
<span>drop-up</span>
</div>
<div class="icon-container">
<svg class="icon icon-external-link" data-element="icon" data-category="general">
<use xlink:href="#external-link"></use>
</svg>
<span>external-link</span>
</div>
<div class="icon-container">
<svg class="icon icon-facebook" data-element="icon" data-category="general">
<use xlink:href="#facebook"></use>
</svg>
<span>facebook</span>
</div>
<div class="icon-container">
<svg class="icon icon-info" data-element="icon" data-category="general">
<use xlink:href="#info"></use>
</svg>
<span>info</span>
</div>
<div class="icon-container">
<svg class="icon icon-instagram" data-element="icon" data-category="general">
<use xlink:href="#instagram"></use>
</svg>
<span>instagram</span>
</div>
<div class="icon-container">
<svg class="icon icon-linkedin" data-element="icon" data-category="general">
<use xlink:href="#linkedin"></use>
</svg>
<span>linkedin</span>
</div>
<div class="icon-container">
<svg class="icon icon-login" data-element="icon" data-category="general">
<use xlink:href="#login"></use>
</svg>
<span>login</span>
</div>
<div class="icon-container">
<svg class="icon icon-logout" data-element="icon" data-category="general">
<use xlink:href="#logout"></use>
</svg>
<span>logout</span>
</div>
<div class="icon-container">
<svg class="icon icon-map" data-element="icon" data-category="general">
<use xlink:href="#map"></use>
</svg>
<span>map</span>
</div>
<div class="icon-container">
<svg class="icon icon-pop-up" data-element="icon" data-category="general">
<use xlink:href="#pop-up"></use>
</svg>
<span>pop-up</span>
</div>
<div class="icon-container">
<svg class="icon icon-print" data-element="icon" data-category="general">
<use xlink:href="#print"></use>
</svg>
<span>print</span>
</div>
<div class="icon-container">
<svg class="icon icon-quicklinks" data-element="icon" data-category="general">
<use xlink:href="#quicklinks"></use>
</svg>
<span>quicklinks</span>
</div>
<div class="icon-container">
<svg class="icon icon-radio-button-active" data-element="icon" data-category="general">
<use xlink:href="#radio-button-active"></use>
</svg>
<span>radio-button-active</span>
</div>
<div class="icon-container">
<svg class="icon icon-radio-button-null" data-element="icon" data-category="general">
<use xlink:href="#radio-button-null"></use>
</svg>
<span>radio-button-null</span>
</div>
<div class="icon-container">
<svg class="icon icon-radio-button-on" data-element="icon" data-category="general">
<use xlink:href="#radio-button-on"></use>
</svg>
<span>radio-button-on</span>
</div>
<div class="icon-container">
<svg class="icon icon-remove" data-element="icon" data-category="general">
<use xlink:href="#remove"></use>
</svg>
<span>remove</span>
</div>
<div class="icon-container">
<svg class="icon icon-sandwich-menu" data-element="icon" data-category="general">
<use xlink:href="#sandwich-menu"></use>
</svg>
<span>sandwich-menu</span>
</div>
<div class="icon-container">
<svg class="icon icon-search" data-element="icon" data-category="general">
<use xlink:href="#search"></use>
</svg>
<span>search</span>
</div>
<div class="icon-container">
<svg class="icon icon-settings" data-element="icon" data-category="general">
<use xlink:href="#settings"></use>
</svg>
<span>settings</span>
</div>
<div class="icon-container">
<svg class="icon icon-share" data-element="icon" data-category="general">
<use xlink:href="#share"></use>
</svg>
<span>share</span>
</div>
<div class="icon-container">
<svg class="icon icon-star" data-element="icon" data-category="general">
<use xlink:href="#star"></use>
</svg>
<span>star</span>
</div>
<div class="icon-container">
<svg class="icon icon-tools" data-element="icon" data-category="general">
<use xlink:href="#tools"></use>
</svg>
<span>tools</span>
</div>
<div class="icon-container">
<svg class="icon icon-twitter" data-element="icon" data-category="general">
<use xlink:href="#twitter"></use>
</svg>
<span>twitter</span>
</div>
<div class="icon-container">
<svg class="icon icon-youtube" data-element="icon" data-category="general">
<use xlink:href="#youtube"></use>
</svg>
<span>youtube</span>
</div>
<div class="icon-container">
<svg class="icon icon-zoom-in" data-element="icon" data-category="general">
<use xlink:href="#zoom-in"></use>
</svg>
<span>zoom-in</span>
</div>
<div class="icon-container">
<svg class="icon icon-zoom-out" data-element="icon" data-category="general">
<use xlink:href="#zoom-out"></use>
</svg>
<span>zoom-out</span>
</div>
<svg style="display:none;">
<symbol id="add" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="24">
</circle>
<path d="M25 10v30M40 25H10">
</path>
</symbol>
<symbol id="address-book" viewBox="0 0 64 64">
<path stroke-width="2" stroke-miterlimit="10" d="M7 1h46v62H7zM15 63V2M20 11h28M20 17h28">
</path>
<path stroke-width="1.806" stroke-miterlimit="10" d="M22.5 53.8h22v-6.1L37.7 44l1.5-3.8-.2-4.9-2.2-4.3H32">
</path>
<path stroke-width="1.806" stroke-miterlimit="10" d="M44.5 53.8h-22v-6.1l6.8-3.7-1.5-3.8.2-4.9 2.2-4.3H35">
</path>
</symbol>
<symbol id="arrow-big" viewBox="0 0 50 50">
<path d="M25 48.9L49 25 25 1M48 25H0">
</path>
</symbol>
<symbol id="arrow-circle" viewBox="0 0 50 50">
<path d="M26 36.92l12-11.95-12-12M37.5 24.97H12">
</path>
<circle cx="25" cy="25" r="24">
</circle>
</symbol>
<symbol id="arrow-corner-big" viewBox="0 0 50 50">
<path d="M48.92 36.87L49 1H13.06M48.29 1.71L14.35 35.65">
</path>
</symbol>
<symbol id="arrow-corner-small" viewBox="0 0 50 50">
<path d="M49 18V1H32M48.65 1.35L29 21">
</path>
</symbol>
<symbol id="arrow-small-back" viewBox="0 0 50 50">
<path d="M26.05 36.97l-14-11.94 14-12M37.55 25.03h-25.5">
</path>
</symbol>
<symbol id="arrow-small" viewBox="0 0 50 50">
<path d="M26.05 36.97l12-11.94-12-12M37.55 25.03h-25.5">
</path>
</symbol>
<symbol id="calendar" viewBox="0 0 50 50">
<path d="M37 13V0M13 13V0M1 6h48v43H1zM1 16h48">
</path>
<path d="M11 25h4v4h-4zM23 25h4v4h-4zM35 25h4v4h-4zM11 37h4v4h-4zM23 37h4v4h-4zM35 37h4v4h-4z">
</path>
</symbol>
<symbol id="checkbox-null" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="12">
</circle>
</symbol>
<symbol id="checked" viewBox="0 0 50 50">
<path d="M7.02 24.99l11.95 12 24.01-24.01">
</path>
</symbol>
<symbol id="close-circle" viewBox="0 0 50 50">
<path d="M37.5 12.5l-25 25M37.5 37.5l-25-25">
</path>
<circle cx="25" cy="25" r="24">
</circle>
</symbol>
<symbol id="close" viewBox="0 0 50 50">
<path d="M1 1l47.79 48M.9 48.9l48-47.8">
</path>
</symbol>
<symbol id="download" viewBox="0 0 50 50">
<path d="M12.97 24l11.95 12 12-12M24.92 35.5V0">
</path>
<path d="M48.95 13v36h-48V13">
</path>
</symbol>
<symbol id="drop-down" viewBox="0 0 50 50">
<path d="M13.08 25l11.95 12 12-12">
</path>
</symbol>
<symbol id="drop-left" viewBox="0 0 50 50">
<style>
.st0 {
fill: none;
stroke: #000;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<path d="M31.1 19l-12 12 12 12">
</path>
</symbol>
<symbol id="drop-right" viewBox="0 0 50 50">
<style>
.st0 {
fill: none;
stroke: #000;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<path d="M37 37l12-12-12-12">
</path>
</symbol>
<symbol id="drop-up" viewBox="0 0 50 50">
<style>
.st0 {
fill: none;
stroke: #000;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<path d="M37 37L25.1 25l-12 12">
</path>
</symbol>
<symbol id="external-link" viewBox="0 0 50 50">
<path d="M44.99 25v24.05H1V5h24">
</path>
<path d="M49.01 17V1h-16M48.66 1.35L25.01 25.01">
</path>
</symbol>
<symbol id="facebook" viewBox="0 0 80 80">
<path d="M34.1 67.2V42.9H26v-9.7h8.1v-7.6c0-8.3 5-12.8 12.4-12.8 3.5 0 6.6.3 7.4.4v8.6h-5.1c-4 0-4.8 1.9-4.8 4.7v6.6h9l-1.2 9.7H44v24.3">
</path>
</symbol>
<symbol id="info" viewBox="0 0 50 50">
<path d="M25.03 37.5V24.75">
</path>
<circle cx="25" cy="25" r="24">
</circle>
<path d="M25.03 18v-5">
</path>
</symbol>
<symbol id="instagram" viewBox="0 0 80 80">
<path d="M40 25.9c-7.8 0-14.1 6.3-14.1 14.1S32.2 54.1 40 54.1 54.1 47.8 54.1 40 47.8 25.9 40 25.9zm0 23.3c-5 0-9.2-4.1-9.2-9.2s4.1-9.2 9.2-9.2 9.2 4.1 9.2 9.2-4.2 9.2-9.2 9.2zm18-23.9c0 1.8-1.5 3.3-3.3 3.3-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3zm9.3 3.4c-.2-4.4-1.2-8.3-4.4-11.5-3.2-3.2-7.1-4.2-11.5-4.4-4.5-.3-18.1-.3-22.7 0-4.4.2-8.3 1.2-11.5 4.4s-4.2 7.1-4.4 11.5c-.3 4.5-.3 18.2 0 22.7.2 4.4 1.2 8.3 4.4 11.5 3.2 3.2 7.1 4.2 11.5 4.4 4.5.3 18.1.3 22.7 0 4.4-.2 8.3-1.2 11.5-4.4 3.2-3.2 4.2-7.1 4.4-11.5.3-4.6.3-18.2 0-22.7zm-5.9 27.5c-1 2.4-2.8 4.3-5.2 5.2-3.6 1.5-12.2 1.1-16.2 1.1s-12.6.3-16.2-1.1c-2.4-1-4.3-2.8-5.2-5.2-1.5-3.6-1.1-12.2-1.1-16.2s-.3-12.6 1.1-16.2c1-2.4 2.8-4.3 5.2-5.2 3.6-1.4 12.2-1.1 16.2-1.1s12.6-.3 16.2 1.1c2.4 1 4.3 2.8 5.2 5.2 1.4 3.6 1.1 12.2 1.1 16.2s.4 12.6-1.1 16.2z">
</path>
</symbol>
<symbol id="linkedin" viewBox="0 0 80 80">
<path d="M26.2 64H15.8V30.6h10.4V64zM21 26.1c-3.3 0-6-2.7-6-6.1s2.7-6 6-6 6 2.7 6 6-2.7 6.1-6 6.1zM65 64H54.6V47.7c0-3.9-.1-8.8-5.4-8.8-5.4 0-6.2 4.2-6.2 8.6V64H32.7V30.6h9.9v4.6h.1c1.4-2.6 4.8-5.4 9.8-5.4 10.5 0 12.4 6.9 12.4 15.9L65 64z">
</path>
</symbol>
<symbol id="login" viewBox="0 0 50 50">
<style>
.st0 {
fill: none;
stroke: #000;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<path d="M24 37l12-12-12-12M35.5 25H0">
</path>
<path d="M13 1h36v48H13">
</path>
</symbol>
<symbol id="logout" viewBox="0 0 50 50">
<style>
.st0 {
fill: none;
stroke: #000;
stroke-width: 2;
stroke-miterlimit: 10
}
</style>
<path d="M13 13L1 25l12 12M1.5 25H37M13 1h36v48H13">
</path>
</symbol>
<symbol id="map" viewBox="0 0 64 64">
<g stroke-width="2" stroke-miterlimit="10">
<circle cx="32" cy="22" r="6">
</circle>
<path d="M53 22.7C52.9 10.7 43.6 1 32 1s-21 9.7-21 21.7C11 38.3 32 63 32 63s21.1-24.7 21-40.3z">
</path>
</g>
</symbol>
<symbol id="pop-up" viewBox="0 0 50 50">
<path d="M14.01 1h35v35.05h-35z">
</path>
<path d="M1 14h35v35.05H1z">
</path>
<path d="M29 37V21H13M28.65 21.35L12.5 37.5">
</path>
</symbol>
<symbol id="print" viewBox="0 0 55 55">
<style>
.st0 {
fill: #fff
}
</style>
<ellipse cx="48.7" cy="20.1" rx="1.5" ry="1.5">
</ellipse>
<path d="M19.1 39.1h17.8">
</path>
<path d="M19.1 38.6h17.8v1H19.1z">
</path>
<path d="M19.1 43.8h17.8">
</path>
<path d="M19.1 43.3h17.8v1H19.1z">
</path>
<g>
<path d="M19.1 48.6h17.8">
</path>
<path d="M19.1 48.1h17.8v1H19.1z">
</path>
</g>
<path d="M52.5 16.1h-11V0h-27v16.1h-12v26.2h12V55h27V42.2h11V16.1zM15.5 1h25v15.1h-25V1zm25 53h-25V33.5h25V54zm11-12.8h-10v-8.7h-27v8.7h-11V17.1h48v24.1z">
</path>
</symbol>
<symbol id="quicklinks" viewBox="0 0 50 50">
<path d="M36.92 13L24.97 1l-12 12M24.97 1.5V37">
</path>
<path d="M48.95 13v36h-48V13">
</path>
</symbol>
<symbol id="radio-button-active" viewBox="0 0 50 50">
<path d="M13 13l24.5 24.5M37 13L13 37">
</path>
<circle cx="25" cy="25" r="12">
</circle>
</symbol>
<symbol id="radio-button-null" viewBox="0 0 50 50">
<path d="M13 13h24v24H13z">
</path>
</symbol>
<symbol id="radio-button-on" viewBox="0 0 50 50">
<path d="M13 13l24.5 24.5M37 13L13 37">
</path>
</symbol>
<symbol id="remove" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="24">
</circle>
<path d="M40 25H10">
</path>
</symbol>
<symbol id="sandwich-menu" viewBox="0 0 50 50">
<path d="M50 25H0M50 14H0M50 36H0">
</path>
</symbol>
<symbol id="search" viewBox="0 0 50 50">
<circle cx="19" cy="19" r="18">
</circle>
<path d="M32 32l16.79 17">
</path>
</symbol>
<symbol id="settings" viewBox="0 0 64 64">
<path d="M32 43.8c-6.5 0-11.8-5.3-11.8-11.8S25.5 20.2 32 20.2 43.8 25.5 43.8 32 38.5 43.8 32 43.8zm0-22.6c-5.9 0-10.8 4.8-10.8 10.8 0 5.9 4.8 10.8 10.8 10.8S42.8 37.9 42.8 32 37.9 21.2 32 21.2z">
</path>
<path d="M38.7 64H25.2l-.6-8.6c-1.4-.4-2.8-1-4.1-1.7L14 59.4l-9.5-9.5 5.7-6.5c-.7-1.3-1.2-2.6-1.7-4.1L0 38.7V25.3l8.6-.6c.4-1.4 1-2.8 1.7-4l-5.7-6.5 9.5-9.5 6.5 5.7c1.3-.7 2.6-1.2 4.1-1.7l.6-8.7h13.5l.6 8.6c1.4.4 2.8 1 4.1 1.7L50 4.6l9.5 9.5-5.7 6.5c.7 1.3 1.2 2.6 1.7 4l8.6.6v13.5l-8.6.6c-.4 1.4-1 2.8-1.7 4.1l5.7 6.5-9.5 9.5-6.5-5.7c-1.3.7-2.6 1.2-4.1 1.7l-.7 8.6zm-12.5-1h11.7l.5-8.4.3-.1c1.6-.5 3.1-1.1 4.5-1.9l.3-.2 6.3 5.6 8.2-8.2-5.6-6.3.2-.3c.8-1.4 1.4-2.9 1.9-4.5l.1-.3 8.4-.5V26.2l-8.4-.5-.1-.3c-.5-1.6-1.1-3.1-1.9-4.5l-.2-.3 5.6-6.3-8.2-8.2-6.3 5.6-.3-.2c-1.4-.8-2.9-1.4-4.5-1.9l-.3-.1-.6-8.5H26.2l-.5 8.4-.3.1c-1.6.5-3.1 1.1-4.5 1.9l-.3.2L14.3 6l-8.2 8.2 5.6 6.3-.2.3c-.8 1.4-1.4 2.9-1.9 4.5l-.1.3-8.5.6v11.7l8.4.5.1.3c.5 1.6 1.1 3.1 1.9 4.5l.2.3L6 49.8l8.2 8.2 6.3-5.6.3.2c1.4.8 2.9 1.4 4.5 1.9l.3.1.6 8.4z">
</path>
</symbol>
<symbol id="share" viewBox="0 0 50 50">
<circle cx="7" cy="25" r="6">
</circle>
<circle cx="37" cy="7" r="6">
</circle>
<circle cx="37" cy="43" r="6">
</circle>
<path d="M12 28l19 12M12 22l19-12">
</path>
</symbol>
<symbol id="star" viewBox="0 0 64 64">
<path d="M32 0l-8.5 24H0l19.2 14.7L10.6 64 32 48.2 53.4 64l-8.5-25.3L64 24H40.5L32 0z">
</path>
</symbol>
<symbol id="tools" viewBox="0 0 64 64">
<path d="M39 1v14H25V1h14m1-1H24v16h16V0zM39 49v14H25V49h14m1-1H24v16h16V48zM63 49v14H49V49h14m1-1H48v16h16V48z">
</path>
<path d="M31.5 15.1h1v33.2h-1zM15 49v14H1V49h14m1-1H0v16h16V48z">
</path>
<path d="M7.5 32h1v17h-1zM55.5 32h1v17h-1z">
</path>
<path d="M7.5 32h49v1h-49z">
</path>
</symbol>
<symbol id="twitter" viewBox="0 0 80 80">
<path d="M61.2 29.1v1.4c0 14.5-11 31.1-31.1 31.1-6.2 0-11.9-1.8-16.8-4.9.9.1 1.7.2 2.6.2 5.1 0 9.8-1.7 13.6-4.7-4.8-.1-8.8-3.2-10.2-7.6.7.1 1.4.2 2.1.2 1 0 2-.1 2.9-.4-5-1-8.8-5.4-8.8-10.7v-.1c1.5.8 3.2 1.3 5 1.4-2.9-2-4.9-5.3-4.9-9.1 0-2 .5-3.9 1.5-5.5 5.4 6.6 13.5 11 22.6 11.4-.2-.8-.3-1.6-.3-2.5 0-6 4.9-10.9 10.9-10.9 3.1 0 6 1.3 8 3.4 2.5-.5 4.8-1.4 7-2.6-.8 2.6-2.6 4.7-4.8 6 2.2-.3 4.3-.8 6.3-1.7-1.6 2.2-3.5 4.1-5.6 5.6z">
</path>
</symbol>
<symbol id="youtube" viewBox="0 0 80 80">
<path d="M68.2 28.6s-.7-3.9-2.4-5.6c-2.2-2.3-4.7-2.3-5.8-2.4-7.9-.6-20-.6-20-.6s-12 0-20 .6c-1.1.1-3.6.1-5.7 2.4-1.7 1.7-2.5 5.6-2.5 5.6s-.8 4.6-.8 9.2v4.3c0 4.6.8 9.2.8 9.2s.7 3.9 2.4 5.6c2.2 2.3 5.1 2.2 6.4 2.4 4.5.6 19.4.7 19.4.7s12 0 20-.6c1.1-.1 3.6-.1 5.7-2.4 1.7-1.7 2.5-5.6 2.5-5.6s.8-4.6.8-9.2v-4.3c0-4.7-.8-9.3-.8-9.3zM34 47.4v-16l15.4 8-15.4 8z">
</path>
</symbol>
<symbol id="zoom-in" viewBox="0 0 50 50">
<path d="M19 6v26M32 19H6">
</path>
<circle cx="19" cy="19" r="18">
</circle>
<path d="M32 32l16.79 17">
</path>
</symbol>
<symbol id="zoom-out" viewBox="0 0 50 50">
<path d="M32 19H6">
</path>
<circle cx="19" cy="19" r="18">
</circle>
<path d="M32 32l16.79 17">
</path>
</symbol>
</svg>
[EN] Please note: to color the icons, in css simply use ‘fill: #[color_hex]’
[IT] Nota bene: per colorare le icone, utilizzare il CSS come segue: ‘fill: #[color_hex]’