How to Change SVG Color on Hover with HTML & CSS

02/07/2021

Contents

Demo

Full Screen

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Change Svg Color on Hover</title>
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="container">
      <div class="icons">
        <div class="ic-twitter">
          <svg xmlns="http://www.w3.org/2000/svg" width="62" height="50" viewBox="0 0 62 50">
            <path d="M242.525841,300.919299 C240.262203,301.924221 237.829368,302.601005 235.276046,302.906071 C237.883203,301.344852 239.885357,298.871001 240.826189,295.922888 C238.388228,297.368745 235.686218,298.419811 232.809885,298.986362 C230.510357,296.533019 227.226415,295 223.59639,295 C215.44678,295 209.458265,302.603568 211.298913,310.496821 C200.811321,309.971288 191.510664,304.946678 185.283737,297.309783 C181.976723,302.982978 183.568704,310.404532 189.188064,314.162736 C187.121821,314.096083 185.173503,313.529532 183.473852,312.583573 C183.335418,318.431091 187.526866,323.901764 193.597416,325.119463 C191.820857,325.601415 189.875103,325.714212 187.896021,325.334803 C189.50082,330.349159 194.161403,333.997129 199.688474,334.099672 C194.38187,338.260357 187.696062,340.11895 181,339.329368 C186.586034,342.910685 193.223134,345 200.349877,345 C223.786095,345 237.026969,325.206624 236.227133,307.453856 C238.693294,305.67217 240.83388,303.449549 242.525841,300.919299 Z" transform="translate(-181 -295)"/>
          </svg>
        </div>
        <div class="ic-facebook">
          <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
            <path d="M375.239583,295 L330.760417,295 C329.235417,295 328,296.235417 328,297.760417 L328,342.241667 C328,343.764583 329.235417,345 330.760417,345 L354.708333,345 L354.708333,325.6375 L348.191667,325.6375 L348.191667,318.091667 L354.708333,318.091667 L354.708333,312.527083 C354.708333,306.06875 358.652083,302.552083 364.414583,302.552083 C367.175,302.552083 369.545833,302.758333 370.2375,302.85 L370.2375,309.6 L366.241667,309.602083 C363.108333,309.602083 362.502083,311.091667 362.502083,313.275 L362.502083,318.09375 L369.975,318.09375 L369.002083,325.639583 L362.502083,325.639583 L362.502083,345 L375.24375,345 C376.764583,345 378,343.764583 378,342.239583 L378,297.760417 C378,296.235417 376.764583,295 375.239583,295 Z" transform="translate(-328 -295)"/>
          </svg>
        </div>
        <div class="ic-youtube">
          <svg xmlns="http://www.w3.org/2000/svg" width="56" height="42" viewBox="0 0 54 40">
            <path d="M506.588283,301.409161 C498.579505,300.862502 480.741975,300.864725 472.744309,301.409161 C464.084429,302.000264 463.064444,307.231303 463,321 C463.064444,334.744253 464.075541,339.997514 472.744309,340.590839 C480.744198,341.135275 498.579505,341.137498 506.588283,340.590839 C515.248162,339.999736 516.268148,334.768697 516.332591,321 C516.268148,307.255747 515.257051,302.002486 506.588283,301.409161 Z M482.999722,329.888765 L482.999722,312.111235 L500.777252,320.984445 L482.999722,329.888765 L482.999722,329.888765 Z" transform="translate(-463 -301)"/>
          </svg>
        </div>
      </div>
      <h1>Change Svg Color<br>on Hover</h1>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background-color: #fbffe6;
  font-family: futura-pt, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 30px;
}
.icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 300px;
}
.ic-twitter,
.ic-facebook,
.ic-youtube {
  cursor: pointer;
}
.ic-twitter svg:hover {
  fill: #1da1f2;
}
.ic-facebook svg:hover {
  fill: #1877f2;
}
.ic-youtube svg:hover {
  fill: #da1725;
}
h1 {
  margin: 10px 0 0;
  color: #3d3935;
  font-size: 3rem;
  letter-spacing: 1px;
  text-align: center;
}
@media screen and (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }
}