diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 387d01c309e..2a4fb0ef5c4 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -230,7 +230,7 @@ createWidget(
 
       html(attrs) {
         return h(
-          "a.icon",
+          "button.icon.btn-flat",
           {
             attributes: {
               "aria-haspopup": true,
@@ -263,7 +263,7 @@ createWidget(
         }
 
         return h(
-          "a.icon.btn-flat",
+          "button.icon.btn-flat",
           {
             attributes: {
               "aria-expanded": attrs.active,
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 0c96429274a..d56a2325575 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -117,6 +117,8 @@
     float: left;
   }
   .icon {
+    box-sizing: content-box;
+    appearance: none;
     position: relative;
     display: flex;
     align-items: center;
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs
index 0c2d7f66d9b..db99a0e053d 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-header-icon.hbs
@@ -1,7 +1,7 @@
 <a
   href={{this.href}}
   tabindex="0"
-  class={{concat-class "icon" (if this.isActive "active")}}
+  class={{concat-class "icon btn-flat" (if this.isActive "active")}}
 >
   {{d-icon "comment"}}