2 files changed, 3 insertions, 4 deletions
diff --git a/FrontEnd/src/components/Icon.css b/FrontEnd/src/components/Icon.css
index fe980d7b..3c83b0e9 100644
--- a/FrontEnd/src/components/Icon.css
+++ b/FrontEnd/src/components/Icon.css
@@ -1,3 +1,4 @@
 .cru-icon {
+  color: var(--cru-theme-color);
   font-size: 1.4rem;
 }
diff --git a/FrontEnd/src/components/Icon.tsx b/FrontEnd/src/components/Icon.tsx
index 2ac3a7ca..e5cf598e 100644
--- a/FrontEnd/src/components/Icon.tsx
+++ b/FrontEnd/src/components/Icon.tsx
@@ -7,20 +7,18 @@ import "./Icon.css";
 
 interface IconButtonProps extends ComponentPropsWithoutRef<"i"> {
   icon: string;
-  color?: ThemeColor | "on-surface";
+  color?: ThemeColor;
   size?: string | number;
 }
 
 export default function Icon(props: IconButtonProps) {
   const { icon, color, size, style, className, ...otherProps } = props;
 
-  const colorName = color === "on-surface" ? "surface-on" : color;
-
   return (
     <i
       style={size != null ? { ...style, fontSize: size } : style}
       className={classNames(
-        colorName && `cru-${colorName}`,
+        `cru-theme-${color ?? "primary"}`,
         `bi-${icon} cru-icon`,
         className,
       )}