diff --git a/assets/icons/ToggleOff.svg b/assets/icons/ToggleOff.svg
new file mode 100644
index 0000000..7e1e7e2
--- /dev/null
+++ b/assets/icons/ToggleOff.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="24" rx="12" fill="#EBEAEB"/>
+    <circle cx="12" cy="12" r="9" fill="#AFAAB1"/>
+</svg>
diff --git a/assets/icons/ToggleOn.svg b/assets/icons/ToggleOn.svg
new file mode 100644
index 0000000..cb58e22
--- /dev/null
+++ b/assets/icons/ToggleOn.svg
@@ -0,0 +1,4 @@
+<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="48" height="24" rx="12" fill="#EBEAEB"/>
+    <circle cx="36" cy="12" r="9" fill="#D752FF"/>
+</svg>
diff --git a/src/shared/ui/Toggle/Toggle.module.css b/src/shared/ui/Toggle/Toggle.module.css
new file mode 100644
index 0000000..8c26c98
--- /dev/null
+++ b/src/shared/ui/Toggle/Toggle.module.css
@@ -0,0 +1,7 @@
+.Input {
+  display: none;
+}
+
+.Label {
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/shared/ui/Toggle/Toggle.stories.ts b/src/shared/ui/Toggle/Toggle.stories.ts
new file mode 100644
index 0000000..441a01f
--- /dev/null
+++ b/src/shared/ui/Toggle/Toggle.stories.ts
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from './Toggle';
+
+const meta: Meta<typeof Toggle> = {
+  component: Toggle,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
diff --git a/src/shared/ui/Toggle/Toggle.tsx b/src/shared/ui/Toggle/Toggle.tsx
new file mode 100644
index 0000000..b0158f5
--- /dev/null
+++ b/src/shared/ui/Toggle/Toggle.tsx
@@ -0,0 +1,11 @@
+import { ToggleOff, ToggleOn } from 'src/shared/ui/icons';
+import styles from './Toggle.module.css';
+
+export const Toggle = ({ checked, onToggle }: { checked?: boolean; onToggle: (value: boolean) => void }) => {
+  return (
+    <label className={styles.Label}>
+      {checked ? <ToggleOn /> : <ToggleOff />}
+      <input className={styles.Input} type={'checkbox'} checked={checked} onChange={() => onToggle(!checked)} />
+    </label>
+  );
+};
diff --git a/src/shared/ui/icons/ToggleOff.tsx b/src/shared/ui/icons/ToggleOff.tsx
new file mode 100644
index 0000000..5fe5cd1
--- /dev/null
+++ b/src/shared/ui/icons/ToggleOff.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgToggleOff = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={24} fill="none" viewBox="0 0 48 24" {...props}>
+    <rect width={48} height={24} fill="#EBEAEB" rx={12} />
+    <circle cx={12} cy={12} r={9} fill="#AFAAB1" />
+  </svg>
+);
+export default SvgToggleOff;
diff --git a/src/shared/ui/icons/ToggleOn.tsx b/src/shared/ui/icons/ToggleOn.tsx
new file mode 100644
index 0000000..1e90a61
--- /dev/null
+++ b/src/shared/ui/icons/ToggleOn.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+const SvgToggleOn = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={48} height={24} fill="none" viewBox="0 0 48 24" {...props}>
+    <rect width={48} height={24} fill="#EBEAEB" rx={12} />
+    <circle cx={36} cy={12} r={9} fill="#D752FF" />
+  </svg>
+);
+export default SvgToggleOn;
diff --git a/src/shared/ui/icons/index.ts b/src/shared/ui/icons/index.ts
index d92c653..176fb0b 100644
--- a/src/shared/ui/icons/index.ts
+++ b/src/shared/ui/icons/index.ts
@@ -14,4 +14,6 @@ export { default as Minus } from './Minus';
 export { default as Plus } from './Plus';
 export { default as Refresh } from './Refresh';
 export { default as Share } from './Share';
+export { default as ToggleOff } from './ToggleOff';
+export { default as ToggleOn } from './ToggleOn';
 export { default as UncheckedRadio } from './UncheckedRadio';
diff --git a/src/widgets/GenerateFormLink/GenerateFormLinkBottomSheet.tsx b/src/widgets/GenerateFormLink/GenerateFormLinkBottomSheet.tsx
index 11e21cd..f05d073 100644
--- a/src/widgets/GenerateFormLink/GenerateFormLinkBottomSheet.tsx
+++ b/src/widgets/GenerateFormLink/GenerateFormLinkBottomSheet.tsx
@@ -7,6 +7,7 @@ import { Link, Refresh } from 'src/shared/ui/icons';
 import { Button } from 'src/shared/ui/Button/Button';
 import { Theme } from 'src/shared/styles/constants';
 import { IconBoxButton } from '../../shared/ui/IconBoxButton/IconBoxButton';
+import { Toggle } from 'src/shared/ui/Toggle/Toggle';
 
 export const GenerateFormLinkBottomSheet = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
   return (
@@ -62,7 +63,7 @@ const GenerateFormBottomSheetContent = () => {
         <h3>링크 설정</h3>
         <div className={styles.LinkConfig}>
           <p>기존 링크 활성화</p>
-          <input type={'checkbox'} checked={isOpen} onClick={onToggleLinkOpen} />
+          <Toggle onToggle={onToggleLinkOpen} checked={isOpen} />
         </div>
         <div className={styles.LinkConfig}>
           <p>새로운 링크 생성</p>