diff --git a/components/ReadableView.tsx b/components/ReadableView.tsx
index 57a7c02a..4828b75c 100644
--- a/components/ReadableView.tsx
+++ b/components/ReadableView.tsx
@@ -6,8 +6,6 @@ import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ColorThief, { RGBColor } from "colorthief";
 import DOMPurify from "dompurify";
 import Image from "next/image";
@@ -174,7 +172,9 @@ export default function ReadableView({ link }: Props) {
                   target="_blank"
                   className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
                 >
-                  <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
+                  <i
+                    className="bi-link-45deg"
+                  ></i>
 
                   {isValidUrl(link?.url || "")
                     ? new URL(link?.url as string).host
@@ -189,11 +189,10 @@ export default function ReadableView({ link }: Props) {
               href={`/collections/${link?.collection.id}`}
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
-              <FontAwesomeIcon
-                icon={faFolder}
-                className="w-5 h-5 drop-shadow"
+              <i
+                className="bi-folder2 drop-shadow text-2xl"
                 style={{ color: link?.collection.color }}
-              />
+              ></i>
               <p
                 title={link?.collection.name}
                 className="text-lg truncate max-w-[12rem]"