Dynamically Change SVG Icon Colours for Mouseover Effects
Tags: frontend, tutorial, webdev
Published: 2024-02-21 13:00:00

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](https://webdeveloperdiary.substack.com/p/svg-an-introduction-vs-bitmap-formats) 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.

``` html
<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>
```

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


![Two blue right-angle triangles arranged to form a square](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi1g351bvgjv4cvsej2b.png)
<figcaption>
Image 1: A simple SVG image with styling properties declared for the root element
</figcaption>

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.


![Two right-angle triangles, one blue and one green, arranged to form a square](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c1jiro9icq2gieqhkboh.png)

<figcaption>
Image 2: An SVG image with styling properties declared for each triangle
</figcaption>

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.

``` html
<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>
```

``` css
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](https://developer.mozilla.org/en-US/docs/Web/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.

``` html
<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>
```

``` css
.icon {
  width: 100px;
  height: 100px;
  fill: cornflowerblue;
  stroke: darkblue;
  
  &:hover {
    fill: lightgreen;
    stroke: darkgreen;
  }
}
```


![Two squares each formed from two triangles. One is blue and one green](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o5swj9abf5deod5rpcj.png)

<figcaption>
Image 3: The icon in its (a) normal state, and (b) when hovered over by the mouse pointer
</figcaption>

## 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](https://webdeveloperdiary.substack.com/?sd=pf). 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!