diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx
index 97e0b63..f3615e2 100644
--- a/components/CollectionCard.tsx
+++ b/components/CollectionCard.tsx
@@ -1,10 +1,7 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -71,9 +68,10 @@ export default function CollectionCard({ collection, className }: Props) {
           role="button"
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
+          <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul
+          className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
           {permissions === true ? (
             <li>
               <div
@@ -168,21 +166,17 @@ export default function CollectionCard({ collection, className }: Props) {
             <div className="text-right">
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
-                  <FontAwesomeIcon
-                    icon={faGlobe}
-                    title="This collection is being shared publicly."
-                    className="w-4 h-4 drop-shadow text-neutral"
-                  />
+                  <i className="bi-globe-americas drop-shadow text-neutral"
+                     title="This collection is being shared publicly."></i>
                 ) : undefined}
-                <FontAwesomeIcon
-                  icon={faLink}
-                  className="w-5 h-5 text-neutral"
-                />
+                <i className="bi-link-45deg text-lg text-neutral"
+                   title="This collection is being shared publicly."></i>
                 {collection._count && collection._count.links}
               </div>
               <div className="flex items-center justify-end gap-1 text-neutral">
                 <p className="font-bold text-xs flex gap-1 items-center">
-                  <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
+                  <i className="bi-calendar3 text-neutral"
+                     title="This collection is being shared publicly."></i>
                   {formattedDate}
                 </p>
               </div>
diff --git a/components/ModalContent/DeleteCollectionModal.tsx b/components/ModalContent/DeleteCollectionModal.tsx
index 29eb737..5407f68 100644
--- a/components/ModalContent/DeleteCollectionModal.tsx
+++ b/components/ModalContent/DeleteCollectionModal.tsx
@@ -2,11 +2,6 @@ import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
 import toast from "react-hot-toast";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
@@ -89,19 +84,7 @@ export default function DeleteCollectionModal({
             </div>
 
             <div role="alert" className="alert alert-warning">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                className="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
+              <i className="bi-exclamation-triangle text-xl"></i>
               <span>
                 <b>Warning:</b> Deleting this collection will permanently erase
                 all its contents, and it will become inaccessible to everyone,
@@ -124,10 +107,7 @@ export default function DeleteCollectionModal({
           }`}
           onClick={submit}
         >
-          <FontAwesomeIcon
-            icon={permissions === true ? faTrashCan : faRightFromBracket}
-            className="h-5"
-          />
+          <i className="bi-trash text-xl"></i>
           {permissions === true ? "Delete" : "Leave"} Collection
         </button>
       </div>
diff --git a/components/ModalContent/EditCollectionModal.tsx b/components/ModalContent/EditCollectionModal.tsx
index 991f6af..8821f6f 100644
--- a/components/ModalContent/EditCollectionModal.tsx
+++ b/components/ModalContent/EditCollectionModal.tsx
@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import toast from "react-hot-toast";
 import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 
@@ -70,12 +68,7 @@ export default function EditCollectionModal({
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
-                      <FontAwesomeIcon
-                        icon={faFolder}
-                        className="w-12 h-12 drop-shadow"
-                      />
-                    </div>
+                    <i className="bi-folder2 text-5xl drop-shadow" style={{ color: collection.color }}></i>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>
diff --git a/components/ModalContent/EditCollectionSharingModal.tsx b/components/ModalContent/EditCollectionSharingModal.tsx
index 3b2eade..4bb41d0 100644
--- a/components/ModalContent/EditCollectionSharingModal.tsx
+++ b/components/ModalContent/EditCollectionSharingModal.tsx
@@ -182,7 +182,7 @@ export default function EditCollectionSharingModal({
                 }
                 className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
               >
-                <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
+                  <i className="bi-person-add text-xl"></i>
               </div>
             </div>
           </>