diff --git a/src/plugins/controls/public/time_slider/components/index.scss b/src/plugins/controls/public/time_slider/components/index.scss
index 1fe17385b695..20dfd86a2329 100644
--- a/src/plugins/controls/public/time_slider/components/index.scss
+++ b/src/plugins/controls/public/time_slider/components/index.scss
@@ -15,6 +15,10 @@
   min-width: $euiSizeXXL * 15;
 }
 
+.timeSlider-playToggle {
+  background-color: $euiColorPrimary !important;
+}
+
 .timeSlider__anchor {
   text-decoration: none;
   width: 100%;
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx b/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
index cff2007b666b..3f569fe6b60b 100644
--- a/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
+++ b/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
@@ -85,6 +85,7 @@ export const TimeSliderPrepend: FC<Props> = (props: Props) => {
       />
       {props.waitForControlOutputConsumersToLoad$ === undefined ? null : (
         <EuiButtonIcon
+          className="timeSlider-playToggle"
           onClick={isPaused ? onPlay : onPause}
           iconType={isPaused ? 'playFilled' : 'pause'}
           size="s"