diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
index 2ffcd7da5..3ae834aa9 100644
--- a/packages/raystack/components/icon-button/icon-button.module.css
+++ b/packages/raystack/components/icon-button/icon-button.module.css
@@ -6,14 +6,16 @@
   background-color: transparent;
   border-radius: var(--rs-radius-1);
   border: none;
-  color: var(--rs-color-foreground-base-primary);
+  color: var(--rs-color-foreground-base-secondary);
   cursor: pointer;
   transition: var(--rs-transition-interactive);
   padding: var(--rs-space-1);
 }
 
-.iconButton:hover:not(:disabled) {
+.iconButton:hover:not(:disabled),
+.iconButton:active:not(:disabled) {
   background-color: var(--rs-color-background-base-primary-hover);
+  color: var(--rs-color-foreground-base-primary);
 }
 
 .iconButton:disabled {
@@ -21,10 +23,6 @@
   cursor: default;
 }
 
-.iconButton:active:not(:disabled) {
-  background-color: var(--rs-color-background-neutral-primary);
-}
-
 .iconButton-size-1 {
   width: var(--rs-space-4);
   height: var(--rs-space-4);