diff --git a/src/packages/calendar/calendar.taro.tsx b/src/packages/calendar/calendar.taro.tsx
index 5e38fbc5d7..c20bc86cb5 100644
--- a/src/packages/calendar/calendar.taro.tsx
+++ b/src/packages/calendar/calendar.taro.tsx
@@ -23,6 +23,7 @@ export interface CalendarProps {
   showSubTitle?: boolean
   scrollAnimation?: boolean
   firstDayOfWeek: number
+  closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
@@ -88,6 +89,7 @@ export const Calendar = React.forwardRef<
     showSubTitle,
     scrollAnimation,
     firstDayOfWeek,
+    closeIcon,
     disableDate,
     renderHeaderButtons,
     renderDay,
@@ -176,6 +178,7 @@ export const Calendar = React.forwardRef<
           onOverlayClick={closePopup}
           onCloseIconClick={closePopup}
           style={{ height: '83%' }}
+          closeIcon={closeIcon}
         >
           {renderItem()}
         </Popup>
diff --git a/src/packages/calendar/calendar.tsx b/src/packages/calendar/calendar.tsx
index 57a9330f36..d4f3b50020 100644
--- a/src/packages/calendar/calendar.tsx
+++ b/src/packages/calendar/calendar.tsx
@@ -23,6 +23,7 @@ export interface CalendarProps {
   showSubTitle?: boolean
   scrollAnimation?: boolean
   firstDayOfWeek: number
+  closeIcon?: ReactNode
   disableDate: (date: CalendarDay) => boolean
   renderHeaderButtons?: () => string | JSX.Element
   renderDay?: (date: CalendarDay) => string | JSX.Element
@@ -88,6 +89,7 @@ export const Calendar = React.forwardRef<
     showSubTitle,
     scrollAnimation,
     firstDayOfWeek,
+    closeIcon,
     disableDate,
     renderHeaderButtons,
     renderDay,
@@ -172,6 +174,7 @@ export const Calendar = React.forwardRef<
           position="bottom"
           round
           closeable
+          closeIcon={closeIcon}
           destroyOnClose
           onOverlayClick={closePopup}
           onCloseIconClick={closePopup}
diff --git a/src/packages/calendar/demos/h5/demo1.tsx b/src/packages/calendar/demos/h5/demo1.tsx
index a5235e190c..18e7f906fa 100644
--- a/src/packages/calendar/demos/h5/demo1.tsx
+++ b/src/packages/calendar/demos/h5/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Cell, Calendar } from '@nutui/nutui-react'
+import { Star } from '@nutui/icons-react'
 
 const Demo1 = () => {
   const d = new Date()
@@ -39,6 +40,7 @@ const Demo1 = () => {
         onClose={closeSwitch}
         onConfirm={setChooseValue}
         onDayClick={select}
+        closeIcon={<Star />}
       />
     </>
   )
diff --git a/src/packages/calendar/demos/taro/demo1.tsx b/src/packages/calendar/demos/taro/demo1.tsx
index baefc59d7d..fb890ac4a4 100644
--- a/src/packages/calendar/demos/taro/demo1.tsx
+++ b/src/packages/calendar/demos/taro/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { Cell, Calendar } from '@nutui/nutui-react-taro'
+import { Star } from '@nutui/icons-react'
 
 const Demo1 = () => {
   const d = new Date()
@@ -39,6 +40,7 @@ const Demo1 = () => {
         onClose={closeSwitch}
         onConfirm={setChooseValue}
         onDayClick={select}
+        closeIcon={<Star />}
       />
     </>
   )
diff --git a/src/packages/calendar/doc.en-US.md b/src/packages/calendar/doc.en-US.md
index 3886c8906f..098ca7411f 100644
--- a/src/packages/calendar/doc.en-US.md
+++ b/src/packages/calendar/doc.en-US.md
@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | whether to show sub title for calendar | `boolean` | `true` |
 | scrollAnimation | whether to start scroll animation | `boolean` | `true` |
 | firstDayOfWeek | first day of week | `0-6` | `0` |
+| closeIcon | Custom Icon | `ReactNode` | `close` |
 | disableDate | set disable date | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | custom buttons, under the title but above the subtitle | `() => string` \| `JSX.Element` | `-` |
 | renderDay | day info | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
diff --git a/src/packages/calendar/doc.md b/src/packages/calendar/doc.md
index 34f28b5fef..e6757ffec0 100644
--- a/src/packages/calendar/doc.md
+++ b/src/packages/calendar/doc.md
@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | 是否展示日期标题 | `boolean` | `true` |
 | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` |
 | firstDayOfWeek | 设置周起始日 | `0-6` | `0` |
+| closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
diff --git a/src/packages/calendar/doc.taro.md b/src/packages/calendar/doc.taro.md
index 1fc0cb0881..8e3a9d8858 100644
--- a/src/packages/calendar/doc.taro.md
+++ b/src/packages/calendar/doc.taro.md
@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react-taro'
 | showSubTitle | 是否展示日期标题 | `boolean` | `true` |
 | scrollAnimation | 是否启动滚动动画 | `boolean` | `true` |
 | firstDayOfWeek | 设置周起始日 | `0-6` | `0` |
+| closeIcon | 自定义 Icon | `ReactNode` | `close` |
 | disableDate | 设置不可选日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定义日历标题下部，可用以添加自定义操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |
diff --git a/src/packages/calendar/doc.zh-TW.md b/src/packages/calendar/doc.zh-TW.md
index 1def02daa5..578d38ff9f 100644
--- a/src/packages/calendar/doc.zh-TW.md
+++ b/src/packages/calendar/doc.zh-TW.md
@@ -120,6 +120,7 @@ import { Calendar } from '@nutui/nutui-react'
 | showSubTitle | 是否展示日期標題 | `boolean` | `true` |
 | scrollAnimation | 是否啟動滾動動畫 | `boolean` | `true` |
 | firstDayOfWeek | 設置周起始日 | `0-6` | `0` |
+| closeIcon | 自定義 Icon | `ReactNode` | `close` |
 | disableDate | 設置不可選日期 | `(date: CalendarDay) => boolean` | `-` |
 | renderHeaderButtons | 自定義日歴標題下部，可用以添加自定義操作 | `() => string` \| `JSX.Element` | `-` |
 | renderDay | 日期信息 | `(date: CalendarDay) => string` \| `JSX.Element` | `-` |