mapbox - resize divIcons (svgs) at zoom levels - Leaflet

I am adding a geoJSON to a map using a custom divIcon (from svg) for point markers with Leaflet. The divIcon needs to resize on different zoom levels. Currently I can see the icons and the popup works, but they do not resize (and actually, they are not anchored correctly either). I have tried to reset the iconSize property on a zoom event, but that is not working; the zoom event is hit but the icon does not change. I also tried to add multiple icons to each feature (points) in the geoJSON using the 'pointToLayer' function as described in the Leaflet docs, thinking that I could toggle the opacity at different zoom levels, but this does not work either (only one icon is added). How can I use divIcons that will resize?

some code snippets:

geoJSONLayer = L.geoJson(newFeatures, {
//onEachFeature: onEachFeature,
pointToLayer: function (feature, latLng) {


    return new L.Marker(latLng, {
        icon: aDivIcon, clickable:false, opacity:1

      }).bindPopup(popupContent, popupOptions),
    new L.Marker(latLng, {
        icon: aDivIcon2, clickable:false, opacity:0

      }).bindPopup(popupContent, popupOptions); /// this doesn't work

  }

}).addTo(map);


var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar,  "popupAnchor": Popupvar, html: ''});

(event example)

map.on('zoomend', function(e) {
   if (map.getZoom() === 15)  { 
        iconSize = [12,12];
        Anchorvar = [12,12] ;

        Popupvar = [ 0, -12]; 
    } 
...
}