diff --git a/packages/ui/src/components/icon-button.css b/packages/ui/src/components/icon-button.css
index f3f7e1e645..fa6f860386 100644
--- a/packages/ui/src/components/icon-button.css
+++ b/packages/ui/src/components/icon-button.css
@@ -71,7 +71,6 @@
 
   &[data-variant="ghost"] {
     background-color: transparent;
-    /* color: var(--icon-base); */
 
     [data-slot="icon-svg"] {
       color: var(--icon-base);
@@ -79,25 +78,41 @@
 
     &:hover:not(:disabled) {
       background-color: var(--surface-raised-base-hover);
-
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-hover); */
-      /* } */
     }
     &:focus:not(:disabled) {
       background-color: var(--surface-focus);
     }
     &:active:not(:disabled) {
       background-color: var(--surface-raised-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-active); */
-      /* } */
     }
     &:selected:not(:disabled) {
       background-color: var(--surface-raised-base-active);
-      /* [data-slot="icon-svg"] { */
-      /*   color: var(--icon-selected); */
-      /* } */
+    }
+  }
+
+  &[data-variant="weak"] {
+    opacity: 0.8;
+    background-color: transparent;
+
+    [data-slot="icon-svg"] {
+      color: var(--icon-base);
+    }
+
+    &:hover:not(:disabled) {
+      opacity: 1;
+      background-color: var(--surface-raised-base-hover);
+    }
+    &:focus:not(:disabled) {
+      opacity: 1;
+      background-color: var(--surface-focus);
+    }
+    &:active:not(:disabled) {
+      opacity: 1;
+      background-color: var(--surface-raised-base-active);
+    }
+    &:selected:not(:disabled) {
+      opacity: 1;
+      background-color: var(--surface-raised-base-active);
     }
   }
 
diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
index f1832ce7ff..40fdfe3d3a 100644
--- a/packages/ui/src/components/icon-button.tsx
+++ b/packages/ui/src/components/icon-button.tsx
@@ -6,7 +6,7 @@ export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
   icon: IconProps["name"]
   size?: "normal" | "large"
   iconSize?: IconProps["size"]
-  variant?: "primary" | "secondary" | "ghost"
+  variant?: "primary" | "secondary" | "ghost" | "weak"
 }
 
 export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {