Dynamically Change SVG Icon Colours for Mouseover Effects

Style your images using CSS

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 newsletter, 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;
}

Image 1: A simple SVG image with styling properties declared for the root element

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.

Image 2: An SVG image with styling properties declared for each triangle

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;
  }
}

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

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.

---

Bonus Developer Tip

While useful for making the most of your workspace, you don’t have to maximize your app windows all the time.

If you’re copying a file from one folder to another, it’s helpful to have two windowed instances of File Explorer. With one viewing the source folder and the other the target, copying a file becomes a simple case of drag and drop across the two windows.

These tips are exclusively for my Substack subscribers and readers, as a thank-you for being part of this journey. Some may be expanded into fuller articles in future, depending on their depth.

But you get to see them here, first.

---