diff --git a/src/components/SvgIcon.vue b/src/components/SvgIcon.vue
index a19b06d..dbb1a59 100644
--- a/src/components/SvgIcon.vue
+++ b/src/components/SvgIcon.vue
@@ -39,7 +39,7 @@ export default {
 
   computed: {
     iconPath() {
-      return `#${this.name}`;
+      return `#icon--${this.name}`;
     },
 
     className() {
diff --git a/src/leaflet/control/ChatControl.ts b/src/leaflet/control/ChatControl.ts
index 1a6a6e7..1453fb6 100644
--- a/src/leaflet/control/ChatControl.ts
+++ b/src/leaflet/control/ChatControl.ts
@@ -36,7 +36,7 @@ export class ChatControl extends Control {
 		chatButton.title = useStore().state.messages.chatTitle;
 		chatButton.innerHTML = `
 		<svg class="svg-icon">
-		  <use xlink:href="#chat" />
+		  <use xlink:href="#icon--chat" />
 		</svg>`;
 
 		chatButton.addEventListener('click', e => {
diff --git a/src/leaflet/control/ClockControl.ts b/src/leaflet/control/ClockControl.ts
index 6ea9214..3c75641 100644
--- a/src/leaflet/control/ClockControl.ts
+++ b/src/leaflet/control/ClockControl.ts
@@ -68,11 +68,11 @@ export class ClockControl extends Control {
 
 		this._sun!.innerHTML = `
 		<svg class="svg-icon" aria-hidden="true">
-	  		<use xlink:href="#clock_sun" />
+	  		<use xlink:href="#icon--clock_sun" />
 		</svg>`;
 		this._moon!.innerHTML = `
 		<svg class="svg-icon" aria-hidden="true">
-	  		<use xlink:href="#clock_moon" />
+	  		<use xlink:href="#icon--clock_moon" />
 		</svg>`;
 
 		if (this.options.showDigitalClock) {
@@ -155,7 +155,7 @@ export class ClockControl extends Control {
 		if(this._sun && this._currentSunIcon !== icon) {
 			this._sun!.innerHTML = `
 				<svg class="svg-icon" aria-hidden="true">
-					<use xlink:href="#${icon}" />
+					<use xlink:href="#icon--${icon}" />
 				</svg>`;
 			this._currentSunIcon = icon;
 		}
@@ -165,7 +165,7 @@ export class ClockControl extends Control {
 		if(this._moon && this._currentMoonIcon !== icon) {
 			this._moon!.innerHTML = `
 				<svg class="svg-icon" aria-hidden="true">
-					<use xlink:href="#${icon}" />
+					<use xlink:href="#icon--${icon}" />
 				</svg>`;
 			this._currentMoonIcon = icon;
 		}
diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts
index fe6cdc0..4629f43 100644
--- a/src/leaflet/control/DynmapLayerControl.ts
+++ b/src/leaflet/control/DynmapLayerControl.ts
@@ -60,7 +60,7 @@ export class DynmapLayerControl extends Control.Layers {
 		this._layersLink!.setAttribute('aria-expanded', 'false');
 		this._layersLink!.innerHTML = `
 		<svg class="svg-icon" aria-hidden="true">
-		  <use xlink:href="#layers" />
+		  <use xlink:href="#icon--layers" />
 		</svg>`;
 
 		return element;
@@ -135,7 +135,7 @@ export class DynmapLayerControl extends Control.Layers {
 		item.appendChild(input);
 		item.insertAdjacentHTML('beforeend',  `
 		<svg class="svg-icon" aria-hidden="true">
-	  		<use xlink:href="#checkbox" />
+	  		<use xlink:href="#icon--checkbox" />
 		</svg>`);
 		item.appendChild(label);
 
diff --git a/src/leaflet/control/LinkControl.ts b/src/leaflet/control/LinkControl.ts
index b90ffc4..82e4b40 100644
--- a/src/leaflet/control/LinkControl.ts
+++ b/src/leaflet/control/LinkControl.ts
@@ -38,7 +38,7 @@ export class LinkControl extends Control {
 		linkButton.title = useStore().state.messages.linkTitle;
 		linkButton.innerHTML = `
 		<svg class="svg-icon" aria-hidden="true">
-		  <use xlink:href="#link" />
+		  <use xlink:href="#icon--link" />
 		</svg>`;
 
 		linkButton.addEventListener('click', e => {
diff --git a/src/leaflet/control/LoadingControl.ts b/src/leaflet/control/LoadingControl.ts
index 7c3c662..7b62def 100644
--- a/src/leaflet/control/LoadingControl.ts
+++ b/src/leaflet/control/LoadingControl.ts
@@ -56,7 +56,7 @@ export class LoadingControl extends Control {
 		this._loadingIndicator.hidden = true;
 		this._loadingIndicator.innerHTML = `
 		<svg class="svg-icon">
-		  <use xlink:href="#loading" />
+		  <use xlink:href="#icon--loading" />
 		</svg>`;
 
 		this._addLayerListeners(map);
diff --git a/vite.config.ts b/vite.config.ts
index e3055d7..56c2c10 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,7 @@ import analyze from 'rollup-plugin-analyzer';
 
 export default defineConfig({
   plugins: [vue(), analyze(), svgSpritePlugin({
-    symbolId: (name) => name,
+    symbolId: (name) => `icon--${name}`,
   })],
   base: './',
   server: {