SVG social icons

svg-code.html

<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconFb"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconGp"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconTw"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 304.36 304.36">
	<use xlink:href="#iconVk"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconPt"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconYt"></use>
</svg>
<svg preserveAspectRatio="none" class="soc-icon" viewBox="0 0 32 32">
	<use xlink:href="#iconInst"></use>
</svg>

<style>
.soc-icon {
  width: 32px;
  height: 32px;
  fill: #cccccc;
}
.soc-icon:hover {
  fill: #000000;
}
.soc-icon {
	-webkit-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
}
</style>

<!-- facebook -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconFb" d="M20.146,16.506h-2.713c0,4.031,0,8.994,0,8.994h-4.021c0,0,0-4.914,0-8.994h-1.912v-3.177h1.912v-2.056 c0-1.472,0.752-3.773,4.058-3.773l2.978,0.011v3.085c0,0-1.811,0-2.161,0c-0.353,0-0.854,0.164-0.854,0.865v1.868h3.065 L20.146,16.506z"/>
</svg>

<!-- google plus -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconGp" d="M23.896,11.107V7.512h-1.798v3.595h-3.593v1.797h3.593v3.593h1.798v-3.593h3.595v-1.797H23.896z M17.585,7.5 c0,0-4.135,0-5.6,0c-2.841,0-5.21,2.096-5.21,4.401c0,2.355,1.556,4.233,4.229,4.233c0.186,0,0.366-0.011,0.542-0.023 c-0.174,0.333-0.297,0.704-0.297,1.093c0,0.654,0.359,1.027,0.805,1.46c-0.336,0-0.661,0.009-1.016,0.009 c-3.254,0-5.532,2.24-5.532,4.389c0,2.116,2.746,3.439,6,3.439c3.709,0,5.989-2.104,5.989-4.221c0-1.697-0.365-2.551-2.174-3.906 c-0.52-0.39-1.649-1.188-1.649-1.725c0-0.627,0.179-0.937,1.125-1.676c0.968-0.757,1.653-1.754,1.653-2.993 c0-1.348-0.551-2.572-1.588-3.166h1.47L17.585,7.5z M15.687,21.914c0.046,0.195,0.072,0.397,0.072,0.604 c0,1.711-1.102,3.047-4.264,3.047c-2.249,0-3.873-1.424-3.873-3.134c0-1.676,1.905-3.122,4.155-3.097 c0.524,0.005,1.014,0.09,1.457,0.233C14.455,20.416,15.438,20.946,15.687,21.914z M12.086,15.278 c-1.51-0.047-2.945-1.432-3.204-3.414C8.62,9.883,9.633,8.366,11.142,8.41c1.509,0.046,2.801,1.672,3.061,3.654 S13.594,15.322,12.086,15.278z" />
</svg>

<!-- twitter -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconTw" d="M26.281,9.657c-0.724,0.321-1.5,0.538-2.315,0.635c0.832-0.499,1.471-1.289,1.772-2.229 C24.96,8.524,24.098,8.86,23.18,9.04c-0.735-0.783-1.782-1.272-2.942-1.272c-2.225,0-4.029,1.804-4.029,4.029 c0,0.316,0.036,0.624,0.104,0.918c-3.35-0.168-6.319-1.772-8.306-4.21C7.66,9.101,7.461,9.793,7.461,10.531 c0,1.398,0.712,2.631,1.792,3.354c-0.661-0.021-1.282-0.202-1.825-0.504c0,0.016,0,0.033,0,0.05c0,1.952,1.389,3.581,3.232,3.952 c-0.337,0.092-0.694,0.142-1.061,0.142c-0.26,0-0.512-0.026-0.758-0.073c0.513,1.601,2.001,2.768,3.764,2.798 c-1.379,1.081-3.117,1.725-5.005,1.725c-0.325,0-0.646-0.018-0.961-0.056c1.784,1.145,3.902,1.811,6.178,1.811 c7.412,0,11.465-6.14,11.465-11.465c0-0.175-0.004-0.348-0.012-0.521C25.057,11.175,25.74,10.465,26.281,9.657z"/>
</svg>

