diff --git a/public/icons/icon-128.png b/public/icons/icon-128.png
index 75e85fc..e985e5a 100644
Binary files a/public/icons/icon-128.png and b/public/icons/icon-128.png differ
diff --git a/public/icons/icon-16.png b/public/icons/icon-16.png
index 8bc0a7b..6c3abe7 100644
Binary files a/public/icons/icon-16.png and b/public/icons/icon-16.png differ
diff --git a/public/icons/icon-32.png b/public/icons/icon-32.png
index 4833fab..9df5bda 100644
Binary files a/public/icons/icon-32.png and b/public/icons/icon-32.png differ
diff --git a/public/icons/icon-48.png b/public/icons/icon-48.png
index dfdd5f1..dd1ab7c 100644
Binary files a/public/icons/icon-48.png and b/public/icons/icon-48.png differ
diff --git a/src/options/Options.tsx b/src/options/Options.tsx
index b636d9e..159776c 100644
--- a/src/options/Options.tsx
+++ b/src/options/Options.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import clayIconUrl from '@/assets/clay-icon.png?inline';
 import { loadPreferences, savePreferences } from '@/lib/storage';
 import { clearRecents } from '@/lib/recents';
 import { emptyMapping } from '@/lib/site-host';
@@ -83,7 +84,7 @@ export function Options() {
   return (
     <div className="options">
       <header className="options-header">
-        <div className="options-logo">S</div>
+        <img className="options-logo" src={clayIconUrl} alt="" aria-hidden="true" />
         <h1>Clay Slip Settings</h1>
         {saved && <span className="options-saved">Saved</span>}
       </header>
diff --git a/src/options/options.css b/src/options/options.css
index 8db476f..1f8a610 100644
--- a/src/options/options.css
+++ b/src/options/options.css
@@ -48,15 +48,10 @@ body {
 }
 
 .options-logo {
-  width: 28px;
-  height: 28px;
-  border-radius: 6px;
-  background: var(--accent);
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
+  width: 32px;
+  height: 32px;
+  display: block;
+  object-fit: contain;
 }
 
 .options-saved {
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
index 2d154f1..24db230 100644
--- a/src/popup/Popup.tsx
+++ b/src/popup/Popup.tsx
@@ -1,7 +1,9 @@
+import clayIconUrl from '@/assets/clay-icon.png?inline';
+
 export function Popup() {
   return (
     <div className="popup">
-      <div className="popup-logo">S</div>
+      <img className="popup-logo" src={clayIconUrl} alt="" aria-hidden="true" />
       <h1 className="popup-title">No Clay components found</h1>
       <p className="popup-body">
         This page does not appear to be powered by Clay. Open a Clay page and click the toolbar icon
diff --git a/src/popup/popup.css b/src/popup/popup.css
index a02b956..507c06e 100644
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -24,17 +24,11 @@ body {
 }
 
 .popup-logo {
-  width: 36px;
-  height: 36px;
+  width: 40px;
+  height: 40px;
   margin: 0 auto 12px;
-  border-radius: 8px;
-  background: #e22c2c;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 18px;
+  display: block;
+  object-fit: contain;
 }
 
 .popup-title {