diff --git a/components/package-lock.json b/components/package-lock.json
index 2b0b32e0d..de6e146a6 100644
--- a/components/package-lock.json
+++ b/components/package-lock.json
@@ -6769,9 +6769,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -6788,7 +6788,7 @@
       ],
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "source-map-js": "^1.2.0"
       },
       "engines": {
diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
index 6cd483ac3..826535d9a 100644
--- a/components/src/components/Map/services/MapService.ts
+++ b/components/src/components/Map/services/MapService.ts
@@ -2,6 +2,7 @@ import * as L from 'leaflet';
 import 'leaflet-draw';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-draw/dist/leaflet.draw-src.css';
+
 const DEFAULT_MAP_LAYER_URL =
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_LAYER_ATTRIBUTION =
@@ -9,8 +10,9 @@ const DEFAULT_LAYER_ATTRIBUTION =
 const DEFAULT_MAP_ZOOM = 5;
 const DECIMALS_LATLNG = 5; // the number of decimals of latitude and longitude to be displayed in the marker popup
 const COMPONENT_EDIT_CLASS = 'component-edit-tabs';
-const CUSTOM_MARKER_PATH =
-  'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png';
+const CUSTOM_MARKER_PATH = 'https://unpkg.com/leaflet@1.9.4/dist/images/';
+
+L.Icon.Default.imagePath = CUSTOM_MARKER_PATH;
 
 interface MapServiceOptions {
   mapContainer: HTMLElement;
@@ -34,6 +36,7 @@ class MapService {
 
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
+
       this.map = map;
       this.drawnItems = drawnItems;
 
@@ -49,9 +52,6 @@ class MapService {
             .setContent('<p>Only one marker for submission</p>')
             .openOn(map);
         } else {
-          if (layer.type === 'marker') {
-            layer.setIcon(this.customMarker);
-          }
           drawnItems.addLayer(layer);
         }
         this.bindPopupToLayer(layer);
@@ -64,9 +64,6 @@ class MapService {
         options.onDrawnItemsChange(drawnItems.getLayers());
       });
 
-      map.on(L.Draw.Event.DRAWSTART, (e) => {
-        e.layer.setIcon(this.customMarker);
-      });
       map.on('resize', () => {
         map.invalidateSize();
       });
@@ -87,7 +84,6 @@ class MapService {
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
-
     const map = L.map(mapContainer).setView(
       center,
       defaultZoom || DEFAULT_MAP_ZOOM
@@ -174,7 +170,7 @@ class MapService {
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
-        layer = L.marker(item.coordinates).setIcon(this.customMarker);
+        layer = L.marker(item.coordinates);
       } else if (item.type === 'rectangle') {
         layer = L.rectangle(item.bounds);
       } else if (item.type === 'circle') {
@@ -202,10 +198,5 @@ class MapService {
     }
     return false;
   }
-  customMarker = L.icon({
-    iconUrl: CUSTOM_MARKER_PATH,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  });
 }
 export default MapService;