diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index 3ad39b1e..5de2a64f 100644
--- a/src/lib/components/Icon.svelte
+++ b/src/lib/components/Icon.svelte
@@ -6,6 +6,9 @@
 </style>
 
 <script lang="ts">
+  import {onMount} from "svelte"
+  import {maybe} from "@welshman/lib"
+
   const {
     icon,
     size = 5,
@@ -17,9 +20,53 @@
   } = $props()
 
   const px = size * 4
+
+  const isSafari =
+    typeof navigator !== "undefined" &&
+    /safari/i.test(navigator.userAgent) &&
+    !/chrome|chromium|android/i.test(navigator.userAgent)
+
+  let canceled = false
+  let objectUrl = $state(maybe<string>())
+
+  const src = $derived(objectUrl || icon)
+
+  // Primal issues 302 redirects from blossom, which messes up safari
+  const fetchSvg = async () => {
+    try {
+      const response = await fetch(icon, {
+        mode: "cors",
+        credentials: "omit",
+      })
+
+      if (response.ok) {
+        const blob = await response.blob()
+
+        if (!canceled) {
+          objectUrl = URL.createObjectURL(blob)
+        }
+      }
+    } catch {
+      // pass
+    }
+  }
+
+  onMount(() => {
+    if (isSafari && icon.toLowerCase().endsWith(".svg")) {
+      fetchSvg()
+    }
+
+    return () => {
+      canceled = true
+
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl)
+      }
+    }
+  })
 </script>
 
 <div
   class="inline-block {restProps.class}"
-  style="mask-image: url({icon}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;">
+  style="mask-image: url({src}); width: {px}px; height: {px}px; min-width: {px}px; min-height: {px}px; background-color: currentcolor;">
 </div>