diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index 128472cc4c..704b6674da 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -2,6 +2,12 @@
 @import '../../style/internal/mdc-variables';
 @import '@limetech/mdc-icon-button/mdc-icon-button';
 
+@media (pointer: coarse) {
+    .mdc-icon-button:hover::before {
+        opacity: 0;
+    }
+}
+
 /**
  * @prop --icon-background-color: Background color when attribute `elevated` is set to `true`.
  */
diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
index 12f43f2c30..9f19bd61e5 100644
--- a/src/components/icon-button/icon-button.tsx
+++ b/src/components/icon-button/icon-button.tsx
@@ -13,6 +13,12 @@ import { IconSize } from '@limetech/lime-elements';
     styleUrl: 'icon-button.scss',
 })
 export class IconButton {
+    public constructor() {
+        this.removeFocusedStyleOnClick = this.removeFocusedStyleOnClick.bind(
+            this
+        );
+    }
+
     /**
      * The icon to display.
      */
@@ -56,6 +62,13 @@ export class IconButton {
         }
     }
 
+    private removeFocusedStyleOnClick() {
+        const mdcButton = this.host.shadowRoot.querySelector(
+            '.mdc-icon-button'
+        );
+        mdcButton.classList.remove('mdc-ripple-upgraded--background-focused');
+    }
+
     public connectedCallback() {
         this.initialize();
     }
@@ -72,10 +85,12 @@ export class IconButton {
 
         this.mdcIconButtonRipple = new MDCRipple(element);
         this.mdcIconButtonRipple.unbounded = true;
+        this.host.addEventListener('click', this.removeFocusedStyleOnClick);
     }
 
     public disconnectedCallback() {
         this.mdcIconButtonRipple?.destroy();
+        this.host.removeEventListener('click', this.removeFocusedStyleOnClick);
     }
 
     public render() {