UCLA Component Library

Social Icons SVG: Snapchat 

<!-- Snapchat 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>Snapchat</title>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M24.2,37.9c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0
		c-1.9,0-3-0.8-4.2-1.7c-0.8-0.6-1.5-1.1-2.4-1.2c-0.4-0.1-0.9-0.1-1.3-0.1c-0.7,0-1.3,0.1-1.8,0.2c-0.3,0.1-0.5,0.1-0.7,0.1
		c-0.2,0-0.4,0-0.5-0.3c-0.1-0.3-0.1-0.5-0.2-0.7c-0.1-0.6-0.2-1-0.5-1c-2.9-0.5-3.8-1.1-4-1.5c0-0.1,0-0.1,0-0.2
		c0-0.2,0.1-0.3,0.3-0.3c4.5-0.7,6.6-5.4,6.6-5.6c0,0,0,0,0,0c0.3-0.6,0.3-1.1,0.2-1.5c-0.3-0.7-1.3-1.1-2-1.3
		c-0.2-0.1-0.3-0.1-0.4-0.2c-1.3-0.5-1.4-1.1-1.4-1.4c0.1-0.5,0.7-0.8,1.2-0.8c0.1,0,0.3,0,0.4,0.1c0.6,0.3,1.1,0.4,1.6,0.4
		c0.6,0,0.9-0.3,1-0.3c0-0.3,0-0.6-0.1-1c-0.1-2.1-0.3-4.8,0.4-6.3c2-4.6,6.3-4.9,7.6-4.9c0,0,0.6,0,0.6,0l0.1,0
		c1.3,0,5.6,0.4,7.6,4.9c0.7,1.5,0.5,4.2,0.4,6.3l0,0.1c0,0.3,0,0.6-0.1,0.9c0,0,0.3,0.3,0.9,0.3h0c0.4,0,1-0.2,1.5-0.4
		c0.2-0.1,0.3-0.1,0.5-0.1c0.2,0,0.4,0,0.5,0.1l0,0c0.5,0.2,0.8,0.5,0.8,0.8c0,0.3-0.2,0.8-1.4,1.3c-0.1,0-0.3,0.1-0.4,0.2
		c-0.7,0.2-1.7,0.5-2,1.3c-0.2,0.4-0.1,0.9,0.2,1.5c0,0,0,0,0,0c0.1,0.2,2.1,4.8,6.6,5.6c0.2,0,0.3,0.2,0.3,0.3c0,0.1,0,0.1,0,0.2
		c-0.2,0.4-1,1.1-4,1.5c-0.2,0-0.3,0.4-0.5,1c-0.1,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.2,0.3-0.4,0.3h0c-0.2,0-0.4,0-0.7-0.1
		c-0.5-0.1-1.1-0.2-1.8-0.2c-0.4,0-0.8,0-1.3,0.1c-0.9,0.1-1.6,0.7-2.4,1.2C27.2,37,26.1,37.9,24.2,37.9" />
    </g>
</svg>

<div style="background: #2774AE; display: inline-block;">
    <!-- Snapchat 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>Snapchat</title>
        <g>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24.2,37.9c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0
  		c-1.9,0-3-0.8-4.2-1.7c-0.8-0.6-1.5-1.1-2.4-1.2c-0.4-0.1-0.9-0.1-1.3-0.1c-0.7,0-1.3,0.1-1.8,0.2c-0.3,0.1-0.5,0.1-0.7,0.1
  		c-0.2,0-0.4,0-0.5-0.3c-0.1-0.3-0.1-0.5-0.2-0.7c-0.1-0.6-0.2-1-0.5-1c-2.9-0.5-3.8-1.1-4-1.5c0-0.1,0-0.1,0-0.2
  		c0-0.2,0.1-0.3,0.3-0.3c4.5-0.7,6.6-5.4,6.6-5.6c0,0,0,0,0,0c0.3-0.6,0.3-1.1,0.2-1.5c-0.3-0.7-1.3-1.1-2-1.3
  		c-0.2-0.1-0.3-0.1-0.4-0.2c-1.3-0.5-1.4-1.1-1.4-1.4c0.1-0.5,0.7-0.8,1.2-0.8c0.1,0,0.3,0,0.4,0.1c0.6,0.3,1.1,0.4,1.6,0.4
  		c0.6,0,0.9-0.3,1-0.3c0-0.3,0-0.6-0.1-1c-0.1-2.1-0.3-4.8,0.4-6.3c2-4.6,6.3-4.9,7.6-4.9c0,0,0.6,0,0.6,0l0.1,0
  		c1.3,0,5.6,0.4,7.6,4.9c0.7,1.5,0.5,4.2,0.4,6.3l0,0.1c0,0.3,0,0.6-0.1,0.9c0,0,0.3,0.3,0.9,0.3h0c0.4,0,1-0.2,1.5-0.4
  		c0.2-0.1,0.3-0.1,0.5-0.1c0.2,0,0.4,0,0.5,0.1l0,0c0.5,0.2,0.8,0.5,0.8,0.8c0,0.3-0.2,0.8-1.4,1.3c-0.1,0-0.3,0.1-0.4,0.2
  		c-0.7,0.2-1.7,0.5-2,1.3c-0.2,0.4-0.1,0.9,0.2,1.5c0,0,0,0,0,0c0.1,0.2,2.1,4.8,6.6,5.6c0.2,0,0.3,0.2,0.3,0.3c0,0.1,0,0.1,0,0.2
  		c-0.2,0.4-1,1.1-4,1.5c-0.2,0-0.3,0.4-0.5,1c-0.1,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.2,0.3-0.4,0.3h0c-0.2,0-0.4,0-0.7-0.1
  		c-0.5-0.1-1.1-0.2-1.8-0.2c-0.4,0-0.8,0-1.3,0.1c-0.9,0.1-1.6,0.7-2.4,1.2C27.2,37,26.1,37.9,24.2,37.9" />
        </g>
    </svg>
