diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css
index 098a298..f86e121 100644
--- a/src/components/SearchInput/SearchInput.css
+++ b/src/components/SearchInput/SearchInput.css
@@ -39,3 +39,7 @@
 .search-bar input::placeholder {
   color: black;
 }
+
+.clear-icon {
+  cursor: pointer;
+}
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index c1dcde0..ec1760e 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useRecoilState } from "recoil";
-import { MagnifyingGlass } from "phosphor-react";
+import { MagnifyingGlass, X } from "phosphor-react";
 
 import { searchQueryAtom } from "../../state/atoms";
 import "./SearchInput.css";
@@ -25,6 +25,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
         placeholder="Search for an icon"
         onChange={handleSearchChange}
       />
+      {query && <X className="clear-icon" size={18} onClick={() => setQuery("")} />}
     </div>
   );
 };