Change SVG path color on hover

programming web dev
1

Hi Kirupa members,
Could you please help.
Is it possible to change on hover this black color inside the icon with CSS ?
I can change the black color inside the path. But it doesn’t work for hover effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Kirupa</title>
    <style>

        body {
            background-color: aquamarine;
        }

        .icon-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        .icon {
        fill: yellow;
        stroke: black;
        transition: all 0.5s ease-in-out;
    }

    
        .icon:hover {
            fill: yellowgreen;
            stroke: red;
        }
      
 
    </style>
</head>
<body>
<!-------SVG ICON HIDDEN------->
    <svg style="display: none;" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <symbol id="youtube">
            <rect width="48" height="48" rx="24"/>
            <path d="M33.9656 18.5438C33.8795 18.1982 33.7108 17.8786 33.474 17.6125C33.2373 17.3463 32.9395 17.1416 32.6063 17.0157C29.4 15.7782 24.2812 15.7876 24 15.7876C23.7188 15.7876 18.6 15.7782 15.3938 17.0157C15.0605 17.1416 14.7627 17.3463 14.526 17.6125C14.2892 17.8786 14.1205 18.1982 14.0344 18.5438C13.7906 19.472 13.5 21.1782 13.5 24.0001C13.5 26.822 13.7906 28.5282 14.0344 29.4563C14.1205 29.802 14.2892 30.1216 14.526 30.3877C14.7627 30.6539 15.0605 30.8586 15.3938 30.9845C18.4688 32.1751 23.2875 32.2126 23.9344 32.2126H24.0656C24.7125 32.2126 29.5312 32.1751 32.6063 30.9845C32.9395 30.8586 33.2373 30.6539 33.474 30.3877C33.7108 30.1216 33.8795 29.802 33.9656 29.4563C34.2094 28.5282 34.5 26.822 34.5 24.0001C34.5 21.1782 34.2094 19.472 33.9656 18.5438ZM27.2062 24.3095L22.7062 27.3095C22.6466 27.3534 22.5741 27.3765 22.5 27.3751C22.4379 27.3728 22.3771 27.3568 22.3219 27.3282C22.262 27.2971 22.2118 27.2499 22.1771 27.192C22.1423 27.1341 22.1243 27.0676 22.125 27.0001V21.0001C22.1243 20.9326 22.1423 20.8661 22.1771 20.8082C22.2118 20.7503 22.262 20.7031 22.3219 20.672C22.3817 20.6401 22.449 20.625 22.5167 20.6283C22.5843 20.6316 22.6499 20.6532 22.7062 20.6907L27.2062 23.6907C27.2585 23.7237 27.3016 23.7693 27.3315 23.8234C27.3614 23.8775 27.377 23.9383 27.377 24.0001C27.377 24.0619 27.3614 24.1227 27.3315 24.1768C27.3016 24.2309 27.2585 24.2765 27.2062 24.3095Z" fill="#090B0C"/>
        </symbol>
        </svg>
<!-------END SVG ICON HIDDEN------->


    <div class="icon-container">
        <div>

              <svg width="48" height="48" class="icon">
                        <use href="#youtube"></use>
                  </svg>

          </div>
       </div>
    
</body>
</html>

https://icon-change-svg-color-kirupa.netlify.app/

Thank you very much in advance :slight_smile:

2

Hi @Helena_G - you can do this by using a CSS custom property! Take a look at the full code here:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Kirupa</title>
  <style>
    body {
      background-color: aquamarine;
    }

    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .icon {
      fill: yellow;
      stroke: black;
      transition: all 0.5s ease-in-out;

      --youtubeColor: #090B0C;
    }


    .icon:hover {
      fill: yellowgreen;
      --youtubeColor: red;
    }
  </style>
</head>

