fix: icons

src/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/data-room-popover.tsx

@@ -79,7 +79,7 @@ const DataRoomPopover = ({ trigger }: DataRoomPopoverType) => {
           <div className="flex justify-end">
             <Button size="sm" variant={"secondary"} type="submit">
               Continue
-              <ArrowRightIcon className="ml-2 h-4 w-4" />
+              <Icon name="arrow-right-line" className="ml-2 h-4 w-4" />
             </Button>
           </div>
         </form>

src/app/(authenticated)/(dashboard)/[publicId]/documents/data-rooms/components/dataroom-folders.tsx

@@ -1,3 +1,9 @@
+import { PageLayout } from "@/components/dashboard/page-layout";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Icon } from "@/components/ui/icon";
+import { cn } from "@/lib/utils";
+import type { DataRoom } from "@prisma/client";
 import Link from "next/link";
 import DataRoomPopover from "./data-room-popover";
 
@@ -45,7 +51,8 @@ const Folders = ({ companyPublicId, folders }: FolderProps) => {
                     "flex w-14 flex-shrink-0 items-center justify-center rounded-l-md border text-sm font-medium ",
                   )}
                 >
-                  <FolderIcon
+                  <Icon
+                    name="folder-3-fill"
                     className="h-6 w-6 text-primary/70"
                     aria-hidden="true"
                   />
