Dynamically Change SVG Icon Colours for Mouseover Effects

When we use images in an app, we sometimes want to be able to change their colour dynamically to react to either some app settings or certain user actions.

For example, let’s imagine we have some toolbar icons. We might have an app with switchable light and dark themes. To maintain good contrast in both modes, we want the icons to be one colour when using the light theme, and another with the dark.

Alternatively, we might want to improve the UX by providing immediate feedback on screen elements that can be clicked on. To do this, we want buttons to change their icon colour when the mouse pointer moves over them.

In this article, we’ll look at ways in which we can accomplish this when using SVG images.

SVG Images

Let’s look at our first use case where we want icons to be coloured differently for light and dark themes. As we’ve previously seen, an SVG image is declared using markup. Like HTML, we can modify its properties using CSS if we can reference it. When rendered in a browser, we should see something like Image 1 with the following code.

<div>
  <svg class="icon" viewBox="0 0 15 25" xmlns="http://www.w3.org/2000/svg">
    <path d="M1,10 L11,10 L11,20 Z"></path>
    <path d="M0,11 L0,21 L10,21 Z"></path>
  </svg>
</div>

.icon {
  width: 100px;
  height: 100px;
  fill: cornflowerblue;
  stroke: darkblue;
}

You’ll notice that the SVG tag that defines the image has an icon class. In the corresponding CSS, we’ve set the fill (i.e. background) to be cornflowerblue; and the stroke (i.e. line colour) to be darkblue. This applies to all child elements of the svg, meaning both triangles are coloured/styled as such.

If we wanted to be more precise, we could style each triangle individually, as we’ve done in Image 2.

To do this, we’ve given each triangle a different class (triangle1 and triangle2). In the CSS, we can then be more specific; we’ve coloured the first triangle green, and the second blue.

<div>
  <svg viewBox="0 0 15 25" xmlns="http://www.w3.org/2000/svg">
    <path class="triangle1" d="M1,10 L11,10 L11,20 Z"></path>
    <path class="triangle2" d="M0,11 L0,21 L10,21 Z"></path>
  </svg>
</div>

svg {
  width: 100px;
  height: 100px;
}

.triangle1 {
  fill: lightgreen;
  stroke: darkgreen;
}

.triangle2 {
  fill: cornflowerblue;
  stroke: darkblue;
}

Hover States

For our second use case, we’d like our icons to change colour when the mouse pointer moves over them to indicate that they can be clicked on. Luckily, we can use the CSS :hover pseudo-class to help us – all we need do is declare the styles we want for each state.

In the following code, our icon is blue in its natural state. When the mouse pointer moves over it, its colours change to green. Image 3 shows the result of running this code.

<div>
  <svg class="icon" viewBox="0 0 15 25" xmlns="http://www.w3.org/2000/svg">
    <path d="M1,10 L11,10 L11,20 Z"></path>
    <path d="M0,11 L0,21 L10,21 Z"></path>
  </svg>
</div>

.icon {
  width: 100px;
  height: 100px;
  fill: cornflowerblue;
  stroke: darkblue;

  &:hover {
    fill: lightgreen;
    stroke: darkgreen;
  }
}

Summary

When building a Web app, you might want to change the colours of its icons in real time – maybe for theming or UX purposes. This is easy with SVG icons.

An SVG image is declared as markup. Like HTML, the properties of it (or its elements) can be specified using CSS. If your app uses separate stylesheets for different themes, the colours of icons in each theme can be specified directly in the stylesheet.

Similarly, it’s possible to declare hover states. You can use this technique to change an icon’s colour when the mouse pointer moves over it (or its corresponding button). This can enhance an app’s UX by providing immediate feedback to a user to show the buttons that can be clicked on.

Thanks for reading!

This article is from my newsletter. If you found it useful, please consider subscribing. You’ll get more articles like this delivered straight to your inbox (once per week), plus bonus developer tips too!