Social Icon System

Developer

Size

8,772 Kb

Views

6,072

Social Icon System Previews
Social Icon System HTML Codes
Social Icon System CSS Codes

How do I make an social icon system?

What is a social icon system? How do you make a social icon system? This script and codes were developed by John Heiner on 16 December 2022, Friday.

Social Icon System Previews

Social Icon System - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Icon System</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"> <defs> <symbol id="icon-behance" viewBox="0 0 20 20"> <title>behance</title> <path class="path1" d="M8.072 9.301c0 0 1.892-0.147 1.892-2.459 0-2.315-1.548-3.441-3.51-3.441h-6.454v12.926h6.454c0 0 3.941 0.129 3.941-3.816-0.001-0.001 0.171-3.21-2.323-3.21zM2.844 5.697h3.61c0 0 0.878 0 0.878 1.344 0 1.346-0.516 1.541-1.102 1.541h-3.386v-2.885zM6.271 14.029h-3.427v-3.455h3.61c0 0 1.308-0.018 1.308 1.775 0 1.512-0.977 1.669-1.491 1.68zM15.649 6.688c-4.771 0-4.767 4.967-4.767 4.967s-0.326 4.941 4.767 4.941c0 0 4.243 0.254 4.243-3.437h-2.182c0 0 0.072 1.391-1.988 1.391 0 0-2.184 0.152-2.184-2.25h6.423c0.001-0.001 0.709-5.612-4.312-5.612zM17.59 10.574h-4.074c0 0 0.266-1.992 2.182-1.992s1.892 1.992 1.892 1.992zM18.097 4.16h-5.117v1.594h5.117v-1.594z"></path> </symbol> <symbol id="icon-dropbox" viewBox="0 0 20 20"> <title>dropbox</title> <path class="path1" d="M6.109 0.902l-5.709 3.555 3.911 3.279 5.689-3.693-3.891-3.141zM13.452 15.992c-0.102 0-0.203-0.033-0.285-0.102l-3.167-2.628-3.167 2.629c-0.082 0.068-0.184 0.102-0.285 0.102-0.085 0-0.17-0.023-0.244-0.072l-2.346-1.533v0.904l6.042 3.806 6.042-3.807v-0.904l-2.346 1.533c-0.074 0.049-0.159 0.072-0.244 0.072zM19.6 4.457l-5.71-3.555-3.89 3.141 5.688 3.693 3.912-3.279zM10 11.291l3.528 2.928 5.641-3.688-3.481-2.795-5.688 3.555zM6.472 14.219l3.528-2.928-5.689-3.555-3.48 2.795 5.641 3.688z"></path> </symbol> <symbol id="icon-google-drive" viewBox="0 0 20 20"> <title>google-drive</title> <path class="path1" d="M8.175 13l-3.324 6h11.824l3.325-6h-11.825zM5.865 2.299l-5.865 10.615 3.372 6.084 5.866-10.615-3.373-6.084zM19.445 12l-6.096-11h-6.745l6.088 11h6.753z"></path> </symbol> <symbol id="icon-paypal" viewBox="0 0 20 20"> <title>paypal</title> <path class="path1" d="M7.914 10.677h1.659c3.604 0 5.649-1.623 6.3-4.96 0.021-0.11 0.040-0.216 0.056-0.322 0.036-0.226 0.054-0.429 0.062-0.624 0.006-0.134 0.010-0.213 0.009-0.287-0.008-0.391-0.077-0.722-0.216-1.039-0.129-0.296-0.324-0.587-0.613-0.918-0.853-0.97-2.339-1.527-4.114-1.527h-5.653c-0.398 0-0.737 0.29-0.799 0.683l-1.020 6.571-1.269 8.185c-0.046 0.295 0.182 0.561 0.48 0.561h2.772l0.849-5.043c0.117-0.74 0.747-1.28 1.497-1.28zM17.017 6.090c-0.792 3.771-3.357 5.772-7.445 5.772h-1.658c-0.164 0-0.302 0.118-0.328 0.282l-1.105 6.856h2.907c0.348 0 0.645-0.253 0.699-0.597l0.029-0.15 0.555-3.514 0.036-0.194c0.054-0.344 0.351-0.597 0.699-0.597h0.44c2.85 0 5.081-1.158 5.733-4.506 0.268-1.38 0.132-2.534-0.562-3.352z"></path> </symbol> <symbol id="icon-yelp" viewBox="0 0 20 20"> <title>yelp</title> <path class="path1" d="M12.538 12.471l4.523 1.466c0 0 0.647 0.119 0.64 0.552-0.004 0.305-0.197 0.652-0.197 0.652l-1.91 2.756c0 0-0.341 0.286-0.686 0.286s-0.741-0.537-0.741-0.537l-2.417-4.073c0 0-0.272-0.594 0.050-0.921 0.295-0.3 0.738-0.181 0.738-0.181zM11.57 10.6c0.231 0.396 0.87 0.281 0.87 0.281l4.513-1.331c0 0 0.615-0.253 0.703-0.589 0.086-0.337-0.102-0.743-0.102-0.743l-2.157-2.564c0 0-0.187-0.324-0.575-0.357-0.428-0.037-0.691 0.486-0.691 0.486l-2.55 4.050c0.001-0.001-0.224 0.402-0.011 0.767zM9.438 9.021c0.531-0.132 0.616-0.911 0.616-0.911l-0.036-6.485c0 0-0.080-0.8-0.436-1.017-0.559-0.342-0.724-0.164-0.884-0.14l-3.747 1.405c0 0-0.367 0.123-0.558 0.432-0.273 0.437 0.277 1.079 0.277 1.079l3.894 5.358c0 0 0.385 0.401 0.874 0.279zM8.513 11.645c0.013-0.5-0.595-0.801-0.595-0.801l-4.028-2.053c0 0-0.597-0.248-0.887-0.075-0.221 0.132-0.418 0.372-0.437 0.583l-0.262 3.259c0 0-0.039 0.565 0.106 0.822 0.205 0.364 0.881 0.111 0.881 0.111l4.702-1.049c0.182-0.124 0.502-0.136 0.52-0.797zM9.682 13.404c-0.404-0.209-0.887 0.224-0.887 0.224l-3.148 3.498c0 0-0.393 0.535-0.293 0.863 0.094 0.308 0.25 0.461 0.47 0.569l3.162 1.007c0 0 0.383 0.080 0.674-0.005 0.412-0.121 0.336-0.772 0.336-0.772l0.071-4.736c0 0.001-0.016-0.455-0.385-0.648z"></path> </symbol> <symbol id="icon-dribbble" viewBox="0 0 20 20"> <title>dribbble</title> <path class="path1" d="M9.565 7.421c-1.358-2.414-2.811-4.383-2.917-4.528-2.191 1.036-3.826 3.055-4.337 5.487 0.206 0.004 3.482 0.043 7.254-0.959zM10.543 10.061c0.102-0.033 0.206-0.064 0.309-0.094-0.197-0.447-0.412-0.895-0.637-1.336-4.046 1.212-7.928 1.124-8.065 1.12-0.003 0.084-0.007 0.166-0.007 0.25 0 2.019 0.763 3.861 2.016 5.252l-0.005-0.006c0 0 2.15-3.814 6.389-5.186zM5.171 16.194v-0.004c-0.058-0.045-0.12-0.086-0.178-0.135 0.106 0.085 0.178 0.139 0.178 0.139zM8.118 2.372c-0.007 0.002-0.015 0.004-0.015 0.004 0.006-0.002 0.014-0.002 0.014-0.002l0.001-0.002zM15.189 4.104c-1.384-1.218-3.199-1.961-5.189-1.961-0.639 0-1.258 0.078-1.852 0.221 0.12 0.16 1.595 2.119 2.938 4.584 2.962-1.109 4.081-2.812 4.103-2.844zM10 19.2c-5.080 0-9.199-4.119-9.199-9.199-0.001-5.082 4.118-9.201 9.199-9.201s9.2 4.119 9.2 9.201c0 5.080-4.118 9.199-9.2 9.199zM11.336 11.286c-4.611 1.607-6.134 4.838-6.165 4.904 1.334 1.041 3.006 1.666 4.828 1.666 1.088 0 2.125-0.221 3.067-0.621-0.116-0.689-0.573-3.096-1.679-5.967-0.016 0.006-0.033 0.012-0.051 0.018zM11.69 8.12c0.184 0.373 0.358 0.754 0.523 1.139 0.059 0.135 0.114 0.272 0.17 0.406 2.713-0.342 5.385 0.238 5.473 0.256-0.019-1.863-0.686-3.572-1.787-4.912-0.018 0.023-1.279 1.843-4.379 3.111zM12.861 10.905c1.031 2.836 1.449 5.142 1.529 5.611 1.764-1.191 3.018-3.080 3.367-5.27-0.156-0.050-2.356-0.747-4.896-0.341z"></path> </symbol> <symbol id="icon-github" viewBox="0 0 20 20"> <title>github</title> <path class="path1" d="M13.18 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.3-0.807 1.3-1.801c-0.001-0.992-0.582-1.799-1.3-1.799zM17.706 6.626c0.149-0.365 0.155-2.439-0.635-4.426 0 0-1.811 0.199-4.551 2.080-0.575-0.16-1.548-0.238-2.519-0.238-0.973 0-1.945 0.078-2.52 0.238-2.741-1.881-4.552-2.080-4.552-2.080-0.789 1.987-0.781 4.061-0.634 4.426-0.928 1.008-1.495 2.219-1.495 3.871 0 7.186 5.963 7.301 7.467 7.301 0.342 0 1.018 0.002 1.734 0.002s1.392-0.002 1.732-0.002c1.506 0 7.467-0.115 7.467-7.301 0-1.652-0.566-2.863-1.494-3.871zM10.028 16.915h-0.056c-3.771 0-6.709-0.449-6.709-4.115 0-0.879 0.31-1.693 1.047-2.369 1.227-1.127 3.305-0.531 5.662-0.531 0.010 0 0.020 0 0.029 0s0.018 0 0.027 0c2.357 0 4.436-0.596 5.664 0.531 0.735 0.676 1.045 1.49 1.045 2.369 0 3.666-2.937 4.115-6.709 4.115zM6.821 11.309c-0.718 0-1.3 0.807-1.3 1.799 0 0.994 0.582 1.801 1.3 1.801s1.301-0.807 1.301-1.801c0-0.992-0.582-1.799-1.301-1.799z"></path> </symbol> <symbol id="icon-google" viewBox="0 0 20 20"> <title>google</title> <path class="path1" d="M1.989 5.589c0 1.494 0.499 2.572 1.482 3.205 0.806 0.52 1.74 0.598 2.226 0.598 0.118 0 0.213-0.006 0.279-0.010 0 0-0.154 1.004 0.59 1.996h-0.034c-1.289 0-5.493 0.269-5.493 3.727 0 3.516 3.861 3.695 4.636 3.695 0.061 0 0.097-0.002 0.097-0.002 0.008 0 0.063 0.002 0.158 0.002 0.497 0 1.782-0.062 2.975-0.643 1.548-0.75 2.333-2.059 2.333-3.885 0-1.764-1.196-2.814-2.069-3.582-0.533-0.469-0.994-0.873-0.994-1.266 0-0.4 0.337-0.701 0.762-1.082 0.689-0.615 1.339-1.492 1.339-3.15 0-1.457-0.189-2.436-1.354-3.057 0.121-0.062 0.551-0.107 0.763-0.137 0.631-0.086 1.554-0.184 1.554-0.699v-0.099h-4.599c-0.046 0.002-4.651 0.172-4.651 4.389zM9.413 14.602c0.088 1.406-1.115 2.443-2.922 2.574-1.835 0.135-3.345-0.691-3.433-2.096-0.043-0.676 0.254-1.336 0.835-1.863 0.589-0.533 1.398-0.863 2.278-0.928 0.104-0.006 0.207-0.012 0.31-0.012 1.699 0.001 2.849 0.999 2.932 2.325zM8.212 4.626c0.451 1.588-0.23 3.246-1.316 3.553-0.125 0.035-0.253 0.052-0.384 0.052-0.994 0-1.979-1.006-2.345-2.393-0.204-0.776-0.187-1.458 0.047-2.112 0.229-0.645 0.643-1.078 1.163-1.225 0.125-0.035 0.254-0.053 0.385-0.053 1.2 0 1.972 0.498 2.45 2.178zM16 8v-3h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path> </symbol> <symbol id="icon-instagram" viewBox="0 0 20 20"> <title>instagram</title> <path class="path1" d="M17 1h-14c-1.1 0-2 0.9-2 2v14c0 1.101 0.9 2 2 2h14c1.1 0 2-0.899 2-2v-14c0-1.1-0.9-2-2-2zM9.984 15.523c3.059 0 5.538-2.481 5.538-5.539 0-0.338-0.043-0.664-0.103-0.984h1.581v7.216c0 0.382-0.31 0.69-0.693 0.69h-12.614c-0.383 0-0.693-0.308-0.693-0.69v-7.216h1.549c-0.061 0.32-0.104 0.646-0.104 0.984 0 3.059 2.481 5.539 5.539 5.539zM6.523 9.984c0-1.912 1.55-3.461 3.462-3.461s3.462 1.549 3.462 3.461-1.551 3.462-3.462 3.462c-1.913 0-3.462-1.55-3.462-3.462zM16.307 6h-1.615c-0.382 0-0.692-0.312-0.692-0.692v-1.617c0-0.382 0.31-0.691 0.691-0.691h1.615c0.384 0 0.694 0.309 0.694 0.691v1.616c0 0.381-0.31 0.693-0.693 0.693z"></path> </symbol> <symbol id="icon-linkedin" viewBox="0 0 20 20"> <title>linkedin</title> <path class="path1" d="M5 3c0 1.062-0.71 1.976-2.001 1.976-1.215 0-1.999-0.862-1.999-1.924 0-1.090 0.76-2.052 2-2.052s1.976 0.91 2 2zM1 19v-13h4v13h-4z"></path> <path class="path2" d="M7 10.444c0-1.545-0.051-2.836-0.102-3.951h3.594l0.178 1.723h0.076c0.506-0.811 1.746-2 3.822-2 2.532 0 4.432 1.695 4.432 5.342v7.442h-4v-6.861c0-1.594-0.607-2.81-2-2.81-1.062 0-1.594 0.86-1.873 1.569-0.102 0.254-0.127 0.608-0.127 0.963v7.139h-4v-8.556z"></path> </symbol> <symbol id="icon-pinterest" viewBox="0 0 20 20"> <title>pinterest</title> <path class="path1" d="M8.617 13.227c-0.526 2.754-1.167 5.394-3.068 6.773-0.586-4.162 0.861-7.287 1.534-10.605-1.147-1.93 0.138-5.812 2.555-4.855 2.975 1.176-2.576 7.172 1.15 7.922 3.891 0.781 5.479-6.75 3.066-9.199-3.485-3.538-10.146-0.083-9.326 4.982 0.199 1.238 1.478 1.613 0.511 3.322-2.231-0.494-2.897-2.254-2.811-4.6 0.138-3.84 3.449-6.527 6.771-6.9 4.201-0.471 8.144 1.543 8.689 5.494 0.613 4.461-1.896 9.293-6.389 8.945-1.218-0.095-1.728-0.699-2.682-1.279z"></path> </symbol> <symbol id="icon-tumblr" viewBox="0 0 20 20"> <title>tumblr</title> <path class="path1" d="M15.6 18.196c-0.777 0.371-1.48 0.631-2.109 0.781-0.63 0.148-1.311 0.223-2.043 0.223-0.831 0-1.566-0.107-2.205-0.318-0.639-0.213-1.183-0.516-1.635-0.908-0.451-0.395-0.764-0.812-0.938-1.254s-0.261-1.086-0.261-1.926v-6.455h-2.009v-2.604c0.714-0.234 1.326-0.57 1.835-1.010 0.51-0.438 0.918-0.965 1.227-1.58 0.308-0.613 0.519-1.396 0.636-2.345h2.585v4.652h4.314v2.887h-4.314v4.719c0 1.066 0.056 1.752 0.168 2.055 0.111 0.303 0.319 0.545 0.622 0.725 0.403 0.244 0.863 0.367 1.381 0.367 0.92 0 1.836-0.303 2.746-0.908v2.899z"></path> </symbol> <symbol id="icon-twitter" viewBox="0 0 20 20"> <title>twitter</title> <path class="path1" d="M17.316 6.246c0.008 0.162 0.011 0.326 0.011 0.488 0 4.99-3.797 10.742-10.74 10.742-2.133 0-4.116-0.625-5.787-1.697 0.296 0.035 0.596 0.053 0.9 0.053 1.77 0 3.397-0.604 4.688-1.615-1.651-0.031-3.046-1.121-3.526-2.621 0.23 0.043 0.467 0.066 0.71 0.066 0.345 0 0.679-0.045 0.995-0.131-1.727-0.348-3.028-1.873-3.028-3.703 0-0.016 0-0.031 0-0.047 0.509 0.283 1.092 0.453 1.71 0.473-1.013-0.678-1.68-1.832-1.68-3.143 0-0.691 0.186-1.34 0.512-1.898 1.861 2.285 4.644 3.787 7.781 3.945-0.064-0.277-0.097-0.564-0.097-0.861 0-2.084 1.689-3.773 3.774-3.773 1.086 0 2.067 0.457 2.756 1.191 0.859-0.17 1.667-0.484 2.397-0.916-0.282 0.881-0.881 1.621-1.66 2.088 0.764-0.092 1.49-0.293 2.168-0.594-0.506 0.758-1.146 1.422-1.884 1.953z"></path> </symbol> <symbol id="icon-vimeo" viewBox="0 0 20 20"> <title>vimeo</title> <path class="path1" d="M18.91 5.84c-1.006 5.773-6.625 10.66-8.315 11.777-1.69 1.115-3.233-0.447-3.792-1.631-0.641-1.347-2.559-8.656-3.062-9.261s-2.010 0.605-2.010 0.605l-0.731-0.976c0 0 3.061-3.725 5.391-4.191 2.47-0.493 2.466 3.864 3.060 6.282 0.574 2.342 0.961 3.68 1.463 3.68s1.462-1.305 2.512-3.305c1.053-2.004-0.045-3.772-2.101-2.514 0.823-5.027 8.591-6.236 7.585-0.466z"></path> </symbol> <symbol id="icon-youtube" viewBox="0 0 20 20"> <title>youtube</title> <path class="path1" d="M10 2.3c-9.828 0-10 0.874-10 7.7s0.172 7.7 10 7.7 10-0.874 10-7.7-0.172-7.7-10-7.7zM13.205 10.334l-4.49 2.096c-0.393 0.182-0.715-0.022-0.715-0.456v-3.948c0-0.433 0.322-0.638 0.715-0.456l4.49 2.096c0.393 0.184 0.393 0.484 0 0.668z"></path> </symbol> <symbol id="icon-facebook" viewBox="0 0 20 20"> <title>facebook</title> <path d="M11.2,2C9.5,2,8.2,3.4,8.2,5.1v1.8H5.7v2.5h2.5V18h2.5V9.4h2.8L14,6.9h-3.4V5.1c0-0.3,0.3-0.6,0.6-0.6h3.1V2	H11.2L11.2,2z"/> </symbol>	<symbol id="circle-filled" viewBox="0 0 20 20">	<circle cx="10" cy="10" r="10"/>	</symbol>	<symbol id="circle-stroked" viewBox="0 0 20 20">	<path d="M10,1c5,0,9,4,9,9s-4,9-9,9s-9-4-9-9S5,1,10,1 M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0L10,0z"/>	</symbol>	<symbol id="square-filled" viewBox="0 0 20 20">	<rect x="0" y="0" width="20" height="20"/>	</symbol>	<symbol id="icon-behance--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#behance-mask)"></rect>	</symbol>	<symbol id="icon-dropbox--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#dropbox-mask)"></rect>	</symbol>	<symbol id="icon-google-drive--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#google-drive-mask)"></rect>	</symbol>	<symbol id="icon-paypal--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#paypal-mask)"></rect>	</symbol>	<symbol id="icon-yelp--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#yelp-mask)"></rect>	</symbol>	<symbol id="icon-dribbble--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#dribbble-mask)"></rect>	</symbol>	<symbol id="icon-github--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#github-mask)"></rect>	</symbol>	<symbol id="icon-google--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#google-mask)"></rect>	</symbol>	<symbol id="icon-instagram--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#instagram-mask)"></rect>	</symbol>	<symbol id="icon-linkedin--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#linkedin-mask)"></rect>	</symbol>	<symbol id="icon-pinterest--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#pinterest-mask)"></rect>	</symbol>	<symbol id="icon-tumblr--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#tumblr-mask)"></rect>	</symbol>	<symbol id="icon-twitter--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#twitter-mask)"></rect>	</symbol>	<symbol id="icon-vimeo--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#vimeo-mask)"></rect>	</symbol>	<symbol id="icon-youtube--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#youtube-mask)"></rect>	</symbol>	<symbol id="icon-facebook--mask" viewBox="0 0 20 20">	<rect width="20" height="20" x="0" y="0" mask="url(#facebook-mask)"></rect>	</symbol>	<!-- Masks -->	<mask id="behance-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-behance" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="dropbox-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-dropbox" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="google-drive-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-google-drive" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="paypal-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-paypal" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="yelp-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-yelp" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="dribbble-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-dribbble" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="github-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-github" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="google-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-google" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="instagram-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-instagram" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="linkedin-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-linkedin" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="pinterest-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-pinterest" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="tumblr-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-tumblr" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="twitter-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-twitter" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="vimeo-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-vimeo" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="youtube-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-youtube" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask>	<mask id="facebook-mask">	<use xlink:href="#circle-filled" fill="white"/>	<use xlink:href="#icon-facebook" style="transform-origin: 10px 10px; transform: scale(0.5)" />	</mask> </defs>
</svg>
<!-- Inline Icons using multiple <use> tags to create unique styles -->
<h3>Just Icons</h3>
<div>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-behance"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-dropbox"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-google-drive"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-paypal"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-yelp"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-dribbble"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-github"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-google"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-instagram"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-linkedin"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-pinterest"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-tumblr"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-twitter"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-vimeo"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-youtube"></use>	</svg>	<svg class="icon">	<use class="icon__art" xlink:href="#icon-facebook"></use>	</svg>
</div>
<h3>Icons with Shape (2 colors)</h3>
<div>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-behance"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-dropbox"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-google-drive"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-paypal"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-yelp"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-dribbble"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-github"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-google"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-instagram"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-linkedin"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-pinterest"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-tumblr"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-twitter"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-vimeo"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-youtube"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#circle-filled"></use>	<use class="icon__art" xlink:href="#icon-facebook"></use>	</svg>
</div>
<div>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-behance"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-dropbox"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-google-drive"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-paypal"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-yelp"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-dribbble"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-github"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-google"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-instagram"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-linkedin"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-pinterest"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-tumblr"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-twitter"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-vimeo"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-youtube"></use>	</svg>	<svg class="icon icon--shape-stroked">	<use class="icon__bg" xlink:href="#circle-stroked"></use>	<use class="icon__art" xlink:href="#icon-facebook"></use>	</svg>
</div>
<div>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-behance"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-dropbox"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-google-drive"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-paypal"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-yelp"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-dribbble"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-github"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-google"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-instagram"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-linkedin"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-pinterest"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-tumblr"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-twitter"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-vimeo"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-youtube"></use>	</svg>	<svg class="icon icon--shape-fill">	<use class="icon__bg" xlink:href="#square-filled"></use>	<use class="icon__art" xlink:href="#icon-facebook"></use>	</svg>
</div>
<h3>Icons with mask (single color knockout)</h3>
<div>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-behance--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-dropbox--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-google-drive--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-paypal--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-yelp--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-dribbble--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-github--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-google--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-instagram--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-linkedin--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-pinterest--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-tumblr--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-twitter--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-vimeo--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-youtube--mask"></use>	</svg>	<svg class="icon icon--gradient-bg icon--shape-fill">	<use class="icon__bg" xlink:href="#icon-facebook--mask"></use>	</svg>
</div>
</body>
</html>

