How can I change the default hotspot numbers to different images?

HI there,

I am need to change the default hotspot numbers to different images. Currently they are counting up but I would like to replace it with a image. What is the easiest way?
For example: 1 will be replace as apple image, 2 will be replaced as banana image

There is a chance to change default number with icon that is defined in CSS as content -> but i dont know how i can have different image for different hotspots.

.av-image-hotspot_inner:after {
content: ‘\25CE’;
color: #888!important;
position: relative;
left: -3px;
}
.av-image-hotspot_inner {
color: transparent!important;
}

Many thanks 🙏 , Eric