diff --git a/.changeset/blue-houses-refuse.md b/.changeset/blue-houses-refuse.md
new file mode 100644
index 000000000..b8068d929
--- /dev/null
+++ b/.changeset/blue-houses-refuse.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+add calendar close icon
diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
index 1a361c694..759b090cf 100644
--- a/src/components/Calendar/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar/Calendar.tsx
@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
-import { Card, ScrollArea, Typography } from "../..";
+import { Card, Icon, ScrollArea, Typography } from "../..";
 import React, { forwardRef, memo, useRef } from "react";
 import { Day } from "./internal/Day";
 import { weekList, HEIGHT } from "../constants";
@@ -9,6 +9,7 @@ import {
   DatePickerContainer,
   DayStyle,
   CalendarMonth,
+  IconContainer,
 } from "../styled";
 import { useScroll } from "../hooks/useScroll";
 import { Action, Actions } from "../internal/Actions";
@@ -16,11 +17,16 @@ import { Action, Actions } from "../internal/Actions";
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
   date: Dayjs;
   actions?: Action[];
+  /**
+   * 閉じるボタンを押したときの振る舞い
+   * この関数が渡されてないときは、閉じるボタンが表示されない
+   */
+  onClickCloseButton?: () => void;
   onDateChange: (value: Dayjs) => void;
 };
 
 const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
-  { date, actions, onDateChange, ...rest },
+  { date, actions, onClickCloseButton, onDateChange, ...rest },
   ref,
 ) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -88,6 +94,11 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
           </>
         </ScrollArea>
       </Container>
+      {onClickCloseButton && (
+        <IconContainer onClick={onClickCloseButton}>
+          <Icon name="close" />
+        </IconContainer>
+      )}
     </Card>
   );
 });
diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
index 9148f9d8e..42e190c4b 100644
--- a/src/components/Calendar/CalendarRange/CalendarRange.tsx
+++ b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
-import { Card, ScrollArea, Typography } from "../..";
+import { Card, Icon, ScrollArea, Typography } from "../..";
 import React, { forwardRef, memo, useCallback, useRef, useState } from "react";
 import { Day } from "./internal/Day";
 import { HEIGHT, weekList } from "../constants";
@@ -9,6 +9,7 @@ import {
   Container,
   DatePickerContainer,
   DayStyle,
+  IconContainer,
 } from "../styled";
 import { useScroll } from "../hooks/useScroll";
 import { getDayState } from "./utils";
@@ -22,6 +23,11 @@ export type CalendarRangeProps = {
    * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
    */
   onClose?: (clickState: "start" | "end") => void;
+  /**
+   * 閉じるボタンを押したときの振る舞い
+   * この関数が渡されてないときは、閉じるボタンが表示されない
+   */
+  onClickCloseButton?: () => void;
   onDatesChange: ({
     startDate,
     endDate,
@@ -37,7 +43,10 @@ export type CalendarRangeProps = {
  * Currently, one year from the currently selected date is displayed.
  */
 export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
-  function ({ startDate, endDate, actions, onClose, onDatesChange }, ref) {
+  function (
+    { startDate, endDate, actions, onClose, onClickCloseButton, onDatesChange },
+    ref,
+  ) {
     const scrollRef = useRef<HTMLDivElement>(null);
     const { monthList } = useScroll(startDate ?? dayjs(), scrollRef);
     const [clickState, setClickState] = useState<"start" | "end">("start");
@@ -123,6 +132,11 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
             </>
           </ScrollArea>
         </Container>
+        {onClickCloseButton && (
+          <IconContainer onClick={onClickCloseButton}>
+            <Icon name="close" />
+          </IconContainer>
+        )}
       </Card>
     );
   },
diff --git a/src/components/Calendar/styled.ts b/src/components/Calendar/styled.ts
index f49e6ab39..255f44ef9 100644
--- a/src/components/Calendar/styled.ts
+++ b/src/components/Calendar/styled.ts
@@ -43,3 +43,12 @@ export const CalendarMonth = styled.div`
   justify-content: center;
   padding: ${({ theme }) => theme.spacing * 2}px 0;
 `;
+
+export const IconContainer = styled.button`
+  cursor: pointer;
+  position: absolute;
+  top: ${({ theme }) => theme.spacing}px;
+  right: ${({ theme }) => theme.spacing}px;
+  border: none;
+  background: none;
+`;
diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
index 3b9c8fc89..2f05af27b 100644
--- a/src/components/NewDatePicker/NewDatePicker.tsx
+++ b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -62,6 +62,10 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
       [onDateChange],
     );
 
+    const handleClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
     return (
       <Flex ref={ref} style={{ width: "fit-content" }}>
         <div ref={refs.setReference} {...getReferenceProps()}>
@@ -83,6 +87,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
               left: x ?? 0,
               zIndex: 100,
             }}
+            onClickCloseButton={handleClose}
             onDateChange={handleClickDate}
             {...getFloatingProps()}
           />
diff --git a/src/components/NewDatePicker/styled.ts b/src/components/NewDatePicker/styled.ts
new file mode 100644
index 000000000..e9eb1da88
--- /dev/null
+++ b/src/components/NewDatePicker/styled.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const IconContainer = styled.button`
+  cursor: pointer;
+  position: absolute;
+  top: ${({ theme }) => theme.spacing}px;
+  right: ${({ theme }) => theme.spacing}px;
+  border: none;
+  background: none;
+`;
diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
index 4a2fe3486..e2bcb357f 100644
--- a/src/components/NewDateRangePicker/NewDateRangePicker.tsx
+++ b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -49,6 +49,10 @@ export const DateRangePicker = forwardRef<
     }
   };
 
+  const handleClickCloseButton = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
   return (
     <Flex ref={ref}>
       <div
@@ -82,6 +86,7 @@ export const DateRangePicker = forwardRef<
             startDate={startDate}
             endDate={endDate}
             onClose={handleClose}
+            onClickCloseButton={handleClickCloseButton}
             onDatesChange={onDatesChange}
           />
         </Card>