@@ -67,7 +74,11 @@ const Folders = ({ companyPublicId, folders }: FolderProps) => {
                       className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-transparent bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-transparent focus:ring-offset-2"
                     >
                       <span className="sr-only">Open options</span>
-                      <MoreIcon className="h-5 w-5" aria-hidden="true" />
+                      <Icon
+                        name="more-2-fill"
+                        className="h-5 w-5"
+                        aria-hidden="true"
+                      />
                     </button>
                   </div>
                 </div>

src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/page.tsx

@@ -44,7 +44,7 @@ const EquityPlanPage = async () => {
   if (equityPlans.length === 0) {
     return (
       <EmptyState
-        icon={<RiPieChart2Line />}
+        icon={<Icon name="pie-chart-2-line" />}
         title="You do not have any equity plans!"
         subtitle="Please click the button below to create a new equity plan."
       >

src/app/(authenticated)/(dashboard)/[publicId]/equity-plans/table.tsx

@@ -92,7 +92,12 @@ const EquityPlanTable = ({
                     />
                   }
                   trigger={
-                    <RiEqualizer2Line className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700" />
+                    <button type="button">
+                      <Icon
+                        name="equalizer-2-line"
+                        className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+                      />
+                    </button>
                   }
                 />
               </TableCell>

src/app/(authenticated)/(dashboard)/[publicId]/reports/page.tsx

@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 const ReportsPage = () => {
   return (
     <EmptyState
-      icon={<RiFilePdf2Fill />}
+      icon={<Icon name="file-pdf-2-fill" />}
       title="No reports available."
       subtitle="Please click the button below to generate a report"
     >

src/app/(authenticated)/(dashboard)/[publicId]/securities/options/page.tsx

@@ -19,7 +19,7 @@ const OptionsPage = async () => {
   if (options?.data?.length === 0) {
     return (
       <EmptyState
-        icon={<RiGroup2Fill />}
+        icon={<Icon name="group-2-fill" />}
         title="You have not issued any stock options yet."
         subtitle="Please click the button below to start issueing options."
       >

src/app/(authenticated)/(dashboard)/[publicId]/settings/developer/components/table.tsx

@@ -122,7 +122,10 @@ const AccessTokenTable = ({ tokens }: { tokens: AccessTokens }) => {
                 <div className="flex items-center gap-4">
                   <DropdownMenu>
                     <DropdownMenuTrigger>
-                      <RiMore2Fill className="cursor-pointer text-muted-foreground hover:text-primary/80" />
+                      <Icon
+                        name="more-2-fill"
+                        className="cursor-pointer text-muted-foreground hover:text-primary/80"
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                       <DropdownMenuLabel>Options</DropdownMenuLabel>

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/edit-share-class-button.tsx

@@ -15,26 +15,29 @@ export const EditShareClassButton = ({
   shareClass,
 }: EditShareClassButtonProps) => {
   return (
-    <RiEqualizer2Line
-      className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
-      onClick={() => {
-        pushModal("ShareClassModal", {
-          shouldClientFetch: false,
-          type: "update",
-          title: "Update share class",
-          shareClass,
-          shareClasses,
-          subtitle: (
-            <Tldr
-              message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
-              cta={{
-                label: "Learn more",
-                href: "https://captable.inc/help",
-              }}
-            />
-          ),
-        });
-      }}
-    />
+    <button type="button">
+      <Icon
+        name="equalizer-2-line"
+        className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+        onClick={() => {
+          pushModal("ShareClassModal", {
+            shouldClientFetch: false,
+            type: "update",
+            title: "Update share class",
+            shareClass,
+            shareClasses,
+            subtitle: (
+              <Tldr
+                message="A share class on a cap table represents a distinct category of shares with specific rights and characteristics, such as voting preferences or priorities. Eg. Common and Preferred shares, Class A, B, etc, ESOs and RSUs, etc."
+                cta={{
+                  label: "Learn more",
+                  href: "https://captable.inc/help",
+                }}
+              />
+            ),
+          });
+        }}
+      />
+    </button>
   );
 };

src/app/(authenticated)/(dashboard)/[publicId]/share-classes/page.tsx

@@ -32,7 +32,7 @@ const SharesPage = async () => {
   if (shareClasses.length === 0) {
     return (
       <EmptyState
-        icon={<RiPieChart2Line />}
+        icon={<Icon name="pie-chart-2-line" />}
         title="You do not have any share classes!"
         subtitle="Please click the button below to create a new share class."
       >

src/app/(authenticated)/(dashboard)/[publicId]/stakeholders/page.tsx

@@ -32,7 +32,11 @@ const StakeholdersPage = async () => {
   if (stakeholders.length === 0) {
     return (
       <EmptyState
-        icon={<RiGroup2Fill />}
+        icon={
+          <div>
+            <Icon name="group-2-fill" />
+          </div>
+        }
         title="You do not have any stakeholders!"
         subtitle="Please click the button below to add or import stakeholders."
       >

src/app/(unauthenticated)/new/page.tsx

@@ -25,21 +25,33 @@ export default async function CapPage() {
         </h3>
         <ul>
           <li className="mb-1">
-            <CheckIcon className="inline-block w-5 h-5 mb-1 text-green-500" />
+            <Icon
+              name="check-fill"
+              className="inline-block w-5 h-5 mb-1 text-green-500"
+            />
             <span className="ml-2">Manage your Cap table, issue options</span>
           </li>
           <li className="mb-1">
-            <CheckIcon className="inline-block w-5 h-5 mb-1 text-green-500" />
+            <Icon
+              name="check-fill"
+              className="inline-block w-5 h-5 mb-1 text-green-500"
+            />
             <span className="ml-2">
               Collaborate with investors with Data rooms
             </span>
           </li>
           <li className="mb-1">
-            <CheckIcon className="inline-block w-5 h-5 mb-1 text-green-500" />
+            <Icon
+              name="check-fill"
+              className="inline-block w-5 h-5 mb-1 text-green-500"
+            />
             <span className="ml-2">eSign NDAs, SAFEs and other documents</span>
           </li>
           <li className="mb-1">
-            <CheckIcon className="inline-block w-5 h-5 mb-1 text-green-500" />
+            <Icon
+              name="check-fill"
+              className="inline-block w-5 h-5 mb-1 text-green-500"
+            />
             <span className="ml-2">
               Delight your investors by sending updates
             </span>

src/app/updates/[publicId]/page.tsx

@@ -78,7 +78,7 @@ const PublicUpdatePage = async ({
     return (
       <div className="h-screen w-full flex justify-center items-center">
         <div className="flex items-center space-x-5">
-          <RiLock2Line className="h-10 w-10" />
+          <Icon name="lock-2-line" className="h-10 w-10" />
           <p className="text-lg font-semibold text-gray-600">
             Public access denied
           </p>

src/components/file/preview.tsx

@@ -40,7 +40,7 @@ const UnknownPreview = ({ url, name, mimeType }: FilePreviewProps) => {
     <EmptyState
       title="Preview not available"
       subtitle={`This file type - ${mimeType} is not yet supported by the previewer. You can download the file by clicking the button below.`}
-      icon={<UnknownFileIcon />}
+      icon={<Icon name="file-unknow-fill" />}
     >
       <a href={url} target="_blank" rel="noopener noreferrer">
         <Button>Download {name}</Button>

src/components/member/member-bulk-import-modal.tsx

@@ -22,7 +22,7 @@ export default function MemberBulkImportModal() {
         <li>
           <Button variant="ghost" size="sm" type="submit">
             <>
-              <RiGroup2Fill className="mr-2 h-4 w-4" />
+              <Icon name="group-2-fill" className="mr-2 h-4 w-4" />
               Invite multiple team members
             </>
           </Button>

src/components/member/member-table.tsx

@@ -217,7 +217,7 @@ export const columns: ColumnDef<Member[number]>[] = [
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" className="h-8 w-8 p-0">
                 <span className="sr-only">Open menu</span>
-                <RiMore2Fill aria-hidden className="h-4 w-4" />
+                <Icon name="more-2-fill" aria-hidden className="h-4 w-4" />
               </Button>
             </DropdownMenuTrigger>
           </div>

src/components/rbac/role-table.tsx

@@ -148,7 +148,7 @@ export const columns: ColumnDef<Role>[] = [
           <DropdownMenuTrigger asChild>
             <Button variant="ghost" className="h-8 w-8 p-0">
               <span className="sr-only">Open menu</span>
-              <RiMore2Fill className="h-4 w-4" />
+              <Icon name="more-2-fill" className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">

src/components/safe/safe-actions.tsx

@@ -50,7 +50,7 @@ export function SafeActions() {
                 });
               }}
             >
-              <RiSafe2Fill className="mr-2 h-4 w-4" />
+              <Icon name="safe-2-fill" className="mr-2 h-4 w-4" />
               Import existing SAFE
             </Button>
           </li>

src/components/safe/safe-table/index.tsx

@@ -270,7 +270,7 @@ export const columns: ColumnDef<Safe[number]>[] = [
               <Button variant="ghost" className="h-8 w-8 p-0">
                 <>
                   <span className="sr-only">Open menu</span>
-                  <RiMore2Fill aria-hidden className="h-4 w-4" />
+                  <Icon name="more-2-fill" aria-hidden className="h-4 w-4" />
                 </>
               </Button>
             </DropdownMenuTrigger>

src/components/securities/options/option-table.tsx

@@ -262,7 +262,7 @@ export const columns: ColumnDef<Option[number]>[] = [
               <Button variant="ghost" className="h-8 w-8 p-0">
                 <>
                   <span className="sr-only">Open menu</span>
-                  <RiMore2Fill aria-hidden className="h-4 w-4" />
+                  <Icon name="more-2-fill" aria-hidden className="h-4 w-4" />
                 </>
               </Button>
             </DropdownMenuTrigger>

src/components/securities/shares/share-table.tsx

@@ -325,7 +325,7 @@ export const columns: ColumnDef<Share[number]>[] = [
               <Button variant="ghost" className="h-8 w-8 p-0">
                 <>
                   <span className="sr-only">Open menu</span>
-                  <RiMore2Fill aria-hidden className="h-4 w-4" />
+                  <Icon name="more-2-fill" aria-hidden className="h-4 w-4" />
                 </>
               </Button>
             </DropdownMenuTrigger>

src/components/security/passkey/user-passkeys-data-table.tsx

@@ -181,7 +181,7 @@ export const columns: ColumnDef<Passkey[number]>[] = [
                 asChild
               >
                 <Button variant="ghost" className="h-8 w-8 p-0">
-                  <RiMore2Fill aria-hidden className="h-4 w-4" />
+                  <Icon name="more-2-fill" aria-hidden className="h-4 w-4" />
                 </Button>
               </DropdownMenuTrigger>
             </div>

src/components/settings/settings-sidebar.tsx

@@ -1,69 +1,78 @@
 "use client";
 
+import { NavLink } from "@/components/dashboard/sidebar/nav-link";
+import { Icon, type IconName } from "@/components/ui/icon";
 import { useSession } from "next-auth/react";
 import { usePathname } from "next/navigation";
 
-const companyNav = [
+type TNav = {
+  name: string;
+  href: string;
+  icon: IconName;
+  activeIcon: IconName;
+};
+
+const companyNav: TNav[] = [
   {
     name: "Company",
     href: "/settings/company",
-    icon: RiBuildingLine,
-    activeIcon: RiBuildingFill,
+    icon: "building-line",
+    activeIcon: "building-fill",
   },
   {
     name: "Team",
     href: "/settings/team",
-    icon: RiGroup2Line,
-    activeIcon: RiGroup2Fill,
+    icon: "group-2-line",
+    activeIcon: "group-2-fill",
   },
   {
     name: "Roles",
     href: "/settings/roles",
-    icon: RiShieldUserLine,
-    activeIcon: RiShieldUserFill,
+    icon: "shield-user-line",
+    activeIcon: "shield-user-fill",
   },
 
   {
     name: "Billing",
     href: "/settings/billing",
-    icon: RiBankCardLine,
-    activeIcon: RiBankCardFill,
+    icon: "bank-card-line",
+    activeIcon: "bank-card-fill",
   },
 
   {
     name: "Bank Accounts",
     href: "/settings/bank-accounts",
-    icon: RiBankLine,
-    activeIcon: RiBankFill,
+    icon: "bank-line",
+    activeIcon: "bank-fill",
   },
 ];
 
-const accountNav = [
+const accountNav: TNav[] = [
   {
     name: "Profile",
     href: "/settings/profile",
-    icon: RiAccountCircleLine,
-    activeIcon: RiAccountCircleFill,
+    icon: "account-circle-line",
+    activeIcon: "account-circle-fill",
   },
   {
     name: "Security",
     href: "/settings/security",
-    icon: RiLock2Line,
-    activeIcon: RiLock2Fill,
+    icon: "lock-2-line",
+    activeIcon: "lock-2-fill",
   },
 
   {
     name: "Developer",
     href: "/settings/developer",
-    icon: RiTerminalBoxLine,
-    activeIcon: RiTerminalBoxFill,
+    icon: "terminal-box-line",
+    activeIcon: "terminal-box-fill",
   },
 
   {
     name: "Notifications",
     href: "/settings/notifications",
-    icon: RiNotificationLine,
-    activeIcon: RiNotificationFill,
+    icon: "notification-line",
+    activeIcon: "notification-fill",
   },
 ];