How to Add SVG Brand Icons In-line

Why would you do this?

Instead of loading an image (jpg/png/svg) per platform, we can simply embed the SVGs into html. In this case, it saves from having 7 http requests and thus helps with website performance. CSS is also inline.

The example below uses official brand colors. https://brandcolors.net/ and brand SVG logos from https://simpleicons.org/

Other useful links include https://jakearchibald.github.io/svgomg/ to optimized your SVG

<style>

.follow {  
  padding: 4px 2px;  
  display: inline-block;
 }

.follow a {    
  color: white;
}

.follow svg {
  display: inline-block;
  vertical-align: middle;
  fill: white;
}

.mc-facebook, .mc-instagram, .mc-twitter, .mc-telegram, .mc-whatsapp, .mc-youtube, .mc-mailchimp
{	
	padding: 10px;
	border: 2px round;		
}


.mc-facebook{background-color: #3b5998;}
.mc-instagram{background-color: #c13584;}
.mc-twitter{background-color: #1da1f2;}
.mc-telegram{background-color: #0088cc;}
.mc-whatsapp{background-color: #25d366;}
.mc-youtube{background-color: #ff0000;}
.mc-mailchimp{background-color: #239ab9;}



</style>


<div class="follow">
<p class="mc-facebook">
<a href="https://www.facebook.com/MuslimCentral/" target="_blank" rel="noopener noreferrer">
<svg role="img" width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg> <span>Facebook</span>
</a>
</p>

<p class="mc-instagram">
<a href="https://www.instagram.com/muslimcentral/" target="_blank" rel="noopener noreferrer">
<svg role="img" width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram icon</title><path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg> <span>Instagram</span>
</a>
</p>

<p class="mc-twitter">
<a href="https://twitter.com/muslimcentral" target="_blank" rel="noopener noreferrer">
<svg role="img" width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg> <span>Twitter</span>
</a>
</p>

<p class="mc-telegram">
<a href="https://t.me/muslimcentral" target="_blank" rel="noopener noreferrer">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><title>Telegram icon</title><path d="M23.91 3.79L20.3 20.84c-.25 1.21-.98 1.5-2 .94l-5.5-4.07-2.66 2.57c-.3.3-.55.56-1.1.56-.72 0-.6-.27-.84-.95L6.3 13.7l-5.45-1.7c-1.18-.35-1.19-1.16.26-1.75l21.26-8.2c.97-.43 1.9.24 1.53 1.73z"/></svg> <span>Telegram</span>
</a>
</p>

<p class="mc-whatsapp">
<a href="https://muslimcentral.com/whatsapp" rel="noopener noreferrer">
<svg role="img" width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>WhatsApp icon</title><path d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411"/></svg> <span>WhatsApp</span>
</a>
</p>

<p class="mc-youtube">
<a href="https://www.youtube.com/c/muslimcentral?sub_confirmation=1" target="_blank" rel="noopener noreferrer">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><title>YouTube icon</title><path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg> <span>YouTube</span>
</a> 
</p>


<p class="mc-mailchimp">
<a href="https://muslimcentral.com/subscribe/" target="_blank" rel="noopener noreferrer">
<svg role="img" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><title>MailChimp icon</title><path d="M17.98 11.341c.165-.021.332-.021.497 0 .089-.205.104-.558.024-.942-.12-.571-.28-.917-.613-.863-.333.054-.346.468-.226 1.039.067.321.186.596.319.766zM15.12 11.793c.239.105.385.174.442.114.037-.038.026-.11-.03-.203-.118-.193-.36-.388-.617-.497a1.677 1.677 0 0 0-1.634.196c-.16.117-.31.28-.29.378.008.032.031.056.087.064.132.015.591-.217 1.12-.25.374-.023.684.094.922.199zm-.48.274c-.31.05-.481.152-.591.247-.094.082-.152.173-.152.237l.024.057.051.02c.07 0 .228-.064.228-.064a1.975 1.975 0 0 1 1-.104c.155.018.23.028.263-.026.01-.015.023-.049-.008-.1-.073-.118-.387-.317-.814-.266zM17.015 13.073c.21.104.442.063.518-.09.076-.155-.034-.364-.245-.467-.21-.104-.442-.063-.518.09-.076.155.034.364.245.467zm1.355-1.186c-.171-.003-.314.185-.317.421-.004.235.131.428.302.431.171.003.314-.185.318-.42.003-.235-.132-.428-.303-.432zM6.866 16.13c-.042-.053-.112-.037-.18-.021a.646.646 0 0 1-.16.022.347.347 0 0 1-.292-.148c-.078-.12-.073-.299.012-.504l.04-.092c.138-.308.368-.825.11-1.317-.194-.37-.511-.602-.892-.65a1.145 1.145 0 0 0-.983.355c-.379.418-.438.988-.364 1.19.027.073.069.094.099.098.065.009.16-.038.22-.2l.017-.052c.026-.085.076-.243.157-.37a.688.688 0 0 1 .953-.2c.266.175.368.5.255.811-.059.161-.154.468-.133.72.043.512.357.717.638.74.274.01.466-.145.514-.258.03-.066.005-.107-.01-.125v.001zM22.691 15.194c-.01-.037-.078-.286-.172-.586l-.19-.51c.375-.563.381-1.066.332-1.35-.054-.353-.2-.654-.496-.964-.295-.312-.9-.63-1.75-.868l-.445-.124c-.002-.018-.023-1.053-.043-1.497-.013-.32-.041-.822-.196-1.315-.185-.669-.507-1.253-.91-1.627 1.11-1.152 1.803-2.422 1.801-3.511-.003-2.095-2.571-2.73-5.736-1.416l-.67.285a666.1 666.1 0 0 0-1.23-1.207C9.376-2.65-1.905 9.912 1.701 12.964l.789.668a3.885 3.885 0 0 0-.22 1.793c.085.84.517 1.644 1.218 2.266.665.59 1.54.965 2.389.964 1.403 3.24 4.61 5.228 8.37 5.34 4.034.12 7.42-1.776 8.84-5.182.093-.24.486-1.317.486-2.267 0-.956-.539-1.352-.882-1.352zm-16.503 2.55a1.94 1.94 0 0 1-.374.027c-1.218-.033-2.534-1.131-2.665-2.435-.145-1.44.59-2.548 1.89-2.81a2.22 2.22 0 0 1 .547-.04c.729.04 1.803.6 2.048 2.191.217 1.408-.128 2.843-1.446 3.068zm-1.36-6.08c-.81.157-1.524.617-1.96 1.252-.261-.218-.747-.64-.833-.804-.697-1.325.76-3.902 1.778-5.357C6.33 3.159 10.268.437 12.093.931c.296.084 1.278 1.224 1.278 1.224s-1.823 1.013-3.514 2.426c-2.278 1.757-3.999 4.311-5.03 7.083zm12.787 5.542a.072.072 0 0 0 .042-.071.067.067 0 0 0-.074-.06s-1.908.283-3.711-.379c.196-.639.718-.408 1.508-.344a11.01 11.01 0 0 0 3.64-.394c.816-.235 1.888-.698 2.722-1.356.28.618.38 1.298.38 1.298s.217-.039.399.073c.171.106.297.326.211.895-.175 1.063-.626 1.926-1.384 2.72a5.698 5.698 0 0 1-1.663 1.244 7.018 7.018 0 0 1-1.085.46c-2.858.935-5.784-.093-6.727-2.3a3.582 3.582 0 0 1-.19-.522c-.401-1.455-.06-3.2 1.007-4.299.065-.07.132-.153.132-.256 0-.087-.055-.178-.102-.243-.373-.542-1.666-1.466-1.406-3.254.186-1.285 1.308-2.189 2.353-2.135l.265.015c.453.027.848.085 1.222.101.624.027 1.185-.064 1.85-.619.224-.187.404-.35.708-.401.032-.005.111-.034.27-.026a.892.892 0 0 1 .456.146c.533.355.608 1.215.636 1.845.016.36.059 1.228.074 1.478.034.57.183.65.486.75.17.057.329.099.562.164.705.199 1.123.4 1.387.659.158.161.23.333.253.497.084.608-.47 1.359-1.938 2.041-1.605.746-3.55.935-4.895.785l-.471-.053c-1.076-.145-1.689 1.247-1.044 2.201.416.615 1.55 1.015 2.683 1.015 2.6 0 4.598-1.111 5.341-2.072l.06-.085c.036-.055.006-.085-.04-.054-.607.416-3.304 2.069-6.19 1.571 0 0-.35-.057-.67-.182-.254-.099-.786-.344-.85-.891 2.328.721 3.793.039 3.793.039zm-3.688-.436l.001.001v-.002zM9.473 6.74c.895-1.036 1.996-1.936 2.982-2.441.034-.017.07.02.052.053-.079.142-.23.447-.277.677a.04.04 0 0 0 .061.042c.614-.419 1.681-.868 2.618-.925.04-.003.06.049.027.074-.154.119-.293.258-.411.413a.04.04 0 0 0 .031.064c.657.005 1.584.235 2.188.575.04.023.012.102-.034.092-.914-.21-2.41-.37-3.964.01-1.387.339-2.446.862-3.218 1.425-.04.029-.086-.023-.055-.06z"/></svg> <span>Email</span>
</a> 
</p>


</div>