Vechtsport Online Components for Magento 2

Icons 

<div class="icons">
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>User&#x27;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&#x27;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>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>Checked</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>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>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 logo</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>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>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>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>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>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>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>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>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>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">
            <use xlink:href="/images/icons-sprite.svg#custom-acc"></use>
        </svg>

        <span class="icons__name">
            custom-acc
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-box"></use>
        </svg>

        <span class="icons__name">
            custom-box
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
        </svg>

        <span class="icons__name">
            custom-cart
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-chat"></use>
        </svg>

        <span class="icons__name">
            custom-chat
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-check"></use>
        </svg>

        <span class="icons__name">
            custom-check
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-filter"></use>
        </svg>

        <span class="icons__name">
            custom-filter
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-home"></use>
        </svg>

        <span class="icons__name">
            custom-home
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-shop"></use>
        </svg>

        <span class="icons__name">
            custom-shop
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-phone"></use>
        </svg>

        <span class="icons__name">
            custom-phone
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <use xlink:href="/images/icons-sprite.svg#custom-van"></use>
        </svg>

        <span class="icons__name">
            custom-van
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Size</title>
            <use xlink:href="/images/icons-sprite.svg#size"></use>
        </svg>

        <span class="icons__name">
            size
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>USP Check</title>
            <use xlink:href="/images/icons-sprite.svg#usp-check"></use>
        </svg>

        <span class="icons__name">
            usp-check
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Afterpay</title>
            <use xlink:href="/images/icons-sprite.svg#afterpay"></use>
        </svg>

        <span class="icons__name">
            afterpay
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Maps</title>
            <use xlink:href="/images/icons-sprite.svg#maps"></use>
        </svg>

        <span class="icons__name">
            maps
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Mastercard Color</title>
            <use xlink:href="/images/icons-sprite.svg#mastercard-color"></use>
        </svg>

        <span class="icons__name">
            mastercard-color
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Mastercard Black</title>
            <use xlink:href="/images/icons-sprite.svg#mastercard-black"></use>
        </svg>

        <span class="icons__name">
            mastercard-black
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>iDeal</title>
            <use xlink:href="/images/icons-sprite.svg#ideal"></use>
        </svg>

        <span class="icons__name">
            ideal
        </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>maestro</title>
            <use xlink:href="/images/icons-sprite.svg#Maestro"></use>
        </svg>

        <span class="icons__name">
            Maestro
        </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>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>bancontant</title>
            <use xlink:href="/images/icons-sprite.svg#bancontant"></use>
        </svg>

        <span class="icons__name">
            bancontant
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Play button</title>
            <use xlink:href="/images/icons-sprite.svg#play-button"></use>
        </svg>

        <span class="icons__name">
            play-button
        </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#custom-shoppingcart"></use>
        </svg>

        <span class="icons__name">
            custom-shoppingcart
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>DPD</title>
            <use xlink:href="/images/icons-sprite.svg#carrier-dpd"></use>
        </svg>

        <span class="icons__name">
            carrier-dpd
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>PostNL</title>
            <use xlink:href="/images/icons-sprite.svg#carrier-postnl"></use>
        </svg>

        <span class="icons__name">
            carrier-postnl
        </span>
    </div>
    <div class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>GLS</title>
            <use xlink:href="/images/icons-sprite.svg#carrier-gls"></use>
        </svg>

        <span class="icons__name">
            carrier-gls
        </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 class="icons__item">
        <svg class="icon icons__single-icon" role="img">
            <title>Thuiswinkel Waarborg Logo</title>
            <use xlink:href="/images/icons-sprite.svg#thuiswinkel"></use>
        </svg>

        <span class="icons__name">
            thuiswinkel
        </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": "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": "check",
      "title": "Checked",
      "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": "delivery-truck",
      "title": "Delivery truck",
      "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 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": "instagram",
      "title": "Instagram 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": "minus",
      "title": "Minus mark",
      "class": "icons__single-icon"
    },
    {
      "id": "mobile-menu",
      "title": "Mobile menu",
      "class": "icons__single-icon"
    },
    {
      "id": "phone",
      "title": "Phone",
      "class": "icons__single-icon"
    },
    {
      "id": "plus",
      "title": "Plus mark",
      "class": "icons__single-icon"
    },
    {
      "id": "remove",
      "title": "Trash bin",
      "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": "user",
      "title": "User",
      "class": "icons__single-icon"
    },
    {
      "id": "warning",
      "title": "Warning exclamation mark",
      "class": "icons__single-icon"
    },
    {
      "id": "youtube",
      "title": "Youtube logo",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-acc",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-box",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-cart",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-chat",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-check",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-filter",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-home",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-shop",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-phone",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-van",
      "title": "",
      "class": "icons__single-icon"
    },
    {
      "id": "size",
      "title": "Size",
      "class": "icons__single-icon"
    },
    {
      "id": "usp-check",
      "title": "USP Check",
      "class": "icons__single-icon"
    },
    {
      "id": "afterpay",
      "title": "Afterpay",
      "class": "icons__single-icon"
    },
    {
      "id": "maps",
      "title": "Maps",
      "class": "icons__single-icon"
    },
    {
      "id": "mastercard-color",
      "title": "Mastercard Color",
      "class": "icons__single-icon"
    },
    {
      "id": "mastercard-black",
      "title": "Mastercard Black",
      "class": "icons__single-icon"
    },
    {
      "id": "ideal",
      "title": "iDeal",
      "class": "icons__single-icon"
    },
    {
      "id": "paypal",
      "title": "Paypal",
      "class": "icons__single-icon"
    },
    {
      "id": "Maestro",
      "title": "maestro",
      "class": "icons__single-icon"
    },
    {
      "id": "american-express",
      "title": "American Express",
      "class": "icons__single-icon"
    },
    {
      "id": "visa",
      "title": "Visa",
      "class": "icons__single-icon"
    },
    {
      "id": "bancontant",
      "title": "bancontant",
      "class": "icons__single-icon"
    },
    {
      "id": "play-button",
      "title": "Play button",
      "class": "icons__single-icon"
    },
    {
      "id": "custom-shoppingcart",
      "title": "Shopping cart",
      "class": "icons__single-icon"
    },
    {
      "id": "carrier-dpd",
      "title": "DPD",
      "class": "icons__single-icon"
    },
    {
      "id": "carrier-postnl",
      "title": "PostNL",
      "class": "icons__single-icon"
    },
    {
      "id": "carrier-gls",
      "title": "GLS",
      "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"
    },
    {
      "id": "thuiswinkel",
      "title": "Thuiswinkel Waarborg Logo",
      "class": "icons__single-icon"
    }
  ]
}

icons

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>

implementation

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

icons’ customisation

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

svg and browser support

To use inline svg from sprite with <use></use> tag the svg4everybody is used. Please check the usage and implement in your project.

accessible icons

To make icons accessible we use title element as a first child of svg and role="img". Title is provided in config file.

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>