1 files changed, 10 insertions, 10 deletions
diff --git a/front/src/components/Sigil.tsx b/front/src/components/Sigil.tsx
index 4978a72..cbc2e57 100644
--- a/front/src/components/Sigil.tsx
+++ b/front/src/components/Sigil.tsx
@@ -1,4 +1,4 @@
-import comet from "@/assets/icons/comet.svg";
+import Icon from "@/components/Icon";
 import { auraToHex } from "@/logic/utils";
 import { isValidPatp } from "urbit-ob";
 import { sigil } from "urbit-sigils";
@@ -7,19 +7,19 @@ import { reactRenderer } from "urbit-sigils";
 interface SigilProps {
   patp: string;
   size: number;
-  color?: string;
+  bg?: string;
+  fg?: string;
 }
 
 const Sigil = (props: SigilProps) => {
-  const color = props.color ? auraToHex(props.color) : "black";
-  if (!isValidPatp(props.patp)) return <div className="sigil bad-sigil">X</div>;
-  else if (props.patp.length > 28)
+  const bg = props.bg ? auraToHex(props.bg) : "var(--color-background)";
+  const fg = props.fg ? auraToHex(props.fg) : "var(--color-primary)";
+  if (props.patp.length > 28)
     return (
-      <img
+      <Icon
+        name="comet"
+        size={props.size}
         className="comet-icon"
-        src={comet}
-        alt=""
-        style={{ width: `${props.size}px`, height: `${props.size}px` }}
       />
     );
   else if (props.patp.length > 15)
@@ -41,7 +41,7 @@ const Sigil = (props: SigilProps) => {
           patp: props.patp,
           renderer: reactRenderer,
           size: props.size,
-          colors: [color, "white"],
+          colors: [bg, fg],
         })}
       </>
     );