diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
index b1e31f6d77..795a4481e0 100644
--- a/docs/en-US/component/message-box.md
+++ b/docs/en-US/component/message-box.md
@@ -95,6 +95,16 @@ message-box/centered-content
 
 :::
 
+## Customized Icon
+
+The icon can be customized to any Vue component or [render function (JSX)](https://vuejs.org/guide/extras/render-function.html).
+
+:::demo
+
+message-box/customized-icon
+
+:::
+
 ## Draggable
 
 MessageBox can be draggable.
diff --git a/docs/examples/message-box/customized-icon.vue b/docs/examples/message-box/customized-icon.vue
new file mode 100644
index 0000000000..17d095724e
--- /dev/null
+++ b/docs/examples/message-box/customized-icon.vue
@@ -0,0 +1,20 @@
+<template>
+  <el-button text @click="open">Click to open Message Box</el-button>
+</template>
+
+<script lang="ts" setup>
+import { markRaw } from 'vue'
+import { ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+
+const open = () => {
+  ElMessageBox.confirm(
+    'It will permanently delete the file. Continue?',
+    'Warning',
+    {
+      type: 'warning',
+      icon: markRaw(Delete),
+    }
+  )
+}
+</script>