diff --git a/src/app/_components/AllCountries.tsx b/src/app/_components/AllCountries.tsx
index 24010ec..93ec4f4 100644
--- a/src/app/_components/AllCountries.tsx
+++ b/src/app/_components/AllCountries.tsx
@@ -1,3 +1,5 @@
+import { Delete, LucideDelete } from "lucide-react";
+import Image from "next/image";
 import { deleteCountry } from "~/server/actions/deleteCountry";
 import { db } from "~/server/db";
 
@@ -10,7 +12,9 @@ export default async function AllCountries() {
         <div className="flex gap-1">
           <p key={country.id}>{country.name}</p>
           <form action={deleteCountry.bind(null, country.id)}>
-            <button>❌</button>
+            <button>
+              <Delete />
+            </button>
           </form>
         </div>
       ))}