diff --git a/src/button/Button.tsx b/src/button/Button.tsx
index 51c22f521..f47d7e077 100644
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -41,6 +41,7 @@ export default defineComponent({
     hairline: Boolean,
     disabled: Boolean,
     iconPrefix: String,
+    loadingSize: String,
     loadingText: String,
     loadingType: String as PropType<LoadingType>,
     tag: {
@@ -59,10 +60,6 @@ export default defineComponent({
       type: String as PropType<ButtonHTMLAttributes['type']>,
       default: 'button',
     },
-    loadingSize: {
-      type: String,
-      default: '20px',
-    },
     iconPosition: {
       type: String as PropType<'left' | 'right'>,
       default: 'left',
@@ -84,7 +81,6 @@ export default defineComponent({
           class={bem('loading')}
           size={props.loadingSize}
           type={props.loadingType}
-          color="currentColor"
         />
       );
     };
diff --git a/src/button/README.md b/src/button/README.md
index 5e61eb347..52a0213ca 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -181,3 +181,4 @@ How to use: [Custom Theme](#/en-US/theme).
 | @button-plain-background-color   | `@white`             | -           |
 | @button-disabled-opacity         | `@disabled-opacity`  | -           |
 | @button-icon-size                | `1.2em`              | -           |
+| @button-loading-icon-size        | `20px`               | -           |
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index 2b16c3479..f68786306 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -208,3 +208,4 @@ app.use(Button);
 | @button-plain-background-color   | `@white`             | -    |
 | @button-disabled-opacity         | `@disabled-opacity`  | -    |
 | @button-icon-size                | `1.2em`              | -    |
+| @button-loading-icon-size        | `20px`               | -    |
diff --git a/src/button/index.less b/src/button/index.less
index 4f0eb6ecf..d0d42d841 100644
--- a/src/button/index.less
+++ b/src/button/index.less
@@ -110,6 +110,12 @@
   &__loading {
     color: inherit;
     font-size: inherit;
+
+    .van-loading__spinner {
+      color: currentColor;
+      width: @button-loading-icon-size;
+      height: @button-loading-icon-size;
+    }
   }
 
   &--mini {
diff --git a/src/button/test/__snapshots__/demo.spec.ts.snap b/src/button/test/__snapshots__/demo.spec.ts.snap
index 936299c4a..075970faa 100644
--- a/src/button/test/__snapshots__/demo.spec.ts.snap
+++ b/src/button/test/__snapshots__/demo.spec.ts.snap
@@ -118,9 +118,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--circular van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--circular"
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
+        <span class="van-loading__spinner van-loading__spinner--circular">
           <svg class="van-loading__circular"
                viewbox="25 25 50 50"
           >
@@ -140,9 +138,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--spinner van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--spinner"
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
+        <span class="van-loading__spinner van-loading__spinner--spinner">
           <i>
           </i>
           <i>
@@ -176,9 +172,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-button__content">
       <div class="van-loading van-loading--circular van-button__loading">
-        <span class="van-loading__spinner van-loading__spinner--circular"
-              style="color: currentColor; width: 20px; height: 20px;"
-        >
+        <span class="van-loading__spinner van-loading__spinner--circular">
           <svg class="van-loading__circular"
                viewbox="25 25 50 50"
           >
diff --git a/src/style/var.less b/src/style/var.less
index c4e1c5c94..531557c31 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -159,6 +159,7 @@
 @button-plain-background-color: @white;
 @button-disabled-opacity: @disabled-opacity;
 @button-icon-size: 1.2em;
+@button-loading-icon-size: 20px;
 
 // Calendar
 @calendar-background-color: @white;
diff --git a/src/submit-bar/test/__snapshots__/demo.spec.ts.snap b/src/submit-bar/test/__snapshots__/demo.spec.ts.snap
index ea9fab405..3d00f669a 100644
--- a/src/submit-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/src/submit-bar/test/__snapshots__/demo.spec.ts.snap
@@ -83,9 +83,7 @@ exports[`should render demo and match snapshot 1`] = `
       >
         <div class="van-button__content">
           <div class="van-loading van-loading--circular van-button__loading">
-            <span class="van-loading__spinner van-loading__spinner--circular"
-                  style="color: currentColor; width: 20px; height: 20px;"
-            >
+            <span class="van-loading__spinner van-loading__spinner--circular">
               <svg class="van-loading__circular"
                    viewbox="25 25 50 50"
               >