</div>

<!-- Snapchat 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" enable-background="new 0 0 48 48" xml:space="preserve">
    <title>Snapchat</title>
    <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M24.2,37.9c-0.1,0-0.2,0-0.2,0c-0.1,0-0.1,0-0.2,0
  		c-1.9,0-3-0.8-4.2-1.7c-0.8-0.6-1.5-1.1-2.4-1.2c-0.4-0.1-0.9-0.1-1.3-0.1c-0.7,0-1.3,0.1-1.8,0.2c-0.3,0.1-0.5,0.1-0.7,0.1
  		c-0.2,0-0.4,0-0.5-0.3c-0.1-0.3-0.1-0.5-0.2-0.7c-0.1-0.6-0.2-1-0.5-1c-2.9-0.5-3.8-1.1-4-1.5c0-0.1,0-0.1,0-0.2
  		c0-0.2,0.1-0.3,0.3-0.3c4.5-0.7,6.6-5.4,6.6-5.6c0,0,0,0,0,0c0.3-0.6,0.3-1.1,0.2-1.5c-0.3-0.7-1.3-1.1-2-1.3
  		c-0.2-0.1-0.3-0.1-0.4-0.2c-1.3-0.5-1.4-1.1-1.4-1.4c0.1-0.5,0.7-0.8,1.2-0.8c0.1,0,0.3,0,0.4,0.1c0.6,0.3,1.1,0.4,1.6,0.4
  		c0.6,0,0.9-0.3,1-0.3c0-0.3,0-0.6-0.1-1c-0.1-2.1-0.3-4.8,0.4-6.3c2-4.6,6.3-4.9,7.6-4.9c0,0,0.6,0,0.6,0l0.1,0
  		c1.3,0,5.6,0.4,7.6,4.9c0.7,1.5,0.5,4.2,0.4,6.3l0,0.1c0,0.3,0,0.6-0.1,0.9c0,0,0.3,0.3,0.9,0.3h0c0.4,0,1-0.2,1.5-0.4
  		c0.2-0.1,0.3-0.1,0.5-0.1c0.2,0,0.4,0,0.5,0.1l0,0c0.5,0.2,0.8,0.5,0.8,0.8c0,0.3-0.2,0.8-1.4,1.3c-0.1,0-0.3,0.1-0.4,0.2
  		c-0.7,0.2-1.7,0.5-2,1.3c-0.2,0.4-0.1,0.9,0.2,1.5c0,0,0,0,0,0c0.1,0.2,2.1,4.8,6.6,5.6c0.2,0,0.3,0.2,0.3,0.3c0,0.1,0,0.1,0,0.2
  		c-0.2,0.4-1,1.1-4,1.5c-0.2,0-0.3,0.4-0.5,1c-0.1,0.2-0.1,0.5-0.2,0.7c-0.1,0.2-0.2,0.3-0.4,0.3h0c-0.2,0-0.4,0-0.7-0.1
  		c-0.5-0.1-1.1-0.2-1.8-0.2c-0.4,0-0.8,0-1.3,0.1c-0.9,0.1-1.6,0.7-2.4,1.2C27.2,37,26.1,37.9,24.2,37.9" />
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#030303" d="M24.3,8L24.3,8C24.3,8,24.3,8,24.3,8
  		c-0.1,0-0.6,0-0.6,0c-1.3,0-5.8,0.4-7.9,5.1c-0.7,1.6-0.5,4.3-0.4,6.5c0,0.3,0,0.5,0,0.8c-0.1,0.1-0.3,0.1-0.6,0.1
  		c-0.4,0-0.9-0.1-1.5-0.4C13.2,20.1,13,20,12.8,20c-0.7,0-1.4,0.4-1.6,1.1c-0.1,0.5,0.1,1.1,1.6,1.7c0.1,0.1,0.3,0.1,0.5,0.2
  		c0.6,0.2,1.5,0.5,1.8,1.1c0.1,0.3,0.1,0.7-0.2,1.2c0,0,0,0,0,0c-0.1,0.2-2,4.7-6.4,5.4C8.2,30.7,8,31,8,31.4c0,0.1,0,0.2,0.1,0.3
  		c0.3,0.8,1.7,1.3,4.2,1.7c0.1,0.1,0.2,0.5,0.2,0.8c0.1,0.2,0.1,0.5,0.2,0.8c0.1,0.3,0.3,0.6,0.8,0.6c0.2,0,0.4,0,0.7-0.1
  		c0.4-0.1,1-0.2,1.7-0.2c0.4,0,0.8,0,1.2,0.1c0.8,0.1,1.5,0.6,2.3,1.2c1.1,0.8,2.4,1.7,4.4,1.7c0.1,0,0.1,0,0.2,0c0.1,0,0.1,0,0.2,0
  		c2,0,3.3-0.9,4.4-1.7c0.8-0.6,1.5-1.1,2.3-1.2c0.4-0.1,0.8-0.1,1.2-0.1c0.7,0,1.2,0.1,1.7,0.2c0.3,0.1,0.5,0.1,0.7,0.1l0,0h0
  		c0.4,0,0.6-0.2,0.7-0.6c0.1-0.3,0.1-0.5,0.2-0.7c0.1-0.2,0.1-0.6,0.2-0.8c2.5-0.4,3.9-1,4.2-1.7c0-0.1,0.1-0.2,0.1-0.3
  		c0-0.3-0.2-0.6-0.6-0.7c-4.4-0.7-6.3-5.2-6.4-5.4c0,0,0,0,0,0c-0.2-0.5-0.3-0.9-0.2-1.2c0.3-0.6,1.2-0.9,1.8-1.1
  		c0.2-0.1,0.3-0.1,0.5-0.2c1.1-0.4,1.6-1,1.6-1.6c0-0.5-0.4-0.9-1-1.1l0,0c-0.2-0.1-0.4-0.1-0.7-0.1c-0.2,0-0.4,0-0.6,0.1
  		c-0.5,0.2-1,0.4-1.4,0.4c-0.3,0-0.4-0.1-0.5-0.1c0-0.2,0-0.4,0-0.7l0-0.1c0.1-2.2,0.3-4.9-0.4-6.5C30.1,8.4,25.6,8,24.3,8
  		 M24.3,8.7c1.2,0,5.4,0.3,7.3,4.7c0.6,1.4,0.5,4.1,0.3,6.2c0,0.3,0,0.7-0.1,1l0,0.1l0.1,0.1c0,0,0.4,0.4,1.1,0.4l0,0l0,0
  		c0.5,0,1-0.2,1.6-0.5c0.1,0,0.2-0.1,0.3-0.1c0.1,0,0.3,0,0.4,0.1l0,0c0.3,0.1,0.5,0.3,0.5,0.5c0,0.1-0.1,0.5-1.2,0.9
  		c-0.1,0-0.3,0.1-0.4,0.1c-0.7,0.2-1.8,0.6-2.2,1.5c-0.2,0.5-0.2,1.1,0.2,1.7c0.1,0.3,2.2,5,6.9,5.8c0,0,0,0,0,0.1
  		c-0.1,0.2-0.6,0.8-3.7,1.3c-0.5,0.1-0.6,0.6-0.8,1.3c0,0.2-0.1,0.5-0.2,0.7c0,0.1,0,0.1-0.1,0.1h0c-0.1,0-0.4,0-0.6-0.1
  		c-0.4-0.1-1.1-0.2-1.8-0.2c-0.4,0-0.9,0-1.3,0.1c-1,0.2-1.7,0.7-2.6,1.3c-1.1,0.8-2.3,1.6-4,1.6c-0.1,0-0.2,0-0.2,0l0,0l0,0
  		c0,0-0.1,0-0.1,0c-1.8,0-2.9-0.8-4-1.6c-0.8-0.6-1.6-1.1-2.6-1.3c-0.4-0.1-0.9-0.1-1.3-0.1c-0.8,0-1.4,0.1-1.8,0.2
  		c-0.2,0-0.5,0.1-0.6,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.2-0.1-0.5-0.2-0.7c-0.1-0.6-0.3-1.2-0.8-1.3c-3.1-0.5-3.6-1.1-3.7-1.3
  		c0,0,0-0.1,0-0.1c4.7-0.8,6.8-5.5,6.9-5.8c0.3-0.7,0.4-1.2,0.2-1.7c-0.4-0.9-1.5-1.2-2.2-1.5c-0.2-0.1-0.3-0.1-0.4-0.1
  		c-0.9-0.4-1.2-0.8-1.2-1c0.1-0.3,0.5-0.5,0.9-0.5c0.1,0,0.2,0,0.2,0c0.6,0.3,1.2,0.5,1.8,0.5c0.8,0,1.2-0.4,1.2-0.4l0.1-0.1l0-0.1
  		c0-0.3,0-0.6-0.1-1c-0.1-2.1-0.3-4.7,0.3-6.2c1.9-4.4,6.1-4.7,7.3-4.7C23.7,8.7,24.2,8.7,24.3,8.7C24.3,8.7,24.3,8.7,24.3,8.7" />
    </g>
</svg>
  • Handle: @social-svg--snapchat
  • Preview:
  • Filesystem Path: src/components/02-utilities/04-icons/02-social-icons/social-svg--snapchat.hbs