<!-- Sunny 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>Sun</title>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24,34.7c0.7,0,1.3,0.6,1.3,1.3v2.7c0,0.7-0.6,1.3-1.3,1.3
  		s-1.3-0.6-1.3-1.3V36C22.7,35.3,23.3,34.7,24,34.7z M33.5,31.6l1.9,1.9c0.5,0.5,0.5,1.4,0,1.9s-1.4,0.5-1.9,0l-1.9-1.9
  		c-0.5-0.5-0.5-1.4,0-1.9C32.1,31.1,33,31.1,33.5,31.6z M16.6,31.6c0.5,0.5,0.5,1.4,0,1.9l-1.9,1.9c-0.5,0.5-1.4,0.5-1.9,0
  		c-0.5-0.5-0.5-1.4,0-1.9l1.9-1.9C15.2,31.1,16,31.1,16.6,31.6z M24,14.7c5.2,0,9.3,4.2,9.3,9.3s-4.2,9.3-9.3,9.3s-9.3-4.2-9.3-9.3
  		S18.8,14.7,24,14.7z M24,17.3c-3.7,0-6.7,3-6.7,6.7s3,6.7,6.7,6.7s6.7-3,6.7-6.7S27.7,17.3,24,17.3z M12,22.7
  		c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H9.3C8.6,25.3,8,24.7,8,24s0.6-1.3,1.3-1.3H12z M38.7,22.7c0.7,0,1.3,0.6,1.3,1.3
  		s-0.6,1.3-1.3,1.3H36c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3H38.7z M35.4,12.9c0.5,0.5,0.5,1.4,0,1.9l-1.9,1.9
  		c-0.5,0.5-1.4,0.5-1.9,0c-0.5-0.5-0.5-1.4,0-1.9l1.9-1.9C34,12.4,34.9,12.4,35.4,12.9z M14.7,12.9l1.9,1.9c0.5,0.5,0.5,1.4,0,1.9
  		c-0.5,0.5-1.4,0.5-1.9,0l-1.9-1.9c-0.5-0.5-0.5-1.4,0-1.9C13.3,12.4,14.1,12.4,14.7,12.9z M24,8c0.7,0,1.3,0.6,1.3,1.3V12
  		c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3V9.3C22.7,8.6,23.3,8,24,8z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Sunny 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>Sun</title>
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24,34.7c0.7,0,1.3,0.6,1.3,1.3v2.7
    		c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3V36C22.7,35.3,23.3,34.7,24,34.7z M33.5,31.6l1.9,1.9c0.5,0.5,0.5,1.4,0,1.9
    		s-1.4,0.5-1.9,0l-1.9-1.9c-0.5-0.5-0.5-1.4,0-1.9C32.1,31.1,33,31.1,33.5,31.6z M16.6,31.6c0.5,0.5,0.5,1.4,0,1.9l-1.9,1.9
    		c-0.5,0.5-1.4,0.5-1.9,0c-0.5-0.5-0.5-1.4,0-1.9l1.9-1.9C15.2,31.1,16,31.1,16.6,31.6z M24,14.7c5.2,0,9.3,4.2,9.3,9.3
    		s-4.2,9.3-9.3,9.3s-9.3-4.2-9.3-9.3S18.8,14.7,24,14.7z M24,17.3c-3.7,0-6.7,3-6.7,6.7s3,6.7,6.7,6.7s6.7-3,6.7-6.7
    		S27.7,17.3,24,17.3z M12,22.7c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H9.3C8.6,25.3,8,24.7,8,24s0.6-1.3,1.3-1.3H12z M38.7,22.7
    		c0.7,0,1.3,0.6,1.3,1.3s-0.6,1.3-1.3,1.3H36c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3H38.7z M35.4,12.9c0.5,0.5,0.5,1.4,0,1.9
    		l-1.9,1.9c-0.5,0.5-1.4,0.5-1.9,0c-0.5-0.5-0.5-1.4,0-1.9l1.9-1.9C34,12.4,34.9,12.4,35.4,12.9z M14.7,12.9l1.9,1.9
    		c0.5,0.5,0.5,1.4,0,1.9c-0.5,0.5-1.4,0.5-1.9,0l-1.9-1.9c-0.5-0.5-0.5-1.4,0-1.9C13.3,12.4,14.1,12.4,14.7,12.9z M24,8
    		c0.7,0,1.3,0.6,1.3,1.3V12c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3V9.3C22.7,8.6,23.3,8,24,8z" />
        </g>
    </svg>
</div>
  • Handle: @weather-svg--sunny
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/03-weather-icons/weather-svg--sunny.hbs