Why my markers move when I resize my map on Leaflet?

Question

I have already get an eye on Google and seen that the solution should be the iconAnchor property.

I have set it to the same values that my iconSize. But it fails. When I resize my map the icon change their location with the map resizing.

How can I ensure my marker remain responsively on the same location?

Here my marker' code:

var placeholder1 = L.icon({
      iconUrl: "https://image.flaticon.com/icons/svg/484/484167.svg",
      iconSize:     [47, 47], // size of the icon
      iconAnchor:   [47, 47], // point of the icon which will correspond to marker's location
      popupAnchor:  [-25, -50], // point from which the popup should open relative to the iconAnchor
      tooltipAnchor:[30, -2]
    });

    var placeholder2 = L.icon({
      iconUrl: "https://image.flaticon.com/icons/svg/484/484167.svg", 
      iconSize:     [47, 47], // size of the icon 
      iconAnchor:   [47, 47], 
      popupAnchor:  [-25, -50], // point from which the popup should open relative to the iconAnchor
      tooltipAnchor:[10, -2]
    });

    var placeholder3 = L.icon({
      iconUrl: "https://image.flaticon.com/icons/svg/484/484167.svg", 
      iconSize:     [47, 47], // size of the icon 
      iconAnchor:   [47, 47], // point of the icon which will correspond to marker's location 
      popupAnchor:  [-25, -50], // point from which the popup should open relative to the iconAnchor
      tooltipAnchor:[0, 0]
    });

    var placeholder4 = L.icon({
      iconUrl: "https://image.flaticon.com/icons/svg/484/484167.svg", 
      iconSize:     [47, 47], // size of the icon 
      iconAnchor:   [47, 47], // point of the icon which will correspond to marker's location 
      popupAnchor:  [-25, -50], // point from which the popup should open relative to the iconAnchor
      tooltipAnchor:[-30, 130]
    });


var marker1 = L.marker(location ,{icon: placeholder1}).addTo(this.map); 
var marker2 = L.marker(location ,{icon: placeholder2}).addTo(this.map); 
var marker3 = L.marker(location ,{icon: placeholder3}).addTo(this.map); 
var marker4 = L.marker(location ,{icon: placeholder4}).addTo(this.map); 

Answer 1

For the icon you use, you should change iconAnchor value into [23.5, 47].

var placeholder = L.icon({
    iconUrl: "https://image.flaticon.com/icons/svg/484/484167.svg",
    iconSize:     [47, 47],
    iconAnchor:   [23.5, 47], // CHANGE HERE
    popupAnchor:  [-25, -50],
    tooltipAnchor:[30, -2]
});

---

Values change depending on anchor point location in any icon and depending on iconSize you defined for it. For an icon like in the image, iconAnchor values should be like that:

iconSize  iconAnchor
   x         x/2
   y          y