diff --git a/src/plugins/charts/public/static/components/_legend_toggle.scss b/src/plugins/charts/public/static/components/_legend_toggle.scss
deleted file mode 100644
index f418922ded2d8f..00000000000000
--- a/src/plugins/charts/public/static/components/_legend_toggle.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.legend__toggle {
-  border-radius: $euiBorderRadius;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  padding: $euiSizeXS;
-  background-color: $euiColorEmptyShade;
-  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance, background-color $euiAnimSpeedFast $euiAnimSlightResistance $euiAnimSpeedExtraSlow;
-  z-index: 1;
-  margin: $euiSizeXS;
-
-  &:focus {
-    @include euiFocusRing();
-  }
-
-  &--isOpen {
-    background-color: transparentize($euiColorDarkestShade, .9);
-    opacity: 1;
-  }
-
-  &--position-left,
-  &--position-bottom {
-    left: auto;
-    bottom: auto;
-    right: 0;
-    top: 0;
-  }
-}
-
diff --git a/src/plugins/charts/public/static/components/legend_toggle.scss b/src/plugins/charts/public/static/components/legend_toggle.scss
new file mode 100644
index 00000000000000..7eb85a5e08ec05
--- /dev/null
+++ b/src/plugins/charts/public/static/components/legend_toggle.scss
@@ -0,0 +1,20 @@
+.echLegend__toggle {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
+  margin: $euiSizeXS;
+
+  &--isOpen {
+    background-color: $euiColorLightestShade;
+  }
+
+  &--position-left,
+  &--position-bottom {
+    left: auto;
+    bottom: auto;
+    right: 0;
+    top: 0;
+  }
+}
+
diff --git a/src/plugins/charts/public/static/components/legend_toggle.tsx b/src/plugins/charts/public/static/components/legend_toggle.tsx
index 0f2f7f403599b3..12742b6da6e6bd 100644
--- a/src/plugins/charts/public/static/components/legend_toggle.tsx
+++ b/src/plugins/charts/public/static/components/legend_toggle.tsx
@@ -21,10 +21,10 @@ import React, { memo, useMemo } from 'react';
 import classNames from 'classnames';
 
 import { i18n } from '@kbn/i18n';
-import { htmlIdGenerator, EuiIcon } from '@elastic/eui';
+import { htmlIdGenerator, EuiButtonIcon } from '@elastic/eui';
 import { Position } from '@elastic/charts';
 
-import './_legend_toggle.scss';
+import './legend_toggle.scss';
 
 interface LegendToggleProps {
   onClick: () => void;
@@ -36,29 +36,26 @@ const LegendToggleComponent = ({ onClick, showLegend, legendPosition }: LegendTo
   const legendId = useMemo(() => htmlIdGenerator()('legend'), []);
 
   return (
-    <button
+    <EuiButtonIcon
       type="button"
+      iconType="list"
+      color="subdued"
       onClick={onClick}
-      className={classNames(
-        'legend__toggle kbn-resetFocusState',
-        `legend__toggle--position-${legendPosition}`,
-        {
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          'legend__toggle--isOpen': showLegend,
-        }
-      )}
+      className={classNames('echLegend__toggle', `echLegend__toggle--position-${legendPosition}`, {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'echLegend__toggle--isOpen': showLegend,
+      })}
       aria-label={i18n.translate('charts.legend.toggleLegendButtonAriaLabel', {
         defaultMessage: 'Toggle legend',
       })}
       aria-expanded={showLegend}
       aria-controls={legendId}
+      isSelected={showLegend}
       data-test-subj="vislibToggleLegend"
       title={i18n.translate('charts.legend.toggleLegendButtonTitle', {
         defaultMessage: 'Toggle legend',
       })}
-    >
-      <EuiIcon color="text" type="list" />
-    </button>
+    />
   );
 };