"animated svg social icons"
Bootstrap 4.1.1 Snippet by csshint

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<ul class="soc">
<li><a href="https://csshint.com/free-tattoo-fonts/" target="_blank" class="icon-1 8tracks" title="8tracks"><svg viewBox="0 0 512 512"><path d="M185.304 240.455c-47.581 0-86.09 38.586-86.104 86.165 0.012 47.596 38.522 86.182 86.104 86.182 47.54 0 85.997-38.588 86.019-86.182 0-24.309-0.005-30.236-0.005-30.236h-30.743c0 0 0 5.947 0 30.236 -0.028 15.331-6.179 29.058-16.201 39.12 -10.049 10.043-23.753 16.218-39.07 16.218 -15.333 0-29.021-6.179-39.097-16.218 -10.025-10.063-16.175-23.79-16.197-39.12 0.021-15.316 6.172-29.041 16.197-39.104 10.077-10.043 23.764-16.202 39.097-16.221 28.282 0 111.983 0 141.405 0 47.563 0 86.076-38.319 86.092-85.914 -0.016-47.613-38.527-86.164-86.092-86.18 -47.551 0.017-86.074 38.567-86.092 86.18 0 24.181-0.021 29.986-0.021 29.986h30.726c0 0 0-5.805 0-29.986 0.027-15.314 6.267-29.043 16.315-39.121 10.04-10.024 23.744-16.203 39.069-16.203 15.314 0 29.049 6.177 39.098 16.22 10.014 10.062 16.17 23.789 16.17 39.103 0 15.349-6.156 29.06-16.18 39.102 -10.039 10.043-23.773 15.955-39.088 15.971H185.304L185.304 240.455z"/></svg><!--[if lt IE 9]><em>8tracks</em><![endif]--></a></li>
<li><a href="https://csshint.com/html-css-footer-design/" target="_blank" class="icon-2 500px" title="500px"><svg viewBox="0 0 512 512"><path d="M256.3 293c26.9 31.2 58.3 58.5 99.9 58.5 56.1 0 89.5-42.6 89.5-96.8 0-54-34.1-94.2-89-94.2 -43.9 0-72.7 28.5-100.4 62.1 -28.5-34.1-56.7-62.1-101.4-62.1 -53.5 0-88.5 40.2-88.5 95.2 0 54.6 35.8 95.7 90.8 95.7C204.1 351.5 228.7 321.9 256.3 293zM115.5 256.8c0-21.3 13.9-44.5 39.3-44.5 26 0 52.7 25.9 70.4 45 -17.2 20.1-42.5 41.9-68.8 41.9C130.3 299.2 115.5 281.1 115.5 256.8zM287.3 257.3c18.4-19.9 41.2-45 68.3-45 26.4 0 41.4 20.8 41.4 44 0 23.4-13.7 43-39.8 43C329.2 299.2 305.7 278.5 287.3 257.3z"/></svg><!--[if lt IE 9]><em>500px</em><![endif]--></a></li>
<li><a href="https://csshint.com/download-progress-bar-css-js/" target="_blank" class="icon-3 behance" title="Behance"><svg viewBox="0 0 512 512"><path d="M254.8 171.8c6.4 8.9 9.6 19.6 9.6 32 0 12.8-3.2 23.1-9.7 30.9 -3.6 4.4-9 8.4-16 12 10.7 3.9 18.8 10.1 24.2 18.5 5.5 8.4 8.2 18.7 8.2 30.7 0 12.4-3.1 23.6-9.3 33.5 -4 6.6-8.9 12.1-14.9 16.5 -6.7 5.1-14.6 8.6-23.7 10.5 -9.1 1.9-19 2.8-29.6 2.8H99.1V149.5h101.4C226.1 149.8 244.2 157.3 254.8 171.8zM140.9 185.9v46.3h51c9.1 0 16.5-1.7 22.2-5.2 5.7-3.5 8.5-9.6 8.5-18.4 0-9.8-3.8-16.2-11.3-19.4 -6.5-2.2-14.7-3.3-24.8-3.3H140.9zM140.9 266.9v55.9h50.9c9.1 0 16.2-1.2 21.2-3.7 9.2-4.6 13.8-13.3 13.8-26.2 0-10.9-4.5-18.4-13.4-22.5 -5-2.3-12-3.5-21-3.6H140.9L140.9 266.9zM396.4 207.3c10.8 4.8 19.8 12.5 26.8 23 6.4 9.2 10.5 19.9 12.4 32.1 1.1 7.1 1.5 17.4 1.3 30.8H323.9c0.6 15.6 6 26.5 16.2 32.7 6.2 3.9 13.6 5.8 22.4 5.8 9.2 0 16.8-2.4 22.5-7.1 3.2-2.6 5.9-6.1 8.4-10.7h41.4c-1.1 9.2-6.1 18.5-15 28 -13.9 15.1-33.4 22.6-58.4 22.6 -20.6 0-38.9-6.4-54.6-19.1 -15.8-12.7-23.7-33.4-23.7-62.1 0-26.9 7.1-47.5 21.4-61.8 14.2-14.3 32.7-21.5 55.5-21.5C373.4 200 385.6 202.4 396.4 207.3zM335.7 242.3c-5.7 5.9-9.3 13.9-10.8 24h69.9c-0.7-10.8-4.3-18.9-10.8-24.5 -6.5-5.6-14.5-8.4-24.1-8.4C349.5 233.4 341.4 236.4 335.7 242.3zM402.8 161.5h-91.2V182.7h91.2V161.5z"/></svg><!--[if lt IE 9]><em>Behance</em><![endif]--></a></li>
<li><a href="https://csshint.com/jquery-search-boxes/" target="_blank" class="icon-4 codepen" title="CodePen"><svg viewBox="0 0 512 512"><path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></svg><!--[if lt IE 9]><em>CodePen</em><![endif]--></a></li>
<li><a href="https://csshint.com/animated-svg-loader/" target="_blank" class="icon-5 delicious" title="Delicious"><svg viewBox="0 0 512 512"><path d="M120 120v271.9h271.9V120H120zM365.6 365.6H256V256H146.4V146.4H256V256h109.6V365.6z"/></svg><!--[if lt IE 9]><em>Delicious</em><![endif]--></a></li>
<li><a href="https://csshint.com/css-glitch-text-effect/" target="_blank" class="icon-6 deviantart" title="DeviantART"><svg viewBox="0 0 512 512"><path d="M251 214.4c66.8-1.2 102.7 20.7 111.4 63.3h-54.6v-45.8c-14.4-5-29.6-7.1-45.4-6.9v86.6h178.2c-8.6-69.1-88-123.3-184.6-123.3 -1.7 0-3.3 0-5 0.1v-31.7c-15.2-1-30.1 1.4-44.7 7.8v28.8c-73 14.8-127.8 61.5-134.9 118.4h179.6L251 214.4 251 214.4zM206.3 277.7H150.2c6-29.2 24.7-48.6 56.1-56.9V277.7z"/></svg><!--[if lt IE 9]><em>DeviantART</em><![endif]--></a></li>
<li><a href="https://csshint.com/link-style-hover-effect/" target="_blank" class="icon-7 dribbble" title="Dribbble"><svg viewBox="0 0 512 512"><path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"/></svg><!--[if lt IE 9]><em>Dribbble</em><![endif]--></a></li>
<li><a href="https://csshint.com/javascript-tab-bars/" target="_blank" class="icon-8 email" title="Email"><svg viewBox="0 0 512 512"><path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z"/></svg><!--[if lt IE 9]><em>Email</em><![endif]--></a></li>
<li><a href="https://csshint.com/css-hero-effects/" target="_blank" class="icon-9 etsy" title="Etsy"><svg viewBox="0 0 512 512"><path d="M215.8 143.2c0-3.9 0.4-6.2 6.9-6.2h88.2c15.4 0 23.9 13.1 30 37.7l5 19.6h15c2.7-55.8 5-80.1 5-80.1s-37.7 4.2-60.1 4.2H193.1l-60.4-1.9v16.2l20.4 3.9c14.2 2.7 17.7 5.8 18.9 18.9 0 0 1.2 38.5 1.2 102s-1.2 101.6-1.2 101.6c0 11.6-4.6 15.8-18.9 18.5l-20.4 3.9v16.2l60.4-1.9h100.9c22.7 0 75.5 1.9 75.5 1.9 1.2-13.9 8.9-76.6 10-83.5h-14.2L350.1 348.4c-11.9 26.9-29.3 28.9-48.5 28.9h-57.4c-19.2 0-28.5-7.7-28.5-24.3v-87.8c0 0 42.7 0 56.6 1.2 10.8 0.8 17.3 3.9 20.8 18.9l4.6 20h16.6l-1.2-50.4 2.3-50.8h-16.6l-5.4 22.3c-3.5 14.6-5.8 17.3-20.8 18.9 -19.6 1.9-57 1.5-57 1.5V143.2z"/></svg><!--[if lt IE 9]><em>Etsy</em><![endif]--></a></li>
<li><a href="https://csshint.com/css-animated-backgrounds/" target="_blank" class="icon-10 facebook" title="Facebook"><svg viewBox="0 0 512 512"><path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"/></svg><!--[if lt IE 9]><em>Facebook</em><![endif]--></a></li>
<li><a href="https://csshint.com/logo-with-typography/" target="_blank" class="icon-11 flickr" title="Flickr"><svg viewBox="0 0 512 512"><path d="M344.5 156.9c-38.7 0-72.1 22.1-88.5 54.4 -16.4-32.3-49.8-54.4-88.5-54.4 -54.8 0-99.1 44.4-99.1 99.1 0 54.8 44.4 99.1 99.1 99.1 38.6 0 72.1-22.1 88.5-54.4 16.4 32.3 49.8 54.4 88.5 54.4 54.8 0 99.1-44.4 99.1-99.1C443.6 201.2 399.2 156.9 344.5 156.9zM344.5 328.7c-40.1 0-72.7-32.6-72.7-72.7s32.6-72.7 72.7-72.7 72.7 32.6 72.7 72.7C417.2 296.1 384.6 328.7 344.5 328.7z"/></svg><!--[if lt IE 9]><em>Flickr</em><![endif]--></a></li>
<li><a href="https://csshint.com/top-5-wordpress-seo-friendly-themes/" target="_blank" class="icon-12 forrst" title="Forrst"><svg viewBox="0 0 512 512"><polygon points="241.582,329.145 206.922,303.748 214.591,293.279 241.582,313.057 241.582,258.318 272.223,258.318 272.223,293.564 299.038,278.939 305.252,290.332 272.223,308.35 272.223,329.049 322.979,303.016 328.902,314.563 272.223,343.635 272.223,395.852 392.273,395.852 256,68.147 119.727,395.852 241.582,395.852"/></svg><!--[if lt IE 9]><em>Forrst</em><![endif]--></a></li>
<li><a href="https://csshint.com/animated-gradient-examples/" target="_blank" class="icon-13 github" title="GitHub"><svg viewBox="0 0 512 512"><path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/></svg><!--[if lt IE 9]><em>GitHub</em><![endif]--></a></li>
<li><a href="https://csshint.com/jquery-carousel/" target="_blank" class="icon-14 googleplus" title="GooglePlus"><svg viewBox="0 0 512 512"><path d="M179.7 237.6L179.7 284.2 256.7 284.2C253.6 304.2 233.4 342.9 179.7 342.9 133.4 342.9 95.6 304.4 95.6 257 95.6 209.6 133.4 171.1 179.7 171.1 206.1 171.1 223.7 182.4 233.8 192.1L270.6 156.6C247 134.4 216.4 121 179.7 121 104.7 121 44 181.8 44 257 44 332.2 104.7 393 179.7 393 258 393 310 337.8 310 260.1 310 251.2 309 244.4 307.9 237.6L179.7 237.6 179.7 237.6ZM468 236.7L429.3 236.7 429.3 198 390.7 198 390.7 236.7 352 236.7 352 275.3 390.7 275.3 390.7 314 429.3 314 429.3 275.3 468 275.3"/></svg><!--[if lt IE 9]><em>GooglePlus</em><![endif]--></a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html {
background: #0e1a25;
font-size: 0.625em;
}
.soc {
display: block;
font-size: 0;
list-style: none;
margin: 0;
padding: 48px;
padding: 4.8rem;
text-align: center;
}
.soc li {
display: inline-block;
margin: 12px;
margin: 1.2rem;
}
.soc a, .soc svg {
display: block;
}
.soc a {
position: relative;
height: 96px;
height: 9.6rem;
width: 96px;
width: 9.6rem;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard
Animated 3d social icon in css3
Animated Radio tab
Bootstrap 4 Animated Dynamic Form

Questions / Comments: