diff --git a/src/packages/dialog/demos/h5/demo6.tsx b/src/packages/dialog/demos/h5/demo6.tsx
index 32fe42b659..b79ddad282 100644
--- a/src/packages/dialog/demos/h5/demo6.tsx
+++ b/src/packages/dialog/demos/h5/demo6.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Cell, Dialog } from '@nutui/nutui-react'
-import { Close } from '@nutui/icons-react'
 
 const Demo6 = () => {
   const [visible1, setVisible1] = useState(false)
@@ -18,6 +17,10 @@ const Demo6 = () => {
         title="顶部带关闭按钮"
         visible={visible1}
         closeIcon
+        closeIconPosition="top-right"
+        style={{
+          '--nutui-dialog-close-color': '#8c8c8c',
+        }}
         onConfirm={() => setVisible1(false)}
         onCancel={() => setVisible1(false)}
       >
@@ -33,13 +36,9 @@ const Demo6 = () => {
         className="test-dialog"
         title="底部带关闭按钮"
         visible={visible2}
-        closeIcon={<Close width="24px" height="24px" />}
-        closeIconPosition="bottom"
         onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}
-        style={{
-          '--nutui-dialog-close-color': '#FFFFFF',
-        }}
+        closeIcon
       >
         支持函数调用和组件调用两种方式。
       </Dialog>
diff --git a/src/packages/dialog/demos/taro/demo6.tsx b/src/packages/dialog/demos/taro/demo6.tsx
index f7f86b7749..56ef910047 100644
--- a/src/packages/dialog/demos/taro/demo6.tsx
+++ b/src/packages/dialog/demos/taro/demo6.tsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import { Cell, Dialog } from '@nutui/nutui-react-taro'
-import { Close } from '@nutui/icons-react-taro'
 
 const Demo6 = () => {
   const [visible1, setVisible1] = useState(false)
@@ -18,6 +17,10 @@ const Demo6 = () => {
         title="顶部带关闭按钮"
         visible={visible1}
         closeIcon
+        closeIconPosition="top-right"
+        style={{
+          '--nutui-dialog-close-color': '#8c8c8c',
+        }}
         onConfirm={() => setVisible1(false)}
         onCancel={() => setVisible1(false)}
       >
@@ -33,13 +36,9 @@ const Demo6 = () => {
         className="test-dialog"
         title="底部带关闭按钮"
         visible={visible2}
-        closeIcon={<Close width="24px" height="24px" />}
-        closeIconPosition="bottom"
         onConfirm={() => setVisible2(false)}
         onCancel={() => setVisible2(false)}
-        style={{
-          '--nutui-dialog-close-color': '#FFFFFF',
-        }}
+        closeIcon
       >
         支持函数调用和组件调用两种方式。
       </Dialog>
diff --git a/src/packages/dialog/dialog.scss b/src/packages/dialog/dialog.scss
index d1d53d44af..da4d81c760 100644
--- a/src/packages/dialog/dialog.scss
+++ b/src/packages/dialog/dialog.scss
@@ -44,6 +44,11 @@
     align-items: center;
     top: $dialog-close-top;
     color: $dialog-close-color;
+    .nut-icon {
+      font-size: 24px;
+      height: 24px;
+      width: 24px;
+    }
 
     &-top-right {
       right: $dialog-close-right;
diff --git a/src/packages/dialog/dialog.taro.tsx b/src/packages/dialog/dialog.taro.tsx
index 8f24b050a0..24776cbfc1 100644
--- a/src/packages/dialog/dialog.taro.tsx
+++ b/src/packages/dialog/dialog.taro.tsx
@@ -33,7 +33,7 @@ const defaultProps = {
   disableConfirmButton: false,
   footerDirection: 'horizontal',
   lockScroll: true,
-  closeIconPosition: 'top-right',
+  closeIconPosition: 'bottom',
   closeIcon: false,
   beforeCancel: () => true,
   beforeClose: () => true,
diff --git a/src/packages/dialog/dialog.tsx b/src/packages/dialog/dialog.tsx
index 54972e663c..9ec4a62ede 100644
--- a/src/packages/dialog/dialog.tsx
+++ b/src/packages/dialog/dialog.tsx
@@ -26,7 +26,7 @@ const defaultProps = {
   disableConfirmButton: false,
   footerDirection: 'horizontal',
   lockScroll: true,
-  closeIconPosition: 'top-right',
+  closeIconPosition: 'bottom',
   closeIcon: false,
   beforeCancel: () => true,
   beforeClose: () => true,
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 81d2709a3e..000855cf32 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -1323,7 +1323,7 @@ $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
   5px
 ) !default;
-$dialog-close-color: var(--nutui-dialog-close-color, #8c8c8c) !default;
+$dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
 $dialog-close-width: var(--nutui-dialog-close-width, 18px) !default;
 $dialog-close-height: var(--nutui-dialog-close-height, 18px) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 40cc0226be..43e3d69154 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1276,7 +1276,7 @@ $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
   5px
 ) !default;
-$dialog-close-color: var(--nutui-dialog-close-color, #8c8c8c) !default;
+$dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
 $dialog-close-width: var(--nutui-dialog-close-width, 18px) !default;
 $dialog-close-height: var(--nutui-dialog-close-height, 18px) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;