Skip to content

Instantly share code, notes, and snippets.

@morgyface
Last active November 1, 2020 22:33
Show Gist options
  • Save morgyface/24c10b11c56ab81401c87cb9a4ec8daf to your computer and use it in GitHub Desktop.
Save morgyface/24c10b11c56ab81401c87cb9a4ec8daf to your computer and use it in GitHub Desktop.
Social icons at 16 pixels high
Display the source blob
Display the rendered blob
Raw
<svg class="facebook" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#1877f2" d="M16 8c0-4.4-3.6-8-8-8S0 3.6 0 8c0 4 2.9 7.3 6.8 7.9v-5.6h-2V8h2V6.2c0-2 1.2-3.1 3-3.1.9 0 1.8.2 1.8.2v2h-1c-1 0-1.3.6-1.3 1.2V8h2.2l-.4 2.3H9.2v5.6C13.1 15.3 16 12 16 8z"/>
</svg>
<svg class="twitter" xmlns="http://www.w3.org/2000/svg" width="20" height="16">
<path fill="#1da1f2" d="M6.2 16c7.4 0 11.5-6.2 11.5-11.5V4c.8-.6 1.5-1.3 2-2.1-.7.3-1.5.5-2.3.6.8-.5 1.5-1.3 1.8-2.2-.8.5-1.7.8-2.6 1-1.5-1.6-4.1-1.7-5.7-.2-1 1-1.5 2.5-1.2 3.9C6.4 4.8 3.4 3.3 1.4.7.3 2.6.8 4.9 2.6 6.1c-.6 0-1.3-.2-1.8-.5v.1c0 1.9 1.4 3.6 3.2 4-.6.1-1.2.1-1.8 0 .5 1.6 2 2.8 3.8 2.8-1.4 1.1-3.2 1.7-5 1.7-.3 0-.6 0-1-.1C1.8 15.4 4 16 6.2 16"/>
</svg>
<svg class="linkedin" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#0a66c2" d="M14.8 0H1.2C.5 0 0 .5 0 1.2v13.7c0 .6.5 1.1 1.2 1.1h13.6c.6 0 1.2-.5 1.2-1.2V1.2c0-.7-.5-1.2-1.2-1.2zM6.2 6h2.3v1c.5-.8 1.4-1.2 2.3-1.2 2.4 0 2.8 1.6 2.8 3.6v4.2h-2.4V9.9c0-.9 0-2-1.2-2s-1.4 1-1.4 2v3.8H6.2V6zM3.6 2.2c.8 0 1.4.6 1.4 1.4S4.3 5 3.6 5c-.8 0-1.4-.7-1.4-1.4 0-.8.6-1.4 1.4-1.4zM4.7 6v7.6H2.4V6h2.3z"/>
</svg>
<svg class="instagram" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path d="M8 1.4h3.2c.8 0 1.2.2 1.5.3.4.1.6.3.9.6.3.3.5.5.6.9.1.3.2.7.3 1.5v6.4c0 .8-.2 1.2-.3 1.5-.1.4-.3.6-.6.9-.3.3-.5.5-.9.6-.3.1-.7.2-1.5.3H4.8c-.8 0-1.2-.2-1.5-.3-.4-.1-.6-.3-.9-.6-.3-.3-.5-.5-.6-.9-.1-.3-.2-.7-.3-1.5V7.9 4.7c0-.8.2-1.2.3-1.5.1-.4.3-.6.6-.9.3-.3.5-.5.9-.6.3 0 .7-.2 1.5-.2.8-.1 1.1-.1 3.2-.1M8 0H4.7c-.9 0-1.4.2-1.9.4s-1 .5-1.4.9c-.5.5-.8.9-1 1.5-.2.5-.3 1.1-.4 1.9v6.6c0 .9.2 1.4.4 1.9s.5 1 .9 1.4c.4.4.9.7 1.4.9.5.2 1.1.3 1.9.4h6.6c.9 0 1.4-.2 1.9-.4s1-.5 1.4-.9c.4-.4.7-.9.9-1.4.2-.5.3-1.1.4-1.9V8 4.7c0-.9-.2-1.4-.4-1.9s-.5-1-.9-1.4c-.4-.4-.9-.7-1.4-.9-.5-.2-1.1-.3-1.9-.4-.8-.1-1-.1-3.2-.1zm0 3.9C5.7 3.9 3.9 5.7 3.9 8s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1S10.3 3.9 8 3.9zm0 6.8c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7 1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7zm4.3-7.9c-.5 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.5-1-1-1z"/>
</svg>
<svg class="youtube" xmlns="http://www.w3.org/2000/svg" width="23" height="16">
<path fill="red" d="M22.2 2.5c-.3-1-1-1.8-2-2-1.7-.5-8.8-.5-8.8-.5S4.3 0 2.5.5c-1 .3-1.7 1-2 2C0 4.3 0 8 0 8s0 3.7.5 5.5c.3 1 1 1.8 2 2 1.8.5 8.9.5 8.9.5s7.1 0 8.9-.5c1-.3 1.7-1 2-2 .5-1.8.5-5.5.5-5.5s-.1-3.7-.6-5.5zM9 11.4V4.6L15 8l-6 3.4z"/>
</svg>
<svg class="vimeo" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#1ab7ea" d="M14.4 0H1.6C.7 0 0 .7 0 1.6v12.8c0 .9.7 1.6 1.6 1.6h12.8c.9 0 1.6-.7 1.6-1.6V1.6c0-.9-.7-1.6-1.6-1.6zm-.9 5.3c-.1 1.1-.8 2.7-2.4 4.6-1.6 2-2.9 3.1-4 3.1-.7 0-1.2-.6-1.7-1.9-.3-1.1-.6-2.2-.9-3.4-.4-1.2-.7-1.9-1.1-1.9-.1 0-.4.2-.9.6l-.6-.7c.6-.5 1.1-1 1.7-1.5.8-.7 1.3-1 1.7-1 .9-.1 1.5.5 1.7 1.8.2 1.4.4 2.3.5 2.6.2 1.2.5 1.8.8 1.8.2 0 .6-.4 1.1-1.1.5-.8.7-1.3.8-1.7.1-.7-.2-1-.8-1-.3 0-.6.1-.9.2.6-1.9 1.7-2.8 3.3-2.8 1.2 0 1.7.8 1.7 2.3z"/>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment