diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 26e21e828..e68fad5c1 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -47,7 +47,10 @@ export function Button(props: ButtonProps) {
       type={type}
       {...rest}
     >
-      {icon && React.cloneElement(icon, { className: "button-icon" })}
+      {icon &&
+        React.cloneElement(icon, {
+          className: clsx("button-icon", { lonely: !children }),
+        })}
       {loading && loadingText ? loadingText : children}
     </button>
   );
diff --git a/app/styles/global.css b/app/styles/global.css
index 61f3b9edc..fb62d0d0b 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -186,11 +186,15 @@ a {
   opacity: 0.6;
 }
 
-:is(button, .button) > .button-icon {
+.button-icon {
   width: 1.25rem;
   margin-inline-end: var(--s-1-5);
 }
 
+.button-icon.lonely {
+  margin-inline-end: 0;
+}
+
 :is(button, .button).tiny > .button-icon {
   width: 1rem;
   margin-inline-end: var(--s-1);