diff --git a/packages/demo/src/content/components/icon-button.mdx b/packages/demo/src/content/components/icon-button.mdx
index 45400edd..1d849f39 100644
--- a/packages/demo/src/content/components/icon-button.mdx
+++ b/packages/demo/src/content/components/icon-button.mdx
@@ -59,3 +59,25 @@ import { IconButton } from "@eqtylab/equality";
   download
   client:only="react"
 />
+
+## Color Variants
+
+### Primary (default)
+
+<IconButton
+  name="User"
+  label="User profile"
+  variant="primary"
+  onClick={() => console.log("Share clicked")}
+  client:only="react"
+/>
+
+### Danger
+
+<IconButton
+  name="Trash2"
+  label="Delete"
+  variant="danger"
+  onClick={() => console.log("Share clicked")}
+  client:only="react"
+/>
diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css
index af525eab..d5ab7887 100644
--- a/packages/ui/src/components/icon-button/icon-button.module.css
+++ b/packages/ui/src/components/icon-button/icon-button.module.css
@@ -1,30 +1,34 @@
 @reference '../../theme/theme.module.css';
 
 .icon-btn {
-  @apply rounded-md transition-colors;
+  @apply transition-colors;
   @apply flex-center;
-  @apply disabled:cursor-not-allowed disabled:opacity-50;
+  @apply disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent;
   @apply focus-ring;
+  @apply flex;
 }
 
 .size--sm {
-  @apply size-8;
+  @apply size-8 rounded-md;
 }
 
 .size--md {
-  @apply size-10;
+  @apply size-10 rounded-lg;
 }
 
 .size--lg {
-  @apply size-12;
+  @apply size-12 rounded-xl;
 }
 
-/* Background Variants */
+/* Color Variants */
 
-.background--square {
-  @apply rounded-lg;
+.icon-btn--primary {
+  @apply text-text-primary;
+  @apply not-disabled:hover:bg-lilac-400/25 not-disabled:hover:text-lilac-800 not-disabled:dark:hover:bg-lilac-500/25 not-disabled:dark:hover:text-lilac-200;
 }
 
-.background--circle {
-  @apply rounded-full;
+.icon-btn--danger {
+  @apply text-red-600;
+  @apply dark:text-red-400;
+  @apply not-disabled:hover:bg-red-400/25 not-disabled:dark:hover:bg-red-500/25 not-disabled:dark:hover:text-red-300;
 }
diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx
index 733a4489..b8d5d738 100644
--- a/packages/ui/src/components/icon-button/icon-button.tsx
+++ b/packages/ui/src/components/icon-button/icon-button.tsx
@@ -12,9 +12,14 @@ const iconButtonVariants = cva(styles['icon-btn'], {
       md: styles['size--md'],
       lg: styles['size--lg'],
     },
+    variant: {
+      primary: styles['icon-btn--primary'],
+      danger: styles['icon-btn--danger'],
+    },
   },
   defaultVariants: {
     size: 'sm',
+    variant: 'primary',
   },
 });
 
@@ -37,6 +42,7 @@ export interface IconButtonProps
 function IconButton({
   className,
   size = 'sm',
+  variant = 'primary',
   name,
   label,
   href,
@@ -64,7 +70,7 @@ function IconButton({
         download={download}
         aria-label={label}
         rel={target === '_blank' ? 'noopener noreferrer' : undefined}
-        className={cn(iconButtonVariants({ size }), className)}
+        className={cn(iconButtonVariants({ size, variant }), className)}
       >
         {content}
       </a>
@@ -76,7 +82,7 @@ function IconButton({
       type="button"
       aria-label={label}
       disabled={disabled}
-      className={cn(iconButtonVariants({ size }), className)}
+      className={cn(iconButtonVariants({ size, variant }), className)}
       {...props}
     >
       {content}