diff --git a/client/src/assets/image/check.svg b/client/src/assets/image/check.svg
new file mode 100644
index 000000000..66ed75336
--- /dev/null
+++ b/client/src/assets/image/check.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 3L4.5 8.5L2 6" stroke="#B575FF" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/client/src/assets/image/x.svg b/client/src/assets/image/x.svg
new file mode 100644
index 000000000..c3622bab5
--- /dev/null
+++ b/client/src/assets/image/x.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 3L3 9M3 3L9 9" stroke="#B2B1B6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/client/src/components/Design/components/DepositCheck/DepositCheck.stories.tsx b/client/src/components/Design/components/DepositCheck/DepositCheck.stories.tsx
new file mode 100644
index 000000000..7cfd25aea
--- /dev/null
+++ b/client/src/components/Design/components/DepositCheck/DepositCheck.stories.tsx
@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import DepositCheck from '@HDcomponents/DepositCheck/DepositCheck';
+
+const meta = {
+  title: 'Components/DepositCheck',
+  component: DepositCheck,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isDeposited: {
+      description: '',
+      control: {type: 'boolean'},
+    },
+  },
+  args: {
+    isDeposited: false,
+  },
+} satisfies Meta<typeof DepositCheck>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
diff --git a/client/src/components/Design/components/DepositCheck/DepositCheck.style.ts b/client/src/components/Design/components/DepositCheck/DepositCheck.style.ts
new file mode 100644
index 000000000..22f1f52a9
--- /dev/null
+++ b/client/src/components/Design/components/DepositCheck/DepositCheck.style.ts
@@ -0,0 +1,21 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';
+
+import {DepositCheckStyleProps} from './DepositCheck.type';
+
+export const DepositCheckStyle = ({theme, isDeposited}: WithTheme<DepositCheckStyleProps>) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.125rem',
+    border: `1px solid ${isDeposited ? theme.colors.primary : theme.colors.gray}`,
+    borderRadius: '0.5rem',
+    padding: '0.25rem 0.375rem',
+    height: '1.25rem',
+
+    '.deposit-check-text': {
+      color: isDeposited ? theme.colors.primary : theme.colors.gray,
+      paddingTop: '0.0625rem',
+    },
+  });
diff --git a/client/src/components/Design/components/DepositCheck/DepositCheck.tsx b/client/src/components/Design/components/DepositCheck/DepositCheck.tsx
new file mode 100644
index 000000000..10b21aabc
--- /dev/null
+++ b/client/src/components/Design/components/DepositCheck/DepositCheck.tsx
@@ -0,0 +1,21 @@
+/** @jsxImportSource @emotion/react */
+import {useTheme} from '@components/Design';
+
+import Icon from '../Icon/Icon';
+import Text from '../Text/Text';
+
+import {DepositCheckStyle} from './DepositCheck.style';
+import {DepositCheckProps} from './DepositCheck.type';
+
+const DepositCheck: React.FC<DepositCheckProps> = ({isDeposited = false}: DepositCheckProps) => {
+  const {theme} = useTheme();
+  return (
+    <div css={DepositCheckStyle({theme, isDeposited})}>
+      <Text size="tiny" className="deposit-check-text">
+        입금
+      </Text>
+      <Icon iconType={isDeposited ? 'check' : 'x'}></Icon>
+    </div>
+  );
+};
+export default DepositCheck;
diff --git a/client/src/components/Design/components/DepositCheck/DepositCheck.type.ts b/client/src/components/Design/components/DepositCheck/DepositCheck.type.ts
new file mode 100644
index 000000000..fdb308170
--- /dev/null
+++ b/client/src/components/Design/components/DepositCheck/DepositCheck.type.ts
@@ -0,0 +1,11 @@
+export interface DepositCheckStyleProps {
+  isDeposited: boolean;
+}
+
+export interface DepositCheckCustomProps {
+  isDeposited: boolean;
+}
+
+export type DepositCheckOptionProps = DepositCheckStyleProps & DepositCheckCustomProps;
+
+export type DepositCheckProps = React.ComponentProps<'div'> & DepositCheckOptionProps;
diff --git a/client/src/components/Design/components/Icon/Icon.stories.tsx b/client/src/components/Design/components/Icon/Icon.stories.tsx
index ee111a2f9..c3763b12d 100644
--- a/client/src/components/Design/components/Icon/Icon.stories.tsx
+++ b/client/src/components/Design/components/Icon/Icon.stories.tsx
@@ -13,7 +13,7 @@ const meta = {
     iconType: {
       description: '',
       control: {type: 'select'},
-      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash'],
+      options: ['inputDelete', 'buljusa', 'rightChevron', 'search', 'confirm', 'error', 'trash', 'check', 'x'],
     },
   },
   args: {
diff --git a/client/src/components/Design/components/Icon/Icon.style.ts b/client/src/components/Design/components/Icon/Icon.style.ts
index 14cdf4e12..8d4d68145 100644
--- a/client/src/components/Design/components/Icon/Icon.style.ts
+++ b/client/src/components/Design/components/Icon/Icon.style.ts
@@ -1,6 +1,5 @@
 import {css} from '@emotion/react';
 
-import {Theme} from '@theme/theme.type';
 import {ColorKeys} from '@token/colors';
 
 import {IconColor, IconStylePropsWithTheme, IconType} from './Icon.type';
@@ -13,6 +12,8 @@ const ICON_DEFAULT_COLOR: Record<IconType, IconColor> = {
   confirm: 'complete',
   error: 'warn',
   trash: 'white',
+  check: 'primary',
+  x: 'gray',
   toss: 'white',
   meatballs: 'black',
 };
diff --git a/client/src/components/Design/components/Icon/Icon.tsx b/client/src/components/Design/components/Icon/Icon.tsx
index bcfe405fc..c900c289c 100644
--- a/client/src/components/Design/components/Icon/Icon.tsx
+++ b/client/src/components/Design/components/Icon/Icon.tsx
@@ -8,6 +8,8 @@ import Confirm from '@assets/image/confirm.svg';
 import Trash from '@assets/image/trash.svg';
 import Search from '@assets/image/search.svg';
 import RightChevron from '@assets/image/rightChevron.svg';
+import Check from '@assets/image/check.svg';
+import X from '@assets/image/x.svg';
 import Meatballs from '@assets/image/meatballs.svg';
 import {IconProps} from '@HDcomponents/Icon/Icon.type';
 import {useTheme} from '@theme/HDesignProvider';
@@ -22,6 +24,8 @@ const ICON = {
   error: <Error />,
   confirm: <Confirm />,
   trash: <Trash />,
+  check: <Check />,
+  x: <X />,
   toss: <img src={Toss} width="24" height="24" alt="toss icon" />,
   meatballs: <Meatballs />,
 };
diff --git a/client/src/components/Design/components/Icon/Icon.type.ts b/client/src/components/Design/components/Icon/Icon.type.ts
index 07e52f16c..1b058c76f 100644
--- a/client/src/components/Design/components/Icon/Icon.type.ts
+++ b/client/src/components/Design/components/Icon/Icon.type.ts
@@ -9,6 +9,8 @@ export type IconType =
   | 'error'
   | 'confirm'
   | 'trash'
+  | 'check'
+  | 'x'
   | 'toss'
   | 'meatballs';