diff --git a/CHANGELOG.md b/CHANGELOG.md
index 03aeb53caf2..b7fd6ff0442 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Allowed dynamically changing the `direction` prop on `EuiResizableContainer` ([#4557](https://github.com/elastic/eui/pull/4557))
 - Exported `useIsWithinBreakpoints` hook ([#4557](https://github.com/elastic/eui/pull/4557))
 - Added focus to `EuiForm` error `EuiCallout` ([#4497](https://github.com/elastic/eui/pull/4497))
+- Added a `display` and `size` props to `EuiButtonIcon` ([#4466](https://github.com/elastic/eui/pull/4466))
 
 **Bug fixes**
 
diff --git a/src-docs/src/views/button/button_example.js b/src-docs/src/views/button/button_example.js
index b8a754a86ba..484c84e5bb0 100644
--- a/src-docs/src/views/button/button_example.js
+++ b/src-docs/src/views/button/button_example.js
@@ -55,9 +55,41 @@ const buttonOptionFlushSnippet = `<EuiButtonEmpty flush="left"><!-- Button text
 import ButtonIcon from './button_icon';
 const buttonIconSource = require('!!raw-loader!./button_icon');
 const buttonIconHtml = renderToHtml(ButtonIcon);
-const buttonIconSnippet = `<EuiButtonIcon
+const buttonIconSnippet = [
+  `<EuiButtonIcon
   iconType={icon}
-/>`;
+/>`,
+  `<EuiButtonIcon
+  display="fill"
+  iconType={icon}
+/>`,
+  `<EuiButtonIcon
+  display="base"
+  size="s"
+  iconType={icon}
+/>`,
+];
+
+import SplitButton from './split_button';
+const splitButtonSource = require('!!raw-loader!./split_button');
+const splitButtonHtml = renderToHtml(SplitButton);
+const splitButtonSnippet = [
+  `<EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+  <EuiFlexItem grow={false}>
+    <EuiButton size="s">
+      Primary action
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem grow={false}>
+    <EuiButtonIcon
+      display="base"
+      size="s"
+      iconType="boxesVertical"
+      aria-label="More"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>`,
+];
 
 import ButtonGhost from './button_ghost';
 const buttonGhostSource = require('!!raw-loader!./button_ghost');
@@ -300,15 +332,60 @@ export const ButtonExample = {
         },
       ],
       text: (
-        <p>
-          <strong>EuiButtonIcons</strong> are buttons that only contain an icon
-          (no text).
-        </p>
+        <>
+          <p>
+            An <strong>EuiButtonIcon</strong> is a button that only contains an
+            icon (no text). Use the <EuiCode>display</EuiCode> and{' '}
+            <EuiCode>size</EuiCode> props to match the appearance of your{' '}
+            <strong>EuiButtonIcon</strong> to other standard buttons. By default
+            they will appear as <EuiCode>xs</EuiCode>, <EuiCode>empty</EuiCode>{' '}
+            buttons.
+          </p>
+          <EuiCallOut
+            size="s"
+            color="warning"
+            iconType="accessibility"
+            title={
+              <>
+                <strong>EuiButtonIcon</strong> requires an{' '}
+                <EuiCode>aria-label</EuiCode> to express the meaning to screen
+                readers.
+              </>
+            }
+          />
+        </>
       ),
       props: { EuiButtonIcon },
       snippet: buttonIconSnippet,
       demo: <ButtonIcon />,
     },
+    {
+      title: 'Split buttons',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: splitButtonSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: splitButtonHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            EUI does not support split buttons specifically. Instead, we
+            recommend using separate buttons for the main and overflow actions.
+            You can achieve this by simply using the <EuiCode>display</EuiCode>{' '}
+            and <EuiCode>size</EuiCode> props <strong>EuiButtonIcon</strong> to
+            match that of the primary action button.
+          </p>
+        </>
+      ),
+      props: { EuiButton, EuiButtonIcon },
+      snippet: splitButtonSnippet,
+      demo: <SplitButton />,
+    },
     {
       title: 'Toggle buttons',
       source: [
diff --git a/src-docs/src/views/button/button_icon.js b/src-docs/src/views/button/button_icon.js
index 827e6842446..6dd0be767b1 100644
--- a/src-docs/src/views/button/button_icon.js
+++ b/src-docs/src/views/button/button_icon.js
@@ -4,37 +4,89 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiSpacer,
+  EuiTitle,
 } from '../../../../src/components';
 
-const colors = [
-  'primary',
-  'text',
-  'accent',
-  'subdued',
-  'success',
-  'warning',
-  'danger',
-];
+const colors = ['primary', 'text', 'accent', 'success', 'warning', 'danger'];
 
 export default () => (
-  <EuiFlexGroup gutterSize="s" alignItems="center">
-    {colors.map((color) => (
-      <EuiFlexItem key={color} grow={false}>
+  <>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      {colors.map((color) => (
+        <EuiFlexItem key={color} grow={false}>
+          <EuiButtonIcon
+            color={color}
+            onClick={() => {}}
+            iconType="arrowRight"
+            aria-label="Next"
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Display</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="fill" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon iconType="arrowRight" isDisabled aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          isDisabled
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          iconType="arrowRight"
+          display="fill"
+          isDisabled
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer size="m" />
+    <EuiTitle size="xxs">
+      <h3>Size</h3>
+    </EuiTitle>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon display="base" iconType="arrowRight" aria-label="Next" />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          iconType="arrowRight"
+          size="s"
+          aria-label="Next"
+        />
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <EuiButtonIcon
-          color={color}
-          onClick={() => {}}
+          display="base"
           iconType="arrowRight"
+          iconSize="l"
+          size="m"
           aria-label="Next"
         />
       </EuiFlexItem>
-    ))}
-    <EuiFlexItem grow={false}>
-      <EuiButtonIcon
-        onClick={() => window.alert('Button clicked')}
-        iconType="arrowRight"
-        aria-label="Next"
-        disabled
-      />
-    </EuiFlexItem>
-  </EuiFlexGroup>
+    </EuiFlexGroup>
+  </>
 );
diff --git a/src-docs/src/views/button/split_button.js b/src-docs/src/views/button/split_button.js
new file mode 100644
index 00000000000..33126438f9f
--- /dev/null
+++ b/src-docs/src/views/button/split_button.js
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import {
+  EuiButton,
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
+
+export default () => (
+  <>
+    <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButton size="s" iconType="calendar">
+          Last 15 min
+        </EuiButton>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiButtonIcon
+          display="base"
+          size="s"
+          iconType="boxesVertical"
+          aria-label="More"
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </>
+);
diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
index 0ecfdaf9f61..2a7aa592125 100644
--- a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`CollapsedItemActions render 1`] = `
     >
       <button
         aria-label="All actions"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="euiCollapsedItemActionsButton"
         type="button"
       >
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
index 415efa62d7f..8807d1d4a74 100644
--- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
+++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -473,7 +473,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                               <a
                                 aria-controls="__table_generated-id"
                                 aria-label="Previous page, 1"
-                                className="euiButtonIcon euiButtonIcon--text"
+                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-previous"
                                 href="#__table_generated-id"
                                 onClick={[Function]}
@@ -685,7 +685,7 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                             >
                               <button
                                 aria-label="Next page"
-                                className="euiButtonIcon euiButtonIcon--text"
+                                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                 data-test-subj="pagination-button-next"
                                 disabled={true}
                                 onClick={[Function]}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index a587acf8e88..d3f4ef0fee8 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -50,10 +50,6 @@ export type ButtonColor =
   | 'warning'
   | 'danger'
   | 'ghost'
-  /**
-   * Set for deprecation 2/26/20
-   * This color button can easily be confused with disabled, it should not be used
-   */
   | 'text';
 
 export type ButtonSize = 's' | 'm';
diff --git a/src/components/button/button_empty/_button_empty.scss b/src/components/button/button_empty/_button_empty.scss
index 462b525aa25..729aead9bf2 100644
--- a/src/components/button/button_empty/_button_empty.scss
+++ b/src/components/button/button_empty/_button_empty.scss
@@ -29,7 +29,7 @@
   }
 
   &.euiButtonEmpty--xSmall {
-    height: $euiSizeL;
+    height: $euiButtonHeightXSmall;
     font-size: $euiFontSizeS;
   }
 
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 7de5c208e0e..a049951047e 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiButtonIcon is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonIcon euiButtonIcon--primary testClass1 testClass2"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall testClass1 testClass2"
   data-test-subj="test subject string"
   type="button"
 >
@@ -18,7 +18,7 @@ exports[`EuiButtonIcon is rendered 1`] = `
 exports[`EuiButtonIcon props color accent is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--accent"
+  class="euiButtonIcon euiButtonIcon--accent euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -32,7 +32,7 @@ exports[`EuiButtonIcon props color accent is rendered 1`] = `
 exports[`EuiButtonIcon props color danger is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--danger"
+  class="euiButtonIcon euiButtonIcon--danger euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -46,7 +46,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--ghost"
+  class="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -60,7 +60,7 @@ exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 exports[`EuiButtonIcon props color primary is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -74,7 +74,7 @@ exports[`EuiButtonIcon props color primary is rendered 1`] = `
 exports[`EuiButtonIcon props color subdued is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--subdued"
+  class="euiButtonIcon euiButtonIcon--subdued euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -88,7 +88,7 @@ exports[`EuiButtonIcon props color subdued is rendered 1`] = `
 exports[`EuiButtonIcon props color success is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--success"
+  class="euiButtonIcon euiButtonIcon--success euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -102,7 +102,7 @@ exports[`EuiButtonIcon props color success is rendered 1`] = `
 exports[`EuiButtonIcon props color text is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--text"
+  class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -116,7 +116,49 @@ exports[`EuiButtonIcon props color text is rendered 1`] = `
 exports[`EuiButtonIcon props color warning is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--warning"
+  class="euiButtonIcon euiButtonIcon--warning euiButtonIcon--empty euiButtonIcon--xSmall"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props display base is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--xSmall"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props display empty is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props display fill is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--fill euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -130,7 +172,7 @@ exports[`EuiButtonIcon props color warning is rendered 1`] = `
 exports[`EuiButtonIcon props href secures the rel attribute when the target is _blank 1`] = `
 <a
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   href="#"
   rel="noopener noreferrer"
   target="_blank"
@@ -146,7 +188,7 @@ exports[`EuiButtonIcon props href secures the rel attribute when the target is _
 exports[`EuiButtonIcon props iconType is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -160,7 +202,7 @@ exports[`EuiButtonIcon props iconType is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   disabled=""
   type="button"
 >
@@ -175,7 +217,7 @@ exports[`EuiButtonIcon props isDisabled is rendered 1`] = `
 exports[`EuiButtonIcon props isDisabled renders a button even when href is defined 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   disabled=""
   type="button"
 >
@@ -191,7 +233,7 @@ exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
 <button
   aria-label="button"
   aria-pressed="false"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
@@ -206,7 +248,49 @@ exports[`EuiButtonIcon props isSelected is rendered as true 1`] = `
 <button
   aria-label="button"
   aria-pressed="true"
-  class="euiButtonIcon euiButtonIcon--primary"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props size m is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--medium"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props size s is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small"
+  type="button"
+>
+  <span
+    aria-hidden="true"
+    class="euiButtonIcon__icon"
+    data-euiicon-type="user"
+  />
+</button>
+`;
+
+exports[`EuiButtonIcon props size xs is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
   type="button"
 >
   <span
diff --git a/src/components/button/button_icon/_button_icon.scss b/src/components/button/button_icon/_button_icon.scss
index 5547c79ea17..ddc67a1f8b7 100644
--- a/src/components/button/button_icon/_button_icon.scss
+++ b/src/components/button/button_icon/_button_icon.scss
@@ -1,15 +1,17 @@
+// This file has lots of modifiers and is somewhat nesty by nature
+// sass-lint:disable nesting-depth
+
 .euiButtonIcon {
   @include euiButton;
+  @include euiSlightShadow;
 
-  border: none;
-  background-color: transparent;
-  box-shadow: none;
-  height: auto;
-  min-height: $euiSizeL;
-  min-width: $euiSizeL;
-  line-height: 0; // ensures the icon creates the line-height and so it's always vertically centered
-  padding: $euiSizeXS;
   border-radius: $euiBorderRadius;
+  width: $euiButtonHeight;
+
+  // Ensures center alignment of any sized icon inside buttons and anchors
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-around;
 
   & > svg {
     // prevents the element and its children from receiving any pointer events to fix not bubbling click event in Safari
@@ -17,37 +19,118 @@
     pointer-events: none;
   }
 
-  &:disabled {
+  &.euiButtonIcon--empty {
+    box-shadow: none !important; // sass-lint:disable-line no-important
+    border: none;
+  }
+
+  &.euiButtonIcon-isDisabled {
+    @include euiButtonContentDisabled;
     color: $euiButtonColorDisabledText;
-    pointer-events: none;
+    border-color: $euiButtonColorDisabled;
+
+    &.euiButtonIcon--fill {
+      // Only increase the contrast of background color to text to 2.0 for disabled
+      color: makeHighContrastColor($euiButtonColorDisabled, $euiButtonColorDisabled, 2);
+      background-color: $euiButtonColorDisabled;
+      border-color: $euiButtonColorDisabled;
 
-    .euiButtonIcon__icon {
-      pointer-events: auto;
-      cursor: not-allowed;
+      &:hover,
+      &:focus,
+      &:focus-within {
+        background-color: $euiButtonColorDisabled;
+        border-color: $euiButtonColorDisabled;
+      }
     }
 
     &:hover,
-    &:focus {
-      background-color: transparent;
+    &:focus,
+    &:focus-within {
+      @include euiSlightShadow;
       text-decoration: none;
     }
   }
 }
 
+.euiButtonIcon--xSmall {
+  height: $euiButtonHeightXSmall;
+  width: $euiButtonHeightXSmall;
+}
+
+.euiButtonIcon--small {
+  height: $euiButtonHeightSmall;
+  width: $euiButtonHeightSmall;
+}
+
 // Create button modifiers based upon the map.
 @each $name, $color in $euiButtonIconTypes {
   .euiButtonIcon--#{$name} {
-    color: $color;
+    @if ($name == 'ghost') {
+      // Ghost is unique and ALWAYS sits against a dark background.
+      color: $color;
+    } @else if ($name == 'text') {
+      // The default color is lighter than the normal text color, make the it the text color
+      color: $euiTextColor;
+    } @else {
+      // Other colors need to check their contrast against the page background color.
+      color: makeHighContrastColor($color, $euiPageBackgroundColor);
+    }
+
+    border-color: $color;
 
-    &:focus {
-      background-color: transparentize($color, .9);
+    &.euiButtonIcon--fill {
+      background-color: $color;
+      border-color: $color;
+
+      // The function makes that hexes safe for theming
+      $fillTextColor: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+
+      color: $fillTextColor;
+
+      &:not([class*='isDisabled']) {
+        &:hover,
+        &:focus,
+        &:focus-within {
+          background-color: darken($color, 5%);
+          border-color: darken($color, 5%);
+        }
+      }
     }
 
-    &:hover,
-    &:focus {
-      @if ($name == 'disabled') {
-        cursor: not-allowed;
+    &:not([class*='isDisabled']) {
+      $shadowColor: $euiShadowColor;
+      @if ($name == 'ghost') {
+        $shadowColor: $euiColorInk;
+      } @else if (lightness($euiTextColor) < 50) {
+        // Only if this is the light theme do we use the button variant color to colorize the shadow
+        $shadowColor: desaturate($color, 60%);
+      }
+
+      @include euiSlightShadow($shadowColor);
+
+      &:hover,
+      &:focus,
+      &:focus-within {
+        @include euiSlightShadowHover($shadowColor);
+        background-color: transparentize($color, .9);
       }
     }
   }
 }
+
+// Fix ghost/disabled look specifically
+.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost {
+  &,
+  &:hover,
+  &:focus,
+  &:focus-within {
+    @include euiSlightShadow($euiColorInk);
+    color: $euiButtonColorGhostDisabled;
+    border-color: $euiButtonColorGhostDisabled;
+  }
+
+  &.euiButton--fill {
+    background-color: $euiButtonColorGhostDisabled;
+    color: makeHighContrastColor($euiButtonColorGhostDisabled, $euiButtonColorGhostDisabled, 2);
+  }
+}
diff --git a/src/components/button/button_icon/_variables.scss b/src/components/button/button_icon/_variables.scss
index 61519014012..0810379b2b0 100644
--- a/src/components/button/button_icon/_variables.scss
+++ b/src/components/button/button_icon/_variables.scss
@@ -2,11 +2,10 @@
 $euiButtonIconTypes: (
   accent: $euiColorAccentText,
   danger: $euiColorDangerText,
-  disabled: $euiButtonColorDisabledText,
   ghost: $euiColorGhost,
   primary: $euiColorPrimaryText,
   subdued: $euiTextSubduedColor,
   success: $euiColorSuccessText,
-  text: $euiTextColor,
+  text: $euiColorDarkShade,
   warning: $euiColorWarningText,
 );
diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
index b8d16e05f2c..dafea77f3cc 100644
--- a/src/components/button/button_icon/button_icon.test.tsx
+++ b/src/components/button/button_icon/button_icon.test.tsx
@@ -21,7 +21,7 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 
-import { EuiButtonIcon, COLORS } from './button_icon';
+import { EuiButtonIcon, COLORS, DISPLAYS, SIZES } from './button_icon';
 
 describe('EuiButtonIcon', () => {
   test('is rendered', () => {
@@ -78,6 +78,34 @@ describe('EuiButtonIcon', () => {
       });
     });
 
+    describe('display', () => {
+      DISPLAYS.forEach((display) => {
+        test(`${display} is rendered`, () => {
+          const component = render(
+            <EuiButtonIcon
+              iconType="user"
+              aria-label="button"
+              display={display}
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('size', () => {
+      SIZES.forEach((size) => {
+        test(`${size} is rendered`, () => {
+          const component = render(
+            <EuiButtonIcon iconType="user" aria-label="button" size={size} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
     describe('isSelected', () => {
       it('is rendered as true', () => {
         const component = render(
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
index df43b17c6f7..e4c3f456c6e 100644
--- a/src/components/button/button_icon/button_icon.tsx
+++ b/src/components/button/button_icon/button_icon.tsx
@@ -36,7 +36,6 @@ import {
 
 import { IconType, IconSize, EuiIcon } from '../../icon';
 
-import { ButtonSize } from '../button';
 import { validateHref } from '../../../services/security/href_validator';
 
 export type EuiButtonIconColor =
@@ -44,24 +43,56 @@ export type EuiButtonIconColor =
   | 'danger'
   | 'ghost'
   | 'primary'
+  /**
+   * Set for deprecation 3/2/21
+   * This color button is close enough to text to be duplicative
+   */
   | 'subdued'
   | 'success'
   | 'text'
   | 'warning';
 
+const displayToClassNameMap = {
+  base: null,
+  empty: 'euiButtonIcon--empty',
+  fill: 'euiButtonIcon--fill',
+};
+
+export const DISPLAYS = keysOf(displayToClassNameMap);
+type EuiButtonIconDisplay = keyof typeof displayToClassNameMap;
+
 export interface EuiButtonIconProps extends CommonProps {
   iconType: IconType;
+  /**
+   * Any of the named color palette options.
+   * **`subdued` set to be DEPRECATED**
+   */
   color?: EuiButtonIconColor;
   'aria-label'?: string;
   'aria-labelledby'?: string;
   isDisabled?: boolean;
-  size?: ButtonSize;
+  /**
+   * Overall size of button.
+   * Matches the sizes of other EuiButtons
+   */
+  size?: EuiButtonIconSizes;
+  /**
+   * Size of the icon only.
+   * This will not affect the overall size of the button
+   */
   iconSize?: IconSize;
   /**
    * Applies the boolean state as the `aria-pressed` property to create a toggle button.
    * *Only use when the readable text does not change between states.*
    */
   isSelected?: boolean;
+  /**
+   * Sets the display style for matching other EuiButton types.
+   * `base` is equivelant to a typical EuiButton
+   * `fill` is equivelant to a filled EuiButton
+   * `empty` (default) is equivelant to an EuiButtonEmpty
+   */
+  display?: EuiButtonIconDisplay;
 }
 
 type EuiButtonIconPropsForAnchor = {
@@ -100,6 +131,16 @@ const colorToClassNameMap: { [color in EuiButtonIconColor]: string } = {
 
 export const COLORS = keysOf(colorToClassNameMap);
 
+const sizeToClassNameMap = {
+  xs: 'euiButtonIcon--xSmall',
+  s: 'euiButtonIcon--small',
+  m: 'euiButtonIcon--medium',
+};
+
+export type EuiButtonIconSizes = keyof typeof sizeToClassNameMap;
+
+export const SIZES = keysOf(sizeToClassNameMap);
+
 export const EuiButtonIcon: FunctionComponent<Props> = ({
   className,
   iconType,
@@ -108,8 +149,10 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   isDisabled: _isDisabled,
   href,
   type = 'button',
+  display = 'empty',
   target,
   rel,
+  size = 'xs',
   buttonRef,
   isSelected,
   ...rest
@@ -128,7 +171,12 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   }
   const classes = classNames(
     'euiButtonIcon',
+    {
+      'euiButtonIcon-isDisabled': isDisabled,
+    },
     colorToClassNameMap[color],
+    display && displayToClassNameMap[display],
+    size && sizeToClassNameMap[size],
     className
   );
 
diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index 269bf5d7fd5..ef8ac23e3f6 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -106,7 +106,7 @@ console.log(some);
       >
         <button
           aria-label="Copy"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -161,7 +161,7 @@ console.log(some);
   >
     <button
       aria-label="Expand"
-      class="euiButtonIcon euiButtonIcon--text euiCodeBlock__fullScreenButton"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
       type="button"
     >
       <span
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 88680c66495..131b8d8588e 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -244,7 +244,6 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
               <EuiCopy textToCopy={textToCopy}>
                 {(copy) => (
                   <EuiButtonIcon
-                    size="s"
                     onClick={copy}
                     iconType="copy"
                     color="text"
@@ -274,7 +273,6 @@ export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
         {([fullscreenCollapse, fullscreenExpand]: string[]) => (
           <EuiButtonIcon
             className="euiCodeBlock__fullScreenButton"
-            size="s"
             onClick={toggleFullScreen}
             iconType={isFullScreen ? 'cross' : 'fullScreen'}
             color="text"
diff --git a/src/components/control_bar/control_bar.tsx b/src/components/control_bar/control_bar.tsx
index d1602487bc0..9aabf423469 100644
--- a/src/components/control_bar/control_bar.tsx
+++ b/src/components/control_bar/control_bar.tsx
@@ -144,7 +144,7 @@ export interface IconButtonControlType
 
 export type IconControl = ExclusiveUnion<
   IconControlType,
-  IconButtonControlType
+  Omit<IconButtonControlType, 'size' | 'display'>
 >;
 
 export type Control = ExclusiveUnion<
@@ -352,7 +352,6 @@ export class EuiControlBar extends Component<
               color={color as EuiButtonIconProps['color']}
               {...(rest as IconButtonControlType)}
               iconType={iconType}
-              size="s"
             />
           ) : (
             <EuiIcon
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index a89cd309577..79822b6e0d5 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -1,45 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDataGrid keyboard controls allows user to enter and exit grid navigation 1`] = `
-<div
-  data-focus-guard="true"
-  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-  tabindex="-1"
-/>
-`;
-
-exports[`EuiDataGrid keyboard controls allows user to enter and exit grid navigation 2`] = `
-<div
-  data-focus-guard="true"
-  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-  tabindex="-1"
-/>
-`;
-
-exports[`EuiDataGrid keyboard controls allows user to enter and exit grid navigation 3`] = `
-<div
-  data-focus-guard="true"
-  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-  tabindex="-1"
-/>
-`;
-
-exports[`EuiDataGrid keyboard controls allows user to enter and exit grid navigation 4`] = `
-<div
-  data-focus-guard="true"
-  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-  tabindex="-1"
-/>
-`;
-
-exports[`EuiDataGrid keyboard controls allows user to enter and exit grid navigation 5`] = `
-<div
-  data-focus-guard="true"
-  style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-  tabindex="-1"
-/>
-`;
-
 exports[`EuiDataGrid pagination renders 1`] = `
 <div
   class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
@@ -85,7 +45,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
       <a
         aria-controls="generated-id"
         aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-previous"
         href="#generated-id"
         rel="noreferrer"
@@ -148,7 +108,7 @@ exports[`EuiDataGrid pagination renders 1`] = `
       </ul>
       <button
         aria-label="Next page"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         disabled=""
         type="button"
diff --git a/src/components/datagrid/_data_grid_column_sorting.scss b/src/components/datagrid/_data_grid_column_sorting.scss
index 1bbe555bf3b..634af833baf 100644
--- a/src/components/datagrid/_data_grid_column_sorting.scss
+++ b/src/components/datagrid/_data_grid_column_sorting.scss
@@ -16,14 +16,6 @@
   min-width: $euiSize * 12;
 }
 
-.euiDataGridColumnSorting__button {
-  // The button for sorting needs to be a bit more compact
-  // sass-lint:disable-block no-important
-  height: $euiSize + $euiSizeXS !important;
-  width: $euiSize + $euiSizeXS !important;
-  padding: $euiSizeXS / 2 !important;
-}
-
 .euiDataGridColumnSorting__fieldList {
   @include euiYScrollWithShadows;
   padding-top: $euiSizeXS;
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index 6c3164716c6..4409f69dfda 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -142,21 +142,12 @@
 .euiDataGridRowCell__expandButton {
   display: flex;
   flex-grow: 0;
-
-  .euiDataGridRowCell__expandButtonIcon {
-    background: $euiColorPrimary; // Needed to prevent the bg-color of .euiButtonIcon--text:focus
-  }
 }
 
-
 .euiDataGridRowCell__expandButtonIcon {
   height: $euiSizeM;
-  min-height: $euiSizeM;
-  background: $euiColorPrimary;
   border-radius: $euiBorderRadius / 2;
-  padding: 0;
   width: 0;
-  min-width: 0;
   overflow: hidden;
   transition: none; // Have to take out the generic transition so it is instaneous on focus
 
@@ -168,11 +159,8 @@
 
 .euiDataGridRowCell__actionButtonIcon {
   height: $euiSizeM;
-  min-height: $euiSizeM;
   border-radius: $euiBorderRadius / 2;
-  padding: 0;
   width: 0;
-  min-width: 0;
   overflow: hidden;
   transition: none; // Have to take out the generic transition so it is instaneous on focus
 }
diff --git a/src/components/datagrid/column_sorting_draggable.tsx b/src/components/datagrid/column_sorting_draggable.tsx
index 173008a4e97..762985a53bf 100644
--- a/src/components/datagrid/column_sorting_draggable.tsx
+++ b/src/components/datagrid/column_sorting_draggable.tsx
@@ -121,7 +121,6 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<EuiDataGridCol
                 {(removeSortLabel: ReactChild) => (
                   <EuiButtonIcon
                     color="text"
-                    size="s"
                     className="euiDataGridColumnSorting__button"
                     aria-label={`${removeSortLabel} ${id}`}
                     iconType="cross"
diff --git a/src/components/datagrid/data_grid_cell_buttons.tsx b/src/components/datagrid/data_grid_cell_buttons.tsx
index 5e3d69844d4..9585a225410 100644
--- a/src/components/datagrid/data_grid_cell_buttons.tsx
+++ b/src/components/datagrid/data_grid_cell_buttons.tsx
@@ -52,8 +52,9 @@ export const EuiDataGridCellButtons = ({
       default="Click or hit enter to interact with cell content">
       {(expandButtonTitle: string) => (
         <EuiButtonIcon
+          display="fill"
           className={buttonIconClasses}
-          color="ghost"
+          color="primary"
           iconSize="s"
           iconType="expandMini"
           aria-hidden
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 871ce19ff98..2630b879a82 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -24,7 +24,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -67,7 +67,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -139,7 +139,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -182,7 +182,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -224,7 +224,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -267,7 +267,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -310,7 +310,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -352,7 +352,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -394,7 +394,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -436,7 +436,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -478,7 +478,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -520,7 +520,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -562,7 +562,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
@@ -604,7 +604,7 @@ Array [
     >
       <button
         aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiFlyout__closeButton"
         data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
diff --git a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
index 1adf0691f8a..5ad961f6786 100644
--- a/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
+++ b/src/components/form/field_password/__snapshots__/field_password.test.tsx.snap
@@ -105,7 +105,7 @@ exports[`EuiFieldPassword props dual dual type also renders append 1`] = `
   </span>
   <button
     aria-label="Show password as plain text. Note: this will visually expose your password on the screen."
-    class="euiButtonIcon euiButtonIcon--primary euiFormControlLayout__append"
+    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiFormControlLayout__append"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
@@ -147,7 +147,7 @@ exports[`EuiFieldPassword props dual dualToggleProps is rendered 1`] = `
   </div>
   <button
     aria-label="aria-label"
-    class="euiButtonIcon euiButtonIcon--primary euiFormControlLayout__append testClass1 testClass2"
+    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiFormControlLayout__append testClass1 testClass2"
     data-test-subj="test subject string"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
@@ -329,7 +329,7 @@ exports[`EuiFieldPassword props type dual is rendered 1`] = `
   </div>
   <button
     aria-label="Show password as plain text. Note: this will visually expose your password on the screen."
-    class="euiButtonIcon euiButtonIcon--primary euiFormControlLayout__append"
+    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiFormControlLayout__append"
     title="Show password as plain text. Note: this will visually expose your password on the screen."
     type="button"
   >
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 1efa993f0a1..71255ad552e 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
       <span
@@ -142,7 +142,7 @@ exports[`EuiListGroup listItems is rendered with color 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
       <span
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index b1ee532ca93..bd8575d76ef 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -117,7 +117,7 @@ exports[`EuiListGroupItem props extraAction can be disabled 1`] = `
     </span>
   </span>
   <button
-    class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction"
+    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction"
     disabled=""
     type="button"
   >
@@ -146,7 +146,7 @@ exports[`EuiListGroupItem props extraAction is rendered 1`] = `
   </span>
   <button
     aria-label="label"
-    class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+    class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
     type="button"
   >
     <span
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index 13d6ac746f1..b76b4ec00e2 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -25,7 +25,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </span>
     <button
       aria-label="Pin Label with iconType to the top"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin Label with iconType to the top"
       type="button"
     >
@@ -51,7 +51,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
       <span
@@ -78,7 +78,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </a>
     <button
       aria-label="Pin Active link to the top"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin Active link to the top"
       type="button"
     >
@@ -105,7 +105,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </button>
     <button
       aria-label="Unpin Button with onClick to the top"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned"
       title="Unpin Button with onClick to the top"
       type="button"
     >
@@ -133,7 +133,7 @@ exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
     </a>
     <button
       aria-label="Pin Link with href to the top"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin Link with href to the top"
       type="button"
     >
@@ -188,7 +188,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </span>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
@@ -214,7 +214,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </span>
     <button
       aria-label="bell"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow"
       type="button"
     >
       <span
@@ -241,7 +241,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </a>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
@@ -268,7 +268,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </button>
     <button
       aria-label="Unpin item"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiListGroupItem__extraAction-alwaysShow euiPinnableListGroup__itemExtraAction euiPinnableListGroup__itemExtraAction-pinned"
       title="Unpin item"
       type="button"
     >
@@ -296,7 +296,7 @@ exports[`EuiPinnableListGroup is rendered 1`] = `
     </a>
     <button
       aria-label="Pin item"
-      class="euiButtonIcon euiButtonIcon--primary euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
+      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction"
       title="Pin item"
       type="button"
     >
diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
index 253487a8172..b4287e13d2d 100644
--- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
+++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -31,7 +31,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -49,7 +49,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -64,7 +64,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -79,7 +79,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -97,7 +97,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -112,7 +112,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -127,7 +127,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -145,7 +145,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -197,7 +197,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
         />
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiMarkdownEditorFooter__help"
           type="button"
         >
           <span
@@ -235,7 +235,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -250,7 +250,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -268,7 +268,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -283,7 +283,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -298,7 +298,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -316,7 +316,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -331,7 +331,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -346,7 +346,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -364,7 +364,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -416,7 +416,7 @@ exports[`EuiMarkdownEditor props autoExpandPreview is rendered with false 1`] =
         />
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiMarkdownEditorFooter__help"
           type="button"
         >
           <span
@@ -454,7 +454,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -469,7 +469,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -487,7 +487,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -502,7 +502,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -517,7 +517,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -535,7 +535,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -550,7 +550,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -565,7 +565,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -583,7 +583,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -635,7 +635,7 @@ exports[`EuiMarkdownEditor props height is rendered in full mode 1`] = `
         />
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiMarkdownEditorFooter__help"
           type="button"
         >
           <span
@@ -673,7 +673,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -688,7 +688,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -706,7 +706,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -721,7 +721,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -736,7 +736,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -754,7 +754,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -769,7 +769,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -784,7 +784,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -802,7 +802,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -854,7 +854,7 @@ exports[`EuiMarkdownEditor props height is rendered with a custom size 1`] = `
         />
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiMarkdownEditorFooter__help"
           type="button"
         >
           <span
@@ -892,7 +892,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Bold"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -907,7 +907,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Italic"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -925,7 +925,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Unordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -940,7 +940,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Ordered list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -955,7 +955,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Task list"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -973,7 +973,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Quote"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -988,7 +988,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Code"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -1003,7 +1003,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Link"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -1021,7 +1021,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
       >
         <button
           aria-label="Tooltip"
-          class="euiButtonIcon euiButtonIcon--text"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
           type="button"
         >
           <span
@@ -1073,7 +1073,7 @@ exports[`EuiMarkdownEditor props maxHeight is rendered with a custom size 1`] =
         />
         <button
           aria-label="Show markdown help"
-          class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
+          class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiMarkdownEditorFooter__help"
           type="button"
         >
           <span
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 954038871b6..e1606316408 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -27,7 +27,7 @@ Array [
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         <span
@@ -139,7 +139,7 @@ Array [
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         <span
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index f210984d3a3..58f69991d6f 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -27,7 +27,7 @@ Array [
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
         type="button"
       >
         <span
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 85c340bad16..12ec93d26b2 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`EuiPagination is rendered 1`] = `
 >
   <button
     aria-label="Previous page, 1"
-    class="euiButtonIcon euiButtonIcon--text"
+    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
     data-test-subj="pagination-button-previous"
     type="button"
   >
@@ -45,7 +45,7 @@ exports[`EuiPagination is rendered 1`] = `
   </ul>
   <button
     aria-label="Next page, 3"
-    class="euiButtonIcon euiButtonIcon--text"
+    class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
     data-test-subj="pagination-button-next"
     type="button"
   >
diff --git a/src/components/resizable_container/_resizable_collapse_button.scss b/src/components/resizable_container/_resizable_collapse_button.scss
index ccc6100993a..b01aaecc42f 100644
--- a/src/components/resizable_container/_resizable_collapse_button.scss
+++ b/src/components/resizable_container/_resizable_collapse_button.scss
@@ -15,24 +15,16 @@
   // Remove animations from EuiButtonIcon because of the custom transforms
   animation: none !important; // sass-lint:disable-line no-important
   // Remove transition from EuiButtonIcon because of the custom transforms
-  transition: none !important; // sass-lint:disable-line no-important
-
-  &,
-  &:hover,
-  &:focus {
-    background-color: $euiColorLightestShade;
-  }
+  transition-property: background, box-shadow;
 
   &:focus {
     @include euiSlightShadowHover;
-    background-color: $euiColorLightShade;
   }
 
   &-isCollapsed {
     box-shadow: none;
     background: transparent;
     border-radius: 0;
-    display: flex; /* 2 */
   }
 
   &:not(:focus):not(:active):not(.euiResizableToggleButton-isVisible):not(.euiResizableToggleButton-isCollapsed) {
@@ -41,24 +33,21 @@
 }
 
 .euiResizableToggleButton--horizontal {
-  &.euiResizableToggleButton {
+  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
     &.euiResizableToggleButton--after {
       right: 0;
       top: 50%; /* 1 */
       transform: translate(50%, -50%); /* 1 */
-      justify-content: center; /* 1, 2 */
 
       &.euiResizableToggleButton--top {
         top: 0;
         transform: translate(50%, $euiSize);
-        justify-content: flex-start; /* 2 */
       }
 
       &.euiResizableToggleButton--bottom {
         top: auto;
         bottom: 0;
         transform: translate(50%, -$euiSize);
-        justify-content: flex-end; /* 2 */
       }
     }
 
@@ -66,54 +55,54 @@
       left: 0;
       top: 50%; /* 1 */
       transform: translate(-50%, -50%); /* 1 */
-      justify-content: center; /* 1, 2 */
 
       &.euiResizableToggleButton--top {
         top: 0;
         transform: translate(-50%, $euiSize);
-        justify-content: flex-start; /* 2 */
       }
 
       &.euiResizableToggleButton--bottom {
         top: auto;
         bottom: 0;
         transform: translate(-50%, -$euiSize);
-        justify-content: flex-end; /* 2 */
       }
     }
 
     &.euiResizableToggleButton-isCollapsed {
-      flex-direction: column;
       top: 0 !important; // sass-lint:disable-line no-important
       bottom: 0 !important; // sass-lint:disable-line no-important
       transform: none !important; // sass-lint:disable-line no-important
-      // Give some space from the cross edges
-      padding-top: $euiSize;
-      padding-bottom: $euiSize;
+      height: 100%;
+
+      &.euiResizableToggleButton--top {
+        padding-top: $euiSize;
+        align-items: flex-start;  /* 2 */
+      }
+
+      &.euiResizableToggleButton--bottom {
+        padding-bottom: $euiSize;
+        align-items: flex-end;  /* 2 */
+      }
     }
   }
 }
 
 .euiResizableToggleButton--vertical {
-  &.euiResizableToggleButton {
-
+  &.euiResizableToggleButton { // Extra layer of nesting to override EuiButtonIcon transforms on hover
     &.euiResizableToggleButton--after {
       top: 100%;
       left: 50%; /* 1 */
       transform: translate(-50%, -50%); /* 1 */
-      justify-content: center; /* 1, 2 */
 
       &.euiResizableToggleButton--left {
         left: 0;
         transform: translate($euiSize, -50%);
-        justify-content: flex-start; /* 2 */
       }
 
       &.euiResizableToggleButton--right {
         left: auto;
         right: 0;
         transform: translate(-$euiSize, -50%);
-        justify-content: flex-end; /* 2 */
       }
     }
 
@@ -121,32 +110,35 @@
       bottom: 100%;
       left: 50%; /* 1 */
       transform: translate(-50%, 50%); /* 1 */
-      justify-content: center; /* 1, 2 */
 
       &.euiResizableToggleButton--left {
         left: 0;
         transform: translate($euiSize, 50%);
-        justify-content: flex-start; /* 2 */
       }
 
       &.euiResizableToggleButton--right {
         left: auto;
         right: 0;
         transform: translate(-$euiSize, 50%);
-        justify-content: flex-end; /* 2 */
       }
     }
 
     &.euiResizableToggleButton-isCollapsed {
-      flex-direction: row;
       top: 0 !important; // sass-lint:disable-line no-important
       bottom: 0 !important; // sass-lint:disable-line no-important
       left: 0 !important; // sass-lint:disable-line no-important
       transform: none !important; // sass-lint:disable-line no-important
       width: 100%;
-      // Give some space from the cross edges
-      padding-left: $euiSize;
-      padding-right: $euiSize;
+
+      &.euiResizableToggleButton--left {
+        padding-left: $euiSize;
+        justify-content: flex-start; /* 2 */
+      }
+
+      &.euiResizableToggleButton--right {
+        padding-right: $euiSize;
+        justify-content: flex-end; /* 2 */
+      }
     }
   }
 }
diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx
index 51c8c6eb5d6..5c8004e3970 100644
--- a/src/components/resizable_container/resizable_collapse_button.tsx
+++ b/src/components/resizable_container/resizable_collapse_button.tsx
@@ -89,7 +89,8 @@ export const EuiResizableCollapseButton: FunctionComponent<EuiResizableCollapseB
 
   return (
     <EuiButtonIcon
-      color="text"
+      display={isCollapsed ? 'empty' : 'fill'}
+      color={isCollapsed ? 'text' : 'ghost'}
       {...rest}
       className={classes}
       iconType={isCollapsed ? COLLAPSED_ICON : NOT_COLLAPSED_ICON}
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
index 5c387a1da73..915148e60f3 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`EuiTablePagination is rendered 1`] = `
     >
       <button
         aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-previous"
         type="button"
       >
@@ -164,7 +164,7 @@ exports[`EuiTablePagination is rendered 1`] = `
       </ul>
       <button
         aria-label="Next page, 3"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         type="button"
       >
@@ -196,7 +196,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
     >
       <button
         aria-label="Previous page, 1"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-previous"
         type="button"
       >
@@ -315,7 +315,7 @@ exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
       </ul>
       <button
         aria-label="Next page, 3"
-        class="euiButtonIcon euiButtonIcon--text"
+        class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pagination-button-next"
         type="button"
       >
diff --git a/src/global_styling/variables/_buttons.scss b/src/global_styling/variables/_buttons.scss
index c425e7083c8..8f759a03e2f 100644
--- a/src/global_styling/variables/_buttons.scss
+++ b/src/global_styling/variables/_buttons.scss
@@ -1,5 +1,6 @@
 $euiButtonHeight: $euiSizeXXL !default;
 $euiButtonHeightSmall: $euiSizeXL !default;
+$euiButtonHeightXSmall: $euiSizeL !default;
 
 $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 70%) !default;
 // Only increase the contrast of background color to text to 2.0 for disabled
diff --git a/src/themes/eui-amsterdam/overrides/_button.scss b/src/themes/eui-amsterdam/overrides/_button.scss
index 6154eebfea8..4af2df97f8d 100644
--- a/src/themes/eui-amsterdam/overrides/_button.scss
+++ b/src/themes/eui-amsterdam/overrides/_button.scss
@@ -1,25 +1,34 @@
 // This file has lots of modifiers and is somewhat nesty by nature
 //sass-lint:disable nesting-depth
 
-.euiButton {
+.euiButton,
+.euiButtonIcon {
   // sass-lint:disable no-important
   // remove for all states
   box-shadow: none !important;
+}
 
-  // Added exclusion of the `ghost` type of button
-  // so as not to override those specific styles from default theme
-  // And the only style that needs to change is the non-filled version
-  &.euiButton-isDisabled:not(.euiButton--ghost) {
-    &,
-    &:hover {
-      $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
-      background-color: transparentize($euiButtonColorDisabled, .9);
-      color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
-    }
+.euiButton.euiButton-isDisabled:not(.euiButton--ghost),
+.euiButtonIcon.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost) {
+  &,
+  &:hover {
+    $backgroundColorSimulated: mix($euiPageBackgroundColor, $euiButtonColorDisabled, 90%);
+    background-color: transparentize($euiButtonColorDisabled, .9);
+    color: makeDisabledContrastColor($euiButtonColorDisabled, $backgroundColorSimulated);
+  }
+}
+
+.euiButtonIcon--empty.euiButtonIcon-isDisabled:not(.euiButtonIcon--ghost) {
+  &,
+  &:hover {
+    background-color: transparent;
+    color: makeDisabledContrastColor($euiButtonColorDisabled, $euiPageBackgroundColor);
   }
 }
 
-.euiButton--small {
+.euiButton--small,
+.euiButtonIcon--small,
+.euiButtonIcon--xSmall {
   // Use a moderately smaller radius on small buttons
   // so that they don't appear completely rounded
   border-radius: $euiBorderRadius * (2 / 3);
@@ -63,3 +72,42 @@
     background-color: transparentize($euiButtonColorGhostDisabled, .9);
   }
 }
+
+
+// Duplicating the above for EuiButtonIcon
+@each $name, $color in $euiButtonIconTypes {
+  .euiButtonIcon--#{$name}:not(.euiButtonIcon--empty) {
+    @include euiButtonDefaultStyle($color);
+
+    @if ($name == 'ghost') {
+      // Ghost is unique and ALWAYS sits against a dark background.
+      $backgroundColorSimulated: mix($euiColorInk, $color, 70%);
+      color: makeHighContrastColor($color, $backgroundColorSimulated);
+    } @else {
+      &.euiButtonIcon--fill:focus {
+        outline-color: lightOrDarkTheme($euiColorInk, $euiColorGhost);
+      }
+    }
+
+    &.euiButtonIcon--fill:not([class*='isDisabled']) {
+      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
+
+      &,
+      &:hover,
+      &:focus {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+// Fix ghost/disabled look specifically
+.euiButtonIcon:not(.euiButtonIcon--empty).euiButtonIcon-isDisabled.euiButtonIcon--ghost,
+// adding fill type to override default theme
+.euiButtonIcon.euiButtonIcon-isDisabled.euiButtonIcon--ghost.euiButtonIcon--fill {
+  &,
+  &:focus {
+    color: $euiButtonColorGhostDisabled;
+    background-color: transparentize($euiButtonColorGhostDisabled, .9);
+  }
+}