diff --git a/components/MapComponent.js b/components/MapComponent.js
index 16501840d..7303ee5d2 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -38,16 +38,8 @@ import { mapIdState, userIdState } from "../store/atoms/urlParameterState";
 import { set } from "lodash";
 import { poiLayerVisibleState } from "../store/atoms/poiLayerVisible";
 import { data } from "autoprefixer";
+import plusRoundIcon from "./PlusRoundIcon.js";
 
-//import { createRoot } from "react-dom/client";
-
-const plusRoundIcon = L.icon({
-  //iconUrl: "/img/plus_round.png", // Update with your actual path
-  iconUrl: "/img/plus_round.png", // Update with your actual path
-  iconSize: [22, 22],
-  iconAnchor: [25, 55],
-  className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
-});
 //---------------------------------------------------------------------
 //-------------------- MapComponent -----------------------------------
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
diff --git a/components/PlusRoundIcon.js b/components/PlusRoundIcon.js
new file mode 100644
index 000000000..d0f1c31db
--- /dev/null
+++ b/components/PlusRoundIcon.js
@@ -0,0 +1,8 @@
+const plusRoundIcon = L.icon({
+  //iconUrl: "/img/plus_round.png", // Update with your actual path
+  iconUrl: "/img/plus_round.png", // Update with your actual path
+  iconSize: [22, 22],
+  iconAnchor: [25, 55],
+  className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
+});
+export default plusRoundIcon;