MapBox Icon SVG size on hover/click

Hello Experts,
I hope somone can help.... I am using MapBox for one of my projects with 3 layers for each POI type. Each POI layer using a custom icon SVG I uploaded via the MapBox Studio.
I am showing a popup when the user click on each POI and the popup is position fixed on the Map.
Currently the size of the icon SVG is set at 0.75. I need somehow to increase the size of the icon or replace the icon (what ever is easier) when the user click or mouseover each POI.
Below is my current script:

mapboxgl.accessToken = 'xyz'; 
 
	 var geojson = {
		type: 'FeatureCollection',
		features: [{
			type: 'Feature',
				geometry: {
					type: 'Point',
					coordinates: [19.225290,56.551136]
				},
		}]
	 };

		var map = new mapboxgl.Map({
			container: 'map',
			style: 'mapbox://styles/xyz/cjk4c9eaj2tv22rqp316keuaq',
			center: [19.225290,56.545136], // starting position [lng, lat]
			zoom: 13.5,
			scrollZoom: false,
			pitch: 10,
			rotation:10,
		});


var lastZoom = map.getZoom();

map.on('zoom', function() {
  const currentZoom = map.getZoom();
  if (currentZoom < 13 || currentZoom > 14) {
    $(".marker").hide();
  } else {
     $(".marker").show();
  }

  lastZoom = currentZoom;
});


map.on('load', function() {
	
	var layers = ['slf-urban', 'slf-land', 'slf-park'];

	var layer = $('#map-filters input[type="checkbox"]').on("change", function(c) {
		
		var thislayer = $(this).attr("id");
		
		if(thislayer == "slf-all") {
			for (var i = 0; i < layers.length; i++) {
		  	map.setLayoutProperty(layers[i], "visibility", "visible");
				$("#map-filters li").not(".slf-all").removeClass("selected");
				$("#map-filters li.slf-all").addClass("selected");
			}
		
		} else {	
			for (var i = 0; i < layers.length; i++) {
			map.setLayoutProperty(layers[i], "visibility", "none");
				$("#map-filters li").removeClass("selected");
				var thisInput = $(this).parent();
				$(thisInput).addClass("selected");
				map.setLayoutProperty(thislayer, "visibility", "visible");
			}
	
		}
	});
  
	// add markers to map
	geojson.features.forEach(function(marker) {
		// create a HTML element for each feature
		var el = document.createElement('div');
		el.className = 'marker';
		// make a marker for each feature and add to the map
		new mapboxgl.Marker(el)
		.setLngLat(marker.geometry.coordinates)  
		.addTo(map);
	}); 
});





var layersId = ['slf-urban', 'slf-land', 'slf-park'];

for (var i = 0; i < layersId.length; i++) {
    var layerId = layersId[i];

	map.on('click', layerId, function (e) {
		$(".mapboxgl-popup").hide();
		var coordinates = e.features[0].geometry.coordinates.slice();
		var address = e.features[0].properties.address;
		var category = e.features[0].properties.category;
		var description = e.features[0].properties.description;
		var name = e.features[0].properties.place_name;
		var photo = e.features[0].properties.photo;

		// Ensure that if the map is zoomed out such that multiple
		// copies of the feature are visible, the popup appears
		// over the copy being pointed to.
		while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
				coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
		}

		new mapboxgl.Popup({closeOnClick: true, closeButton: true})
			.setLngLat(coordinates)
			.setHTML('<div class="lagepop '+category+'"><h1>'+name+'</h1><p>'+description+'</p><p>'+address+'</p><div class="location-photo"><img src="'+photo+'"></div></div>')		 
			.addTo(map);		
		  $(".mapboxgl-popup").addClass("show");
	});
}

map.doubleClickZoom.disable();
map.addControl(new mapboxgl.FullscreenControl());
// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl({
	// Hide rotation control.
	showCompass: false
}), 'top-right');

Select allOpen in new window