diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 0bc34ec734..cef40d09d7 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -325,13 +325,25 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           continue;
         }
 
+        // create icon
+        let iconHTML = "";
+        if (icon) {
+          const el = document.createElement("ha-icon");
+          el.setAttribute("icon", icon);
+          iconHTML = el.outerHTML;
+        } else {
+          const el = document.createElement("span");
+          el.innerHTML = title;
+          iconHTML = el.outerHTML;
+        }
+
         // create marker with the icon
         mapItems.push(
           Leaflet.marker([latitude, longitude], {
             icon: Leaflet.divIcon({
-              html: icon ? `<ha-icon icon="${icon}"></ha-icon>` : title,
+              html: iconHTML,
               iconSize: [24, 24],
-              className: "",
+              className: this._config!.dark_mode === true ? "dark" : "light",
             }),
             interactive: false,
             title,
@@ -455,6 +467,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       :host([ispanel]) #root {
         height: 100%;
       }
+
+      .dark {
+        color: #ffffff;
+      }
+
+      .light {
+        color: #000000;
+      }
     `;
   }
 }
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index 24053cee0e..a3ed6c8ae8 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -24,6 +24,10 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
           width: 100%;
           z-index: 0;
         }
+
+        .light {
+          color: #000000;
+        }
       </style>
 
       <app-toolbar>
@@ -120,16 +124,18 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
           el.setAttribute("icon", entity.attributes.icon);
           iconHTML = el.outerHTML;
         } else {
-          iconHTML = title;
+          const el = document.createElement("span");
+          el.innerHTML = title;
+          iconHTML = el.outerHTML;
         }
 
         icon = this.Leaflet.divIcon({
           html: iconHTML,
           iconSize: [24, 24],
-          className: "",
+          className: "light",
         });
 
-        // create market with the icon
+        // create marker with the icon
         mapItems.push(
           this.Leaflet.marker(
             [entity.attributes.latitude, entity.attributes.longitude],