Icons

<div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">arrow</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.7 12.6l-7.5-7.5c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5.8 5.8H3.9c-.6 0-1 .4-1 1s.4 1 1 1h15.7l-5.8 5.8c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.4-.4.4-1 0-1.4z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">audioDescribed</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M17.26 9.86h-1.59v6.45h2c1.29 0 2.52-.8 2.52-3.07-.02-2.06-.73-3.38-2.93-3.38zm-9.54.63l-1.31 3.75h2.61l-1.27-3.75h-.03z"></path>
                    <path class="icon__shape" d="M22.42 0H3.58A3.58 3.58 0 0 0 0 3.58v18.84A3.58 3.58 0 0 0 3.58 26h18.84A3.58 3.58 0 0 0 26 22.42V3.58A3.58 3.58 0 0 0 22.42 0zM10.36 18.2l-.76-2.28H5.83L5 18.2H2.79L6.62 8h2.27l3.78 10.2zm7.44 0h-4.35V8h4.35c2.62 0 4.58 1.66 4.58 5.06.01 2.94-1.49 5.14-4.57 5.14z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">speechToText</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M23.9 11.4H22v5h-1.4v-5h-1.8v-1.1h5.1v1.1zm-7.4 1.8l2.1 3.2H17l-1.3-2.1-1.4 2.1h-1.5l2.2-3.2-2-2.9h1.6l1.2 2 1.3-2h1.5l-2.1 2.9zm-4.1 3.2H7.7v-6.2h4.6v1.1H9.1v1.3h3v1.1h-3v1.5h3.3v1.2zm-5.2-5H5.3v5H4v-5H2.1v-1.1h5.1v1.1zm18.8 11V3.6c0-2-1.6-3.6-3.6-3.6H3.6C1.6 0 0 1.6 0 3.6v18.8c0 2 1.6 3.6 3.6 3.6h18.8c2 0 3.6-1.6 3.6-3.6"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">britishSignLanguage</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M9.5,16H3.8c-0.5,0-1.4-0.2-1.4-1.4v-3.7l3.8-8c0.1-0.3,0.4-0.5,0.7-0.6c0.3-0.1,0.5,0,0.7,0.1c0.6,0.4,0.6,1,0.4,1.5 L6.4,7.7v0.2h0.1c0,0,0.1,0,0.1-0.1l5.6-5.6C12.5,2.1,12.7,2,12.9,2s0.4,0.1,0.6,0.2c0.2,0.2,0.2,0.4,0.2,0.6c0,0.2-0.1,0.4-0.2,0.6 L9.6,7.2c-0.1,0.1-0.1,0.2,0,0.3c0.1,0.1,0.2,0.1,0.3,0l3.9-3.9V3.5l0.7-0.7c0.2-0.2,0.4-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2 c0.3,0.3,0.3,0.8,0,1.1L11,8.6v0.3L11.1,9c0,0,0.1,0,0.1-0.1L15,5.1c0.2-0.2,0.4-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2 c0.2,0.2,0.2,0.4,0.2,0.6s-0.1,0.4-0.2,0.6L12.5,10c-0.1,0.1-0.1,0.2,0,0.3l0.1,0.1c0,0,0.1,0,0.1-0.1l0.9-0.9 c0,0.3,0.1,0.6,0.3,0.8l0.7,0.7L9.5,16z M16.7,8.2c0,0.2-0.1,0.4-0.2,0.5L16.3,9l-0.6-0.6c-0.2-0.2-0.5-0.3-0.8-0.3l0.4-0.4 c0.2-0.2,0.4-0.2,0.6-0.2c0.2,0,0.4,0.1,0.6,0.2C16.6,7.8,16.7,8,16.7,8.2 M14.3,9.9C14.1,9.7,14,9.5,14,9.3c0-0.2,0.1-0.4,0.2-0.6 c0.3-0.3,0.8-0.3,1.1,0l8.1,8.1v5.5c0,0.4-0.1,0.8-0.3,1c-0.2,0.3-0.6,0.4-1,0.4h-3.7L13,21.2c-0.3-0.1-0.5-0.4-0.6-0.7 c-0.1-0.3,0-0.5,0.1-0.7c0.4-0.6,1-0.6,1.5-0.4l1.4,0.7h0.1c0,0,0.1,0,0.1-0.1v-0.2l-3.2-3.2c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0 l1.1,1.1c0.1,0.1,0.2,0.1,0.3,0s0.1-0.2,0-0.3l-1.1-1.1h-0.1L13.5,15c-0.2-0.1-0.2-0.3-0.2-0.6c0-0.2,0.1-0.4,0.2-0.6 c0.3-0.3,0.8-0.3,1.1,0l1.3,1.3c0.1,0.1,0.2,0.1,0.3,0c0.1-0.1,0.1-0.2,0-0.3l-1-1C15,13.6,15,13.4,15,13.2c0-0.2,0.1-0.4,0.2-0.6 c0.3-0.3,0.8-0.3,1.1,0l1,1c0.1,0.1,0.2,0.1,0.3,0c0.1-0.1,0.1-0.2,0-0.3L17,12.7C17,12.7,14.3,9.9,14.3,9.9z M26,22.4V3.6 c0-2-1.6-3.6-3.6-3.6H3.6C1.6,0,0,1.6,0,3.6v18.9c0,2,1.6,3.6,3.6,3.6h18.9C24.4,26,26,24.4,26,22.4"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">cc</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M10.17 14.85a1.24 1.24 0 0 1-1.09-.52 2.38 2.38 0 0 1-.37-1.4q0-1.93 1.46-1.93a1.29 1.29 0 0 1 .63.19 1.49 1.49 0 0 1 .57.68l1.46-.76a3 3 0 0 0-2.9-1.55 3.07 3.07 0 0 0-2.28.91 3.35 3.35 0 0 0-.9 2.46 3.36 3.36 0 0 0 .89 2.48 3.17 3.17 0 0 0 2.35.89 3.2 3.2 0 0 0 2.85-1.71l-1.34-.68a1.36 1.36 0 0 1-1.33.94z"></path>
                    <path class="icon__shape" d="M23 8.75a10.45 10.45 0 0 0-2.33-3.5 10.6 10.6 0 0 0-7.76-3.18A10.27 10.27 0 0 0 5.3 5.23a10.91 10.91 0 0 0-2.4 3.56 10.85 10.85 0 0 0 0 8.28 10.83 10.83 0 0 0 2.38 3.52A10.93 10.93 0 0 0 8.8 23a10.57 10.57 0 0 0 4.12.82 10.82 10.82 0 0 0 4.17-.82 11.17 11.17 0 0 0 3.61-2.41 10 10 0 0 0 2.3-3.48 11.08 11.08 0 0 0 .79-4.18A11.06 11.06 0 0 0 23 8.75zm-3.69 10.41a9.37 9.37 0 0 1-3 2 8.82 8.82 0 0 1-6.76 0 9.2 9.2 0 0 1-4.83-4.86 8.62 8.62 0 0 1 0-6.75 9.35 9.35 0 0 1 2-2.92A8.42 8.42 0 0 1 13 4a8.6 8.6 0 0 1 6.31 2.62 8.69 8.69 0 0 1 1.92 2.87 8.93 8.93 0 0 1 .66 3.42 8.35 8.35 0 0 1-2.58 6.25z"></path>
                    <path class="icon__shape" d="M16.43 14.85a1.24 1.24 0 0 1-1.09-.52 2.38 2.38 0 0 1-.37-1.4Q15 11 16.43 11a1.32 1.32 0 0 1 .65.19 1.49 1.49 0 0 1 .57.68l1.44-.76a3 3 0 0 0-2.87-1.57 3.07 3.07 0 0 0-2.28.91 3.35 3.35 0 0 0-.9 2.46 3.38 3.38 0 0 0 .88 2.48 3.17 3.17 0 0 0 2.36.89 3.14 3.14 0 0 0 1.65-.46 3.34 3.34 0 0 0 1.2-1.25l-1.36-.68a1.36 1.36 0 0 1-1.34.96z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ccBy</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M13 9a1.34 1.34 0 0 0 1.51-1.51A1.35 1.35 0 0 0 13 6a1.35 1.35 0 0 0-1.51 1.53A1.34 1.34 0 0 0 13 9z"></path>
                    <path class="icon__shape" d="M20.74 5.29A10.5 10.5 0 0 0 13 2.14a10.41 10.41 0 0 0-7.63 3.15A10.65 10.65 0 0 0 2.17 13a10.46 10.46 0 0 0 3.2 7.67A10.52 10.52 0 0 0 13 23.88a10.74 10.74 0 0 0 7.78-3.24A10.25 10.25 0 0 0 23.9 13a10.51 10.51 0 0 0-3.16-7.71zm-1.36 14a8.72 8.72 0 0 1-6.33 2.66 8.58 8.58 0 0 1-6.29-2.64A8.54 8.54 0 0 1 4.13 13a8.74 8.74 0 0 1 2.66-6.3 8.46 8.46 0 0 1 6.27-2.6 8.57 8.57 0 0 1 6.29 2.6 8.59 8.59 0 0 1 2.59 6.3 8.28 8.28 0 0 1-2.56 6.24z"></path>
                    <path class="icon__shape" d="M15.27 9.62H10.8a.7.7 0 0 0-.7.7v4.44h1.24V20h3.38v-5.24H16v-4.45a.66.66 0 0 0-.21-.49.68.68 0 0 0-.52-.2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ccNc</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M20.75 5.29A10.5 10.5 0 0 0 13 2.14a10.41 10.41 0 0 0-7.62 3.15A10.65 10.65 0 0 0 2.18 13a10.44 10.44 0 0 0 3.2 7.65A10.45 10.45 0 0 0 13 23.88a10.74 10.74 0 0 0 7.78-3.24A10.25 10.25 0 0 0 23.91 13a10.47 10.47 0 0 0-3.16-7.71zm-1.36 13.93a8.64 8.64 0 0 1-6.33 2.66 8.66 8.66 0 0 1-6.29-2.62A8.54 8.54 0 0 1 4.14 13a8.55 8.55 0 0 1 .49-2.93l5.55 2.48 1.73.76 1.28.58 1 .45a.83.83 0 0 1 .29.66.91.91 0 0 1-.4.83 1.76 1.76 0 0 1-1 .25 3.47 3.47 0 0 1-2.43-1l-1.41 1.54a5 5 0 0 0 3.3 1.3v1.67h1.26v-1.67a3.57 3.57 0 0 0 2-.75 2.8 2.8 0 0 0 1-1.68l4.09 1.82a8 8 0 0 1-1.5 1.91zm-3.28-6.37l-1.75-.78-1-.43L12 11a.46.46 0 0 1-.1-.27.68.68 0 0 1 .4-.66 2 2 0 0 1 .9-.19 3.21 3.21 0 0 1 1.86.64l1.42-1.46a4.8 4.8 0 0 0-2.72-1V6.41h-1.22v1.67a3.43 3.43 0 0 0-1.77.57 2.55 2.55 0 0 0-1 1.37L5.59 8.16A10.43 10.43 0 0 1 6.8 6.7a8.43 8.43 0 0 1 6.27-2.62 8.49 8.49 0 0 1 6.28 2.62A8.51 8.51 0 0 1 22 13a10.06 10.06 0 0 1-.27 2.33z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ccNd</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M9.2 10.5H17v1.9H9.2zm0 3.5H17v1.9H9.2z"></path>
                    <path class="icon__shape" d="M20.6 5.4c-2-2.1-4.8-3.2-7.7-3.1-2.9-.1-5.6 1-7.6 3.1-1 1-1.8 2.2-2.4 3.6a10.6 10.6 0 0 0 0 8.2c.5 1.3 1.3 2.5 2.4 3.5 1 1 2.2 1.8 3.5 2.3 1.3.5 2.7.8 4.1.8 2.9 0 5.7-1.1 7.7-3.2 2-2 3.1-4.7 3.1-7.6 0-2.8-1.1-5.6-3.1-7.6zM6.7 19.2C5 17.6 4.1 15.3 4.1 13c0-2.3.9-4.6 2.6-6.2 1.6-1.7 3.9-2.6 6.2-2.6h.9c2 .2 3.9 1.1 5.3 2.5.8.8 1.5 1.8 1.9 2.8.4 1.1.7 2.2.7 3.4.1 2.3-.9 4.6-2.5 6.2-.8.8-1.8 1.5-2.9 2-1.1.4-2.2.7-3.3.7-1.1 0-2.3-.2-3.4-.7-.4-.2-.9-.4-1.2-.7-.7-.3-1.2-.7-1.7-1.2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ccPdm</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M23 8.9c-.5-1.3-1.3-2.5-2.3-3.5-2-2.1-4.8-3.2-7.7-3.1-2.9-.1-5.6 1.1-7.6 3.1-1 1-1.9 2.2-2.4 3.5a10.6 10.6 0 0 0 0 8.2c.5 1.3 1.3 2.5 2.3 3.5 1 1 2.2 1.8 3.5 2.4 2.6 1.1 5.6 1.1 8.2 0 1.3-.6 2.6-1.4 3.6-2.4s1.8-2.2 2.3-3.5c.5-1.3.8-2.7.8-4.2.1-1.3-.2-2.7-.7-4zM13 4.2c2.4 0 4.6.9 6.2 2.6.8.8 1.5 1.8 1.9 2.8.4 1.1.7 2.2.7 3.4 0 1.2-.2 2.4-.7 3.5l-10.6-6.1c.7-1 1.9-1.6 3.2-1.5.8 0 1.5.2 2.2.5l.5-2.2c-.9-.4-2-.6-3-.5-2-.1-4 .8-5.3 2.4L5.9 7.8c.3-.4.6-.7.9-1 1.6-1.7 3.9-2.7 6.2-2.6zm3.3 17c-1.1.4-2.2.7-3.3.7-1.1 0-2.3-.2-3.4-.7-1.1-.5-2-1.1-2.9-1.9-.8-.8-1.5-1.8-2-2.9-.9-2.1-.9-4.6 0-6.7l.1-.2 2.5 1.4c-.2.7-.3 1.4-.3 2.1 0 3.4 2.1 6 6.3 6 1.1 0 2.1-.1 3.1-.5l-.4-2.1c-.7.3-1.5.4-2.3.4-2 .2-3.7-1.3-3.8-3.3v-1.1l10.2 5.8c-.3.4-.5.7-.9 1-.8.8-1.8 1.5-2.9 2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ccZero</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M13 6.9c-3.6 0-4.4 3.4-4.4 6.2s.9 6.2 4.4 6.2 4.5-3.4 4.5-6.2-.9-6.2-4.5-6.2zm-1.9 6.2c0-1.2.1-3.9 1.9-3.9.1 0 .3 0 .4.1.3.2.4.6.2.9v.1l-2.4 4.4c-.1-.6-.1-1.1-.1-1.6zm1.9 3.8h-.6c-.4-.2-.7-.5-.3-1l2.6-4.6c.1.6.1 1.2.1 1.9.1 1.1 0 3.7-1.8 3.7z"></path>
                    <path class="icon__shape" d="M23 8.9c-.5-1.3-1.3-2.5-2.3-3.5-2-2.1-4.8-3.2-7.7-3.2-2.9-.1-5.6 1.1-7.6 3.1C4.4 6.4 3.6 7.7 3 9a10.6 10.6 0 0 0 0 8.2c.5 1.3 1.3 2.5 2.3 3.5 1 1 2.2 1.8 3.5 2.3 2.6 1.1 5.6 1.1 8.2 0 1.3-.6 2.6-1.4 3.6-2.4s1.8-2.1 2.3-3.4c.5-1.3.8-2.7.8-4.2.1-1.4-.2-2.8-.7-4.1zm-3.7 10.3c-.8.8-1.8 1.5-2.9 2-1.1.4-2.2.7-3.3.7-1.1 0-2.3-.2-3.4-.7-1.1-.5-2-1.1-2.9-1.9-.8-.8-1.5-1.8-2-2.9-.9-2.1-.9-4.6 0-6.7.5-1.1 1.2-2.1 2-2.9 1.6-1.7 3.9-2.6 6.2-2.6 2.4 0 4.6.9 6.2 2.6.8.8 1.5 1.8 1.9 2.9.4 1.1.7 2.2.7 3.4.1 2.3-.8 4.5-2.5 6.1z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">check</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.13 7.64a1 1 0 0 0-1.41 0L11 17.34l-5-5a1 1 0 0 0-1.41 1.41l5.67 5.67a1 1 0 0 0 1.41 0l10.4-10.4a1 1 0 0 0 .06-1.38z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">chevron</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M18.8 10.45a1 1 0 0 0-1.41 0L13 14.87l-4.44-4.42a1 1 0 1 0-1.41 1.41L12.27 17a1 1 0 0 0 1.41 0l5.12-5.12a1 1 0 0 0 0-1.43z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">clock</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M12.9 3.1a10.17 10.17 0 1 0 10.17 10.16A10.18 10.18 0 0 0 12.9 3.1zm0 18.33a8.17 8.17 0 1 1 8.17-8.17 8.17 8.17 0 0 1-8.17 8.17z"></path>
                    <path class="icon__shape" d="M16.83 13.06h-3v-4.5a1 1 0 0 0-2 0v5.5a1 1 0 0 0 1 1h4a1 1 0 0 0 0-2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">cross</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M19.7 18.3L14.4 13l5.3-5.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L13 11.6 7.7 6.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l5.3 5.3-5.3 5.3c-.4.4-.4 1 0 1.4s1 .4 1.4 0l5.3-5.3 5.3 5.3c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">email</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.86 20.64v-9.58A2.85 2.85 0 0 0 20 8.21a.81.81 0 0 0-.15 0V3.36a.85.85 0 0 0-.85-.85H7a.85.85 0 0 0-.85.85v4.89a.81.81 0 0 0-.18 0 2.85 2.85 0 0 0-2.85 2.85v9.85a.83.83 0 0 0 0 .36A2.85 2.85 0 0 0 6 23.49h14a2.85 2.85 0 0 0 2.77-2.21.83.83 0 0 0 .05-.37c.03-.08.04-.17.04-.27zm-6.11-4.42l4.41-3v6.16zM20 9.91a1.15 1.15 0 0 1 1.15 1.15v.08l-1.3.89V9.88a.81.81 0 0 0 .15.03zm-1.84-5.7v9L13 16.72l-5.14-3.64V4.21zM4.83 13l4.48 3.16-4.48 3.21zM6 9.91a.81.81 0 0 0 .18 0v2L4.85 11A1.14 1.14 0 0 1 6 9.91zm14 11.88H6a1.13 1.13 0 0 1-.93-.5l5.73-4.06 1.73 1.22a.85.85 0 0 0 1 0l1.77-1.21 5.68 4a1.13 1.13 0 0 1-.98.55z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">image</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path d="M20.5 4.8h-15a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-10a3 3 0 0 0-3-3zm-15 2h15a1 1 0 0 1 1 1V16L20 14.5a3.09 3.09 0 0 0-4.22 0l-.53.5-4.15-4.21a3.07 3.07 0 0 0-4.24 0L4.5 13.16V7.8a1 1 0 0 1 1-1zm15 12h-15a1 1 0 0 1-1-1v-1.93a1 1 0 0 0 .33-.22l3.46-3.46a1 1 0 0 1 1.41 0l4.49 4.55a1.51 1.51 0 0 0 2.1 0l.91-.86a1 1 0 0 1 1.41 0l2.59 2.59a1 1 0 0 1-.7.33z"></path>
                    <circle cx="16.75" cy="10.25" r="1.75"></circle>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">location</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <circle class="icon__shape" cx="13" cy="10.14" r="2"></circle>
                    <path class="icon__shape" d="M13 2.14a8 8 0 0 0-8 8c0 3.77 5 14 8 14s8-10.23 8-14a8 8 0 0 0-8-8zm0 20c-1.49-.56-6-8.51-6-12a6 6 0 1 1 12 0c0 3.46-4.51 11.41-6 11.99z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">plus</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M21.49 12H14V4.52a1 1 0 1 0-2 0V12H4.51a1 1 0 0 0 0 2H12v7.49a1 1 0 0 0 2 0V14h7.49a1 1 0 0 0 0-2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">search</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.6 21.59l-6.25-6.25a7.53 7.53 0 1 0-1.41 1.41L21.19 23a1 1 0 0 0 1.41-1.41zM4.9 10.8a5.5 5.5 0 1 1 5.5 5.5 5.51 5.51 0 0 1-5.5-5.5z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ticket</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M24.69 11.4l-2.6-2.6a1 1 0 0 0-1-.25A2.81 2.81 0 0 1 17.6 5a1 1 0 0 0-.25-1l-2.6-2.6a1 1 0 0 0-1.41 0L1.5 13.29a1 1 0 0 0 0 1.41l2.6 2.6a1 1 0 0 0 1 .25 2.81 2.81 0 0 1 3.51 3.51 1 1 0 0 0 .25 1l2.6 2.6a1 1 0 0 0 1.41 0l11.82-11.85a1 1 0 0 0 0-1.41zm-5.13 3.71l-.11-.11A1 1 0 0 0 18 16.41l.12.12-6 6L10.65 21a4.8 4.8 0 0 0-5.52-5.5L3.62 14l6-6 .12.12a1 1 0 0 0 1.41-1.42L11 6.58l3-3 1.5 1.5a4.8 4.8 0 0 0 5.52 5.52l1.5 1.5z"></path>
                    <path class="icon__shape" d="M13.3 8.85a1 1 0 0 0-1.41 1.41l.53.53a1 1 0 1 0 1.41-1.41zm3.22 3.22a1 1 0 0 0-1.41 1.41l.53.53a1 1 0 0 0 1.41-1.41z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">ticketAvailable</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M10.45 11a1.13 1.13 0 1 0-1.12-1.08A1.13 1.13 0 0 0 10.45 11zM15 11a1.13 1.13 0 1 0-1.12-1.13A1.13 1.13 0 0 0 15 11zm.14 2.16a2.89 2.89 0 0 1-4.77 0 1 1 0 1 0-1.65 1.13 4.89 4.89 0 0 0 8.07 0 1 1 0 0 0-1.65-1.13zm9.42-1.93l-2.6-2.6a1 1 0 0 0-1-.25 2.81 2.81 0 0 1-3.51-3.51 1 1 0 0 0-.25-1l-2.6-2.6a1 1 0 0 0-1.41 0L1.32 13.16a1 1 0 0 0 0 1.41l2.6 2.6a1 1 0 0 0 1 .25 2.81 2.81 0 0 1 3.51 3.51 1 1 0 0 0 .25 1l2.6 2.6a1 1 0 0 0 1.41 0l11.82-11.84a1 1 0 0 0 0-1.42zM12 22.4l-1.5-1.5a4.8 4.8 0 0 0-5.52-5.52l-1.5-1.5L13.86 3.45 15.36 5a4.8 4.8 0 0 0 5.52 5.52l1.5 1.5z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">zoomIn</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path>
                    <path class="icon__shape" d="M14.93 10.74h-2.08V8.67a1 1 0 0 0-2 0v2.08H8.78a1 1 0 0 0 0 2h2.08v2.08a1 1 0 0 0 2 0v-2.09h2.08a1 1 0 0 0 0-2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">zoomOut</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.15 20.71L18 16.61A8 8 0 1 0 16.63 18l4.1 4.1a1 1 0 0 0 1.41-1.41zm-10.39-3a6 6 0 1 1 6-6 6 6 0 0 1-6 6z"></path>
                    <path class="icon__shape" d="M14.93 10.74H8.78a1 1 0 0 0 0 2h6.15a1 1 0 0 0 0-2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">information</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg data-name="Layer 1" viewBox="0 0 26 26">
                    <path class="cls-1" d="M15.25 19.34H14v-7.27a1 1 0 0 0-1-1h-2.25a1 1 0 0 0 0 2H12v6.26h-1.25a1 1 0 0 0 0 2h4.5a1 1 0 1 0 0-2z"></path>
                    <circle class="cls-1" cx="13" cy="6.79" r="2.13"></circle>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">underConstruction</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M24,6.74,20.38,3.1A1,1,0,0,0,19,3.1L12.63,9.43,10.53,7.32,12,5.89a1,1,0,0,0,0-1.41L8.62,1.14a1,1,0,0,0-1.41,0L3.32,5a7.63,7.63,0,0,0-2.2,4.81,5.23,5.23,0,0,0,1.67,3.81,1,1,0,0,0,1.41,0L6.6,11.25l2.11,2.11L4.65,17.42l0,0a1.87,1.87,0,0,0-.2.34l0,0L2.92,23s0,.05,0,.08a1.24,1.24,0,0,0,0,.4s0,.05,0,.08a1,1,0,0,0,.06.12.78.78,0,0,0,.22.32l.07.07a1,1,0,0,0,.32.17h0a1,1,0,0,0,.27,0h0a1,1,0,0,0,.27,0l5.11-1.47,0,0a1.86,1.86,0,0,0,.34-.2l0,0,4.06-4.06,5.77,5.77a1,1,0,0,0,1.41,0l2.51-2.51a1,1,0,0,0,0-1.41l-5.77-5.77L24,8.15A1,1,0,0,0,24,6.74ZM3.58,11.44a3,3,0,0,1-.46-1.59A5.66,5.66,0,0,1,4.73,6.44L7.91,3.26,9.84,5.18ZM8,9.83l1.1-1.1,2.11,2.11-1.1,1.1Zm.45,11-3.12.9.9-3.12.5-.5L9,20.37ZM21.33,21l-1.1,1.1L15.18,17l1.1-1.1ZM10.39,19,8.16,16.73,16.9,8l2.23,2.23ZM20.54,8.81,18.31,6.58l1.36-1.36L21.9,7.44Z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">clear</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M20.07 5.93a9.85 9.85 0 0 0-7-2.89 10 10 0 0 0-7.15 17 9.85 9.85 0 0 0 7 2.89 10 10 0 0 0 7.15-17zM18.6 18.6a8 8 0 0 1-5.68 2.4 7.84 7.84 0 0 1-5.58-2.31A8 8 0 0 1 13.08 5a7.84 7.84 0 0 1 5.58 2.31 8 8 0 0 1-.06 11.29z"></path>
                    <path class="icon__shape" d="M16.48 9.41a1 1 0 0 0-1.41 0l-2.12 2.12-2.13-2.12a1 1 0 0 0-1.41 1.41l2.12 2.12-2.12 2.13a1 1 0 1 0 1.41 1.41l2.12-2.12 2.12 2.12a1 1 0 1 0 1.41-1.41l-2.12-2.12 2.12-2.12a1 1 0 0 0 .01-1.42z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">download</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M21.2 21.1H4.8a1 1 0 0 0 0 2h16.4a1 1 0 0 0 0-2zm-8.98-2.38a1 1 0 0 0 1.56 0l4-5a1 1 0 0 0-1.56-1.25L14 15.25V4.1a1 1 0 0 0-2 0v11.15l-2.22-2.78a1 1 0 1 0-1.56 1.25z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">hearingLoop</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M10.16 10.57a2.25 2.25 0 0 1 4.5 0 1 1 0 0 0 2 0 4.25 4.25 0 0 0-8.5 0 1 1 0 0 0 2 0zm1.02 2.76a1 1 0 0 0-1.41 0l-6.35 6.35a1 1 0 1 0 1.41 1.41l6.35-6.35a1 1 0 0 0 0-1.41zm11.6-11.6a1 1 0 0 0-1.41 0l-2.21 2.21a1 1 0 1 0 1.41 1.41l2.21-2.21a1 1 0 0 0 0-1.41z"></path>
                    <path class="icon__shape" d="M12.41 2.72a7.68 7.68 0 0 0-7.67 7.67 1 1 0 0 0 2 0 5.67 5.67 0 1 1 9.18 4.45l-1.53 1.24a6.47 6.47 0 0 0-1.76 4.48v.33c0 .86-.48 1.5-.92 1.5H10.4a1 1 0 1 0 0 2h1.32a3.25 3.25 0 0 0 2.92-3.5v-.33a4.67 4.67 0 0 1 1-2.95l1.5-1.22a7.67 7.67 0 0 0-4.73-13.67z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">volume</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path d="M9.3 5.73a1 1 0 0 0-1.12.4L6.46 8.71H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h2.46l1.72 2.54a1 1 0 0 0 .83.44 1 1 0 0 0 .29 0 1 1 0 0 0 .71-1v-13a1 1 0 0 0-.71-.96zM8 16.43l-.19-.29a1 1 0 0 0-.81-.43H5v-5h2a1 1 0 0 0 .83-.44L8 10zm8.55-9.48a1 1 0 1 0-1.39 1.44 6 6 0 0 1 0 8.64 1 1 0 0 0 1.38 1.45 8 8 0 0 0 0-11.53z"></path>
                    <path d="M12.49 9.22a1 1 0 1 0-.88 1.78 1.87 1.87 0 0 1 0 3.38A1 1 0 0 0 12 16.3a1 1 0 0 0 .43-.1 3.87 3.87 0 0 0 .06-7zm7.94-3.93a1 1 0 0 0-1.57 1.23 10 10 0 0 1 0 12.37 1 1 0 1 0 1.57 1.24 12 12 0 0 0 0-14.84z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">play</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M20.41 11.11L8.55 4.33a2.18 2.18 0 0 0-3.26 1.89v13.56a2.16 2.16 0 0 0 1.08 1.88 2.16 2.16 0 0 0 2.18 0l11.87-6.78a2.18 2.18 0 0 0 0-3.78zm-1 2L7.56 19.94a.17.17 0 0 1-.18 0 .17.17 0 0 1-.09-.15V6.22a.17.17 0 0 1 .09-.15h.18l11.86 6.78a.18.18 0 0 1 0 .31z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">gallery</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path d="M17.71 8H4.87a2.72 2.72 0 0 0-2.71 2.71v8.56a2.72 2.72 0 0 0 2.71 2.71h12.84a2.72 2.72 0 0 0 2.71-2.71v-8.6A2.72 2.72 0 0 0 17.71 8zm.71 11.27a.71.71 0 0 1-.71.71H4.87a.71.71 0 0 1-.71-.71v-8.6a.71.71 0 0 1 .71-.67h12.84a.71.71 0 0 1 .71.71z"></path>
                    <path d="M21.09 4.59H8.24a1 1 0 0 0 0 2h12.85a.71.71 0 0 1 .71.71v8.56a1 1 0 0 0 2 0V7.3a2.72 2.72 0 0 0-2.71-2.71z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">twitter</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M24.39 6.06a9 9 0 0 1-2.6.71 4.54 4.54 0 0 0 2-2.5 9.06 9.06 0 0 1-2.87 1.1 4.53 4.53 0 0 0-7.71 4.13 12.85 12.85 0 0 1-9.35-4.73 4.53 4.53 0 0 0 1.4 6 4.51 4.51 0 0 1-2-.57v.06a4.53 4.53 0 0 0 3.63 4.44 4.53 4.53 0 0 1-2 .08A4.53 4.53 0 0 0 9 18a9.08 9.08 0 0 1-5.62 1.94 9.18 9.18 0 0 1-1.08-.06 12.81 12.81 0 0 0 6.94 2A12.79 12.79 0 0 0 22.14 9v-.59a9.19 9.19 0 0 0 2.25-2.35z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">facebook</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M17.7 13.67h-3.64v9.74h-3.71v-9.74H7.77v-3.51h2.58v-3c0-2.35 1.52-4.52 5-4.52a21.31 21.31 0 0 1 2.47.14l-.08 3.28h-2.21c-1.26 0-1.47.58-1.47 1.55v2.56h3.81z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">instagram</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22 9.14a6.89 6.89 0 0 0-.44-2.28 4.8 4.8 0 0 0-2.75-2.75 6.89 6.89 0 0 0-2.28-.44c-1 0-1.32-.06-3.87-.06s-2.87 0-3.87.06a6.89 6.89 0 0 0-2.28.44 4.8 4.8 0 0 0-2.74 2.75 6.89 6.89 0 0 0-.44 2.28c0 1-.06 1.32-.06 3.87s0 2.87.06 3.87a6.89 6.89 0 0 0 .44 2.28 4.8 4.8 0 0 0 2.75 2.75 6.89 6.89 0 0 0 2.28.44c1 0 1.32.06 3.87.06s2.87 0 3.87-.06a6.89 6.89 0 0 0 2.28-.44 4.8 4.8 0 0 0 2.75-2.75 6.89 6.89 0 0 0 .43-2.28c0-1 .06-1.32.06-3.87S22 10.14 22 9.14zm-1.69 7.66a5.2 5.2 0 0 1-.31 1.75 3.11 3.11 0 0 1-1.78 1.78 5.19 5.19 0 0 1-1.74.32c-1 0-1.29.05-3.79.05s-2.8 0-3.79-.05a5.19 5.19 0 0 1-1.74-.32 3.11 3.11 0 0 1-1.78-1.78A5.2 5.2 0 0 1 5 16.81V13c0-2.52 0-2.8.05-3.79a5.2 5.2 0 0 1 .32-1.74 3.11 3.11 0 0 1 1.76-1.78 5.19 5.19 0 0 1 1.74-.32c1 0 1.29-.05 3.79-.05s2.8 0 3.79.05a5.19 5.19 0 0 1 1.74.32A3.11 3.11 0 0 1 20 7.48a5.2 5.2 0 0 1 .32 1.74c0 1 .05 1.29.05 3.79s-.02 2.81-.06 3.8z"></path>
                    <path class="icon__shape" d="M12.66 8.19A4.82 4.82 0 1 0 17.49 13a4.82 4.82 0 0 0-4.83-4.81zm0 8A3.13 3.13 0 1 1 15.79 13a3.13 3.13 0 0 1-3.13 3.14z"></path>
                    <circle class="icon__shape" cx="17.68" cy="8" r="1.13"></circle>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">soundcloud</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M.74 13.3c-.13 0-.24 0-.25.1l-.37 1.85L.49 17c0 .06.12.1.25.1S1 17.1 1 17l.42-1.79L1 13.39c0-.05-.13-.09-.26-.09zm5.13-3.98c-.2 0-.35.11-.36.24l-.26 5.71.26 2.73c0 .13.17.24.36.24s.35-.11.36-.24l.3-2.73-.3-5.71c-.01-.14-.17-.24-.36-.24zM3.3 10.78c-.16 0-.3.09-.31.2l-.32 4.29L3 18c0 .11.14.19.31.19s.29-.09.31-.19L4 15.26 3.61 11c-.01-.13-.15-.22-.31-.22zm5.14-1.55c-.23 0-.41.13-.41.28l-.22 5.75L8 18c0 .16.19.28.41.28s.4-.12.41-.28l.24-2.68-.22-5.81c0-.15-.18-.28-.4-.28zm14 2.63a3.4 3.4 0 0 0-1.28.25A5.75 5.75 0 0 0 15.36 7a6.07 6.07 0 0 0-2.11.38c-.25.09-.32.19-.32.38v10.11a.39.39 0 0 0 .36.38h9.15a3.2 3.2 0 1 0 0-6.39zM11 8.34c-.25 0-.45.15-.46.33l-.17 6.59.17 2.65c0 .18.21.33.46.33s.45-.15.46-.33l.19-2.65-.19-6.59c-.01-.18-.21-.33-.46-.33z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">tumblr</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M15.86 19.6a1.76 1.76 0 0 1-2-2v-5.87h3.81V8.31H13.9V3.26h-3a.15.15 0 0 0-.14.14 6.08 6.08 0 0 1-4 5.37v2.92h2.33v6.19c0 2.24 1.39 5.41 5.84 5.34 1.49 0 3.17-.64 3.52-1.17l-1-2.85a4.07 4.07 0 0 1-1.59.4z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">youtube</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <path class="icon__shape" d="M22.85 9.58A4.51 4.51 0 0 0 22 7.51a3 3 0 0 0-2.09-.88c-2.92-.21-7.29-.21-7.29-.21s-4.38 0-7.29.21a3 3 0 0 0-2.09.88 4.51 4.51 0 0 0-.83 2.07 31.52 31.52 0 0 0-.2 3.42v1.58a31.52 31.52 0 0 0 .21 3.37A4.51 4.51 0 0 0 3.25 20a3.53 3.53 0 0 0 2.3.89c1.67.16 7.09.21 7.09.21s4.38 0 7.3-.22A3 3 0 0 0 22 20a4.51 4.51 0 0 0 .83-2.07 31.57 31.57 0 0 0 .21-3.37V13a31.57 31.57 0 0 0-.19-3.42zm-12.37 6.87v-5.86l5.63 2.94z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">tripadvisor</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <circle class="icon__shape" cx="6.3" cy="14.9" r="1.05"></circle>
                    <circle class="icon__shape" cx="19.24" cy="14.88" r="1.05"></circle>
                    <path class="icon__shape" d="M6.46 11.77a3.12 3.12 0 1 0 3.12 3.13 3.12 3.12 0 0 0-3.12-3.13zm0 5.29a2.16 2.16 0 1 1 2.16-2.16 2.16 2.16 0 0 1-2.16 2.16z"></path>
                    <path class="icon__shape" d="M25.89 8.57h-4.3A15.48 15.48 0 0 0 13 6.17a16.2 16.2 0 0 0-8.83 2.4H0a6 6 0 0 1 1.29 2.57A6.43 6.43 0 0 0 11.53 19 16.21 16.21 0 0 1 13 21s.92-1.38 1.44-2a6.43 6.43 0 0 0 10.2-7.84 6 6 0 0 1 1.25-2.59zM6.53 20.09a5.18 5.18 0 1 1 5.18-5.18 5.18 5.18 0 0 1-5.18 5.18zm0-11.61A16.48 16.48 0 0 1 13 7.24a15.46 15.46 0 0 1 6.2 1.24 6.43 6.43 0 0 0-6.2 6.43 6.43 6.43 0 0 0-6.46-6.43zM19.4 20.09a5.18 5.18 0 1 1 5.18-5.18 5.18 5.18 0 0 1-5.18 5.18z"></path>
                    <path class="icon__shape" d="M19.4 11.76a3.12 3.12 0 1 0 3.12 3.12 3.12 3.12 0 0 0-3.12-3.12zm0 5.29a2.16 2.16 0 1 1 2.16-2.16A2.16 2.16 0 0 1 19.4 17z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">wellcome</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 170.1 170.1">
                    <path class="icon__shape" d="M203.1 178.9V-20.8h-37.3v9H13.4v-7.3h-32v7.3h-12.7v29h12.7v161.7h-14.7v35.3h242.7v-35.3h-6.3zM22.1 43.8l27.2-3.2 12.1 46.1 12.1-46.1H86c6.6 0 11.1 3.2 13 10 .7 2.6 5 18.5 9.6 36.1l12.1-46.1 27.3 3-22.7 86.4s-10.7-3.2-20.1-5.9c-6.9-2-10.9-5.9-12.5-11.9-1.1-4-3.9-14.3-7.6-28.4L72.9 130s-14.2-4.2-21.1-6.1c-6.7-1.8-10.2-6.3-11.9-12.9-2.8-10.2-17.8-67.2-17.8-67.2z"></path>
                </svg>
            </svg>
        </div>
    </div>
    <div class="styleguide__icon">
        <p class="styleguide__icon__id">statusIndicator</p>
        <div class="icon ">
            <canvas class="icon__canvas" height="26" width="26"></canvas>
            <svg class="icon__svg" aria-hidden="true">
                <svg viewBox="0 0 26 26">
                    <circle class="icon__shape" cx="13" cy="13" r="10"></circle>
                </svg>
            </svg>
        </div>
    </div>
