diff --git a/README.md b/README.md
index 27fb3ee..7d24c15 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# @wjfe/n-savant
+# <img src="src/lib/logo/logo-48.svg" alt="N-Savant Logo" width="48" height="48" align="left">&nbsp;&nbsp;&nbsp;@wjfe/n-savant
 
 > The client-side router for Svelte v5 SPA's that invented multi hash routing.
 
diff --git a/demo/src/lib/NavBar.svelte b/demo/src/lib/NavBar.svelte
index a197bd9..0175618 100644
--- a/demo/src/lib/NavBar.svelte
+++ b/demo/src/lib/NavBar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Link, Route } from '@wjfe/n-savant';
+	import logo from '@wjfe/n-savant/logo64';
 	import SubNav from './SubNav.svelte';
 	import { routingMode } from './hash-routing';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -22,28 +23,7 @@
 <nav class="navbar navbar-expand-lg bg-primary-subtle" {...restProps}>
 	<div class="container-fluid">
 		<Link class="navbar-brand fw-bold" href="/" id="logoLink">
-			<svg style:height="1.7em" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
-				<!-- Outer circle -->
-				<circle cx="50" cy="50" r="48" stroke="black" stroke-width="2" fill="none" />
-				<!-- Compass needle -->
-				<polygon points="50,5 55,50 50,95 45,50" fill="red" transform="rotate(15, 50, 50)" />
-				<!-- North indicator -->
-				<text x="50" y="12" font-family="Arial" font-size="18" text-anchor="middle" fill="black"
-					>N</text
-				>
-				<!-- East indicator -->
-				<text x="88" y="55" font-family="Arial" font-size="18" text-anchor="middle" fill="black"
-					>E</text
-				>
-				<!-- South indicator -->
-				<text x="50" y="98" font-family="Arial" font-size="18" text-anchor="middle" fill="black"
-					>S</text
-				>
-				<!-- West indicator -->
-				<text x="12" y="55" font-family="Arial" font-size="18" text-anchor="middle" fill="black"
-					>W</text
-				>
-			</svg>
+			<img src={logo} alt="N-Savant Compass Logo" style:height="1.7em" />
 			@wjfe/n-savant
 		</Link>
 		<button
