diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 4cb63ff..3efc235 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -9,6 +9,7 @@ import ModalLayout from '@/shared/components/modalPop/ModalLayout';
 import ConfirmPop from '@/shared/components/modalPop/ConfirmPop';
 import ChatInput from '@/shared/components/InputBox/ChatInput';
 import SelectBox from '@/shared/components/InputBox/SelectBox';
+import LikeBtn from '@/shared/components/like/LikeBtn';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -136,7 +137,11 @@ function Page() {
       </div>
 
       <div className="space-y-3">
-        <h2 className="text-2xl font-semibold pb-1">Button</h2>
+        <h2 className="text-2xl font-semibold pb-1">Icons</h2>
+        <div className="space-y-2">
+          <h3 className="text-lg font-medium border-b pb-1">like</h3>
+          <LikeBtn />
+        </div>
       </div>
     </div>
   );
diff --git a/src/shared/components/like/LikeBtn.tsx b/src/shared/components/like/LikeBtn.tsx
new file mode 100644
index 0000000..8e11b20
--- /dev/null
+++ b/src/shared/components/like/LikeBtn.tsx
@@ -0,0 +1,26 @@
+import LikeIcon from '@/shared/assets/icons/like_28.svg';
+import { useState } from 'react';
+
+function LikeBtn() {
+  const [isClick, setIsClick] = useState(false);
+
+  const handleClick = () => {
+    setIsClick(!isClick);
+  };
+  return (
+    <button
+      type="button"
+      className="w-13.75 h-13.75 flex-center border-1 border-white rounded-full"
+      aria-label="좋아요 버튼"
+      aria-pressed={isClick}
+      onClick={handleClick}
+    >
+      <LikeIcon
+        fill={`${isClick ? '#81689d' : null}`}
+        className="duration-100  hover:[&_*]:fill-tertiary/50 [&_*]:duration-200"
+        aria-hidden
+      />
+    </button>
+  );
+}
+export default LikeBtn;
diff --git a/src/shared/components/like/like.tsx b/src/shared/components/like/like.tsx
deleted file mode 100644
index 6634413..0000000
--- a/src/shared/components/like/like.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-function like() {
-  return <div>like</div>;
-}
-export default like;