</div>
// @flow

import Icon from '../../components/Icon/Icon';

type Props = {
  allIcons: Array<{|
    name: string,
    title?: string,
    extraClasses: Array<?string>,
    attrs: Array<?string>
  |}>
}

const AllIcons = ({allIcons}: Props) => (
  <div>
    {allIcons.map(icon => (
      <div key={icon.name} className='styleguide__icon'>
        <p className='styleguide__icon__id'>{icon.name}</p>
        <Icon name={icon.name} />
      </div>
    ))}
  </div>
);

export default AllIcons;
{
  "allIcons": [
    {
      "name": "arrow",
      "icons": {}
    },
    {
      "name": "audioDescribed",
      "icons": {}
    },
    {
      "name": "speechToText",
      "icons": {}
    },
    {
      "name": "britishSignLanguage",
      "icons": {}
    },
    {
      "name": "cc",
      "icons": {}
    },
    {
      "name": "ccBy",
      "icons": {}
    },
    {
      "name": "ccNc",
      "icons": {}
    },
    {
      "name": "ccNd",
      "icons": {}
    },
    {
      "name": "ccPdm",
      "icons": {}
    },
    {
      "name": "ccZero",
      "icons": {}
    },
    {
      "name": "check",
      "icons": {}
    },
    {
      "name": "chevron",
      "icons": {}
    },
    {
      "name": "clock",
      "icons": {}
    },
    {
      "name": "cross",
      "icons": {}
    },
    {
      "name": "email",
      "icons": {}
    },
    {
      "name": "image",
      "icons": {}
    },
    {
      "name": "location",
      "icons": {}
    },
    {
      "name": "plus",
      "icons": {}
    },
    {
      "name": "search",
      "icons": {}
    },
    {
      "name": "ticket",
      "icons": {}
    },
    {
      "name": "ticketAvailable",
      "icons": {}
    },
    {
      "name": "zoomIn",
      "icons": {}
    },
    {
      "name": "zoomOut",
      "icons": {}
    },
    {
      "name": "information",
      "icons": {}
    },
    {
      "name": "underConstruction",
      "icons": {}
    },
    {
      "name": "clear",
      "icons": {}
    },
    {
      "name": "download",
      "icons": {}
    },
    {
      "name": "hearingLoop",
      "icons": {}
    },
    {
      "name": "volume",
      "icons": {}
    },
    {
      "name": "play",
      "icons": {}
    },
    {
      "name": "gallery",
      "icons": {}
    },
    {
      "name": "twitter",
      "icons": {}
    },
    {
      "name": "facebook",
      "icons": {}
    },
    {
      "name": "instagram",
      "icons": {}
    },
    {
      "name": "soundcloud",
      "icons": {}
    },
    {
      "name": "tumblr",
      "icons": {}
    },
    {
      "name": "youtube",
      "icons": {}
    },
    {
      "name": "tripadvisor",
      "icons": {}
    },
    {
      "name": "wellcome",
      "icons": {}
    },
    {
      "name": "statusIndicator",
      "icons": {}
    }
  ]
}

There are no notes for this item.