diff --git a/public/wordmark.svg b/public/wordmark.svg
new file mode 100644
index 0000000..0d3327c
--- /dev/null
+++ b/public/wordmark.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="270" viewBox="-60 -95 300 270" fill="none" stroke="#fff" stroke-width="26" stroke-linecap="round">
+  <path d="M0,-34 V100 M84,-34 V100 M168,-34 V100"></path>
+  <path d="M0,42 A42,42 0 0 1 84,42 M84,42 A42,42 0 0 1 168,42"></path>
+  <path d="M-40,148 H208" stroke-width="18"></path>
+</svg>
diff --git a/src/app.rs b/src/app.rs
index 4eb41b4..ce23ae2 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -368,7 +368,7 @@ fn Hero(title: String, description: String, show_yes: bool) -> impl IntoView {
                 })}
             <div class="hero-copy">
                 <a class="wordmark" href="/">
-                    {SITE_NAME}
+                    <img src="/wordmark.svg" alt=SITE_NAME/>
                 </a>
                 <h1>{title}</h1>
                 <p>{description}</p>
diff --git a/src/main.rs b/src/main.rs
index 97d6997..47b4bcb 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -119,6 +119,7 @@ async fn main() -> anyhow::Result<()> {
     );
     let favicon_light_path = format!("{}/favicon-light.svg", leptos_options.site_root);
     let favicon_dark_path = format!("{}/favicon-dark.svg", leptos_options.site_root);
+    let wordmark_path = format!("{}/wordmark.svg", leptos_options.site_root);
     let fonts_dir = format!("{}/fonts", leptos_options.site_root);
 
     let app = Router::new()
@@ -133,6 +134,7 @@ async fn main() -> anyhow::Result<()> {
         .nest_service("/fonts", ServeDir::new(fonts_dir))
         .route_service("/favicon-light.svg", ServeFile::new(favicon_light_path))
         .route_service("/favicon-dark.svg", ServeFile::new(favicon_dark_path))
+        .route_service("/wordmark.svg", ServeFile::new(wordmark_path))
         .leptos_routes_with_context(
             &state,
             routes,
diff --git a/style/main.css b/style/main.css
index bb0afb2..4bc3c83 100644
--- a/style/main.css
+++ b/style/main.css
@@ -97,12 +97,17 @@ main.loading, main.not-found {
 }
 
 .wordmark {
-  font-family: var(--heading);
-  font-size: 0.85rem;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  color: var(--ink-dim);
-  text-decoration: none;
+  display: inline-flex;
+  opacity: 0.85;
+  transition: opacity 120ms;
+}
+
+.wordmark:hover { opacity: 1; }
+
+.wordmark img {
+  height: 2.1rem;
+  width: auto;
+  display: block;
 }
 
 .hero-copy h1 { font-size: 2.1rem; }