<!-- Facebook 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>Facebook</title>
    <style type="text/css">
        .facebook--black {
            fill-rule: evenodd;
            clip-rule: evenodd;
        }
    </style>
    <g>
        <path class="facebook--black" d="M30.1,40V27.6h4.2l0.6-4.8h-4.8v-3.1c0-1.4,0.4-2.4,2.4-2.4l2.6,0V13c-0.4-0.1-2-0.2-3.7-0.2
		c-3.7,0-6.2,2.3-6.2,6.4v3.6h-4.2v4.8h4.2V40H30.1z M9.8,40c-1,0-1.8-0.8-1.8-1.8V9.8C8,8.8,8.8,8,9.8,8h28.5c1,0,1.8,0.8,1.8,1.8
		v28.5c0,1-0.8,1.8-1.8,1.8H9.8z" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Facebook 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>Facebook</title>
        <style type="text/css">
            .facebook--white {
                fill-rule: evenodd;
                clip-rule: evenodd;
                fill: #fff;
            }
        </style>
        <g>
            <path class="facebook--white" d="M30.1,40V27.6h4.2l0.6-4.8h-4.8v-3.1c0-1.4,0.4-2.4,2.4-2.4l2.6,0V13c-0.4-0.1-2-0.2-3.7-0.2
  		c-3.7,0-6.2,2.3-6.2,6.4v3.6h-4.2v4.8h4.2V40H30.1z M9.8,40c-1,0-1.8-0.8-1.8-1.8V9.8C8,8.8,8.8,8,9.8,8h28.5c1,0,1.8,0.8,1.8,1.8
  		v28.5c0,1-0.8,1.8-1.8,1.8H9.8z" />
        </g>
    </svg>
</div>

<!-- Facebook Color -->
<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>Facebook</title>
    <style type="text/css">
        .facebook--brand {
            fill-rule: evenodd;
            clip-rule: evenodd;
            fill: #3D5A98;
        }
    </style>
    <g>
        <path class="facebook--brand" d="M30.1,40V27.6h4.2l0.6-4.8h-4.8v-3.1c0-1.4,0.4-2.4,2.4-2.4l2.6,0V13c-0.4-0.1-2-0.2-3.7-0.2
    c-3.7,0-6.2,2.3-6.2,6.4v3.6h-4.2v4.8h4.2V40H30.1z M9.8,40c-1,0-1.8-0.8-1.8-1.8V9.8C8,8.8,8.8,8,9.8,8h28.5c1,0,1.8,0.8,1.8,1.8
    v28.5c0,1-0.8,1.8-1.8,1.8H9.8z" />
    </g>
</svg>
  • Handle: @social-svg--facebook
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/02-social-icons/social-svg--facebook.hbs