Changing SVG Icon Colour on Hover
In today's post, I will share several techniques to change SVG colour on hover. Let's dive right in.
Recently, I was working on a project that required building a testimonial carousel using a third-party library.
Firstly, let's look at how to change the SVG colour on hover when you're using inline SVG. Here's the HTML structure:
I will use a simple example of testimonial navigation arrows.
<div class="testimonials">
<div class="testimonial">
Discovering 'Brew Bliss' was a game-changer for me. Their single-origin Ethiopian blend was bold, smooth, and unforgettable. Excellent customer service and commitment to sustainability further impressed me. It's not just about buying coffee, it's a sensory experience. Don't miss out!
</div>
<div class="navigation">
<button class="button previous">
<svg viewBox="0 0 24 24"><path d="M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z"/></svg>
</button>
<button class="button next">
<svg viewBox="0 0 24 24"><path d="M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z"/></svg>
</button>
</div>
</div>
The above HTML structure has a single testimonial and navigation arrow buttons for transitioning between the previous and next testimonials.
Now, let's style these elements:
.testimonials {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
}
.testimonial {
padding: 34px;
font-family: sans-serif;
line-height: 1.4;
}
.navigation {
display: flex;
justify-content: space-between;
}
.button {
display: flex;
padding: 4px;
justify-content: space-between;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: #F8F8F2;
svg {
fill: #D5D5D5;
}
&:hover {
background: #D5D5D5;
svg {
fill: #5290BF;
}
}
}
.next {
svg {
transform: rotate(180deg);
}
}
In the above style file, we change the SVG fill on hover. You can play around with this example on Fiddle
However, while working on my project, I noticed that the carousel library used CSS content property to add SVG arrows. This posed a challenge, and I had two options to resolve it.
Using SVG in CSS content property and changing it on hover
Here is an updated style for the same HTML structure.
.testimonials {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
}
.testimonial {
padding: 34px;
font-family: sans-serif;
line-height: 1.4;
}
.navigation {
display: flex;
justify-content: space-between;
}
.arrow {
display: flex;
padding: 4px;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: #F8F8F2;
content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z' fill='%23d5d5d5'/%3E%3C/svg%3E");
&:hover {
content: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z' fill='%235290BF'/%3E%3C/svg%3E");
background: #D5D5D5;
}
}
.arrow-next {
transform: rotate(180deg);
}
In this example I am using encoded SVG in the CSS content property and replacing it on hover.
You can play around with this example on Fiddle
Leveraging CSS mask property
In this example I am using the CSS mask property and the color of the SVG is controlled by the background property. You can also use and image and gradient.
Because I want to keep the button background I need to do some changes to the HTML:
... <button class="arrow arrow-previous"><span class="arrow-icon"></span></button> <button class="arrow arrow-next"><span class="arrow-icon"></span></button> ...
Here is updated style file:
.testimonials {
display: flex;
flex-direction: column;
max-width: 600px;
margin: auto;
}
.testimonial {
padding: 34px;
font-family: sans-serif;
line-height: 1.4;
}
.navigation {
display: flex;
justify-content: space-between;
}
.arrow-icon {
display: block;
width: 24px;
height: 24px;
background: black;
-webkit-mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.7 23.5a2 2 0 0 1-1.4-.6l-9.5-9.5a2 2 0 0 1 0-2.8l9.5-9.5a2 2 0 0 1 2.8 0c.8.8.8 2 0 2.8l-8 8.1 8.1 8.1c.8.8.8 2 0 2.8-.4.4-1 .6-1.5.6z'/%3E%3C/svg%3E") no-repeat center;
mask-size: cover;
}
.arrow {
display: flex;
padding: 4px;
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
border: none;
border-radius: 8px;
background: #F8F8F2;
&:hover {
background: #D5D5D5;
.arrow-icon {
background: #5290BF;
}
}
}
.arrow-next {
transform: rotate(180deg);
}
You can play around with this example on Fiddle
And there you have it! Three handy tricks to make your SVGs change color on hover. Until next time, happy coding!
