Denotive Icons SVG: Clear

<!-- Clear Grey-60-->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Clear</title>
    <style type="text/css">
        .clear--grey60 {
            fill: #666666;
        }
    </style>
    <path class="clear--grey60" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
</svg>

<!-- Clear Black-->
<svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
    <title>Clear</title>
    <style type="text/css">
        .clear--black {
            fill: #000;
        }
    </style>
    <path class="clear--black" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Clear White-->
    <svg width="48px" height="48px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
        <title>Clear</title>
        <style type="text/css">
            .clear--white {
                fill: #fff;
            }
        </style>
        <path class="clear--white" d="M24,4c11,0,20,9,20,20s-9,20-20,20S4,35,4,24S13,4,24,4z M31.1,14.1L24,21.2l-7.1-7.1l-2.8,2.8l7.1,7.1
  	l-7.1,7.1l2.8,2.8l7.1-7.1l7.1,7.1l2.8-2.8L26.8,24l7.1-7.1L31.1,14.1L31.1,14.1z" />
    </svg>
</div>