diff --git a/package.json b/package.json
index 804d1c1..7bb1cc5 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
         "postcss": "8.4.31",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.11.0",
         "tailwindcss": "3.3.3",
         "typescript": "5.2.2"
     },
diff --git a/src/components/LoginModal/index.tsx b/src/components/LoginModal/index.tsx
index 36f3840..97e0ba0 100644
--- a/src/components/LoginModal/index.tsx
+++ b/src/components/LoginModal/index.tsx
@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import React, { useEffect, useRef } from 'react';
+import { IoCloseSharp } from 'react-icons/io5';
 
 import { TINY_API_GOOGLE_LOGIN } from '@/constants/url';
 
@@ -35,20 +36,7 @@ const LoginModal: React.FC<LoginModalProps> = ({ onClose, children }) => {
                 className="bg-gray-800 p-8 rounded-md w-[330px] relative flex flex-col justify-center items-center border border-gray-500"
             >
                 <Button className="absolute top-2 right-2 text-white" testId="close-login-modal" onClick={onClose}>
-                    <svg
-                        className="w-6 h-6"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth="2"
-                            d="M6 18L18 6M6 6l12 12"
-                        ></path>
-                    </svg>
+                    <IoCloseSharp style={{ fontSize: '1.5em' }} />
                 </Button>
                 <h2 className="text-2xl font-bold mb-4 text-white">Please log in</h2>
                 {children}
diff --git a/yarn.lock b/yarn.lock
index bea7272..acd2d58 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4142,6 +4142,11 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"