diff --git a/src/components/ControlBar/ClearButton.js b/src/components/ControlBar/ClearButton.js
index 2358357bc..a02358508 100644
--- a/src/components/ControlBar/ClearButton.js
+++ b/src/components/ControlBar/ClearButton.js
@@ -6,7 +6,9 @@ import classes from './styles/ClearButton.module.css';
 
 export const ClearButton = ({ onClear }) => (
     <button className={classes.button} onClick={onClear}>
-        <ClearIcon className={classes.icon} color="action" />
+        <span>
+            <ClearIcon className={classes.icon} color="action" />
+        </span>
     </button>
 );
 
diff --git a/src/components/ControlBar/styles/ClearButton.module.css b/src/components/ControlBar/styles/ClearButton.module.css
index 7a3754397..183c8172d 100644
--- a/src/components/ControlBar/styles/ClearButton.module.css
+++ b/src/components/ControlBar/styles/ClearButton.module.css
@@ -2,11 +2,14 @@
     border: none;
     border-radius: 50%;
     cursor: pointer;
-    margin-left: 5px;
-    padding: 0px 5px;
-    vertical-align: text-bottom;
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
+}
+
+.button > span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .button:focus {
@@ -16,5 +19,4 @@
 .icon {
     width: 16px;
     height: 16px;
-    margin-top: 4px;
 }
diff --git a/src/components/ControlBar/styles/DashboardsBar.module.css b/src/components/ControlBar/styles/DashboardsBar.module.css
index 318a0aa11..7276f8e0e 100644
--- a/src/components/ControlBar/styles/DashboardsBar.module.css
+++ b/src/components/ControlBar/styles/DashboardsBar.module.css
@@ -4,6 +4,7 @@
     height: 36px;
     position: relative;
     top: 2px;
+    margin-right: 4px;
 }
 
 .rightControls {