I know that this question has been asked many times already, cause it’s the whole day I navigate through forums for a solutions, but I can’t get it to work so I’ll ask my question aswell and hope someone will be able to help me.

I have an openLayer map v5.3 with some Feature Icons, when i zoom in or out the scale with the map so eventually they overlap each other and a series of other problems.
I just want them not to scale, and so to become smaller/bigger as i zoom in/out.

This is where i define the layer:

vectorSource = new ol.source.Vector();
markerVectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: function(feature){
        return feature.getStyle() || null;
    }
});

this is my marker:

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat([mCoordinates[1], mCoordinates[0]])),
        name: ocpCode,
        stationTracks: ocpTracks
});

marker.setStyle(createStationStyle(code, tracks.length));

I have a null style in the layer cause anyway i give a style to each single marker, here:

function createStationStyle(markerName, nTracks) {
    const spacing = 45 / (nTracks + 1);

    const lines = Array.from({ length: nTracks }, (_, i) => {
        const x = (i + 1) * spacing;
        return `<line x1="${x}" y1="10" x2="${x}" y2="30" stroke="red" stroke-width="2"/>`;
    }).join('');

    return new ol.style.Style({
        image: new ol.style.Icon({
            src: 'data:image/svg+xml;base64,' + btoa(`
                 <svg xmlns="http://www.w3.org/2000/svg" width="45" height="40">
                     <rect x="0" y="10" width="45" height="20" fill="white" stroke="black" stroke-width="2"/>
                     ${lines}
                     <text x="50%" y="7" font-size="10" text-anchor="middle" fill="black">${markerName}</text>
                 </svg>
             `),
            anchor: [0.5, 0.5]
        })
    });
}

I thougth about switching to Polygons cause seem easier to manage, but it would be way better to keep the icons

Thanks for any help!