diff --git a/components/src/maplibre/Map/Map.svelte b/components/src/maplibre/Map/Map.svelte
index c5456f09..530b1397 100644
--- a/components/src/maplibre/Map/Map.svelte
+++ b/components/src/maplibre/Map/Map.svelte
@@ -320,6 +320,7 @@
 			.maplibregl-canvas {
 			touch-action: none;
 		}
+
 		.maplibregl-ctrl-bottom-left,
 		.maplibregl-ctrl-bottom-right,
 		.maplibregl-ctrl-top-left,
@@ -372,10 +373,10 @@
 			box-sizing: border-box;
 			cursor: pointer;
 			display: block;
-			height: 29px;
 			outline: none;
 			padding: 0;
-			width: 29px;
+			width: 2.25rem;
+			height: 2.25rem;
 		}
 
 		.maplibregl-ctrl-group button + button {
diff --git a/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte b/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
index 858fad4f..a3417485 100644
--- a/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
+++ b/components/src/maplibre/NavigationControl/NavigationControl.stories.svelte
@@ -22,7 +22,7 @@
 </Story>
 
 <Story asChild name="With compass">
-	<DesignTokens>
+	<DesignTokens theme="light">
 		<div class="container">
 			<Map style={SWRDataLabLight()} initialLocation={{ lat: 51, lng: 10, zoom: 20 }}>
 				<NavigationControl showCompass visualizePitch />
diff --git a/components/src/maplibre/NavigationControl/NavigationControl.svelte b/components/src/maplibre/NavigationControl/NavigationControl.svelte
index bd00c00d..a873288b 100644
--- a/components/src/maplibre/NavigationControl/NavigationControl.svelte
+++ b/components/src/maplibre/NavigationControl/NavigationControl.svelte
@@ -5,7 +5,7 @@
 	interface NavigationControlProps {
 		showCompass?: boolean;
 		/**
-		 * Show 3d tilt in the compass control. Requires `showCompass` to be `true`
+		 * Show 3d pitch in the compass control?
 		 */
 		visualizePitch?: boolean;
 		position?: ControlPosition;
@@ -23,28 +23,28 @@
 	:global {
 		[data-theme='light'] {
 			button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
+			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
 			}
 
 			button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
 			}
 
 			button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
 			}
 		}
 		[data-theme='dark'] {
 			button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-9z'/%3E%3C/svg%3E");
 			}
 
 			button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5z'/%3E%3C/svg%3E");
 			}
 
 			button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
-				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='25' height='25' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
+				background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' fill='%23eee'%3E%3Cpath d='m10.5 14 4-8 4 8h-8z'/%3E%3Cpath d='m10.5 16 4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E");
 			}
 		}
 	}