How to build a hover function for Custom Icons (HTML) in bubble?

[john41]

Hi Bubblers, I’m building a nav bar with custom icons uploaded as SVG (as shown in How To Upload A Custom Icon & Change Its Color - Bubble.io - YouTube)

How do I get these custom icons to change state when hovered or clicked?

[philipp.laengle107]

If you upload them as an image:

1. Go to the image element conditions tab
2. Add a new condition: “When this image is hovered or this image is pressed” and change the image data source to the alternative icon
3. Also works on Groups if you set the group background as image

Hope that helps.

[john41]

Thanks Philipp, unfortunately I didn’t upload the icon as an image, but rather an SVG file. So the conditional statement doesn’t work.

SOLUTION:
Grouped the SVG icon and text in a container, and conditionally formatted the container to change state when hovered.