diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index b65c4df4..0bdb9f71 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -297,3 +297,20 @@
     );
   }
 }
+
+.xy-flow__controls {
+  &-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 26px;
+    width: 26px;
+    padding: 4px;
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+  }
+}
diff --git a/packages/system/src/styles/style.css b/packages/system/src/styles/style.css
index 35096046..99fa8876 100644
--- a/packages/system/src/styles/style.css
+++ b/packages/system/src/styles/style.css
@@ -100,15 +100,8 @@
         var(--controls-button-border-color, var(--controls-button-border-color-default))
       );
     color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default)));
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
     cursor: pointer;
     user-select: none;
-    padding: 5px;
 
     &:hover {
       background: var(
@@ -121,12 +114,6 @@
       );
     }
 
-    svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-
     &:disabled {
       pointer-events: none;