diff --git a/src/components/base/animated_icon/animated_chevron_down_up_icon.vue b/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
index a245777eb3bf7cd6b03aa12a7da44da47046a2d9..0459c6779030e404ac577f23c6d61e8e9d4d9072 100644
--- a/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_down_up_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue b/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
index e31b65af5aedf21b9a262d13ec99baae54fbf428..c4dc177b72f460388052d8fb7c2dea481214f617 100644
--- a/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_lg_down_up_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue b/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
index f914fc29e145e0eae5026e27e4ed19600fcbf1df..75a1031c9ff67c8c6aa24bb1c71d8e554d497509 100644
--- a/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_lg_right_down_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_chevron_right_down_icon.vue b/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
index fed560c900e3af3807bb51f4430d8952b77846f9..15bf8013d6cb32121792f501f95f9ea703f92ba0 100644
--- a/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
+++ b/src/components/base/animated_icon/animated_chevron_right_down_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_duo_chat_icon.vue b/src/components/base/animated_icon/animated_duo_chat_icon.vue
index d65af881b3b0f07dd111e4d868cf50a55e241807..9c161c6cf61160d41eaac74f89b391538e3b7db6 100644
--- a/src/components/base/animated_icon/animated_duo_chat_icon.vue
+++ b/src/components/base/animated_icon/animated_duo_chat_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_icon.spec.js b/src/components/base/animated_icon/animated_icon.spec.js
index 5b49936a28a7c90e558ebf5b720072cfab22a0a7..a476262f9c92ded7ef84c59bd03dc6a523369458 100644
--- a/src/components/base/animated_icon/animated_icon.spec.js
+++ b/src/components/base/animated_icon/animated_icon.spec.js
@@ -19,6 +19,7 @@ describe('GlBaseAnimatedIcon component', () => {
       createComponent({ propsData: { isOn } });
 
       expect(wrapper.classes()).toStrictEqual([
+        'gl-button-icon',
         'gl-animated-icon',
         expectedClass,
         'gl-animated-icon-current',
@@ -52,6 +53,7 @@ describe('GlBaseAnimatedIcon component', () => {
       createComponent({ propsData: { variant } });
 
       expect(wrapper.classes()).toStrictEqual([
+        'gl-button-icon',
         'gl-animated-icon',
         'gl-animated-icon-off',
         expectedClass,
diff --git a/src/components/base/animated_icon/animated_loader_icon.vue b/src/components/base/animated_icon/animated_loader_icon.vue
index 3d850ef68cff0952b397ff431f4662cbc4045aae..6c6c0f5ba373a644b6801210ba2d0941a4e13c45 100644
--- a/src/components/base/animated_icon/animated_loader_icon.vue
+++ b/src/components/base/animated_icon/animated_loader_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_notifications_icon.vue b/src/components/base/animated_icon/animated_notifications_icon.vue
index 71e31a164c19ba28b24200a6a495ba01a805c338..bcf30808b1766f4778eacd10cdc806dc2ef2a69c 100644
--- a/src/components/base/animated_icon/animated_notifications_icon.vue
+++ b/src/components/base/animated_icon/animated_notifications_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_sidebar_icon.vue b/src/components/base/animated_icon/animated_sidebar_icon.vue
index 81c3b0ff36ea6b1f623eafddd6e08a82650cfd6f..299ba0f4b6b6e7f191faacfc4baa727fd43131f6 100644
--- a/src/components/base/animated_icon/animated_sidebar_icon.vue
+++ b/src/components/base/animated_icon/animated_sidebar_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_smile_icon.vue b/src/components/base/animated_icon/animated_smile_icon.vue
index 6bdfc2b927437fcd85ace6f7cee226dd842a3c31..cf56fda13ea918a37fecdcdc98e6e44c54666cc8 100644
--- a/src/components/base/animated_icon/animated_smile_icon.vue
+++ b/src/components/base/animated_icon/animated_smile_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_sort_icon.vue b/src/components/base/animated_icon/animated_sort_icon.vue
index 84478a834a3f0d2805b0d19ee403ee3463a29122..39a493874387899ddc4d0df817c4c1b790f906da 100644
--- a/src/components/base/animated_icon/animated_sort_icon.vue
+++ b/src/components/base/animated_icon/animated_sort_icon.vue
@@ -9,7 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
-    class="gl-animated-sort-icon"
+    class="gl-button-icon gl-animated-sort-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_star_icon.vue b/src/components/base/animated_icon/animated_star_icon.vue
index f913b1d2a25c674ce286c3d981bbb8087e88eacf..097f9fd1d3703bb62c819f03b2bae2d113c8a7f4 100644
--- a/src/components/base/animated_icon/animated_star_icon.vue
+++ b/src/components/base/animated_icon/animated_star_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_todo_icon.vue b/src/components/base/animated_icon/animated_todo_icon.vue
index eb6436ae5969f80f331fb3f3e32599c022794c64..0054f9f956133e9d724211a7a2e5af278f8fd9f6 100644
--- a/src/components/base/animated_icon/animated_todo_icon.vue
+++ b/src/components/base/animated_icon/animated_todo_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/animated_upload_icon.vue b/src/components/base/animated_icon/animated_upload_icon.vue
index 15a89861f243ed4bb5673577ca6d007fa1ab8a78..4d70e7b0b49ed8d3ad4d7ece9baf4fbf08669124 100644
--- a/src/components/base/animated_icon/animated_upload_icon.vue
+++ b/src/components/base/animated_icon/animated_upload_icon.vue
@@ -9,6 +9,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"
diff --git a/src/components/base/animated_icon/base_animated_icon.vue b/src/components/base/animated_icon/base_animated_icon.vue
index 396bd8258c2f648ca750b367e7a0ff28d4bd9b2f..a9591ef105f4a63533b8bc3d5e4f408b03de96ff 100644
--- a/src/components/base/animated_icon/base_animated_icon.vue
+++ b/src/components/base/animated_icon/base_animated_icon.vue
@@ -43,6 +43,7 @@ export default {
 <template>
   <svg
     :class="[iconStateClass, iconVariantClass]"
+    class="gl-button-icon"
     :aria-label="ariaLabel"
     width="16"
     height="16"