Social Icon System - Script Codes CSS Codes

.icon { width: 50px; height: 50px; margin: 0 3px; display: inline-block;
}
.icon use { vertical-align: middle; -webkit-transform-origin: calc(50px / 2) calc(50px / 2); transform-origin: calc(50px / 2) calc(50px / 2);
}
.icon--shape-fill .icon__bg { fill: black; -webkit-transition: all .2s ease; transition: all .2s ease;
}
.icon--shape-fill .icon__art { fill: white; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all .3s ease; transition: all .3s ease;
}
.icon--shape-fill:hover { cursor: pointer;
}
.icon--shape-fill:hover .icon__bg { -webkit-transform: scale(0); transform: scale(0);
}
.icon--shape-fill:hover .icon__art { fill: black; -webkit-transform: scale(1); transform: scale(1);
}
.icon--shape-stroked .icon__bg { fill: black;
}
.icon--shape-stroked .icon__art { fill: black; -webkit-transform: scale(0.5); transform: scale(0.5);
}
.icon--gradient-bg { background: blue; background: -webkit-linear-gradient(top, #5132ff 0%, #00ffd8 100%); background: linear-gradient(to bottom, #5132ff 0%, #00ffd8 100%);
}
.icon--gradient-bg .icon__art { fill: white;
}
html, body { height: 100%; margin: 0; padding: 0;
}
body { font-size: 1.2rem; font-family: "Open Sans", sans-serif; color: #888; background-color: #fff;
}
*, *:before, *:after { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
div, h3 { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px 5%;
}

Home Page	Home
Developer	John Heiner
Username	johnheiner
Uploaded	December 16, 2022
Rating	3
Size	8,772 Kb
Views	6,072

Do you need developer help for Social Icon System?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Heiner (johnheiner) Script Codes

Name	Size
Page Transition with Loader	3,824 Kb
Bouncy Box	3,423 Kb
Breaking Lists at specific points without floats.	1,962 Kb
Material Shadows	2,961 Kb
Image Hover	3,409 Kb
Unboxed Technology Footer Animation	8,397 Kb
Breathing Halftone	81,216 Kb
Rounded Triangle	2,124 Kb
Logo Animation	4,438 Kb
Loading Icon	1,987 Kb

Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!

Similar Scripts & Codes

Name	Username	Size
Improved Page Flipping Effect	Usaphp	5,201 Kb
Sass Radar	Jlong	6,887 Kb
Personal Logo Animation	Lloydwheeler	3,795 Kb
Nested table email layout	Massimo-cassandro	2,355 Kb
Css Rotating 3d cubes different speed	Dghez	2,364 Kb
Minimal Menu	Achudars	3,430 Kb
Starting out with Ember.JS	Cfleschhut	4,808 Kb
Birthday Party Starter	Aussieyang	1,629 Kb
Myprofile	SoufianeAbid	2,451 Kb
Shape Outside - Polygon	Stacy	3,954 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!