diff --git a/package.json b/package.json
index 1d393fb..31306eb 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,18 @@
 		"./core": {
 			"types": "./dist/core/index.d.ts",
 			"default": "./dist/core/index.js"
+		},
+		"./logo": {
+			"types": "./dist/logo/logo.d.ts",
+			"default": "./dist/logo/logo.svg"
+		},
+		"./logo64": {
+			"types": "./dist/logo/logo.d.ts",
+			"default": "./dist/logo/logo-64.svg"
+		},
+		"./logo48": {
+			"types": "./dist/logo/logo.d.ts",
+			"default": "./dist/logo/logo-48.svg"
 		}
 	},
 	"peerDependencies": {
diff --git a/src/lib/logo/logo-48.svg b/src/lib/logo/logo-48.svg
new file mode 100644
index 0000000..9d00e32
--- /dev/null
+++ b/src/lib/logo/logo-48.svg
@@ -0,0 +1,98 @@
+<svg width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Simplified gradient for the outer ring -->
+    <radialGradient id="outerRingGradient48" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#2c3e50" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#2c3e50" />
+    </radialGradient>
+
+    <!-- Simplified gradient for the inner background -->
+    <radialGradient id="backgroundGradient48" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#ecf0f1" />
+      <stop offset="100%" stop-color="#34495e" stop-opacity="0.2" />
+    </radialGradient>
+
+    <!-- Simplified drop shadow -->
+    <filter id="dropShadow48" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="1" dy="1" stdDeviation="1" flood-color="black" flood-opacity="0.4" />
+    </filter>
+  </defs>
+
+  <!-- Outer ring -->
+  <circle
+    cx="24"
+    cy="24"
+    r="23"
+    fill="url(#outerRingGradient48)"
+    filter="url(#dropShadow48)"
+  />
+
+  <!-- Inner background -->
+  <circle cx="24" cy="24" r="20" fill="url(#backgroundGradient48)" />
+
+  <!-- Major tick marks only (every 90 degrees) -->
+  <g stroke="#7f8c8d" stroke-width="2" stroke-linecap="round">
+    <line x1="24" y1="4" x2="24" y2="8" />
+    <line x1="44" y1="24" x2="40" y2="24" />
+    <line x1="24" y1="44" x2="24" y2="40" />
+    <line x1="4" y1="24" x2="8" y2="24" />
+  </g>
+
+  <!-- Compass needle (rotated 15 degrees) -->
+  <g transform="rotate(15, 24, 24)">
+    <!-- North pointing part (red) -->
+    <polygon
+      points="24,5 26,22 24,23 22,22"
+      fill="#e74c3c"
+      stroke="white"
+      stroke-width="0.5"
+    />
+    <!-- South pointing part (silver) -->
+    <polygon
+      points="24,43 22,26 24,25 26,26"
+      fill="#95a5a6"
+      stroke="white"
+      stroke-width="0.5"
+    />
+    <!-- Center pivot -->
+    <circle cx="24" cy="24" r="2" fill="#2c3e50" stroke="white" stroke-width="0.5" />
+  </g>
+
+  <!-- Cardinal direction labels (simplified) -->
+  <text
+    x="24"
+    y="12"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="8"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">N</text>
+  <text
+    x="36"
+    y="26"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="8"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">E</text>
+  <text
+    x="24"
+    y="40"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="8"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">S</text>
+  <text
+    x="12"
+    y="26"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="8"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">W</text>
+</svg>
\ No newline at end of file
diff --git a/src/lib/logo/logo-64.svg b/src/lib/logo/logo-64.svg
new file mode 100644
index 0000000..4a147b0
--- /dev/null
+++ b/src/lib/logo/logo-64.svg
@@ -0,0 +1,105 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Gradient for the outer ring -->
+    <radialGradient id="outerRingGradient64" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#2c3e50" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#2c3e50" />
+    </radialGradient>
+
+    <!-- Gradient for the inner background -->
+    <radialGradient id="backgroundGradient64" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#ecf0f1" />
+      <stop offset="70%" stop-color="#ecf0f1" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="#34495e" stop-opacity="0.2" />
+    </radialGradient>
+
+    <!-- Drop shadow filter -->
+    <filter id="dropShadow64" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="1" dy="1" stdDeviation="1.5" flood-color="black" flood-opacity="0.3" />
+    </filter>
+  </defs>
+
+  <!-- Outer ring -->
+  <circle
+    cx="32"
+    cy="32"
+    r="31"
+    fill="url(#outerRingGradient64)"
+    filter="url(#dropShadow64)"
+  />
+
+  <!-- Inner background -->
+  <circle cx="32" cy="32" r="27" fill="url(#backgroundGradient64)" />
+
+  <!-- Major tick marks (every 30 degrees) -->
+  <g stroke="#7f8c8d" stroke-width="2" stroke-linecap="round">
+    <line x1="32" y1="5" x2="32" y2="9" />
+    <line x1="48" y1="11" x2="45" y2="14" />
+    <line x1="58" y1="28" x2="54" y2="28" />
+    <line x1="58" y1="36" x2="54" y2="36" />
+    <line x1="48" y1="53" x2="45" y2="50" />
+    <line x1="32" y1="59" x2="32" y2="55" />
+    <line x1="16" y1="53" x2="19" y2="50" />
+    <line x1="6" y1="36" x2="10" y2="36" />
+    <line x1="6" y1="28" x2="10" y2="28" />
+    <line x1="16" y1="11" x2="19" y2="14" />
+  </g>
+
+  <!-- Compass needle (rotated 15 degrees) -->
+  <g transform="rotate(15, 32, 32)">
+    <!-- North pointing part (red) -->
+    <polygon
+      points="32,7 34,29 32,31 30,29"
+      fill="#e74c3c"
+      stroke="white"
+      stroke-width="1"
+    />
+    <!-- South pointing part (silver) -->
+    <polygon
+      points="32,57 30,35 32,33 34,35"
+      fill="#95a5a6"
+      stroke="white"
+      stroke-width="1"
+    />
+    <!-- Center pivot -->
+    <circle cx="32" cy="32" r="2.5" fill="#2c3e50" stroke="white" stroke-width="1" />
+  </g>
+
+  <!-- Cardinal direction labels -->
+  <text
+    x="32"
+    y="16"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="10"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">N</text>
+  <text
+    x="48"
+    y="34"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="10"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">E</text>
+  <text
+    x="32"
+    y="52"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="10"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">S</text>
+  <text
+    x="16"
+    y="34"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="10"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">W</text>
+</svg>
\ No newline at end of file
diff --git a/src/lib/logo/logo.d.ts b/src/lib/logo/logo.d.ts
new file mode 100644
index 0000000..1604ec7
--- /dev/null
+++ b/src/lib/logo/logo.d.ts
@@ -0,0 +1,14 @@
+declare module '@wjfe/n-savant/logo' {
+  const content: string;
+  export default content;
+}
+
+declare module '@wjfe/n-savant/logo64' {
+  const content: string;
+  export default content;
+}
+
+declare module '@wjfe/n-savant/logo48' {
+  const content: string;
+  export default content;
+}
diff --git a/src/lib/logo/logo.svg b/src/lib/logo/logo.svg
new file mode 100644
index 0000000..1bd1264
--- /dev/null
+++ b/src/lib/logo/logo.svg
@@ -0,0 +1,169 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Gradient for the outer ring -->
+    <radialGradient id="outerRingGradient" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#2c3e50" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#2c3e50" />
+    </radialGradient>
+
+    <!-- Gradient for the inner background -->
+    <radialGradient id="backgroundGradient" cx="0.3" cy="0.3">
+      <stop offset="0%" stop-color="#ecf0f1" />
+      <stop offset="70%" stop-color="#ecf0f1" stop-opacity="0.9" />
+      <stop offset="100%" stop-color="#34495e" stop-opacity="0.3" />
+    </radialGradient>
+
+    <!-- Needle gradient -->
+    <linearGradient id="needleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#e74c3c" />
+      <stop offset="50%" stop-color="#e74c3c" stop-opacity="0.8" />
+      <stop offset="100%" stop-color="#95a5a6" />
+    </linearGradient>
+
+    <!-- Drop shadow filter -->
+    <filter id="dropShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="8" dy="8" stdDeviation="8" flood-color="black" flood-opacity="0.3" />
+    </filter>
+
+    <!-- Inner shadow filter -->
+    <filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
+      <feOffset dx="0" dy="0"/>
+      <feGaussianBlur stdDeviation="4" result="offset-blur"/>
+      <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse"/>
+      <feFlood flood-color="black" flood-opacity="0.2" result="color"/>
+      <feComposite operator="in" in="color" in2="inverse" result="shadow"/>
+      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
+    </filter>
+  </defs>
+
+  <!-- Outer ring with gradient and shadow -->
+  <circle
+    cx="256"
+    cy="256"
+    r="248"
+    fill="url(#outerRingGradient)"
+    filter="url(#dropShadow)"
+  />
+
+  <!-- Inner background -->
+  <circle 
+    cx="256" 
+    cy="256" 
+    r="214" 
+    fill="url(#backgroundGradient)" 
+    filter="url(#innerShadow)"
+  />
+
+  <!-- Major tick marks (every 30 degrees) -->
+  <g stroke="#7f8c8d" stroke-width="6" stroke-linecap="round">
+    <line x1="256" y1="42" x2="256" y2="76" />
+    <line x1="363.3" y1="74.7" x2="344.7" y2="93.3" />
+    <line x1="437.3" y1="148.7" x2="418.7" y2="167.3" />
+    <line x1="470" y1="256" x2="436" y2="256" />
+    <line x1="437.3" y1="363.3" x2="418.7" y2="344.7" />
+    <line x1="363.3" y1="437.3" x2="344.7" y2="418.7" />
+    <line x1="256" y1="470" x2="256" y2="436" />
+    <line x1="148.7" y1="437.3" x2="167.3" y2="418.7" />
+    <line x1="74.7" y1="363.3" x2="93.3" y2="344.7" />
+    <line x1="42" y1="256" x2="76" y2="256" />
+    <line x1="74.7" y1="148.7" x2="93.3" y2="167.3" />
+    <line x1="148.7" y1="74.7" x2="167.3" y2="93.3" />
+  </g>
+
+  <!-- Minor tick marks (every 10 degrees, excluding major ones) -->
+  <g stroke="#95a5a6" stroke-width="3" stroke-linecap="round">
+    <!-- North section -->
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(10 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(20 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(40 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(50 256 256)" />
+    <!-- Continue pattern for other sections -->
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(70 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(80 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(100 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(110 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(130 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(140 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(160 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(170 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(190 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(200 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(220 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(230 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(250 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(260 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(280 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(290 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(310 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(320 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(340 256 256)" />
+    <line x1="256" y1="42" x2="256" y2="59" transform="rotate(350 256 256)" />
+  </g>
+
+  <!-- Compass needle (rotated 15 degrees) -->
+  <g transform="rotate(15, 256, 256)">
+    <!-- North pointing part (red) -->
+    <polygon
+      points="256,51 273,235 256,247 239,235"
+      fill="#e74c3c"
+      stroke="white"
+      stroke-width="4"
+      filter="url(#dropShadow)"
+    />
+    <!-- South pointing part (silver) -->
+    <polygon
+      points="256,461 239,277 256,265 273,277"
+      fill="#95a5a6"
+      stroke="white"
+      stroke-width="4"
+      filter="url(#dropShadow)"
+    />
+    <!-- Center pivot -->
+    <circle 
+      cx="256" 
+      cy="256" 
+      r="17" 
+      fill="#2c3e50" 
+      stroke="white" 
+      stroke-width="4" 
+    />
+  </g>
+
+  <!-- Cardinal direction labels -->
+  <text
+    x="256"
+    y="85"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="60"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">N</text>
+  <text
+    x="427"
+    y="276"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="60"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">E</text>
+  <text
+    x="256"
+    y="470"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="60"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">S</text>
+  <text
+    x="85"
+    y="276"
+    font-family="system-ui, -apple-system, sans-serif"
+    font-size="60"
+    font-weight="bold"
+    text-anchor="middle"
+    fill="#2c3e50"
+    dominant-baseline="middle">W</text>
+</svg>
\ No newline at end of file