<div class="icons">
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User's account in circle</title>
<use xlink:href="/images/icons-sprite.svg#account-mini"></use>
</svg>
<span class="icons__name">
account-mini
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User's account</title>
<use xlink:href="/images/icons-sprite.svg#account"></use>
</svg>
<span class="icons__name">
account
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>American Express</title>
<use xlink:href="/images/icons-sprite.svg#american-express"></use>
</svg>
<span class="icons__name">
american-express
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
<span class="icons__name">
angle-down
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
<span class="icons__name">
angle-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
<span class="icons__name">
angle-right
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#angle-left"></use>
</svg>
<span class="icons__name">
angle-left
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#arrow-down"></use>
</svg>
<span class="icons__name">
arrow-down
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow left</title>
<use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
</svg>
<span class="icons__name">
arrow-left
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
<span class="icons__name">
arrow-right
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
<span class="icons__name">
arrow-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Big Star</title>
<use xlink:href="/images/icons-sprite.svg#bigstar"></use>
</svg>
<span class="icons__name">
bigstar
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Chat</title>
<use xlink:href="/images/icons-sprite.svg#chat"></use>
</svg>
<span class="icons__name">
chat
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Check</title>
<use xlink:href="/images/icons-sprite.svg#check"></use>
</svg>
<span class="icons__name">
check
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Checked</title>
<use xlink:href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="icons__name">
checked
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
<span class="icons__name">
close
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Compare</title>
<use xlink:href="/images/icons-sprite.svg#compare"></use>
</svg>
<span class="icons__name">
compare
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Curved 2 arrows in form of circle</title>
<use xlink:href="/images/icons-sprite.svg#curved-arrows"></use>
</svg>
<span class="icons__name">
curved-arrows
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Filter</title>
<use xlink:href="/images/icons-sprite.svg#filter"></use>
</svg>
<span class="icons__name">
filter
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Delivery truck</title>
<use xlink:href="/images/icons-sprite.svg#delivery-truck"></use>
</svg>
<span class="icons__name">
delivery-truck
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Discover</title>
<use xlink:href="/images/icons-sprite.svg#discover"></use>
</svg>
<span class="icons__name">
discover
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-afterpay</title>
<use xlink:href="/images/icons-sprite.svg#color-afterpay"></use>
</svg>
<span class="icons__name">
color-afterpay
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-amex</title>
<use xlink:href="/images/icons-sprite.svg#color-amex"></use>
</svg>
<span class="icons__name">
color-amex
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-bancontact-mister-cash</title>
<use xlink:href="/images/icons-sprite.svg#color-bancontact-mister-cash"></use>
</svg>
<span class="icons__name">
color-bancontact-mister-cash
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-ideal</title>
<use xlink:href="/images/icons-sprite.svg#color-ideal"></use>
</svg>
<span class="icons__name">
color-ideal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-maestro</title>
<use xlink:href="/images/icons-sprite.svg#color-maestro"></use>
</svg>
<span class="icons__name">
color-maestro
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-mastercard</title>
<use xlink:href="/images/icons-sprite.svg#color-mastercard"></use>
</svg>
<span class="icons__name">
color-mastercard
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-mollie</title>
<use xlink:href="/images/icons-sprite.svg#color-mollie"></use>
</svg>
<span class="icons__name">
color-mollie
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-paypal</title>
<use xlink:href="/images/icons-sprite.svg#color-paypal"></use>
</svg>
<span class="icons__name">
color-paypal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>color-visa</title>
<use xlink:href="/images/icons-sprite.svg#color-visa"></use>
</svg>
<span class="icons__name">
color-visa
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Custom </title>
<use xlink:href="/images/icons-sprite.svg#theme-customize"></use>
</svg>
<span class="icons__name">
theme-customize
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Armchair </title>
<use xlink:href="/images/icons-sprite.svg#test"></use>
</svg>
<span class="icons__name">
test
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme bed1</title>
<use xlink:href="/images/icons-sprite.svg#theme-bed-1"></use>
</svg>
<span class="icons__name">
theme-bed-1
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme bed</title>
<use xlink:href="/images/icons-sprite.svg#theme-bed"></use>
</svg>
<span class="icons__name">
theme-bed
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Boekenkast</title>
<use xlink:href="/images/icons-sprite.svg#theme-boekenkast"></use>
</svg>
<span class="icons__name">
theme-boekenkast
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme bookcase</title>
<use xlink:href="/images/icons-sprite.svg#theme-bookcase"></use>
</svg>
<span class="icons__name">
theme-bookcase
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme bookshelf</title>
<use xlink:href="/images/icons-sprite.svg#theme-bookshelf"></use>
</svg>
<span class="icons__name">
theme-bookshelf
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Bureau</title>
<use xlink:href="/images/icons-sprite.svg#theme-bureau"></use>
</svg>
<span class="icons__name">
theme-bureau
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Bureaulamp</title>
<use xlink:href="/images/icons-sprite.svg#theme-bureaulamp"></use>
</svg>
<span class="icons__name">
theme-bureaulamp
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme candelabra</title>
<use xlink:href="/images/icons-sprite.svg#theme-candelabra"></use>
</svg>
<span class="icons__name">
theme-candelabra
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme carpet</title>
<use xlink:href="/images/icons-sprite.svg#theme-carpet"></use>
</svg>
<span class="icons__name">
theme-carpet
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme chair1</title>
<use xlink:href="/images/icons-sprite.svg#theme-chair-1"></use>
</svg>
<span class="icons__name">
theme-chair-1
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme chair2</title>
<use xlink:href="/images/icons-sprite.svg#theme-chair-2"></use>
</svg>
<span class="icons__name">
theme-chair-2
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme chair</title>
<use xlink:href="/images/icons-sprite.svg#theme-chair"></use>
</svg>
<span class="icons__name">
theme-chair
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme coat-hanger</title>
<use xlink:href="/images/icons-sprite.svg#theme-coat-hanger"></use>
</svg>
<span class="icons__name">
theme-coat-hanger
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme cupboard 1</title>
<use xlink:href="/images/icons-sprite.svg#theme-cupboard-1"></use>
</svg>
<span class="icons__name">
theme-cupboard-1
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme cupboard</title>
<use xlink:href="/images/icons-sprite.svg#theme-cupboard"></use>
</svg>
<span class="icons__name">
theme-cupboard
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme curtain</title>
<use xlink:href="/images/icons-sprite.svg#theme-curtain"></use>
</svg>
<span class="icons__name">
theme-curtain
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme deco</title>
<use xlink:href="/images/icons-sprite.svg#theme-deco"></use>
</svg>
<span class="icons__name">
theme-deco
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme desk</title>
<use xlink:href="/images/icons-sprite.svg#theme-desk"></use>
</svg>
<span class="icons__name">
theme-desk
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme dining table</title>
<use xlink:href="/images/icons-sprite.svg#theme-dining-table"></use>
</svg>
<span class="icons__name">
theme-dining-table
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme floor</title>
<use xlink:href="/images/icons-sprite.svg#theme-floor"></use>
</svg>
<span class="icons__name">
theme-floor
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme furniture 1</title>
<use xlink:href="/images/icons-sprite.svg#theme-furniture-1"></use>
</svg>
<span class="icons__name">
theme-furniture-1
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme furniture</title>
<use xlink:href="/images/icons-sprite.svg#theme-furniture"></use>
</svg>
<span class="icons__name">
theme-furniture
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Home</title>
<use xlink:href="/images/icons-sprite.svg#theme-home"></use>
</svg>
<span class="icons__name">
theme-home
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Kast</title>
<use xlink:href="/images/icons-sprite.svg#theme-kast"></use>
</svg>
<span class="icons__name">
theme-kast
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Kledingkast</title>
<use xlink:href="/images/icons-sprite.svg#theme-kledingkast"></use>
</svg>
<span class="icons__name">
theme-kledingkast
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Lamp</title>
<use xlink:href="/images/icons-sprite.svg#theme-lamp"></use>
</svg>
<span class="icons__name">
theme-lamp
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Living Room</title>
<use xlink:href="/images/icons-sprite.svg#theme-living-room"></use>
</svg>
<span class="icons__name">
theme-living-room
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme mirror</title>
<use xlink:href="/images/icons-sprite.svg#theme-mirror"></use>
</svg>
<span class="icons__name">
theme-mirror
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme picture</title>
<use xlink:href="/images/icons-sprite.svg#theme-picture"></use>
</svg>
<span class="icons__name">
theme-picture
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme relax</title>
<use xlink:href="/images/icons-sprite.svg#theme-relax"></use>
</svg>
<span class="icons__name">
theme-relax
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme Side Table</title>
<use xlink:href="/images/icons-sprite.svg#theme-side-table"></use>
</svg>
<span class="icons__name">
theme-side-table
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme sofa</title>
<use xlink:href="/images/icons-sprite.svg#theme-sofa"></use>
</svg>
<span class="icons__name">
theme-sofa
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme table</title>
<use xlink:href="/images/icons-sprite.svg#theme-table"></use>
</svg>
<span class="icons__name">
theme-table
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme vip-room</title>
<use xlink:href="/images/icons-sprite.svg#theme-vip-room"></use>
</svg>
<span class="icons__name">
theme-vip-room
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Theme wardrobe</title>
<use xlink:href="/images/icons-sprite.svg#theme-wardrobe"></use>
</svg>
<span class="icons__name">
theme-wardrobe
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User's account </title>
<use xlink:href="/images/icons-sprite.svg#theme-account"></use>
</svg>
<span class="icons__name">
theme-account
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Apple Pay logo</title>
<use xlink:href="/images/icons-sprite.svg#theme-applepay"></use>
</svg>
<span class="icons__name">
theme-applepay
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Apple Pay logo White</title>
<use xlink:href="/images/icons-sprite.svg#theme-applepay-light"></use>
</svg>
<span class="icons__name">
theme-applepay-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>iDEAL logo</title>
<use xlink:href="/images/icons-sprite.svg#theme-ideal"></use>
</svg>
<span class="icons__name">
theme-ideal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>iDEAL logo Colored</title>
<use xlink:href="/images/icons-sprite.svg#theme-ideal-color"></use>
</svg>
<span class="icons__name">
theme-ideal-color
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>iDEAL logo White</title>
<use xlink:href="/images/icons-sprite.svg#theme-ideal-light"></use>
</svg>
<span class="icons__name">
theme-ideal-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Instagram logo</title>
<use xlink:href="/images/icons-sprite.svg#theme-insta"></use>
</svg>
<span class="icons__name">
theme-insta
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Multipackage</title>
<use xlink:href="/images/icons-sprite.svg#theme-multipackage"></use>
</svg>
<span class="icons__name">
theme-multipackage
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Multipackage Dark</title>
<use xlink:href="/images/icons-sprite.svg#theme-multipackage-dark"></use>
</svg>
<span class="icons__name">
theme-multipackage-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>News</title>
<use xlink:href="/images/icons-sprite.svg#theme-news"></use>
</svg>
<span class="icons__name">
theme-news
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Package</title>
<use xlink:href="/images/icons-sprite.svg#theme-package"></use>
</svg>
<span class="icons__name">
theme-package
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Package DKK</title>
<use xlink:href="/images/icons-sprite.svg#theme-package-dkk"></use>
</svg>
<span class="icons__name">
theme-package-dkk
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Pallet</title>
<use xlink:href="/images/icons-sprite.svg#theme-pallet"></use>
</svg>
<span class="icons__name">
theme-pallet
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>PayPal Logo</title>
<use xlink:href="/images/icons-sprite.svg#theme-paypal"></use>
</svg>
<span class="icons__name">
theme-paypal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>PayPal Logo Colored</title>
<use xlink:href="/images/icons-sprite.svg#theme-paypal-color"></use>
</svg>
<span class="icons__name">
theme-paypal-color
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>theme-paypal-light</title>
<use xlink:href="/images/icons-sprite.svg#theme-paypal-light"></use>
</svg>
<span class="icons__name">
theme-paypal-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>theme-phone</title>
<use xlink:href="/images/icons-sprite.svg#theme-phone"></use>
</svg>
<span class="icons__name">
theme-phone
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Secure, Safe</title>
<use xlink:href="/images/icons-sprite.svg#theme-secure"></use>
</svg>
<span class="icons__name">
theme-secure
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shipping</title>
<use xlink:href="/images/icons-sprite.svg#theme-shipping"></use>
</svg>
<span class="icons__name">
theme-shipping
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shipping Dark</title>
<use xlink:href="/images/icons-sprite.svg#theme-shipping-dark"></use>
</svg>
<span class="icons__name">
theme-shipping-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shopping Cart</title>
<use xlink:href="/images/icons-sprite.svg#theme-shopping-cart"></use>
</svg>
<span class="icons__name">
theme-shopping-cart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shopping Cart</title>
<use xlink:href="/images/icons-sprite.svg#theme-shoppingcart"></use>
</svg>
<span class="icons__name">
theme-shoppingcart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Sofort Payment</title>
<use xlink:href="/images/icons-sprite.svg#theme-sofort"></use>
</svg>
<span class="icons__name">
theme-sofort
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Sofort Payment Wbite</title>
<use xlink:href="/images/icons-sprite.svg#theme-sofort-light"></use>
</svg>
<span class="icons__name">
theme-sofort-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Store</title>
<use xlink:href="/images/icons-sprite.svg#theme-store"></use>
</svg>
<span class="icons__name">
theme-store
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visa Logo</title>
<use xlink:href="/images/icons-sprite.svg#theme-visa"></use>
</svg>
<span class="icons__name">
theme-visa
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visa Logo White</title>
<use xlink:href="/images/icons-sprite.svg#theme-visa-light"></use>
</svg>
<span class="icons__name">
theme-visa-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Store</title>
<use xlink:href="/images/icons-sprite.svg#theme-whishlist"></use>
</svg>
<span class="icons__name">
theme-whishlist
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Store</title>
<use xlink:href="/images/icons-sprite.svg#theme-whishlist-list"></use>
</svg>
<span class="icons__name">
theme-whishlist-list
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Edit pencil</title>
<use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>
<span class="icons__name">
edit
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Envelope</title>
<use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>
<span class="icons__name">
envelope
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Error exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#error"></use>
</svg>
<span class="icons__name">
error
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Facebook </title>
<use xlink:href="/images/icons-sprite.svg#facebook"></use>
</svg>
<span class="icons__name">
facebook
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Facebook logo</title>
<use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
</svg>
<span class="icons__name">
facebook-logo
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Google plus logo</title>
<use xlink:href="/images/icons-sprite.svg#google-plus"></use>
</svg>
<span class="icons__name">
google-plus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Grid</title>
<use xlink:href="/images/icons-sprite.svg#grid"></use>
</svg>
<span class="icons__name">
grid
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
<span class="icons__name">
heart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Info</title>
<use xlink:href="/images/icons-sprite.svg#info"></use>
</svg>
<span class="icons__name">
info
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Instagram logo</title>
<use xlink:href="/images/icons-sprite.svg#instagram"></use>
</svg>
<span class="icons__name">
instagram
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Insta logo</title>
<use xlink:href="/images/icons-sprite.svg#insta"></use>
</svg>
<span class="icons__name">
insta
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Linked logo</title>
<use xlink:href="/images/icons-sprite.svg#linkedin"></use>
</svg>
<span class="icons__name">
linkedin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>List</title>
<use xlink:href="/images/icons-sprite.svg#list"></use>
</svg>
<span class="icons__name">
list
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Loader</title>
<use xlink:href="/images/icons-sprite.svg#loader"></use>
</svg>
<span class="icons__name">
loader
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Master Card</title>
<use xlink:href="/images/icons-sprite.svg#master-card"></use>
</svg>
<span class="icons__name">
master-card
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Minus mark</title>
<use xlink:href="/images/icons-sprite.svg#minus"></use>
</svg>
<span class="icons__name">
minus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Mobile menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
<span class="icons__name">
mobile-menu
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>more</title>
<use xlink:href="/images/icons-sprite.svg#more"></use>
</svg>
<span class="icons__name">
more
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>No results</title>
<use xlink:href="/images/icons-sprite.svg#no-results"></use>
</svg>
<span class="icons__name">
no-results
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Paypal</title>
<use xlink:href="/images/icons-sprite.svg#paypal"></use>
</svg>
<span class="icons__name">
paypal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>
<span class="icons__name">
phone
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Pinterest</title>
<use xlink:href="/images/icons-sprite.svg#pinterest"></use>
</svg>
<span class="icons__name">
pinterest
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Pin</title>
<use xlink:href="/images/icons-sprite.svg#pin"></use>
</svg>
<span class="icons__name">
pin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Plus mark</title>
<use xlink:href="/images/icons-sprite.svg#plus"></use>
</svg>
<span class="icons__name">
plus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
<span class="icons__name">
remove
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Return 30 days</title>
<use xlink:href="/images/icons-sprite.svg#return"></use>
</svg>
<span class="icons__name">
return
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Reviews</title>
<use xlink:href="/images/icons-sprite.svg#reviews"></use>
</svg>
<span class="icons__name">
reviews
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Search</title>
<use xlink:href="/images/icons-sprite.svg#search"></use>
</svg>
<span class="icons__name">
search
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Settings</title>
<use xlink:href="/images/icons-sprite.svg#settings"></use>
</svg>
<span class="icons__name">
settings
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shield</title>
<use xlink:href="/images/icons-sprite.svg#shield"></use>
</svg>
<span class="icons__name">
shield
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Delivery truck with clock</title>
<use xlink:href="/images/icons-sprite.svg#shipping-time-truck"></use>
</svg>
<span class="icons__name">
shipping-time-truck
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="icons__name">
shopping-cart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Signin</title>
<use xlink:href="/images/icons-sprite.svg#signin"></use>
</svg>
<span class="icons__name">
signin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Star</title>
<use xlink:href="/images/icons-sprite.svg#star"></use>
</svg>
<span class="icons__name">
star
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Star border</title>
<use xlink:href="/images/icons-sprite.svg#star-border"></use>
</svg>
<span class="icons__name">
star-border
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Twitter logo</title>
<use xlink:href="/images/icons-sprite.svg#twitter"></use>
</svg>
<span class="icons__name">
twitter
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Unchecked</title>
<use xlink:href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="icons__name">
unchecked
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User</title>
<use xlink:href="/images/icons-sprite.svg#user"></use>
</svg>
<span class="icons__name">
user
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visa</title>
<use xlink:href="/images/icons-sprite.svg#visa"></use>
</svg>
<span class="icons__name">
visa
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visibility</title>
<use xlink:href="/images/icons-sprite.svg#visibility"></use>
</svg>
<span class="icons__name">
visibility
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visibility off</title>
<use xlink:href="/images/icons-sprite.svg#visibility-off"></use>
</svg>
<span class="icons__name">
visibility-off
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#warning"></use>
</svg>
<span class="icons__name">
warning
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Youtube logo</title>
<use xlink:href="/images/icons-sprite.svg#youtube"></use>
</svg>
<span class="icons__name">
youtube
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Share</title>
<use xlink:href="/images/icons-sprite.svg#share"></use>
</svg>
<span class="icons__name">
share
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Thumb up</title>
<use xlink:href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span class="icons__name">
thumb-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Thumb down</title>
<use xlink:href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span class="icons__name">
thumb-down
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>New Shopping Cart</title>
<use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>
<span class="icons__name">
new-cart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>New Heart</title>
<use xlink:href="/images/icons-sprite.svg#new-heart"></use>
</svg>
<span class="icons__name">
new-heart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>New Account</title>
<use xlink:href="/images/icons-sprite.svg#new-user"></use>
</svg>
<span class="icons__name">
new-user
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-afterpay-colored"></use>
</svg>
<span class="icons__name">
payment-afterpay-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-afterpay-dark"></use>
</svg>
<span class="icons__name">
payment-afterpay-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-afterpay-light"></use>
</svg>
<span class="icons__name">
payment-afterpay-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-amex-colored"></use>
</svg>
<span class="icons__name">
payment-amex-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-amex-dark"></use>
</svg>
<span class="icons__name">
payment-amex-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-amex-light"></use>
</svg>
<span class="icons__name">
payment-amex-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-applepay-colored"></use>
</svg>
<span class="icons__name">
payment-applepay-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-applepay-dark"></use>
</svg>
<span class="icons__name">
payment-applepay-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-applepay-light"></use>
</svg>
<span class="icons__name">
payment-applepay-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-bancontact-colored"></use>
</svg>
<span class="icons__name">
payment-bancontact-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-bancontact-dark"></use>
</svg>
<span class="icons__name">
payment-bancontact-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-bancontact-light"></use>
</svg>
<span class="icons__name">
payment-bancontact-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-ideal-colored"></use>
</svg>
<span class="icons__name">
payment-ideal-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-ideal-dark"></use>
</svg>
<span class="icons__name">
payment-ideal-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-ideal-light"></use>
</svg>
<span class="icons__name">
payment-ideal-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-maestro-colored"></use>
</svg>
<span class="icons__name">
payment-maestro-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-maestro-dark"></use>
</svg>
<span class="icons__name">
payment-maestro-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-maestro-light"></use>
</svg>
<span class="icons__name">
payment-maestro-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mastercard-colored"></use>
</svg>
<span class="icons__name">
payment-mastercard-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mastercard-dark"></use>
</svg>
<span class="icons__name">
payment-mastercard-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mastercard-light"></use>
</svg>
<span class="icons__name">
payment-mastercard-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mollie-colored"></use>
</svg>
<span class="icons__name">
payment-mollie-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mollie-dark"></use>
</svg>
<span class="icons__name">
payment-mollie-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-mollie-light"></use>
</svg>
<span class="icons__name">
payment-mollie-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-paypal-colored"></use>
</svg>
<span class="icons__name">
payment-paypal-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-paypal-dark"></use>
</svg>
<span class="icons__name">
payment-paypal-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-paypal-light"></use>
</svg>
<span class="icons__name">
payment-paypal-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-sofort-colored"></use>
</svg>
<span class="icons__name">
payment-sofort-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-sofort-dark"></use>
</svg>
<span class="icons__name">
payment-sofort-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-sofort-light"></use>
</svg>
<span class="icons__name">
payment-sofort-light
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-visa-colored"></use>
</svg>
<span class="icons__name">
payment-visa-colored
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-visa-dark"></use>
</svg>
<span class="icons__name">
payment-visa-dark
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use xlink:href="/images/icons-sprite.svg#payment-visa-light"></use>
</svg>
<span class="icons__name">
payment-visa-light
</span>
</div>
</div>
<div class="icons">
{{#each icons}}
<div class="icons__item">
{{ render '@icon' this }}
<span class="icons__name">
{{ this.id }}
</span>
</div>
{{/each}}
</div>
{
"icons": [
{
"id": "account-mini",
"title": "User's account in circle",
"class": "icons__single-icon"
},
{
"id": "account",
"title": "User's account",
"class": "icons__single-icon"
},
{
"id": "american-express",
"title": "American Express",
"class": "icons__single-icon"
},
{
"id": "angle-down",
"title": "Arrow down",
"class": "icons__single-icon"
},
{
"id": "angle-up",
"title": "Arrow up",
"class": "icons__single-icon"
},
{
"id": "angle-right",
"title": "Arrow right",
"class": "icons__single-icon"
},
{
"id": "angle-left",
"title": "Arrow left",
"class": "icons__single-icon"
},
{
"id": "arrow-down",
"title": "Arrow down",
"class": "icons__single-icon"
},
{
"id": "arrow-left",
"title": "Arrow left",
"class": "icons__single-icon"
},
{
"id": "arrow-right",
"title": "Arrow right",
"class": "icons__single-icon"
},
{
"id": "arrow-up",
"title": "Arrow up",
"class": "icons__single-icon"
},
{
"id": "bigstar",
"title": "Big Star",
"class": "icons__single-icon"
},
{
"id": "chat",
"title": "Chat",
"class": "icons__single-icon"
},
{
"id": "check",
"title": "Check",
"class": "icons__single-icon"
},
{
"id": "checked",
"title": "Checked",
"class": "icons__single-icon"
},
{
"id": "close",
"title": "Close",
"class": "icons__single-icon"
},
{
"id": "compare",
"title": "Compare",
"class": "icons__single-icon"
},
{
"id": "curved-arrows",
"title": "Curved 2 arrows in form of circle",
"class": "icons__single-icon"
},
{
"id": "filter",
"title": "Filter",
"class": "icons__single-icon"
},
{
"id": "delivery-truck",
"title": "Delivery truck",
"class": "icons__single-icon"
},
{
"id": "discover",
"title": "Discover",
"class": "icons__single-icon"
},
{
"id": "color-afterpay",
"title": "color-afterpay",
"class": "icons__single-icon"
},
{
"id": "color-amex",
"title": "color-amex",
"class": "icons__single-icon"
},
{
"id": "color-bancontact-mister-cash",
"title": "color-bancontact-mister-cash",
"class": "icons__single-icon"
},
{
"id": "color-ideal",
"title": "color-ideal",
"class": "icons__single-icon"
},
{
"id": "color-maestro",
"title": "color-maestro",
"class": "icons__single-icon"
},
{
"id": "color-mastercard",
"title": "color-mastercard",
"class": "icons__single-icon"
},
{
"id": "color-mollie",
"title": "color-mollie",
"class": "icons__single-icon"
},
{
"id": "color-paypal",
"title": "color-paypal",
"class": "icons__single-icon"
},
{
"id": "color-visa",
"title": "color-visa",
"class": "icons__single-icon"
},
{
"id": "theme-customize",
"title": "Theme Custom ",
"class": "icons__single-icon"
},
{
"id": "test",
"title": "Theme Armchair ",
"class": "icons__single-icon"
},
{
"id": "theme-bed-1",
"title": "Theme bed1",
"class": "icons__single-icon"
},
{
"id": "theme-bed",
"title": "Theme bed",
"class": "icons__single-icon"
},
{
"id": "theme-boekenkast",
"title": "Theme Boekenkast",
"class": "icons__single-icon"
},
{
"id": "theme-bookcase",
"title": "Theme bookcase",
"class": "icons__single-icon"
},
{
"id": "theme-bookshelf",
"title": "Theme bookshelf",
"class": "icons__single-icon"
},
{
"id": "theme-bureau",
"title": "Theme Bureau",
"class": "icons__single-icon"
},
{
"id": "theme-bureaulamp",
"title": "Theme Bureaulamp",
"class": "icons__single-icon"
},
{
"id": "theme-candelabra",
"title": "Theme candelabra",
"class": "icons__single-icon"
},
{
"id": "theme-carpet",
"title": "Theme carpet",
"class": "icons__single-icon"
},
{
"id": "theme-chair-1",
"title": "Theme chair1",
"class": "icons__single-icon"
},
{
"id": "theme-chair-2",
"title": "Theme chair2",
"class": "icons__single-icon"
},
{
"id": "theme-chair",
"title": "Theme chair",
"class": "icons__single-icon"
},
{
"id": "theme-coat-hanger",
"title": "Theme coat-hanger",
"class": "icons__single-icon"
},
{
"id": "theme-cupboard-1",
"title": "Theme cupboard 1",
"class": "icons__single-icon"
},
{
"id": "theme-cupboard",
"title": "Theme cupboard",
"class": "icons__single-icon"
},
{
"id": "theme-curtain",
"title": "Theme curtain",
"class": "icons__single-icon"
},
{
"id": "theme-deco",
"title": "Theme deco",
"class": "icons__single-icon"
},
{
"id": "theme-desk",
"title": "Theme desk",
"class": "icons__single-icon"
},
{
"id": "theme-dining-table",
"title": "Theme dining table",
"class": "icons__single-icon"
},
{
"id": "theme-floor",
"title": "Theme floor",
"class": "icons__single-icon"
},
{
"id": "theme-furniture-1",
"title": "Theme furniture 1",
"class": "icons__single-icon"
},
{
"id": "theme-furniture",
"title": "Theme furniture",
"class": "icons__single-icon"
},
{
"id": "theme-home",
"title": "Theme Home",
"class": "icons__single-icon"
},
{
"id": "theme-kast",
"title": "Theme Kast",
"class": "icons__single-icon"
},
{
"id": "theme-kledingkast",
"title": "Theme Kledingkast",
"class": "icons__single-icon"
},
{
"id": "theme-lamp",
"title": "Theme Lamp",
"class": "icons__single-icon"
},
{
"id": "theme-living-room",
"title": "Theme Living Room",
"class": "icons__single-icon"
},
{
"id": "theme-mirror",
"title": "Theme mirror",
"class": "icons__single-icon"
},
{
"id": "theme-picture",
"title": "Theme picture",
"class": "icons__single-icon"
},
{
"id": "theme-relax",
"title": "Theme relax",
"class": "icons__single-icon"
},
{
"id": "theme-side-table",
"title": "Theme Side Table",
"class": "icons__single-icon"
},
{
"id": "theme-sofa",
"title": "Theme sofa",
"class": "icons__single-icon"
},
{
"id": "theme-table",
"title": "Theme table",
"class": "icons__single-icon"
},
{
"id": "theme-vip-room",
"title": "Theme vip-room",
"class": "icons__single-icon"
},
{
"id": "theme-wardrobe",
"title": "Theme wardrobe",
"class": "icons__single-icon"
},
{
"id": "theme-account",
"title": "User's account ",
"class": "icons__single-icon"
},
{
"id": "theme-applepay",
"title": "Apple Pay logo",
"class": "icons__single-icon"
},
{
"id": "theme-applepay-light",
"title": "Apple Pay logo White",
"class": "icons__single-icon"
},
{
"id": "theme-ideal",
"title": "iDEAL logo",
"class": "icons__single-icon"
},
{
"id": "theme-ideal-color",
"title": "iDEAL logo Colored",
"class": "icons__single-icon"
},
{
"id": "theme-ideal-light",
"title": "iDEAL logo White",
"class": "icons__single-icon"
},
{
"id": "theme-insta",
"title": "Instagram logo",
"class": "icons__single-icon"
},
{
"id": "theme-multipackage",
"title": "Multipackage",
"class": "icons__single-icon"
},
{
"id": "theme-multipackage-dark",
"title": "Multipackage Dark",
"class": "icons__single-icon"
},
{
"id": "theme-news",
"title": "News",
"class": "icons__single-icon"
},
{
"id": "theme-package",
"title": "Package",
"class": "icons__single-icon"
},
{
"id": "theme-package-dkk",
"title": "Package DKK",
"class": "icons__single-icon"
},
{
"id": "theme-pallet",
"title": "Pallet",
"class": "icons__single-icon"
},
{
"id": "theme-paypal",
"title": "PayPal Logo",
"class": "icons__single-icon"
},
{
"id": "theme-paypal-color",
"title": "PayPal Logo Colored",
"class": "icons__single-icon"
},
{
"id": "theme-paypal-light",
"title": "theme-paypal-light",
"class": "icons__single-icon"
},
{
"id": "theme-phone",
"title": "theme-phone",
"class": "icons__single-icon"
},
{
"id": "theme-secure",
"title": "Secure, Safe",
"class": "icons__single-icon"
},
{
"id": "theme-shipping",
"title": "Shipping",
"class": "icons__single-icon"
},
{
"id": "theme-shipping-dark",
"title": "Shipping Dark",
"class": "icons__single-icon"
},
{
"id": "theme-shopping-cart",
"title": "Shopping Cart",
"class": "icons__single-icon"
},
{
"id": "theme-shoppingcart",
"title": "Shopping Cart",
"class": "icons__single-icon"
},
{
"id": "theme-sofort",
"title": "Sofort Payment",
"class": "icons__single-icon"
},
{
"id": "theme-sofort-light",
"title": "Sofort Payment Wbite",
"class": "icons__single-icon"
},
{
"id": "theme-store",
"title": "Store",
"class": "icons__single-icon"
},
{
"id": "theme-visa",
"title": "Visa Logo",
"class": "icons__single-icon"
},
{
"id": "theme-visa-light",
"title": "Visa Logo White",
"class": "icons__single-icon"
},
{
"id": "theme-whishlist",
"title": "Store",
"class": "icons__single-icon"
},
{
"id": "theme-whishlist-list",
"title": "Store",
"class": "icons__single-icon"
},
{
"id": "edit",
"title": "Edit pencil",
"class": "icons__single-icon"
},
{
"id": "envelope",
"title": "Envelope",
"class": "icons__single-icon"
},
{
"id": "error",
"title": "Error exclamation mark",
"class": "icons__single-icon"
},
{
"id": "facebook",
"title": "Facebook ",
"class": "icons__single-icon"
},
{
"id": "facebook-logo",
"title": "Facebook logo",
"class": "icons__single-icon"
},
{
"id": "google-plus",
"title": "Google plus logo",
"class": "icons__single-icon"
},
{
"id": "grid",
"title": "Grid",
"class": "icons__single-icon"
},
{
"id": "heart",
"title": "Heart",
"class": "icons__single-icon"
},
{
"id": "info",
"title": "Info",
"class": "icons__single-icon"
},
{
"id": "instagram",
"title": "Instagram logo",
"class": "icons__single-icon"
},
{
"id": "insta",
"title": "Insta logo",
"class": "icons__single-icon"
},
{
"id": "linkedin",
"title": "Linked logo",
"class": "icons__single-icon"
},
{
"id": "list",
"title": "List",
"class": "icons__single-icon"
},
{
"id": "loader",
"title": "Loader",
"class": "icons__single-icon"
},
{
"id": "master-card",
"title": "Master Card",
"class": "icons__single-icon"
},
{
"id": "minus",
"title": "Minus mark",
"class": "icons__single-icon"
},
{
"id": "mobile-menu",
"title": "Mobile menu",
"class": "icons__single-icon"
},
{
"id": "more",
"title": "more",
"class": "icons__single-icon"
},
{
"id": "no-results",
"title": "No results",
"class": "icons__single-icon"
},
{
"id": "paypal",
"title": "Paypal",
"class": "icons__single-icon"
},
{
"id": "phone",
"title": "Phone",
"class": "icons__single-icon"
},
{
"id": "pinterest",
"title": "Pinterest",
"class": "icons__single-icon"
},
{
"id": "pin",
"title": "Pin",
"class": "icons__single-icon"
},
{
"id": "plus",
"title": "Plus mark",
"class": "icons__single-icon"
},
{
"id": "remove",
"title": "Trash bin",
"class": "icons__single-icon"
},
{
"id": "return",
"title": "Return 30 days",
"class": "icons__single-icon"
},
{
"id": "reviews",
"title": "Reviews",
"class": "icons__single-icon"
},
{
"id": "search",
"title": "Search",
"class": "icons__single-icon"
},
{
"id": "settings",
"title": "Settings",
"class": "icons__single-icon"
},
{
"id": "shield",
"title": "Shield",
"class": "icons__single-icon"
},
{
"id": "shipping-time-truck",
"title": "Delivery truck with clock",
"class": "icons__single-icon"
},
{
"id": "shopping-cart",
"title": "Shopping cart",
"class": "icons__single-icon"
},
{
"id": "signin",
"title": "Signin",
"class": "icons__single-icon"
},
{
"id": "star",
"title": "Star",
"class": "icons__single-icon"
},
{
"id": "star-border",
"title": "Star border",
"class": "icons__single-icon"
},
{
"id": "twitter",
"title": "Twitter logo",
"class": "icons__single-icon"
},
{
"id": "unchecked",
"title": "Unchecked",
"class": "icons__single-icon"
},
{
"id": "user",
"title": "User",
"class": "icons__single-icon"
},
{
"id": "visa",
"title": "Visa",
"class": "icons__single-icon"
},
{
"id": "visibility",
"title": "Visibility",
"class": "icons__single-icon"
},
{
"id": "visibility-off",
"title": "Visibility off",
"class": "icons__single-icon"
},
{
"id": "warning",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "youtube",
"title": "Youtube logo",
"class": "icons__single-icon"
},
{
"id": "share",
"title": "Share",
"class": "icons__single-icon"
},
{
"id": "thumb-up",
"title": "Thumb up",
"class": "icons__single-icon"
},
{
"id": "thumb-down",
"title": "Thumb down",
"class": "icons__single-icon"
},
{
"id": "new-cart",
"title": "New Shopping Cart",
"class": "icons__single-icon"
},
{
"id": "new-heart",
"title": "New Heart",
"class": "icons__single-icon"
},
{
"id": "new-user",
"title": "New Account",
"class": "icons__single-icon"
},
{
"id": "payment-afterpay-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-afterpay-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-afterpay-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-amex-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-amex-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-amex-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-applepay-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-applepay-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-applepay-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-bancontact-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-bancontact-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-bancontact-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-ideal-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-ideal-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-ideal-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-maestro-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-maestro-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-maestro-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mastercard-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mastercard-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mastercard-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mollie-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mollie-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-mollie-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-paypal-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-paypal-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-paypal-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-sofort-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-sofort-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-sofort-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-visa-colored",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-visa-dark",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "payment-visa-light",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
}
]
}
All icons are gather into icon-sprite.svg file
Use sprite to display svg inline in your project:
<svg class="icon-class" role="img">
<title>Icon title</title>
<use xlink:href="#icon-id"></use>
</svg>To display icons in documentation, on each preview the icon-sprite is injected inline.
While implementing in theme, include the sprite inside body tag and to display an icon use use with it’s id as a value for xlink:href
There are no dedicated styles for svg icons,
feel free to add appropriate BEM class using icon in your block and set fill, width and height property to change icon’s color and size
To use inline svg from sprite with <use></use> tag the svg4everybody is used.
Please check the usage and implement in your project.
To make icons accessible we use title element as a first child of svg and role="img". Title is provided in config file.
When you set hidden value in config context to true role will change to presentation, an attribute focusable="false" will be added and icon won’t be visible for assistive technologies (AT).
This should be use when element has icon and text and icon is displayed only for design purposes.
In button with text and icon before/after icon should be hidden, in button--icon icon also should be hidden, because it’s aria-label on the button element should inform user about possible action and focusing on icon inside button make the website operation less comfortable for AT’s users.
If you need to implement description for the icon, use <desc> element for it and add id for both title and desc elements and bind those ids in aria-labelledby svg’s attribute:
<svg class="header__icon" role="img" aria-labelledby="icon-title-id icon-desc-id">
<title id="icon-title-id">Icon title</title>
<desc id="icon-desc-id"></desc>
<use xlink:href="images/icons-sprite.svg#icon-id"></use>
</svg>