diff --git a/src/components/map/FavoritesLayer.vue b/src/components/map/FavoritesLayer.vue
index e5b50e0de..19a01b9d0 100644
--- a/src/components/map/FavoritesLayer.vue
+++ b/src/components/map/FavoritesLayer.vue
@@ -111,14 +111,11 @@ export default {
 			const icons = {}
 			Object.keys(this.categories).forEach((catid) => {
 				const color = this.categories[catid].color
-				const iconUrl = OCA.Accessibility?.theme === 'dark'
-					? generateUrl('/svg/maps/star-circle-black') + '?color=' + color
-					: generateUrl('/svg/maps/star-circle-white') + '?color=' + color
 				icons[catid] = L.divIcon({
 					iconAnchor: [18, 18],
 					className: 'leaflet-marker-favorite',
 					// html: '<div class="favoriteMarker ' + darkClass + '" style="background-color: #' + color + '"></div>',
-					html: '<div class="favoriteMarker" style="background-image: url(' + iconUrl + ');"></div>',
+					html: '<div class="favoriteMarker icon-star-white" style="background-color: #' + color + ';"></div>',
 				})
 			})
 			return icons
@@ -127,14 +124,11 @@ export default {
 			const icons = {}
 			Object.keys(this.categories).forEach((catid) => {
 				const color = this.categories[catid].color
-				const iconUrl = OCA.Accessibility?.theme === 'dark'
-					? generateUrl('/svg/maps/star-circle-black') + '?color=' + color
-					: generateUrl('/svg/maps/star-circle-white') + '?color=' + color
 				icons[catid] = L.divIcon({
 					iconAnchor: [18, 18],
 					className: 'leaflet-marker-favorite',
 					// html: '<div class="favoriteMarker ' + darkClass + '" style="background-color: #' + color + '"></div>',
-					html: '<div class="favoriteMarker selected" style="background-image: url(' + iconUrl + ');"></div>',
+					html: '<div class="favoriteMarker selected icon-star-white" style="background-color: #' + color + ';"></div>',
 				})
 			})
 			return icons
@@ -182,13 +176,10 @@ export default {
 			const catid = favorite.category
 			const color = this.categories[catid].color
 			const label = cluster.getChildCount()
-			const iconUrl = OCA.Accessibility?.theme === 'dark'
-				? generateUrl('/svg/maps/star-circle-black') + '?color=' + color
-				: generateUrl('/svg/maps/star-circle-white') + '?color=' + color
 			return new L.DivIcon(L.extend({
 				className: 'leaflet-marker-favorite-cluster cluster-marker',
 				// html: '<div class="favoriteClusterMarker ' + darkClass + '" style="background-color: #' + color + '"></div>'
-				html: '<div class="favoriteClusterMarker" style="background-image: url(' + iconUrl + ');"></div>'
+				html: '<div class="favoriteClusterMarker icon-star-white" style="background-color: #' + color + ';"></div>'
 					+ '​<span class="label">' + label + '</span>',
 			}, cluster, {
 				iconSize: [CLUSTER_MARKER_VIEW_SIZE, CLUSTER_MARKER_VIEW_SIZE],
@@ -215,5 +206,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// nothing
+
 </style>
diff --git a/src/views/App.vue b/src/views/App.vue
index 0314a9c79..75ef8806d 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -1772,4 +1772,5 @@ export default {
 	background: url('../../img/star-black.svg') no-repeat 50% 50%;
 	border-radius: 50%;
 }
+
 </style>