diff --git a/packages/ui/src/components/provider-icon.tsx b/packages/ui/src/components/provider-icon.tsx
index b2a99989c..edfdd0357 100644
--- a/packages/ui/src/components/provider-icon.tsx
+++ b/packages/ui/src/components/provider-icon.tsx
@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js"
-import { splitProps } from "solid-js"
+import { createMemo, splitProps } from "solid-js"
 import sprite from "./provider-icons/sprite.svg"
 import { iconNames, type IconName } from "./provider-icons/types"
 
@@ -9,7 +9,7 @@ export type ProviderIconProps = JSX.SVGElementTags["svg"] & {
 
 export const ProviderIcon: Component<ProviderIconProps> = (props) => {
   const [local, rest] = splitProps(props, ["id", "class", "classList"])
-  const resolved = iconNames.includes(local.id as IconName) ? local.id : "synthetic"
+  const resolved = createMemo(() => (iconNames.includes(local.id as IconName) ? local.id : "synthetic"))
   return (
     <svg
       data-component="provider-icon"
@@ -19,7 +19,7 @@ export const ProviderIcon: Component<ProviderIconProps> = (props) => {
         [local.class ?? ""]: !!local.class,
       }}
     >
-      <use href={`${sprite}#${resolved}`} />
+      <use href={`${sprite}#${resolved()}`} />
     </svg>
   )
 }