<!-- vkonatakte -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconVk" d="M261.945,175.576c10.096,9.857,20.752,19.131,29.807,29.982   c4,4.822,7.787,9.798,10.684,15.394c4.105,7.955,0.387,16.709-6.746,17.184l-44.34-0.02c-11.436,0.949-20.559-3.655-28.23-11.474   c-6.139-6.253-11.824-12.908-17.727-19.372c-2.42-2.642-4.953-5.128-7.979-7.093c-6.053-3.929-11.307-2.726-14.766,3.587   c-3.523,6.421-4.322,13.531-4.668,20.687c-0.475,10.441-3.631,13.186-14.119,13.664c-22.414,1.057-43.686-2.334-63.447-13.641   c-17.422-9.968-30.932-24.04-42.691-39.971C34.828,153.482,17.295,119.395,1.537,84.353C-2.01,76.458,0.584,72.22,9.295,72.07   c14.465-0.281,28.928-0.261,43.41-0.02c5.879,0.086,9.771,3.458,12.041,9.012c7.826,19.243,17.402,37.551,29.422,54.521   c3.201,4.518,6.465,9.036,11.113,12.216c5.142,3.521,9.057,2.354,11.476-3.374c1.535-3.632,2.207-7.544,2.553-11.434   c1.146-13.383,1.297-26.743-0.713-40.079c-1.234-8.323-5.922-13.711-14.227-15.286c-4.238-0.803-3.607-2.38-1.555-4.799 c3.564-4.172,6.916-6.769,13.598-6.769h50.111c7.889,1.557,9.641,5.101,10.721,13.039l0.043,55.663   c-0.086,3.073,1.535,12.192,7.07,14.226c4.43,1.448,7.35-2.096,10.008-4.905c11.998-12.734,20.561-27.783,28.211-43.366   c3.395-6.852,6.314-13.968,9.143-21.078c2.096-5.276,5.385-7.872,11.328-7.757l48.229,0.043c1.43,0,2.877,0.021,4.262,0.258   c8.127,1.385,10.354,4.881,7.844,12.817c-3.955,12.451-11.65,22.827-19.174,33.251c-8.043,11.129-16.645,21.877-24.621,33.072   C252.26,161.544,252.842,166.697,261.945,175.576L261.945,175.576z M261.945,175.576"/>
</svg>

<!-- pinterest -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconPt" d="M16.455,6.5c-5.293,0-7.962,3.717-7.962,6.817c0,1.877,0.725,3.547,2.281,4.169 c0.254,0.104,0.484,0.004,0.558-0.272c0.052-0.191,0.173-0.675,0.227-0.876c0.075-0.274,0.046-0.37-0.16-0.608 c-0.449-0.518-0.735-1.189-0.735-2.14c0-2.758,2.106-5.227,5.484-5.227c2.991,0,4.635,1.791,4.635,4.182 c0,3.147-1.422,5.803-3.532,5.803c-1.166,0-2.037-0.945-1.758-2.103c0.335-1.382,0.983-2.874,0.983-3.872 c0-0.894-0.488-1.639-1.501-1.639c-1.192,0-2.15,1.207-2.15,2.825c0,1.03,0.356,1.727,0.356,1.727s-1.219,5.061-1.434,5.946 c-0.426,1.766-0.064,3.93-0.033,4.148c0.018,0.129,0.188,0.16,0.265,0.062c0.109-0.141,1.528-1.856,2.011-3.571 c0.136-0.485,0.784-3,0.784-3c0.387,0.724,1.519,1.36,2.721,1.36c3.581,0,6.011-3.198,6.011-7.479 C23.507,9.515,20.707,6.5,16.455,6.5z"/>
</svg>

<!-- youtube -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconYt" d="M8.791,22.401c-1.816-0.37-2.281-1.623-2.292-6.184c-0.008-3.221,0.129-4.316,0.674-5.373 c0.422-0.819,0.931-1.078,2.411-1.23c1.437-0.147,9.074-0.155,12.11-0.012c4.232,0.261,3.751,2.194,3.799,6.028 c0.049,3.976-0.062,4.84-0.747,5.854c-0.679,1.004-0.419,0.972-8.288,1.01C12.461,22.515,9.147,22.475,8.791,22.401L8.791,22.401z M19.098,15.968c-1.775-1.15-3.672-2.369-4.633-2.947c0.042,1.611,0.007,4.542,0.032,5.985 C15.904,18.158,18.047,16.737,19.098,15.968L19.098,15.968z"/>
</svg>

<!-- instagram -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
	<path id="iconInst" d="M18.053,16.214c0-1.072-0.875-1.944-1.953-1.944c-1.077,0-1.953,0.872-1.953,1.944 c0,1.072,0.876,1.945,1.953,1.945C17.178,18.159,18.053,17.286,18.053,16.214z M20.955,6.094h-9.912 c-2.73,0-4.952,2.212-4.952,4.931v1.374h7.287c0.77-0.545,1.708-0.868,2.722-0.868c1.014,0,1.953,0.322,2.722,0.868h7.084v-1.374 C25.906,8.306,23.685,6.094,20.955,6.094L20.955,6.094z M22.96,10.783c0,0.301-0.247,0.548-0.55,0.548h-1.7 c-0.303,0-0.55-0.247-0.55-0.548V9.09c0-0.301,0.247-0.548,0.55-0.548h1.7c0.303,0,0.55,0.247,0.55,0.548V10.783L22.96,10.783z M20.805,16.214c0,2.583-2.11,4.683-4.705,4.683c-2.594,0-4.704-2.101-4.704-4.683c0-0.711,0.161-1.385,0.447-1.99H6.091v6.749 c0,2.719,2.222,4.931,4.952,4.931h9.912c2.729,0,4.951-2.212,4.951-4.931v-6.749h-5.549C20.644,14.829,20.805,15.503,20.805,16.214 L20.805,16.214"/>
</svg>	

• Заменить иконку VK (кривоватая)
• изменить структуру айдишников (согласно бэм)