<body>
  <!-------SVG ICON HIDDEN------->
  <svg style="display: none;" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
    <symbol id="youtube">
      <rect width="48" height="48" rx="24" />
      <path
        d="M33.9656 18.5438C33.8795 18.1982 33.7108 17.8786 33.474 17.6125C33.2373 17.3463 32.9395 17.1416 32.6063 17.0157C29.4 15.7782 24.2812 15.7876 24 15.7876C23.7188 15.7876 18.6 15.7782 15.3938 17.0157C15.0605 17.1416 14.7627 17.3463 14.526 17.6125C14.2892 17.8786 14.1205 18.1982 14.0344 18.5438C13.7906 19.472 13.5 21.1782 13.5 24.0001C13.5 26.822 13.7906 28.5282 14.0344 29.4563C14.1205 29.802 14.2892 30.1216 14.526 30.3877C14.7627 30.6539 15.0605 30.8586 15.3938 30.9845C18.4688 32.1751 23.2875 32.2126 23.9344 32.2126H24.0656C24.7125 32.2126 29.5312 32.1751 32.6063 30.9845C32.9395 30.8586 33.2373 30.6539 33.474 30.3877C33.7108 30.1216 33.8795 29.802 33.9656 29.4563C34.2094 28.5282 34.5 26.822 34.5 24.0001C34.5 21.1782 34.2094 19.472 33.9656 18.5438ZM27.2062 24.3095L22.7062 27.3095C22.6466 27.3534 22.5741 27.3765 22.5 27.3751C22.4379 27.3728 22.3771 27.3568 22.3219 27.3282C22.262 27.2971 22.2118 27.2499 22.1771 27.192C22.1423 27.1341 22.1243 27.0676 22.125 27.0001V21.0001C22.1243 20.9326 22.1423 20.8661 22.1771 20.8082C22.2118 20.7503 22.262 20.7031 22.3219 20.672C22.3817 20.6401 22.449 20.625 22.5167 20.6283C22.5843 20.6316 22.6499 20.6532 22.7062 20.6907L27.2062 23.6907C27.2585 23.7237 27.3016 23.7693 27.3315 23.8234C27.3614 23.8775 27.377 23.9383 27.377 24.0001C27.377 24.0619 27.3614 24.1227 27.3315 24.1768C27.3016 24.2309 27.2585 24.2765 27.2062 24.3095Z"
        fill="var(--youtubeColor)" />
    </symbol>
  </svg>
  <!-------END SVG ICON HIDDEN------->


  <div class="icon-container">
    <div>

      <svg width="48" height="48" class="icon">
        <use href="#youtube"></use>
      </svg>

    </div>
  </div>

</body>

</html>

I defined a CSS property called youtubeColor that I assigned to the SVG path as well. On hover, I change the value of that color to whatever I would like it to be:

.icon {
  fill: yellow;
  stroke: black;
  transition: all 0.5s ease-in-out;

  --youtubeColor: #090B0C;
}


.icon:hover {
  fill: yellowgreen;
  --youtubeColor: red;
}

Does this work for you?

Cheers,
Kirupa :slight_smile:

3

@Helena_G - to provide another approach, you can target the SVG color attribute using CSS as shown in this quick YouTube short I recorded a few minutes ago:

4

Lastly, a full video on how to change an element’s SVG color using both CSS and JavaScript techniques!

5

Using SVG source code in your DOM is unpractical from several reasons in terms of performance.

I would suggest to work with svg in old-fashion way, by <img src="image.src" />.
You can modify color of whole css by mask rule:

Example:

.your-image {
  mask: url("image.svg") no-repeat center;
}

.your-image:hover {
  background: red;
}

For some browsers is good to add autoprefixer because they had some issues with mask.

1 Like
6

Hi @landsman - welcome to the forums! :slight_smile:

From my understanding, your approach doesn’t work for changing only a single color (or a subset of colors) from a multi-colored SVG. Do I have it right?

With that said, I should add a note to explain that having a lot of inline SVGs isn’t very performant. This is especially true if they have a lot of DOM nodes. I do run all of my SVGs through SVGOMG to reduce their complexity and size, but…it isn’t perfect.

:eyes:

7

@kirupa @landsman Sorry for the late answer.
Thank you very much for your help :heart_eyes: