Skip to content

Instantly share code, notes, and snippets.

@morgyface

morgyface/social_icons_20.html

Last active November 30, 2025 11:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save morgyface/7b1a0bf78189a6195eb8f7e10e08a5f7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save morgyface/7b1a0bf78189a6195eb8f7e10e08a5f7 to your computer and use it in GitHub Desktop.
Download ZIP
Social icons at 20 pixels high
Raw
social_icons_20.html
<div class="social">
<svg class="facebook" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#1877f2" d="M20 10c0-5.5-4.5-10-10-10S0 4.5 0 10c0 5 3.7 9.1 8.4 9.9v-7H5.9V10h2.5V7.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V10h2.8l-.4 2.9h-2.3v7C16.3 19.1 20 15 20 10z" />
</svg>
<svg class="linkedin" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#0a66c2" d="M18.5 0h-17C.7 0 0 .6 0 1.4v17.1c0 .9.7 1.5 1.5 1.5h17c.8 0 1.5-.6 1.5-1.4V1.4c0-.8-.7-1.4-1.5-1.4zM7.8 7.5h2.8v1.3c.6-1 1.7-1.6 2.8-1.5 3 0 3.6 2 3.6 4.5V17h-3v-4.6c0-1.1 0-2.5-1.5-2.5s-1.8 1.2-1.8 2.5V17h-3V7.5zM4.4 2.8c.9 0 1.7.8 1.7 1.7s-.7 1.7-1.7 1.7c-.9 0-1.7-.8-1.7-1.7 0-1 .8-1.7 1.7-1.7zm1.5 4.7V17H3V7.5h2.9z" />
</svg>
<svg class="instagram" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path d="M10 1.8c2.7 0 3 0 4 .1 1 0 1.5.2 1.9.3.5.2.8.4 1.1.8.3.3.6.7.7 1.1.2.4.4.9.4 1.9 0 1.1.1 1.4.1 4s0 3-.1 4c0 1-.2 1.5-.3 1.9-.2.5-.4.8-.7 1.1-.3.3-.7.6-1.1.7-.4.1-.9.3-1.9.3-1.1 0-1.4.1-4 .1s-3 0-4-.1c-1 0-1.5-.2-1.9-.3-.6-.1-.9-.3-1.2-.7-.3-.3-.6-.7-.7-1.1-.2-.4-.4-.9-.4-1.9 0-1.1-.1-1.4-.1-4s0-3 .1-4c0-1 .2-1.5.3-1.9.2-.5.4-.8.8-1.1.3-.3.7-.6 1.1-.7.4-.2.9-.4 1.9-.4 1-.1 1.3-.1 4-.1M10 0C7.3 0 6.9 0 5.9.1 4.8.1 4.1.3 3.5.6c-.7.2-1.3.5-1.8 1.1-.6.5-.9 1.1-1.2 1.7-.2.7-.4 1.4-.4 2.5C0 6.9 0 7.3 0 10c0 2.7 0 3.1.1 4.1 0 1.1.2 1.8.5 2.4.3.7.6 1.2 1.2 1.8.6.6 1.1.9 1.8 1.2.6.2 1.4.4 2.4.5h4c2.7 0 3.1 0 4.1-.1 1.1 0 1.8-.2 2.4-.5.7-.3 1.2-.6 1.8-1.2.6-.6.9-1.1 1.2-1.8.2-.6.4-1.4.5-2.4 0-1.1.1-1.4.1-4.1s0-3.1-.1-4.1c0-1.1-.2-1.8-.5-2.4-.3-.7-.6-1.2-1.2-1.8-.6-.6-1.1-.9-1.8-1.2-.6-.2-1.4-.4-2.4-.5-1 .1-1.4.1-4.1.1zm0 4.9c-2.8 0-5.1 2.3-5.1 5.1s2.3 5.1 5.1 5.1 5.1-2.3 5.1-5.1-2.3-5.1-5.1-5.1zm0 8.4c-1.8 0-3.3-1.5-3.3-3.3 0-1.8 1.5-3.3 3.3-3.3 1.8 0 3.3 1.5 3.3 3.3 0 1.8-1.5 3.3-3.3 3.3zm5.3-9.8c-.7 0-1.2.5-1.2 1.2s.5 1.2 1.2 1.2 1.2-.5 1.2-1.2-.5-1.2-1.2-1.2z"/>
</svg>
<svg class="twitter" xmlns="http://www.w3.org/2000/svg" width="25" height="20">
<path fill="#1da1f2" d="M7.7 20c9.3 0 14.4-7.7 14.4-14.4v-.7c1-.7 1.8-1.6 2.5-2.6-.9.4-1.9.7-2.9.8 1.1-.6 1.8-1.6 2.2-2.8-1 .6-2.1 1-3.2 1.2-1.9-2-5.1-2.1-7.1-.2-1.3 1.2-1.9 3.1-1.5 4.8-4-.1-7.8-2-10.4-5.2-1.3 2.3-.6 5.3 1.6 6.8-.8-.1-1.6-.3-2.3-.7v.1c0 2.4 1.7 4.5 4.1 5-.7.2-1.5.2-2.3.1.7 2.1 2.6 3.5 4.7 3.5-1.8 1.4-4 2.2-6.3 2.2-.4 0-.8 0-1.2-.1C2.3 19.2 5 20 7.7 20" />
</svg>
<svg class="youtube" xmlns="http://www.w3.org/2000/svg" width="29" height="20">
<path fill="red" d="M27.8 3.1C27.5 1.9 26.5.9 25.3.6 23.1 0 14.2 0 14.2 0S5.3 0 3.1.6C1.9.9.9 1.9.6 3.1 0 5.4 0 10 0 10s0 4.6.6 6.9c.3 1.2 1.3 2.2 2.5 2.5 2.2.6 11.1.6 11.1.6s8.9 0 11.1-.6c1.2-.3 2.2-1.3 2.5-2.5.6-2.2.6-6.9.6-6.9s0-4.6-.6-6.9zM11.3 14.2V5.8l7.4 4.2-7.4 4.2z"/>
</svg>
<svg class="vimeo" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
<path fill="#1ab7ea" d="M18 0H2C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zm-1.2 6.6c-.1 1.4-1 3.3-2.9 5.8-2 2.6-3.6 3.8-5 3.8-.8 0-1.6-.8-2.1-2.3-.4-1.4-.8-2.8-1.2-4.3-.4-1.5-.9-2.3-1.4-2.3-.1 0-.5.2-1.1.7l-.7-.9c.7-.6 1.4-1.3 2.1-1.9 1-.8 1.7-1.3 2.1-1.3 1.1-.1 1.8.7 2.1 2.3.3 1.8.5 2.9.6 3.4.3 1.5.7 2.2 1.1 2.2.3 0 .8-.5 1.4-1.4.6-1 .9-1.7 1-2.2.1-.8-.2-1.2-1-1.2-.3 0-.7.1-1.1.2.7-2.3 2.1-3.5 4.1-3.4 1.4 0 2.1 1 2 2.8z"/>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment