Twitter SVG icon

SVG social icons with hovers by Hand-Drawn Goods

Jolly Icons Free Font includes SVG formats for social icons. We are using these SVG icons on handdrawngoods.com in the footer social widget. Here’s how the code looks like.

The following snippets only display code for the Twitter icon, and the full version of the social icons bar is avaliable on CodePen. These icons are from a free set, so feel free to use them on your own project.

HTML:

<svg class="social-icon twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 120 120">
    <path d="M111.335,39.593c-0.915-1.481-3.675-1.12-5.692-1.5h-4.494c0.572-1.426,1.384-2.613,2.099-3.896
      c0.224-1.771,1.026-2.966,0.899-5.093c0.523-0.673,0.711-1.685,1.197-2.398c0.418-0.583,0.98-1.928,0.299-2.695
      c-0.205-0.893-1.19-1.005-2.396-0.898c-0.354,0.146-0.681,0.317-0.896,0.599c-1.812,1.75-3.148,4.099-5.098,5.692
      c-0.037,0.033-0.249-0.002-0.3,0c-0.349,0.019-0.132,0.188-0.302,0.3c-0.592,0.394-1.041,0.615-1.493,0.9
      c-1.15,0.712-2.212,1.799-3.601,2.097c-2.14-0.855-4.678-1.317-7.49-1.497c-4.678,0.412-9.312,0.871-12.284,2.994
      c-3.683,1.416-5.972,4.214-8.69,6.594c-0.2,1.296-1.383,1.609-1.497,2.996c-0.019,0.183-0.047,0.354-0.299,0.3
      c0.174,0.973-0.205,1.393-0.299,2.097c-0.002,0.537,0.807,1.743,0,2.099c-3.323-0.482-6.006-2.546-8.691-3.897
      c-2.901-1.457-5.937-2.439-8.388-4.492c-2.895-1.303-5.094-3.301-7.19-5.394c-0.841-1.26-2.193-2.004-2.7-3.598
      c-1.532-0.665-0.708-3.688-2.995-3.595c-1.276-0.174-1.393,0.807-1.797,1.498c-0.285,0.915-1.46,0.939-1.501,2.097
      c-0.016,0.185-0.043,0.356-0.298,0.302c-0.688,4.404-2.133,8.055-2.098,13.182c0.521,1.678,1.413,2.986,2.396,4.196
      c-1.69,0.205-2.894,0.898-3.596,2.099c-0.241,4.341,1.528,6.663,2.999,9.286c0.543,1.556,1.422,2.771,2.397,3.896
      c0.07,0.928,0.833,1.165,1.196,1.799c0.075,0.427,0.495,0.505,0.602,0.899c-0.162,0.431,1.167,0.73,0.297,0.896
      c-1.67,0.527-4.109,0.285-5.093,1.5c-0.442,1.128-0.442,3.368,0,4.494c0.138,0.96,1.141,1.057,1.198,2.097
      c2.019,1.683,4.374,3.021,6.595,4.497c2.324,0.67,4.899,1.092,7.49,1.497c-0.414,1.386-1.367,2.228-2.397,2.995
      c-3.154,1.542-7.475,1.916-11.089,2.996c-2.244,0.152-3.863,0.93-6.29,0.9c-1.344,0.514-3.452,0.303-4.495,0.898
      c-0.493,0.277-0.411,0.389-0.9,0.896c-0.542,1.662,0.449,2.99,1.796,3.597c-0.02,1.021,0.883,1.118,1.501,1.499
      c0.358,0.74,1.025,1.172,1.797,1.498c2.203,1.891,5.126,3.066,7.792,4.496c3.353,0.74,6.665,1.523,10.188,2.097
      c3.622,0.472,7.687,0.503,11.385,0.897h3.895c2.066,0.533,4.977,0.219,7.49,0.301c0.386-0.412,1.304-0.297,2.099-0.301
      c2.111-1.086,4.836-1.555,6.594-2.994c2.321-0.975,3.998-2.596,6.293-3.596c3.502-3.093,7.832-5.354,10.186-9.591
      c0.829-0.768,1.419-1.776,1.801-2.995c1.067-0.632,1.557-1.838,2.395-2.697c1.635-1.66,2.856-3.736,4.195-5.693
      c1.291-2.006,2.33-4.264,3.598-6.291c-0.039-1.639,1.234-1.96,1.197-3.598c0.782-0.914,0.715-2.678,1.502-3.595
      c-0.137-1.03,0.117-1.678,0.297-2.398c0.188-5.181-0.191-9.795-1.201-13.78c2.376-0.626,4.775-1.221,6.596-2.398
      C110.171,43.939,112.082,42.335,111.335,39.593z M97.555,56.072c-0.621,3.476-2.49,5.701-4.197,8.091
      c0.236,1.532-0.42,2.175-0.297,3.596c-0.641,1.261-1.16,2.636-1.502,4.193c-0.82,1.077-1.342,2.45-2.095,3.596
      c-1.483,2.216-3.146,4.248-4.795,6.294c-1.528,2.266-3.688,3.901-5.396,5.991c-1.699,1.994-3.811,3.579-5.691,5.394
      c-1.913,0.686-3.594,1.605-5.094,2.697c-0.938,0.363-1.87,0.727-2.694,1.199c-0.716,0.587-2.02,0.581-2.701,1.197
      c-4.395,0.598-9.302,0.687-14.378,0.6c-4.168-0.426-8.552-0.641-12.288-1.499c-3.731-0.765-6.112-2.878-9.289-4.194
      c0.619-0.977,2.566-0.625,3.896-0.897c0.125-0.672,1.592-0.009,1.795-0.601c1.041,0.24,1.153-0.446,2.1-0.299
      c2.279-0.813,4.976-1.219,6.893-2.397c1.14-0.556,1.641-1.753,2.696-2.396c0.134-0.767,0.418-1.38,0.896-1.799
      c0.193-1.109,0.814-1.784,0.601-3.296c0.45-0.849,1.21-1.385,1.198-2.698c-0.3-0.594-0.519-1.279-1.198-1.499
      c-0.106-0.792-1.526-0.271-1.797-0.896c-1.031,0.13-1.682-0.119-2.397-0.303c-0.622-0.176-1.97,0.371-2.098-0.299
      c-3.403-0.093-5.255-1.738-7.491-2.994c1.739-1.056,4.172-1.422,5.391-2.998c2.088-0.31,4.277-0.521,4.497-2.696
      c0-2.895-3.118-2.673-5.391-3.297c-3.128-2.666-4.831-6.757-7.193-10.187c0.963-0.636,2.283-0.913,2.994-1.797
      c1.836,0.235,2.185-1.014,2.698-2.099c0.076-1.974-1.345-2.449-2.398-3.297c-1.045-0.851-1.92-1.87-2.695-2.994
      c-0.012-3.309-0.087-6.68,0.3-9.59c0.254-0.056,0.283,0.116,0.298,0.299c0.915,1.785,2.261,3.133,3.297,4.794
      c2.15,1.446,3.742,3.45,6.292,4.497c1.829,1.668,4.482,2.511,6.295,4.194c2.429,1.065,4.685,2.304,6.889,3.595
      c2.708,0.789,4.27,2.722,8.091,2.397c0.804-0.392,1.594-0.804,2.397-1.2c1.043-1.842-0.235-4.361,0.598-6.591
      c1.031-2.663,3.225-4.17,5.094-5.991c1.172-0.626,2.242-1.356,3.297-2.1c1.404-0.394,2.727-0.871,3.896-1.497
      c1.521-0.078,2.884-0.313,4.197-0.599h5.094c0.985,0.211,1.916,0.482,2.994,0.599c0.844,0.554,1.535,1.264,2.694,1.497
      c3.19,2.805,5.133,6.858,5.697,12.288C97.055,52.04,97.764,53.617,97.555,56.072z M98.75,33.299
      c-0.521,1.377-0.934,2.859-2.398,3.297c-0.068-0.427-0.49-0.505-0.596-0.898c-0.048-0.846,0.848-0.751,1.197-1.198
      C97.613,34.158,97.945,33.496,98.75,33.299C98.723,32.938,99.188,33.114,98.75,33.299z M76.578,45.584
      c0.656,0.544,1.146,1.252,2.098,1.5c0.406,0.893,1.271,1.323,2.398,1.497c0.189-0.608,1.398-0.196,1.496-0.898
      c0.703-0.094,0.672-0.927,1.199-1.2c-0.074-2.223-0.521-4.071-1.498-5.393C79.206,39.381,75.494,41.25,76.578,45.584z" />
    <a xlink:href="https://twitter.com/handdrawngods">
        <rect width="100%" height="100%" fill-opacity="0">
    </a>
</svg>

HTML:

.social-icon {
  width: 4em;
  height: 4em;
  margin-right: .5em;
  cursor: pointer;
}

.social-icon path {
  fill: #222222;
}
.twitter:hover path {
  fill: #18A6D1;
}

CodePen:

See the Pen Social SVG icons with hovers by Hand-Drawn Goods by Jucke (@jucke) on CodePen.