diff --git a/src/assets/styles/common-buttons.scss b/src/assets/styles/common-buttons.scss
index 926cd36..073d129 100644
--- a/src/assets/styles/common-buttons.scss
+++ b/src/assets/styles/common-buttons.scss
@@ -90,6 +90,14 @@ iqser-icon-button {
         &.dark {
             background: var(--iqser-btn-bg);
         }
+
+        &.active {
+            background: #fcebeb;
+            font-weight: 600;
+            color: var(--iqser-primary);
+            cursor: default;
+            pointer-events: none;
+        }
     }
 }
 
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
index d7d91e3..6f2c018 100644
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -19,6 +19,7 @@ export class IconButtonComponent {
     @Input() buttonId = `${randomString()}-icon-button`;
     @Input() icon?: string;
     @Input() showDot = false;
+    @Input() active = false;
     @Input() disabled = false;
     @Input() submit = false;
     @Input() type: IconButtonType = IconButtonTypes.default;
@@ -30,6 +31,7 @@ export class IconButtonComponent {
             overlay: this.showDot,
             [this.type]: true,
             'has-icon': !!this.icon,
+            active: this.active,
         };
     }
 }