diff --git a/frontend-react/src/components/elements/IconButton.tsx b/frontend-react/src/components/elements/IconButton.tsx
index b689a25f9..46e5d55be 100644
--- a/frontend-react/src/components/elements/IconButton.tsx
+++ b/frontend-react/src/components/elements/IconButton.tsx
@@ -19,7 +19,14 @@ const IconButton: React.FC<IconButtonProps> = ({
   onClick,
   color,
 }) => {
-  const { themeColor } = useContext(MyThemeContext)
+  const { themeColorWithShade } = useContext(MyThemeContext)
+
+  const getColor = () => {
+    if (color) return color
+    if (colored) return themeColorWithShade
+    return undefined
+  }
+
   return (
     <ChakraIconButton
       aria-label=""
@@ -28,8 +35,7 @@ const IconButton: React.FC<IconButtonProps> = ({
       variant="ghost"
       onClick={onClick}
       size="lg"
-      variantColor={colored ? themeColor : undefined}
-      color={color}
+      color={getColor()}
       isDisabled={disabled}
     />
   )