<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #cbd2d6 }
.icon { width: 20px; height: 20px }
.icon .foreground, .icon .background { transition: fill .2s ease-in }
/* .colors-on-hover */
.colors-on-hover .icon-twitter .foreground { fill: grey }
.colors-on-hover .icon-twitter:hover .foreground { fill: #2aa9e0 }
.colors-on-hover .icon-facebook .background { fill: grey }
.colors-on-hover .icon-facebook .foreground { fill: transparent }
.colors-on-hover .icon-facebook:hover .background { fill: #3b5999 }
.colors-on-hover .icon-facebook:hover .foreground { fill: white }
.colors-on-hover .icon-googleplus .background { fill: grey }
.colors-on-hover .icon-googleplus .foreground { fill: transparent }
.colors-on-hover .icon-googleplus:hover .background { fill: #dd4b39 }
.colors-on-hover .icon-googleplus:hover .foreground { fill: white }
.colors-on-hover .icon-linkedin .background { fill: grey }
.colors-on-hover .icon-linkedin .foreground { fill: transparent }
.colors-on-hover .icon-linkedin:hover .background { fill: #0077b5 }
.colors-on-hover .icon-linkedin:hover .foreground { fill: white }
.colors-on-hover .icon-rss .background { fill: grey }
.colors-on-hover .icon-rss .foreground { fill: transparent }
.colors-on-hover .icon-rss:hover .background { fill: #f28c36 }
.colors-on-hover .icon-rss:hover .foreground { fill: white }
.colors-on-hover .icon-envelope:hover .foreground { fill: #fdf5e8 }
/* .shapes-only */
.shapes-only .icon .background { fill: transparent }
.shapes-only .icon .foreground { fill: black }
</style>
</head>
<body>
<div>
<img src="twitter.svg">
<img src="facebook.svg">
<img src="googleplus.svg">
<img src="linkedin.svg">
<img src="rss.svg">
<img src="envelope.svg">
</div>
<div class="colors-on-hover">
<img src="twitter.svg">
<img src="facebook.svg">
<img src="googleplus.svg">
<img src="linkedin.svg">
<img src="rss.svg">
<img src="envelope.svg">
</div>
<div class="shapes-only">
<img src="twitter.svg">
<img src="facebook.svg">
<img src="googleplus.svg">
<img src="linkedin.svg">
<img src="rss.svg">
<img src="envelope.svg">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
// See How to change color of SVG image using CSS (jQuery SVG image replacement) http://stackoverflow.com/questions/11978995
// See Replace all SVG images with inline SVG https://snippetlib.com/jquery/replace_all_svg_images_with_inline_svg
$('img').each(function() {
var $img = $(this);
var imgURL = $img.attr('src');
$.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = $(data).find('svg');
// Replace image with new SVG
$img.replaceWith($svg);
});
});
</script>
</body>
</html>
<?xml version="1.0"?>
<svg class="icon icon-twitter" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="foreground" fill="#2aa9e0" d="m 16.00026,3.0388625 c -0.58865,0.2610694 -1.22138,0.4374284 -1.88531,0.51677 0.67769,-0.4061557 1.19826,-1.0492863 1.4433,-1.8156882 -0.63433,0.3761626 -1.33682,0.6492191 -2.08459,0.796395 C 12.87493,1.8984774 12.0218,1.5 11.07762,1.5 9.2648,1.5 7.79493,2.9693587 7.79493,4.7817676 c 0,0.2572203 0.029,0.5077321 0.085,0.7479163 C 5.15173,5.3928357 2.73298,4.0862392 1.11391,2.1006705 0.83135,2.5853679 0.66942,3.1490869 0.66942,3.7505572 c 0,1.1386255 0.57953,2.1431321 1.46035,2.7316454 C 1.59168,6.4652065 1.08551,6.3175109 0.64294,6.071728 c -3.7e-4,0.013697 -3.7e-4,0.027394 -3.7e-4,0.04129 0,1.5900606 1.13154,2.9164125 2.63324,3.2181024 C 3.00037,9.4061034 2.71036,9.446214 2.411,9.446214 c -0.21153,0 -0.41713,-0.020595 -0.61761,-0.058886 0.41776,1.303797 1.63002,2.252636 3.06653,2.27903 -1.12346,0.880286 -2.53884,1.404974 -4.07687,1.404974 -0.26496,0 -0.52625,-0.0156 -0.78305,-0.04589 C 1.45274,13.956676 3.17821,14.5 5.032,14.5 c 6.03793,0 9.33982,-5.0007583 9.33982,-9.3377308 0,-0.1422969 -0.003,-0.283784 -0.01,-0.4246313 0.64129,-0.4626226 1.19778,-1.0405783 1.63787,-1.6987554 z"/>
</svg>
<?xml version="1.0"?>
<svg class="icon icon-facebook" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="background" fill="#3b5999" d="M 0.875,0 C 0.38722,0 0,0.38721 0,0.875 l 0,14.25 C 0,15.61266 0.38715,16 0.875,16 l 7.65625,0 0,-6.1875 -2.0625,0 0,-2.4375 2.0625,0 0,-1.78125 c 0,-2.06656 1.2814395,-3.1875 3.125,-3.1875 0.88307,0 1.62261,0.06435 1.84375,0.09375 l 0,2.15625 -1.25,0.03125 c -1.00252,0 -1.21875,0.45713 -1.21875,1.15625 l 0,1.53125 2.40625,0 -0.3125,2.4375 -2.09375,0 0,6.1875 4.09375,0 C 15.612599,16 16,15.61272 16,15.125 L 16,0.875 C 16,0.38721 15.61266,0 15.125,0 L 0.875,0 z"/>
<path class="foreground" fill="white" d="m 11.03968,16.000001 v -6.19608 h 2.07973 l 0.31141,-2.41472 h -2.39114 v -1.54165 c 0,-0.69912 0.19414,-1.17555 1.19666,-1.17555 l 1.27866,-5.6e-4 v -2.15974 c -0.22114,-0.0294 -0.98017,-0.0952 -1.86324,-0.0952 -1.8435605,0 -3.1057105,1.12532 -3.1057105,3.19188 v 1.7808 h -2.08506 v 2.41472 h 2.08506 v 6.19608 H 11.03968 z"/>
</svg>
<?xml version="1.0"?>
<svg class="icon icon-googleplus" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="background" fill="#dd4b39" d="M 0.875,0 C 0.38722,0 0,0.38721 0,0.875 l 0,14.25 C 0,15.61266 0.38715,16 0.875,16 l 14.25,0 C 15.612599,16 16,15.61272 16,15.125 L 16,0.875 C 16,0.38721 15.61266,0 15.125,0 L 0.875,0 z M 7,2.625 l 2.75,0 -0.875,0.5625 -0.875,0 C 8.321898,3.45389 9,4.026288 9,5.09375 9,6.13181 8.400535,6.599676 7.8125,7.0625 7.630007,7.244614 7.4375,7.440648 7.4375,7.75 c 0,0.308085 0.221275,0.497508 0.375,0.625 l 0.5,0.375 c 0.61655,0.519347 1.125127,0.999125 1.125,1.96875 0,1.319658 -1.215831,2.65625 -3.625,2.65625 -2.031636,0 -3.0625,-0.960546 -3.0625,-2 0,-0.505027 0.298329,-1.227157 1.125,-1.71875 C 4.742985,9.122709 5.869257,9.04334 6.5,9 6.303059,8.747424 6.125,8.497317 6.125,8.0625 6.125,7.824118 6.18068,7.66868 6.25,7.5 6.095641,7.51432 5.952665,7.53125 5.8125,7.53125 4.328091,7.53125 3.5,6.438586 3.5,5.34375 3.5,4.698812 3.772771,3.988351 4.375,3.46875 5.174043,2.809111 6.242652,2.625 7,2.625 z M 6,3.15625 c -0.365368,0 -0.775305,0.187659 -1,0.46875 -0.238385,0.295159 -0.3125,0.665249 -0.3125,1.03125 0,0.940097 0.544781,2.5 1.75,2.5 0.350032,0 0.774671,-0.181428 1,-0.40625 C 7.759653,6.425947 7.75,5.971707 7.75,5.71875 7.75,4.707683 7.161876,3.15625 6,3.15625 z m 5.125,2.5625 0.6875,0 0,1.40625 1.4375,0 0,0.71875 -1.4375,0 0,1.40625 -0.6875,0 0,-1.40625 -1.375,0 0,-0.71875 1.375,0 0,-1.40625 z m -4.4375,3.6875 c -0.126225,0 -0.911965,0.020922 -1.5,0.21875 C 4.879161,9.736651 4,10.065881 4,11.0625 c 0,0.996872 0.938771,1.71875 2.4375,1.71875 1.34513,0 2.0625,-0.630746 2.0625,-1.5 0,-0.717809 -0.434567,-1.116764 -1.5,-1.875 -0.111524,-0.01407 -0.172461,0 -0.3125,0 z" />
<path class="foreground" fill="white" d="m 7.006356,2.6308263 c -0.757348,0 -1.857207,0.184111 -2.65625,0.84375 -0.602229,0.519601 -0.875,1.230062 -0.875,1.875 0,1.094836 0.828091,2.1875 2.3125,2.1875 0.140165,0 0.283141,-0.01693 0.4375,-0.03125 -0.06932,0.16868 -0.125,0.324118 -0.125,0.5625 0,0.434817 0.209309,0.684924 0.40625,0.9375 -0.630743,0.04334 -1.788265,0.122709 -2.65625,0.65625 -0.826671,0.4915927 -1.09375,1.2137227 -1.09375,1.7187497 0,1.039454 0.999614,2 3.03125,2 2.409169,0 3.65625,-1.336592 3.65625,-2.65625 1.27e-4,-0.9696247 -0.5397,-1.4494027 -1.15625,-1.9687497 l -0.5,-0.375 c -0.153725,-0.127492 -0.375,-0.316915 -0.375,-0.625 0,-0.309352 0.223757,-0.505386 0.40625,-0.6875 0.588035,-0.462824 1.15625,-0.93069 1.15625,-1.96875 0,-1.067462 -0.678102,-1.63986 -1,-1.90625 l 0.875,0 0.90625,-0.5625 -2.75,0 z m -1.03125,0.53125 c 1.161876,0 1.78125,1.551433 1.78125,2.5625 0,0.252957 -0.021597,0.707197 -0.34375,1.03125 -0.225329,0.224822 -0.618718,0.40625 -0.96875,0.40625 -1.205219,0 -1.75,-1.559903 -1.75,-2.5 0,-0.366001 0.074115,-0.736091 0.3125,-1.03125 0.224695,-0.281091 0.603382,-0.46875 0.96875,-0.46875 z m 5.125,2.5625 0,1.40625 -1.375,0 0,0.71875 1.375,0 0,1.40625 0.71875,0 0,-1.40625 1.40625,0 0,-0.71875 -1.40625,0 0,-1.40625 -0.71875,0 z m -4.4375,3.6875 c 0.140039,0 0.232226,-0.01407 0.34375,0 1.065433,0.7582357 1.5,1.1571907 1.5,1.8749997 0,0.869254 -0.71737,1.5 -2.0625,1.5 -1.498729,0 -2.4375,-0.721878 -2.4375,-1.71875 0,-0.996619 0.879161,-1.3258487 1.1875,-1.4374997 0.588035,-0.197828 1.342525,-0.21875 1.46875,-0.21875 z"/>
</svg>
<?xml version="1.0"?>
<svg class="icon icon-rss" xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path class="background" fill="#f28c36" d="M 1.5,0 C 0.669,0 0,0.669 0,1.5 l 0,5 C 0,7.331 0.669,8 1.5,8 l 5,0 C 7.331,8 8,7.331 8,6.5 l 0,-5 C 8,0.669 7.331,0 6.5,0 l -5,0 z M 1,1 A 6,6 0 0 1 7,7 L 6,7 A 5,5 0 0 0 1,2 L 1,1 z M 1,3 A 4,4 0 0 1 5,7 L 4,7 A 3,3 0 0 0 1,4 L 1,3 z M 2,5 C 2.5522847,5 3,5.4477153 3,6 3,6.5522847 2.5522847,7 2,7 1.4477153,7 1,6.5522847 1,6 1,5.4477153 1.4477153,5 2,5 z"/>
<path class="foreground" fill="white" d="M 1,1 1,2 A 5,5 0 0 1 6,7 L 7,7 A 6,6 0 0 0 1,1 z M 1,3 1,4 A 3,3 0 0 1 4,7 L 5,7 A 4,4 0 0 0 1,3 z M 2,5 C 1.4477153,5 1,5.4477153 1,6 1,6.5522847 1.4477153,7 2,7 2.5522847,7 3,6.5522847 3,6 3,5.4477153 2.5522847,5 2,5 z"/>
</svg>
<?xml version="1.0"?>
<svg class="icon icon-envelope" xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
<path class="foreground" fill="grey" d="M 65.438456,65.221147 126.86843,26.807809 c 0.70148,-0.500499 1.30276,-1.626623 1.30276,-2.752748 V 12.793822 c 0,-1.000999 -0.70149,-1.876873 -1.50318,-1.876873 H 1.5031805 C 0.70148421,11.042074 0,11.917948 0,12.918948 v 11.261239 c 0,1.000999 0.60127218,2.252247 1.3027564,2.752746 L 62.732731,65.346272 c 0.801696,0.375375 2.00424,0.375375 2.705725,-0.125125 z"/>
<path class="foreground" fill="grey" d="M 62.7,75.387792 1.3,36.876165 c -0.7,-0.50342 -1.3,0 -1.3,1.00684 v 76.771545 c 0,1.00684 0.7,1.88783 1.5,1.88783 h 125 c 0.8,0 1.5,-0.88099 1.5,-1.88783 V 37.883005 c 0,-1.00684 -0.6,-1.51026 -1.3,-1.00684 L 65.3,75.387792 c -0.7,0.503419 -1.9,0.503419 -2.6,0 z"/>
</svg>
<?xml version="1.0"?>
<svg class="icon icon-linkedin" xmlns="http://www.w3.org/2000/svg" width="144" height="144" viewBox="0 0 144 144">
<path class="background" fill="#0077b5" d="M 10.625,0 C 4.7611628,0 0,4.647 0,10.375 l 0,123.25 C 0,139.359 4.7611628,144 10.625,144 l 122.71875,0 C 139.21759,144 144,139.36 144,133.625 l 0,-123.25 C 144.00001,4.647 139.21759,0 133.34375,0 L 10.625,0 z m 21.40625,19.8125 c 6.828,0 12.375,5.57525 12.375,12.40625 0,6.837 -5.547,12.375 -12.375,12.375 -6.846,0 -12.375,-5.538 -12.375,-12.375 0.001,-6.83 5.53,-12.40625 12.375,-12.40625 z m 65.0625,32.46875 c 21.62801,0 25.625,14.21675 25.625,32.71875 l 0,37.71875 -21.34375,0 0,-33.4375 c 0,-7.969 -0.17199,-18.21875 -11.125,-18.21875 -11.113,0 -12.8125,8.69325 -12.8125,17.65625 l 0,34 -21.34375,0 0,-68.71875 20.5,0 0,9.375 0.28125,0 C 79.727,57.972 86.70275,52.28125 97.09375,52.28125 z M 21.34375,54 l 21.375,0 0,68.71875 -21.375,0 0,-68.71875 z"/>
<path class="foreground" fill="white" d="m 21.350995,53.985 h 21.359 v 68.722 h -21.359 V 53.985 z m 10.684,-34.16 c 6.828,0 12.377,5.549 12.377,12.38 0,6.837 -5.549,12.386 -12.377,12.386 -6.846,0 -12.387,-5.549 -12.387,-12.386 10e-4,-6.83 5.542,-12.38 12.387,-12.38"/>
<path class="foreground" fill="white" d="m 56.106995,53.985 h 20.485 v 9.39 h 0.286 c 2.852,-5.403 9.818,-11.099 20.209,-11.099 21.628005,0 25.621005,14.234 25.621005,32.736 v 37.694 h -21.34401 v -33.42 c 0,-7.969 -0.14599,-18.22 -11.098995,-18.22 -11.113,0 -12.819,8.681 -12.819,17.644 v 33.996 h -21.34 V 53.985 z"/>
</svg>