<!-- Foggy 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" enable-background="new 0 0 48 48" xml:space="preserve">
    <title>Fog</title>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M0,32.5c0-0.4,0.2-1,0.4-1.2S1.2,31,1.5,31h36.2c0.4,0,1,0.2,1.2,0.4
  		c0.2,0.2,0.6,0.8,0.6,1.2s-0.2,0.8-0.4,1.2c-0.4,0.4-0.8,0.4-1.2,0.4H1.7c-0.4,0-1-0.2-1.2-0.4C0.2,33.5,0,33.1,0,32.5z M5,26.5
  		c0-0.4,0.2-0.8,0.6-1.2C6,25.2,6.2,25,6.8,25H43c0.4,0,0.8,0.2,1.2,0.4s0.4,0.8,0.4,1.2s-0.2,0.8-0.4,1.2c-0.4,0.4-0.8,0.4-1.2,0.4
  		H6.8c-0.4,0-0.8-0.2-1.2-0.4C5.2,27.3,5,26.9,5,26.5z M5.4,21.9c0,0.2,0.2,0.2,0.4,0.2h2.7c0.2,0,0.2-0.2,0.4-0.4
  		c0.4-1,1.2-1.7,2.1-2.5c1-0.6,1.9-1,3.1-1.2l1.2-0.2c0.2,0,0.4-0.2,0.4-0.4l0.2-1c0.2-2.1,1.2-3.9,2.7-5.2c1.5-1.4,3.5-2.1,5.4-2.1
  		c2.1,0,3.9,0.8,5.4,2.1c1.5,1.4,2.5,3.1,2.7,5.2l0.2,1.2c0,0.2,0.2,0.4,0.4,0.4h3.1c1.2,0,2.3,0.4,3.5,1c1.2,0.6,1.7,1.5,2.3,2.7
  		c0.2,0.2,0.2,0.4,0.4,0.4h2.7c0.2,0,0.4-0.2,0.2-0.4c-0.6-1.9-1.7-3.7-3.3-4.8c-1.7-1.2-3.7-1.9-5.8-1.9h-0.6
  		c-0.6-2.5-1.9-4.6-4.1-6.4S26.7,6,24.2,6c-2.7,0-5,0.8-7.2,2.5s-3.5,3.9-4.1,6.6c-1.7,0.4-3.1,1.2-4.3,2.3
  		C7.5,18.6,5.8,20.1,5.4,21.9L5.4,21.9C5.4,21.7,5.4,21.9,5.4,21.9z M8.5,38.5c0-0.4,0.2-0.8,0.6-1.2c0.4-0.2,0.6-0.4,1.2-0.4h36.2
  		c0.4,0,0.8,0.2,1.2,0.4c0.4,0.4,0.4,0.8,0.4,1.2s-0.2,0.8-0.4,1.2c-0.2,0.4-0.8,0.6-1.4,0.6H10.1c-0.4,0-0.8-0.2-1.2-0.6
  		C8.7,39.3,8.5,38.9,8.5,38.5z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Foggy 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" enable-background="new 0 0 48 48" xml:space="preserve">
        <title>Fog</title>
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M0,32.5c0-0.4,0.2-1,0.4-1.2S1.2,31,1.5,31h36.2
    		c0.4,0,1,0.2,1.2,0.4c0.2,0.2,0.6,0.8,0.6,1.2s-0.2,0.8-0.4,1.2c-0.4,0.4-0.8,0.4-1.2,0.4H1.7c-0.4,0-1-0.2-1.2-0.4
    		C0.2,33.5,0,33.1,0,32.5z M5,26.5c0-0.4,0.2-0.8,0.6-1.2C6,25.2,6.2,25,6.8,25H43c0.4,0,0.8,0.2,1.2,0.4s0.4,0.8,0.4,1.2
    		s-0.2,0.8-0.4,1.2c-0.4,0.4-0.8,0.4-1.2,0.4H6.8c-0.4,0-0.8-0.2-1.2-0.4C5.2,27.3,5,26.9,5,26.5z M5.4,21.9c0,0.2,0.2,0.2,0.4,0.2
    		h2.7c0.2,0,0.2-0.2,0.4-0.4c0.4-1,1.2-1.7,2.1-2.5c1-0.6,1.9-1,3.1-1.2l1.2-0.2c0.2,0,0.4-0.2,0.4-0.4l0.2-1
    		c0.2-2.1,1.2-3.9,2.7-5.2c1.5-1.4,3.5-2.1,5.4-2.1c2.1,0,3.9,0.8,5.4,2.1c1.5,1.4,2.5,3.1,2.7,5.2l0.2,1.2c0,0.2,0.2,0.4,0.4,0.4
    		h3.1c1.2,0,2.3,0.4,3.5,1c1.2,0.6,1.7,1.5,2.3,2.7c0.2,0.2,0.2,0.4,0.4,0.4h2.7c0.2,0,0.4-0.2,0.2-0.4c-0.6-1.9-1.7-3.7-3.3-4.8
    		c-1.7-1.2-3.7-1.9-5.8-1.9h-0.6c-0.6-2.5-1.9-4.6-4.1-6.4S26.7,6,24.2,6c-2.7,0-5,0.8-7.2,2.5s-3.5,3.9-4.1,6.6
    		c-1.7,0.4-3.1,1.2-4.3,2.3C7.5,18.6,5.8,20.1,5.4,21.9L5.4,21.9C5.4,21.7,5.4,21.9,5.4,21.9z M8.5,38.5c0-0.4,0.2-0.8,0.6-1.2
    		c0.4-0.2,0.6-0.4,1.2-0.4h36.2c0.4,0,0.8,0.2,1.2,0.4c0.4,0.4,0.4,0.8,0.4,1.2s-0.2,0.8-0.4,1.2c-0.2,0.4-0.8,0.6-1.4,0.6H10.1
    		c-0.4,0-0.8-0.2-1.2-0.6C8.7,39.3,8.5,38.9,8.5,38.5z" />
        </g>
    </svg>
</div>
  • Handle: @weather-svg--foggy
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/03-weather-icons/weather-svg--foggy.hbs