diff --git a/.eslintignore b/.eslintignore
index 5889b2527d..219d7c2615 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -4,3 +4,4 @@ node_modules
 **/**/public
 packages/prisma/zod
 apps/web/public/embed
+packages/ui/components/icon/dynamicIconImports.tsx
diff --git a/.prettierignore b/.prettierignore
index 466e374a2a..76b9ebc554 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -17,3 +17,4 @@ packages/prisma/zod
 packages/prisma/enums
 apps/web/public/embed
 apps/api/v2/swagger/documentation.json
+packages/ui/components/icon/dynamicIconImports.tsx
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index dca5e67a03..7fad376677 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { X } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <X className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
+                <Icon name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index 6120388553..f884a9bb56 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -9,8 +9,7 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { Badge, ListItemText, Avatar } from "@calcom/ui";
-import { AlertCircle } from "@calcom/ui/components/icon";
+import { Avatar, Badge, Icon, ListItemText } from "@calcom/ui";
 
 type ShouldHighlight =
   | {
@@ -105,7 +104,7 @@ export default function AppListCard(props: AppListCardProps) {
           <ListItemText component="p">{description}</ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <AlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
+              <Icon name="circle-alert" className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}
               </ListItemText>
diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
index 87886245fe..5996a4af34 100644
--- a/apps/web/components/EnterprisePage.tsx
+++ b/apps/web/components/EnterprisePage.tsx
@@ -3,40 +3,39 @@
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ButtonGroup } from "@calcom/ui";
-import { BarChart, CreditCard, Globe, Lock, Paintbrush, Users } from "@calcom/ui/components/icon";
+import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 export default function EnterprisePage() {
   const { t } = useLocale();
 
   const features = [
     {
-      icon: <Globe className="h-5 w-5 text-red-500" />,
+      icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
       title: t("branded_subdomain"),
       description: t("branded_subdomain_description"),
     },
     {
-      icon: <BarChart className="h-5 w-5 text-blue-500" />,
+      icon: <Icon name="bar-chart" className="h-5 w-5 text-blue-500" />,
       title: t("org_insights"),
       description: t("org_insights_description"),
     },
     {
-      icon: <Paintbrush className="h-5 w-5 text-pink-500" />,
+      icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
       title: t("extensive_whitelabeling"),
       description: t("extensive_whitelabeling_description"),
     },
     {
-      icon: <Users className="h-5 w-5 text-orange-500" />,
+      icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
       title: t("unlimited_teams"),
       description: t("unlimited_teams_description"),
     },
     {
-      icon: <CreditCard className="h-5 w-5 text-green-500" />,
+      icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
       title: t("unified_billing"),
       description: t("unified_billing_description"),
     },
     {
-      icon: <Lock className="h-5 w-5 text-purple-500" />,
+      icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
       title: t("advanced_managed_events"),
       description: t("advanced_managed_events_description"),
     },
diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
index bcc42267c9..901bf83146 100644
--- a/apps/web/components/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -6,12 +6,11 @@ import { trpc } from "@calcom/trpc/react";
 import {
   Button,
   Dropdown,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
   DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
 } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -42,7 +41,7 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
+              <Button StartIcon="plus" color="secondary" {...(isPending && { loading: isPending })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>
@@ -50,7 +49,7 @@ const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorPro
               {options.map((data) => (
                 <DropdownMenuItem key={data.slug} className="focus:outline-none">
                   {data.slug === "add-new" ? (
-                    <DropdownItem StartIcon={Plus} color="minimal" href="/apps/categories/calendar">
+                    <DropdownItem StartIcon="plus" color="minimal" href="/apps/categories/calendar">
                       {t("install_new_calendar_app")}
                     </DropdownItem>
                   ) : (
diff --git a/apps/web/components/apps/AppList.tsx b/apps/web/components/apps/AppList.tsx
index 2e7383599f..8c4dc766cf 100644
--- a/apps/web/components/apps/AppList.tsx
+++ b/apps/web/components/apps/AppList.tsx
@@ -11,17 +11,16 @@ import type { AppCategories } from "@calcom/prisma/enums";
 import { trpc, type RouterOutputs } from "@calcom/trpc";
 import type { App } from "@calcom/types/App";
 import {
+  Alert,
+  Button,
   Dropdown,
   DropdownItem,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
   List,
   showToast,
-  Button,
-  DropdownMenuItem,
-  Alert,
 } from "@calcom/ui";
-import { MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
 
 import AppListCard from "@components/AppListCard";
 
@@ -82,7 +81,7 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
             <div className="flex justify-end">
               <Dropdown modal={false}>
                 <DropdownMenuTrigger asChild>
-                  <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+                  <Button StartIcon="ellipsis" variant="icon" color="secondary" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {!appIsDefault && variant === "conferencing" && !item.credentialOwner?.teamId && (
@@ -90,7 +89,7 @@ export const AppList = ({ data, handleDisconnect, variant, listClassName }: AppL
                       <DropdownItem
                         type="button"
                         color="secondary"
-                        StartIcon={Video}
+                        StartIcon="video"
                         onClick={() => {
                           const locationType = getEventLocationTypeFromApp(item?.locationOption?.value ?? "");
                           if (locationType?.linkType === "static") {
@@ -214,7 +213,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
           color="destructive"
           onClick={() => handleDisconnect(credentialId, teamId)}
           disabled={isGlobal}
-          StartIcon={Trash}>
+          StartIcon="trash">
           {t("remove_app")}
         </DropdownItem>
       </DropdownMenuItem>
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index 5b227dd443..4ff36ca97a 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { IframeHTMLAttributes } from "react";
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -10,8 +10,7 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
-import { Badge, Button, showToast, SkeletonButton, SkeletonText } from "@calcom/ui";
-import { BookOpen, Check, ExternalLink, File, Flag, Mail, Shield } from "@calcom/ui/components/icon";
+import { Badge, Button, Icon, SkeletonButton, SkeletonText, showToast } from "@calcom/ui";
 
 import { InstallAppButtonChild } from "./InstallAppButtonChild";
 
@@ -196,7 +195,7 @@ export const AppPage = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={Check} color="secondary" disabled>
+              <Button StartIcon="check" color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -323,7 +322,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <BookOpen className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
+                <Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -335,7 +334,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <ExternalLink className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -347,7 +346,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={`mailto:${email}`}>
-                <Mail className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
 
                 {email}
               </a>
@@ -360,7 +359,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <File className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -372,7 +371,7 @@ export const AppPage = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <Shield className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -383,7 +382,7 @@ export const AppPage = ({
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <Flag className="inline h-3 w-3" /> {t("report_app")}
+          <Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
         </a>
       </div>
     </div>
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index 379386c57d..12f8fbe610 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -11,13 +11,12 @@ import {
   Alert,
   Button,
   EmptyScreen,
-  List,
-  AppSkeletonLoader as SkeletonLoader,
-  ShellSubHeading,
   Label,
+  List,
+  ShellSubHeading,
+  AppSkeletonLoader as SkeletonLoader,
   showToast,
 } from "@calcom/ui";
-import { Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -267,7 +266,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={Calendar}
+                Icon="calendar"
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}
diff --git a/apps/web/components/apps/InstallAppButtonChild.tsx b/apps/web/components/apps/InstallAppButtonChild.tsx
index fdeeea5f95..640a603160 100644
--- a/apps/web/components/apps/InstallAppButtonChild.tsx
+++ b/apps/web/components/apps/InstallAppButtonChild.tsx
@@ -122,14 +122,13 @@ export const InstallAppButtonChild = ({
                 data-testid={team.isUser ? "install-app-button-personal" : "anything else"}
                 key={team.id}
                 disabled={isInstalled}
-                StartIcon={(props: { className?: string }) => (
+                CustomStartIcon={
                   <Avatar
                     alt={team.logo || ""}
                     imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
-                    {...props}
                   />
-                )}
+                }
                 onClick={() => {
                   mutation.mutate(
                     team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index 90e590eade..a382d88cea 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -6,7 +6,6 @@ import React from "react";
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { AlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -27,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={AlertCircle}
+              Icon="circle-alert"
               headline={isAdmin ? t("no_apps") : t("no_apps_configured")}
               description={isAdmin ? t("enable_in_settings") : t("please_contact_admin")}
               buttonText={isAdmin ? t("apps_settings") : ""}
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 4e39a92116..60ce2c71b7 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -1,7 +1,4 @@
-import React from "react";
-
 import { Button, SkeletonText } from "@calcom/ui";
-import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -31,7 +28,7 @@ function SkeletonItem() {
           type="button"
           variant="icon"
           color="secondary"
-          StartIcon={MoreHorizontal}
+          StartIcon="ellipsis"
           disabled
         />
       </div>
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 19ca1c8675..180b30eb28 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -29,13 +29,13 @@ import {
   DialogClose,
   DialogContent,
   DialogFooter,
+  Icon,
   MeetingTimeInTimezones,
   showToast,
   TableActions,
   TextAreaField,
   Tooltip,
 } from "@calcom/ui";
-import { Ban, Check, Clock, CreditCard, MapPin, RefreshCcw, Send, X } from "@calcom/ui/components/icon";
 
 import { ChargeCardDialog } from "@components/dialog/ChargeCardDialog";
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
@@ -138,7 +138,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: Ban,
+      icon: "ban",
       disabled: mutation.isPending,
     },
     // For bookings with payment, only confirm if the booking is paid for
@@ -152,7 +152,7 @@ function BookingListItem(booking: BookingItemProps) {
             onClick: () => {
               bookingConfirm(true);
             },
-            icon: Check,
+            icon: "check" as const,
             disabled: mutation.isPending,
           },
         ]
@@ -169,7 +169,7 @@ function BookingListItem(booking: BookingItemProps) {
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
       `,
-      icon: X,
+      icon: "x" as const,
     },
     {
       id: "edit_booking",
@@ -177,7 +177,7 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: Clock,
+          icon: "clock" as const,
           label: t("reschedule_booking"),
           href: `${bookerUrl}/reschedule/${booking.uid}${
             booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -185,7 +185,7 @@ function BookingListItem(booking: BookingItemProps) {
         },
         {
           id: "reschedule_request",
-          icon: Send,
+          icon: "send" as const,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -198,7 +198,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: MapPin,
+          icon: "map-pin" as const,
         },
       ],
     },
@@ -212,7 +212,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setChargeCardDialogIsOpen(true);
       },
-      icon: CreditCard,
+      icon: "credit-card" as const,
     },
   ];
 
@@ -226,7 +226,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <Badge startIcon={Send} size="md" variant="gray" data-testid="request_reschedule_sent">
+      <Badge startIcon="send" size="md" variant="gray" data-testid="request_reschedule_sent">
         {t("reschedule_request_sent")}
       </Badge>
     );
@@ -599,7 +599,8 @@ const RecurringBookingsTooltip = ({
                 );
               })}>
               <div className="text-default">
-                <RefreshCcw
+                <Icon
+                  name="refresh-ccw"
                   strokeWidth="3"
                   className="text-muted float-left mr-1 mt-1.5 inline-block h-3 w-3"
                 />
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 655a28ae91..53300f305d 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -5,8 +5,7 @@ import { sdkActionManager } from "@calcom/embed-core/embed-iframe";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button, TextArea } from "@calcom/ui";
-import { X } from "@calcom/ui/components/icon";
+import { Button, Icon, TextArea } from "@calcom/ui";
 
 type Props = {
   booking: {
@@ -57,7 +56,7 @@ export default function CancelBooking(props: Props) {
       {error && (
         <div className="mt-8">
           <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-            <X className="h-6 w-6 text-red-600" />
+            <Icon name="x" className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 193c74b053..0cec34ae13 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -10,9 +10,9 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
+  Icon,
   showToast,
 } from "@calcom/ui";
-import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -48,7 +48,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
-            <CreditCard className="m-auto h-6 w-6" />
+            <Icon name="credit-card" className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("charge_card")} />
@@ -56,7 +56,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
 
             {chargeError && (
               <div className="mt-4 flex text-red-500">
-                <AlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <Icon name="triangle-alert" className="mr-2 h-5 w-5 " aria-hidden="true" />
                 <p className="text-sm">{t("error_charging_card")}</p>
               </div>
             )}
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 4aee471929..2e28795fa5 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -18,9 +18,7 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Input } from "@calcom/ui";
-import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
-import { MapPin } from "@calcom/ui/components/icon";
+import { Button, Icon, Input, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -237,7 +235,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-            <MapPin className="text-emphasis h-6 w-6" />
+            <Icon name="map-pin" className="text-emphasis h-6 w-6" />
           </div>
           <div className="w-full">
             <div className="mt-3 text-center sm:mt-0 sm:text-left">
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index ec2115b5ec..2ed251e632 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -10,10 +10,10 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
+  Icon,
   showToast,
   TextArea,
 } from "@calcom/ui";
-import { Clock } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
       <DialogContent enableOverflow>
         <div className="flex flex-row space-x-3">
           <div className="bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full ">
-            <Clock className="m-auto h-6 w-6" />
+            <Icon name="clock" className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />
diff --git a/apps/web/components/eventtype/AIEventController.tsx b/apps/web/components/eventtype/AIEventController.tsx
index 937c1f14ea..fc4764e006 100644
--- a/apps/web/components/eventtype/AIEventController.tsx
+++ b/apps/web/components/eventtype/AIEventController.tsx
@@ -21,7 +21,6 @@ import {
   PhoneInput,
   showToast,
 } from "@calcom/ui";
-import { Sparkles } from "@calcom/ui/components/icon";
 
 type AIEventControllerProps = {
   eventType: EventTypeSetup;
@@ -44,7 +43,7 @@ export default function AIEventController({ eventType, isTeamEvent }: AIEventCon
         {!isOrg || !isTeamEvent ? (
           <EmptyScreen
             headline={t("Cal.ai")}
-            Icon={Sparkles}
+            Icon="sparkles"
             description={t("upgrade_to_cal_ai_phone_number_description")}
             buttonRaw={<Button href="/enterprise">{t("upgrade")}</Button>}
           />
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 1ee0e6e70f..94573ce76e 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -1,4 +1,3 @@
-import { InfoIcon } from "lucide-react";
 import dynamic from "next/dynamic";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useEffect, useState } from "react";
@@ -30,15 +29,15 @@ import {
   Button,
   Badge,
   CheckboxField,
+  Icon,
   Label,
   SelectField,
   SettingsToggle,
-  showToast,
   Switch,
   TextField,
   Tooltip,
+  showToast,
 } from "@calcom/ui";
-import { Copy, Edit, Info } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -180,7 +179,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   aria-label="edit custom name"
                   className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
                   onClick={() => setShowEventNameTip((old) => !old)}>
-                  <Edit className="h-4 w-4" />
+                  <Icon name="pencil" className="h-4 w-4" />
                 </Button>
               }
             />
@@ -194,7 +193,10 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                 label={
                   <>
                     {t("display_add_to_calendar_organizer")}
-                    <InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
+                    <Icon
+                      name="info"
+                      className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md"
+                    />
                   </>
                 }
                 checked={useEventTypeDestinationCalendarEmail}
@@ -348,7 +350,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             target="_blank"
             rel="noreferrer"
             href="https://cal.com/docs/core-features/event-types/single-use-private-links">
-            <Info className="ml-1.5 h-4 w-4 cursor-pointer" />
+            <Icon name="info" className="ml-1.5 h-4 w-4 cursor-pointer" />
           </a>
         }
         {...shouldLockDisableProps("hashedLink")}
@@ -389,7 +391,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                           showToast(t("enabled_after_update_description"), "warning");
                         }
                       }}>
-                      <Copy className="h-4 w-4" />
+                      <Icon name="copy" className="h-4 w-4" />
                     </Button>
                   </Tooltip>
                 }
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 6631248b15..8d56dd00b1 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -11,8 +11,7 @@ import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hook
 import type { FormValues } from "@calcom/features/eventtypes/lib/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, Alert } from "@calcom/ui";
-import { Grid, Lock } from "@calcom/ui/components/icon";
+import { Alert, Button, EmptyScreen } from "@calcom/ui";
 
 export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
@@ -161,12 +160,12 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
           )}
           {!isPending && !installedApps?.length ? (
             <EmptyScreen
-              Icon={Grid}
+              Icon="grid-3x3"
               headline={t("empty_installed_apps_headline")}
               description={t("empty_installed_apps_description")}
               buttonRaw={
                 appsDisableProps.disabled ? (
-                  <Button StartIcon={Lock} color="secondary" disabled>
+                  <Button StartIcon="lock" color="secondary" disabled>
                     {t("locked_by_team_admin")}
                   </Button>
                 ) : (
diff --git a/apps/web/components/eventtype/EventAvailabilityTab.tsx b/apps/web/components/eventtype/EventAvailabilityTab.tsx
index df9b465afe..49fd8824b9 100644
--- a/apps/web/components/eventtype/EventAvailabilityTab.tsx
+++ b/apps/web/components/eventtype/EventAvailabilityTab.tsx
@@ -13,8 +13,7 @@ import { weekdayNames } from "@calcom/lib/weekday";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
-import { ExternalLink, Globe } from "@calcom/ui/components/icon";
+import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -130,7 +129,7 @@ const EventTypeScheduleDetails = memo(
         </div>
         <div className="bg-muted border-subtle flex flex-col justify-center gap-2 rounded-b-md border p-6 sm:flex-row sm:justify-between">
           <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-            <Globe className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
+            <Icon name="globe" className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
             {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
           </span>
           {!!schedule?.id && !schedule.isManaged && !schedule.readOnly && (
@@ -138,7 +137,7 @@ const EventTypeScheduleDetails = memo(
               href={`/availability/${schedule.id}`}
               disabled={isPending}
               color="minimal"
-              EndIcon={ExternalLink}
+              EndIcon="external-link"
               target="_blank"
               rel="noopener noreferrer">
               {t("edit_availability")}
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index 208cd1bd0d..f3daf7db89 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -18,7 +18,6 @@ import { ascendingLimitKeys, intervalLimitKeyToUnit } from "@calcom/lib/interval
 import type { PeriodType } from "@calcom/prisma/enums";
 import type { IntervalLimit } from "@calcom/types/Calendar";
 import { Button, DateRangePicker, InputField, Label, Select, SettingsToggle, TextField } from "@calcom/ui";
-import { Plus, Trash2 } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
   HTMLInputElement,
@@ -598,7 +597,7 @@ const IntervalLimitItem = ({
       {hasDeleteButton && !disabled && (
         <Button
           variant="icon"
-          StartIcon={Trash2}
+          StartIcon="trash-2"
           color="destructive"
           className="border-none"
           onClick={() => onDelete(limitKey)}
@@ -708,7 +707,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                   );
                 })}
             {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && !disabled && (
-              <Button color="minimal" StartIcon={Plus} onClick={addLimit}>
+              <Button color="minimal" StartIcon="plus" onClick={addLimit}>
                 {t("add_limit")}
               </Button>
             )}
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index a7100c40f9..b9f2c5b10f 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -23,6 +23,7 @@ import {
   SettingsToggle,
   Skeleton,
   TextField,
+  Icon,
   Editor,
   SkeletonContainer,
   SkeletonText,
@@ -31,7 +32,6 @@ import {
   Button,
   showToast,
 } from "@calcom/ui";
-import { Plus, X, Check, CornerDownRight } from "@calcom/ui/components/icon";
 
 import CheckboxField from "@components/ui/form/CheckboxField";
 import type { SingleValueLocationOption } from "@components/ui/form/LocationSelect";
@@ -313,7 +313,7 @@ export const EventSetupTab = (
                       onClick={() => remove(index)}
                       aria-label={t("remove")}>
                       <div className="h-4 w-4">
-                        <X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
+                        <Icon name="x" className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
                       </div>
                     </button>
                   )}
@@ -324,7 +324,7 @@ export const EventSetupTab = (
                     <div className="w-full">
                       <div className="flex gap-2">
                         <div className="flex items-center justify-center">
-                          <CornerDownRight className="h-4 w-4" />
+                          <Icon name="corner-down-right" className="h-4 w-4" />
                         </div>
                         <LocationInput
                           defaultValue={
@@ -414,7 +414,7 @@ export const EventSetupTab = (
           ) && (
             <div className="text-default flex items-center text-sm">
               <div className="mr-1.5 h-3 w-3">
-                <Check className="h-3 w-3" />
+                <Icon name="check" className="h-3 w-3" />
               </div>
               <Trans i18nKey="event_type_requres_google_cal">
                 <p>
@@ -442,7 +442,7 @@ export const EventSetupTab = (
             <li>
               <Button
                 data-testid="add-location"
-                StartIcon={Plus}
+                StartIcon="plus"
                 color="minimal"
                 onClick={() => setShowEmptyLocationSelect(true)}>
                 {t("add_location")}
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 583b83e76e..a8bc19bf79 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -1,4 +1,3 @@
-import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 import { useRouter } from "next/navigation";
@@ -15,7 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { trpc, TRPCClientError } from "@calcom/trpc/react";
-import type { DialogProps } from "@calcom/ui";
+import type { DialogProps, VerticalTabItemProps } from "@calcom/ui";
 import {
   Button,
   ButtonGroup,
@@ -29,6 +28,7 @@ import {
   DropdownMenuTrigger,
   HorizontalTabs,
   Label,
+  Icon,
   showToast,
   Skeleton,
   Switch,
@@ -36,23 +36,6 @@ import {
   VerticalDivider,
   VerticalTabs,
 } from "@calcom/ui";
-import {
-  Link as LinkIcon,
-  Calendar,
-  Clock,
-  Sliders,
-  Repeat,
-  Grid,
-  Zap,
-  Sparkles,
-  Users,
-  ExternalLink,
-  Code,
-  Trash,
-  PhoneCall,
-  MoreHorizontal,
-  Loader,
-} from "@calcom/ui/components/icon";
 
 type Props = {
   children: React.ReactNode;
@@ -97,41 +80,41 @@ function getNavigation({
     {
       name: "event_setup_tab_title",
       href: `/event-types/${id}?tabName=setup`,
-      icon: LinkIcon,
+      icon: "link",
       info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
     },
     {
       name: "event_limit_tab_title",
       href: `/event-types/${id}?tabName=limits`,
-      icon: Clock,
+      icon: "clock",
       info: `event_limit_tab_description`,
     },
     {
       name: "event_advanced_tab_title",
       href: `/event-types/${id}?tabName=advanced`,
-      icon: Sliders,
+      icon: "sliders-vertical",
       info: `event_advanced_tab_description`,
     },
     {
       name: "recurring",
       href: `/event-types/${id}?tabName=recurring`,
-      icon: Repeat,
+      icon: "repeat",
       info: `recurring_event_tab_description`,
     },
     {
       name: "apps",
       href: `/event-types/${id}?tabName=apps`,
-      icon: Grid,
+      icon: "grid-3x3",
       //TODO: Handle proper translation with count handling
       info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
     },
     {
       name: "workflows",
       href: `/event-types/${id}?tabName=workflows`,
-      icon: Zap,
+      icon: "zap",
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
-  ];
+  ] satisfies VerticalTabItemProps[];
 }
 
 function DeleteDialog({
@@ -228,7 +211,7 @@ function EventTypeSingleLayout({
   const watchChildrenCount = formMethods.watch("children").length;
   // Define tab navigation here
   const EventTypeTabs = useMemo(() => {
-    const navigation = getNavigation({
+    const navigation: VerticalTabItemProps[] = getNavigation({
       t,
       length,
       multipleDuration,
@@ -242,7 +225,7 @@ function EventTypeSingleLayout({
     navigation.splice(1, 0, {
       name: "availability",
       href: `/event-types/${formMethods.getValues("id")}?tabName=availability`,
-      icon: Calendar,
+      icon: "calendar",
       info:
         isManagedEventType || isChildrenManagedEventType
           ? formMethods.getValues("schedule") === null
@@ -261,7 +244,7 @@ function EventTypeSingleLayout({
       navigation.splice(2, 0, {
         name: "assignment",
         href: `/event-types/${formMethods.getValues("id")}?tabName=team`,
-        icon: Users,
+        icon: "users",
         info: `${t(watchSchedulingType?.toLowerCase() ?? "")}${
           isManagedEventType ? ` - ${t("number_member", { count: watchChildrenCount || 0 })}` : ""
         }`,
@@ -273,14 +256,14 @@ function EventTypeSingleLayout({
         navigation.push({
           name: "instant_tab_title",
           href: `/event-types/${eventType.id}?tabName=instant`,
-          icon: PhoneCall,
+          icon: "phone-call",
           info: `instant_event_tab_description`,
         });
       }
       navigation.push({
         name: "webhooks",
         href: `/event-types/${formMethods.getValues("id")}?tabName=webhooks`,
-        icon: TbWebhook,
+        icon: "webhook",
         info: `${activeWebhooksNumber} ${t("active")}`,
       });
     }
@@ -289,7 +272,7 @@ function EventTypeSingleLayout({
       navigation.push({
         name: "Cal.ai",
         href: `/event-types/${eventType.id}?tabName=ai`,
-        icon: Sparkles,
+        icon: "sparkles",
         info: "cal_ai_event_tab_description", // todo `cal_ai_event_tab_description`,
       });
     }
@@ -378,14 +361,14 @@ function EventTypeSingleLayout({
                     variant="icon"
                     href={permalink}
                     rel="noreferrer"
-                    StartIcon={ExternalLink}
+                    StartIcon="external-link"
                   />
                 </Tooltip>
 
                 <Button
                   color="secondary"
                   variant="icon"
-                  StartIcon={LinkIcon}
+                  StartIcon="link"
                   tooltip={t("copy_link")}
                   tooltipSide="bottom"
                   tooltipOffset={4}
@@ -396,7 +379,7 @@ function EventTypeSingleLayout({
                 />
                 <EventTypeEmbedButton
                   embedUrl={encodeURIComponent(embedLink)}
-                  StartIcon={Code}
+                  StartIcon="code"
                   color="secondary"
                   variant="icon"
                   namespace=""
@@ -411,7 +394,7 @@ function EventTypeSingleLayout({
               <Button
                 color="destructive"
                 variant="icon"
-                StartIcon={Trash}
+                StartIcon="trash"
                 tooltip={t("delete")}
                 tooltipSide="bottom"
                 tooltipOffset={4}
@@ -425,14 +408,14 @@ function EventTypeSingleLayout({
 
           <Dropdown>
             <DropdownMenuTrigger asChild>
-              <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+              <Button className="lg:hidden" StartIcon="ellipsis" variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent style={{ minWidth: "200px" }}>
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   target="_blank"
                   type="button"
-                  StartIcon={ExternalLink}
+                  StartIcon="external-link"
                   href={permalink}
                   rel="noreferrer">
                   {t("preview")}
@@ -441,7 +424,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
-                  StartIcon={LinkIcon}
+                  StartIcon="link"
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -453,7 +436,7 @@ function EventTypeSingleLayout({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={Trash}
+                  StartIcon="trash"
                   disabled={!hasPermsToDelete}
                   onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
@@ -489,7 +472,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <Suspense fallback={<Loader />}>
+      <Suspense fallback={<Icon name="loader" />}>
         <div className="flex flex-col xl:flex-row xl:space-x-6">
           <div className="hidden xl:block">
             <VerticalTabs
diff --git a/apps/web/components/eventtype/EventWebhooksTab.tsx b/apps/web/components/eventtype/EventWebhooksTab.tsx
index 0daf2b6d65..9ef1c74e73 100644
--- a/apps/web/components/eventtype/EventWebhooksTab.tsx
+++ b/apps/web/components/eventtype/EventWebhooksTab.tsx
@@ -1,5 +1,4 @@
 import type { Webhook } from "@prisma/client";
-import { Webhook as TbWebhook } from "lucide-react";
 import { Trans } from "next-i18next";
 import Link from "next/link";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
@@ -16,7 +15,6 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
-import { Plus, Lock } from "@calcom/ui/components/icon";
 
 export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
   const { t } = useLocale();
@@ -92,7 +90,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
       <Button
         color="secondary"
         data-testid="new_webhook"
-        StartIcon={Plus}
+        StartIcon="plus"
         onClick={() => setCreateModalOpen(true)}>
         {t("new_webhook")}
       </Button>
@@ -160,12 +158,12 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                   </>
                 ) : (
                   <EmptyScreen
-                    Icon={TbWebhook}
+                    Icon="webhook"
                     headline={t("create_your_first_webhook")}
                     description={t("first_event_type_webhook_description")}
                     buttonRaw={
                       isChildrenManagedEventType && !isManagedEventType ? (
-                        <Button StartIcon={Lock} color="secondary" disabled>
+                        <Button StartIcon="lock" color="secondary" disabled>
                           {t("locked_by_team_admin")}
                         </Button>
                       ) : (
diff --git a/apps/web/components/eventtype/InstantEventController.tsx b/apps/web/components/eventtype/InstantEventController.tsx
index e7f56ccc2e..e0d5c0fe29 100644
--- a/apps/web/components/eventtype/InstantEventController.tsx
+++ b/apps/web/components/eventtype/InstantEventController.tsx
@@ -16,7 +16,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, EmptyScreen, SettingsToggle, Dialog, DialogContent, showToast } from "@calcom/ui";
-import { PhoneCall, Plus, Lock, Webhook as TbWebhook } from "@calcom/ui/components/icon";
 
 type InstantEventControllerProps = {
   eventType: EventTypeSetup;
@@ -48,7 +47,7 @@ export default function InstantEventController({
         {!isOrg || !isTeamEvent ? (
           <EmptyScreen
             headline={t("instant_tab_title")}
-            Icon={PhoneCall}
+            Icon="phone-call"
             description={t("uprade_to_create_instant_bookings")}
             buttonRaw={<Button href="/enterprise">{t("upgrade")}</Button>}
           />
@@ -171,7 +170,7 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
       <Button
         color="secondary"
         data-testid="new_webhook"
-        StartIcon={Plus}
+        StartIcon="plus"
         onClick={() => setCreateModalOpen(true)}>
         {t("new_webhook")}
       </Button>
@@ -218,12 +217,12 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
                   {t("warning_payment_instant_meeting_event")}
                 </p>
                 <EmptyScreen
-                  Icon={TbWebhook}
+                  Icon="webhook"
                   headline={t("create_your_first_webhook")}
                   description={t("create_instant_meeting_webhook_description")}
                   buttonRaw={
                     isChildrenManagedEventType && !isManagedEventType ? (
-                      <Button StartIcon={Lock} color="secondary" disabled>
+                      <Button StartIcon="lock" color="secondary" disabled>
                         {t("locked_by_admin")}
                       </Button>
                     ) : (
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index ebfc8d250c..73fda98a78 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -1,5 +1,5 @@
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Clock, User } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
@@ -32,11 +32,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <Clock className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
+              <Icon name="clock" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <User className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
+              <Icon name="user" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
diff --git a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
index 0a430b82db..c06d48f84d 100644
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@@ -1,8 +1,7 @@
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { List } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Icon, List } from "@calcom/ui";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
@@ -88,7 +87,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         onClick={() => nextStep()}
         disabled={disabledNextButton}>
         {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </button>
     </>
   );
diff --git a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
index 9bbdb2b589..5be304eb28 100644
--- a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
@@ -1,8 +1,7 @@
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { List } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Icon, List } from "@calcom/ui";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";
 import { StepConnectionLoader } from "../components/StepConnectionLoader";
@@ -59,7 +58,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
         disabled={!hasAnyInstalledVideoApps}
         onClick={() => nextStep()}>
         {t("next_step_text")}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </button>
     </>
   );
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index 5ee3cca96a..0fcf046e08 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -6,8 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Form } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Button, Form, Icon } from "@calcom/ui";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;
@@ -78,7 +77,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
           loading={availabilityForm.formState.isSubmitting}
           disabled={availabilityForm.formState.isSubmitting}>
-          {t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
+          {t("next_step_text")} <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" />
         </Button>
       </div>
     </Form>
diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index 5c7a0de3b8..2b89ad559d 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -10,7 +10,6 @@ import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
 import { UserAvatar } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
 
 type FormData = {
   bio: string;
@@ -147,7 +146,7 @@ const UserProfile = () => {
       </fieldset>
       <Button
         loading={mutation.isPending}
-        EndIcon={ArrowRight}
+        EndIcon="arrow-right"
         type="submit"
         className="mt-8 w-full items-center justify-center">
         {t("finish")}
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index 1d1aa34cf9..c872eed0a0 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -9,8 +9,7 @@ import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, TimezoneSelect, Input } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Button, TimezoneSelect, Icon, Input } from "@calcom/ui";
 
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
@@ -116,7 +115,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         loading={mutation.isPending}
         disabled={mutation.isPending}>
         {t("next_step_text")}
-        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <Icon name="arrow-right" className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
     </form>
   );
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 68c6682515..f1eb8f5a91 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -1,10 +1,10 @@
-import { Shield } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
       <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-        <Shield className="text-inverted h-6 w-6" />
+        <Icon name="shield" className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
         <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
diff --git a/apps/web/components/settings/CustomEmailTextField.tsx b/apps/web/components/settings/CustomEmailTextField.tsx
index 74ea0413dc..f489d3035a 100644
--- a/apps/web/components/settings/CustomEmailTextField.tsx
+++ b/apps/web/components/settings/CustomEmailTextField.tsx
@@ -14,7 +14,6 @@ import {
   Button,
   InputError,
 } from "@calcom/ui";
-import { MoreHorizontal, Flag, Trash, Send } from "@calcom/ui/components/icon";
 
 type CustomEmailTextFieldProps = {
   formMethods: UseFormReturn<FormValues>;
@@ -71,7 +70,7 @@ const CustomEmailTextField = ({
           <Dropdown>
             <DropdownMenuTrigger asChild>
               <Button
-                StartIcon={MoreHorizontal}
+                StartIcon="ellipsis"
                 variant="icon"
                 size="sm"
                 color="secondary"
@@ -82,7 +81,7 @@ const CustomEmailTextField = ({
             <DropdownMenuContent>
               <DropdownMenuItem>
                 <DropdownItem
-                  StartIcon={Flag}
+                  StartIcon="flag"
                   color="secondary"
                   className="disabled:opacity-40"
                   onClick={handleChangePrimary}
@@ -94,7 +93,7 @@ const CustomEmailTextField = ({
               {!emailVerified && (
                 <DropdownMenuItem>
                   <DropdownItem
-                    StartIcon={Send}
+                    StartIcon="send"
                     color="secondary"
                     className="disabled:opacity-40"
                     onClick={handleVerifyEmail}
@@ -106,7 +105,7 @@ const CustomEmailTextField = ({
               )}
               <DropdownMenuItem>
                 <DropdownItem
-                  StartIcon={Trash}
+                  StartIcon="trash"
                   color="destructive"
                   className="disabled:opacity-40"
                   onClick={handleItemDelete}
diff --git a/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx b/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx
index d5afcfd429..c7803a9fee 100644
--- a/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx
+++ b/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientCard.tsx
@@ -1,10 +1,9 @@
-import { Asterisk, Clipboard } from "lucide-react";
 import React from "react";
 
 import { classNames } from "@calcom/lib";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants";
 import type { Avatar } from "@calcom/prisma/client";
-import { Button, showToast } from "@calcom/ui";
+import { Button, Icon, showToast } from "@calcom/ui";
 
 import { hasPermission } from "../../../../../../../packages/platform/utils/permissions";
 
@@ -75,7 +74,8 @@ export const OAuthClientCard = ({
           <div className="flex flex-row items-center gap-2">
             <div className="font-semibold">Client Id:</div>
             <div>{id}</div>
-            <Clipboard
+            <Icon
+              name="clipboard"
               type="button"
               className="h-4 w-4 cursor-pointer"
               onClick={() => {
@@ -89,9 +89,10 @@ export const OAuthClientCard = ({
           <div className="font-semibold">Client Secret:</div>
           <div className="flex items-center justify-center rounded-md">
             {[...new Array(20)].map((_, index) => (
-              <Asterisk key={`${index}asterisk`} className="h-2 w-2" />
+              <Icon name="asterisk" key={`${index}asterisk`} className="h-2 w-2" />
             ))}
-            <Clipboard
+            <Icon
+              name="clipboard"
               type="button"
               className="ml-2 h-4 w-4 cursor-pointer"
               onClick={() => {
diff --git a/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx b/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx
index 11f341c1c4..efd6ab5da8 100644
--- a/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx
+++ b/apps/web/components/settings/organizations/platform/oauth-clients/OAuthClientForm.tsx
@@ -7,7 +7,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
 import { showToast } from "@calcom/ui";
 import { Meta, Button, TextField, Label } from "@calcom/ui";
-import { Plus, Trash } from "@calcom/ui/components/icon";
 
 import { useCreateOAuthClient } from "@lib/hooks/settings/organizations/platform/oauth-clients/usePersistOAuthClient";
 
@@ -156,7 +155,7 @@ export const OAuthClientForm: FC = () => {
                     type="button"
                     color="minimal"
                     variant="icon"
-                    StartIcon={Plus}
+                    StartIcon="plus"
                     className="text-default mx-2 mb-2"
                     onClick={() => {
                       append({ uri: "" });
@@ -168,7 +167,7 @@ export const OAuthClientForm: FC = () => {
                       type="button"
                       color="destructive"
                       variant="icon"
-                      StartIcon={Trash}
+                      StartIcon="trash"
                       className="text-default mx-2 mb-2"
                       onClick={() => {
                         remove(index);
@@ -191,7 +190,7 @@ export const OAuthClientForm: FC = () => {
                   <Avatar
                     alt=""
                     imageSrc={value}
-                    fallback={<Plus className="text-subtle h-4 w-4" />}
+                    fallback={<Icon name="plus" className="text-subtle h-4 w-4" />}
                     size="sm"
                   />
                   <div className="ms-4">
diff --git a/apps/web/components/setup/AdminUser.tsx b/apps/web/components/setup/AdminUser.tsx
index 34462482a7..ee95820606 100644
--- a/apps/web/components/setup/AdminUser.tsx
+++ b/apps/web/components/setup/AdminUser.tsx
@@ -9,7 +9,6 @@ import { isPasswordValid } from "@calcom/features/auth/lib/isPasswordValid";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmailField, EmptyScreen, Label, PasswordField, TextField } from "@calcom/ui";
-import { UserCheck } from "@calcom/ui/components/icon";
 
 export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
   const { t } = useLocale();
@@ -24,7 +23,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
           props.onSuccess();
         }}>
         <EmptyScreen
-          Icon={UserCheck}
+          Icon="user-check"
           headline={t("admin_user_created")}
           description={t("admin_user_created_description")}
         />
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 164b052276..744ede19a1 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TextField } from "@calcom/ui";
-import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 type EnterpriseLicenseFormValues = {
   licenseKey: string;
@@ -92,7 +92,7 @@ const EnterpriseLicense = (
         <div>
           <Button
             className="w-full justify-center text-lg"
-            EndIcon={ExternalLink}
+            EndIcon="external-link"
             href="https://console.cal.com"
             target="_blank">
             {t("purchase_license")}
@@ -122,9 +122,9 @@ const EnterpriseLicense = (
                 )}
                 addOnSuffix={
                   checkLicenseLoading ? (
-                    <Loader className="h-5 w-5 animate-spin" />
+                    <Icon name="loader" className="h-5 w-5 animate-spin" />
                   ) : errors.licenseKey === undefined && isDirty ? (
-                    <Check className="h-5 w-5 text-green-700" />
+                    <Icon name="check" className="h-5 w-5 text-green-700" />
                   ) : undefined
                 }
                 color={errors.licenseKey ? "warn" : ""}
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index 9a2ccb73f6..2e93ca7782 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/navigation";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Check } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 const StepDone = (props: {
   currentStep: number;
@@ -24,7 +24,10 @@ const StepDone = (props: {
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
         <div className="dark:bg-default flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600">
-          <Check className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
+          <Icon
+            name="check"
+            className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10"
+          />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="mb-1 mt-6 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
diff --git a/apps/web/components/ui/LinkIconButton.tsx b/apps/web/components/ui/LinkIconButton.tsx
index 985925b594..a4eab72510 100644
--- a/apps/web/components/ui/LinkIconButton.tsx
+++ b/apps/web/components/ui/LinkIconButton.tsx
@@ -1,11 +1,9 @@
 import React from "react";
 
-import type { LucideIcon } from "@calcom/ui/components/icon";
-
-import type { SVGComponent } from "@lib/types/SVGComponent";
+import { Icon } from "@calcom/ui";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  Icon: SVGComponent | LucideIcon;
+  Icon: React.ComponentProps<typeof Icon>["name"];
 }
 
 export default function LinkIconButton(props: LinkIconButtonProps) {
@@ -15,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
         type="button"
         {...props}
         className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-sm px-2 py-1 text-sm font-medium">
-        <props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
+        <Icon name={props.Icon} className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 807f83d045..0137343522 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -16,7 +16,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, DialogFooter, Input, Label } from "@calcom/ui";
-import { Check, Edit2, ExternalLink, Star as StarSolid } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -239,9 +239,13 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 isInputUsernamePremium ? "text-transparent" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <StarSolid className="mt-[2px] h-4 w-4 fill-orange-400" /> : <></>}
+              {isInputUsernamePremium ? (
+                <Icon name="star" className="mt-[2px] h-4 w-4 fill-orange-400" />
+              ) : (
+                <></>
+              )}
               {!isInputUsernamePremium && usernameIsAvailable ? (
-                <Check className="mt-[2px] h-4 w-4" />
+                <Icon name="check" className="mt-[2px] h-4 w-4" />
               ) : (
                 <></>
               )}
@@ -260,7 +264,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
       <Dialog open={openDialogSaveUsername}>
         <DialogContent
-          Icon={Edit2}
+          Icon="pencil"
           title={t("confirm_username_change_dialog_title")}
           description={
             <>
@@ -297,7 +301,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 data-testid="go-to-billing"
                 href={paymentLink}>
                 <>
-                  {t("go_to_stripe_billing")} <ExternalLink className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <Icon name="external-link" className="ml-1 h-4 w-4" />
                 </>
               </Button>
             )}
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 1dd6414859..a1b44460a2 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -11,7 +11,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter, Tooltip } from "@calcom/ui";
-import { Check, Edit2 } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -137,7 +137,11 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-6 flex h-7 flex-row">
               <span className={classNames("bg-default mx-0 p-3")}>
-                {usernameIsAvailable ? <Check className="relative bottom-[6px] h-4 w-4" /> : <></>}
+                {usernameIsAvailable ? (
+                  <Icon name="check" className="relative bottom-[6px] h-4 w-4" />
+                ) : (
+                  <></>
+                )}
               </span>
             </div>
           )}
@@ -154,7 +158,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
+        <DialogContent type="confirmation" Icon="pencil" title={t("confirm_username_change_dialog_title")}>
           <div className="flex flex-row">
             <div className="mb-4 w-full pt-1">
               <div className="bg-subtle flex w-full flex-wrap justify-between gap-6 rounded-sm  px-4 py-3 text-sm">
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index 53b00e77d3..f1207b4a14 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -3,7 +3,7 @@ import type { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui";
-import { X } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import Select from "@components/ui/form/Select";
 
@@ -43,7 +43,8 @@ export const CheckedSelect = ({
             alt={option.label}
           />
           {option.label}
-          <X
+          <Icon
+            name="x"
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
             className="text-subtle float-right mt-0.5 h-5 w-5 cursor-pointer"
           />
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index d0e2f0839c..968996d5bc 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -3,7 +3,7 @@ import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
-import { Calendar } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import classNames from "@lib/classNames";
 
@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
         className
       )}
       clearIcon={null}
-      calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
+      calendarIcon={<Icon name="calendar" className="text-subtle h-5 w-5" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/apps/web/lib/types/SVGComponent.ts b/apps/web/lib/types/SVGComponent.ts
deleted file mode 100644
index 98f38b8b16..0000000000
--- a/apps/web/lib/types/SVGComponent.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
diff --git a/apps/web/modules/bookings/views/bookings-listing-view.tsx b/apps/web/modules/bookings/views/bookings-listing-view.tsx
index df43e9cd49..952592f69b 100644
--- a/apps/web/modules/bookings/views/bookings-listing-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-listing-view.tsx
@@ -17,7 +17,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
 import { Alert, Button, EmptyScreen, HorizontalTabs } from "@calcom/ui";
-import { Calendar } from "@calcom/ui/components/icon";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 import useMeQuery from "@lib/hooks/useMeQuery";
@@ -241,7 +240,7 @@ export default function Bookings() {
             {query.status === "success" && isEmpty && (
               <div className="flex items-center justify-center pt-2 xl:pt-0">
                 <EmptyScreen
-                  Icon={Calendar}
+                  Icon="calendar"
                   headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
                   description={t("no_status_bookings_yet_description", {
                     status: t(status).toLowerCase(),
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 2b0176260a..d4932d94d6 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -45,8 +45,7 @@ import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/t
 import { localStorage } from "@calcom/lib/webstorage";
 import { BookingStatus } from "@calcom/prisma/enums";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
-import { Alert, Badge, Button, EmailInput, HeadSeo, useCalcomTheme } from "@calcom/ui";
-import { AlertCircle, Calendar, Check, ChevronLeft, ExternalLink, X } from "@calcom/ui/components/icon";
+import { Alert, Badge, Button, EmailInput, HeadSeo, Icon, useCalcomTheme } from "@calcom/ui";
 
 import { timeZone } from "@lib/clock";
 
@@ -313,7 +312,7 @@ export default function Success(props: PageProps) {
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
             data-testid="back-to-bookings"
             className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
-            <ChevronLeft className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
+            <Icon name="chevron-left" className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
           </Link>
         </div>
       )}
@@ -357,10 +356,12 @@ export default function Success(props: PageProps) {
                     <img src={giphyImage} alt="Gif from Giphy" />
                   )}
                   {!giphyImage && !needsConfirmation && !isCancelled && (
-                    <Check className="h-5 w-5 text-green-600 dark:text-green-400" />
+                    <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
                   )}
-                  {needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
-                  {isCancelled && <X className="h-5 w-5 text-red-600 dark:text-red-200" />}
+                  {needsConfirmation && !isCancelled && (
+                    <Icon name="calendar" className="text-emphasis h-5 w-5" />
+                  )}
+                  {isCancelled && <Icon name="x" className="h-5 w-5 text-red-600 dark:text-red-200" />}
                 </div>
                 <div className="mb-8 mt-6 text-center last:mb-0">
                   <h3
@@ -784,7 +785,7 @@ export default function Success(props: PageProps) {
                       </span>
                     </div>
                   }
-                  CustomIcon={AlertCircle}
+                  CustomIcon="circle-alert"
                   customIconColor="text-attention dark:text-orange-200"
                 />
               )}
@@ -813,7 +814,7 @@ const DisplayLocation = ({
       className={classNames("text-default flex items-center gap-2", className)}
       rel="noreferrer">
       {providerName || "Link"}
-      <ExternalLink className="text-default inline h-4 w-4" />
+      <Icon name="external-link" className="text-default inline h-4 w-4" />
     </a>
   ) : (
     <p className={className}>{locationToDisplay}</p>
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 409dcd3f23..fb61243ec0 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -50,6 +50,7 @@ import {
   EmptyScreen,
   HeadSeo,
   HorizontalTabs,
+  Icon,
   Label,
   showToast,
   Skeleton,
@@ -58,20 +59,6 @@ import {
   ArrowButton,
   UserAvatarGroup,
 } from "@calcom/ui";
-import {
-  Clipboard,
-  Code,
-  Copy,
-  Edit,
-  Edit2,
-  ExternalLink,
-  Link as LinkIcon,
-  MoreHorizontal,
-  Trash,
-  Upload,
-  Users,
-  VenetianMask,
-} from "@calcom/ui/components/icon";
 
 import type { AppProps } from "@lib/app-providers";
 import useMeQuery from "@lib/hooks/useMeQuery";
@@ -476,7 +463,7 @@ export const EventTypeList = ({
                                   target="_blank"
                                   variant="icon"
                                   href={calLink}
-                                  StartIcon={ExternalLink}
+                                  StartIcon="external-link"
                                 />
                               </Tooltip>
 
@@ -484,7 +471,7 @@ export const EventTypeList = ({
                                 <Button
                                   color="secondary"
                                   variant="icon"
-                                  StartIcon={LinkIcon}
+                                  StartIcon="link"
                                   onClick={() => {
                                     showToast(t("link_copied"), "success");
                                     navigator.clipboard.writeText(calLink);
@@ -497,7 +484,7 @@ export const EventTypeList = ({
                                   <Button
                                     color="secondary"
                                     variant="icon"
-                                    StartIcon={VenetianMask}
+                                    StartIcon="venetian-mask"
                                     onClick={() => {
                                       showToast(t("private_link_copied"), "success");
                                       navigator.clipboard.writeText(placeholderHashedLink);
@@ -513,7 +500,7 @@ export const EventTypeList = ({
                                 type="button"
                                 variant="icon"
                                 color="secondary"
-                                StartIcon={MoreHorizontal}
+                                StartIcon="ellipsis"
                                 className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
                               />
                             </DropdownMenuTrigger>
@@ -523,7 +510,7 @@ export const EventTypeList = ({
                                   <DropdownItem
                                     type="button"
                                     data-testid={`event-type-edit-${type.id}`}
-                                    StartIcon={Edit2}
+                                    StartIcon="pencil"
                                     onClick={() => router.push(`/event-types/${type.id}`)}>
                                     {t("edit")}
                                   </DropdownItem>
@@ -535,7 +522,7 @@ export const EventTypeList = ({
                                     <DropdownItem
                                       type="button"
                                       data-testid={`event-type-duplicate-${type.id}`}
-                                      StartIcon={Copy}
+                                      StartIcon="copy"
                                       onClick={() => openDuplicateModal(type, group)}>
                                       {t("duplicate")}
                                     </DropdownItem>
@@ -548,7 +535,7 @@ export const EventTypeList = ({
                                     namespace=""
                                     as={DropdownItem}
                                     type="button"
-                                    StartIcon={Code}
+                                    StartIcon="code"
                                     className="w-full rounded-none"
                                     embedUrl={encodeURIComponent(embedLink)}
                                     eventId={type.id}>
@@ -569,7 +556,7 @@ export const EventTypeList = ({
                                           setDeleteDialogTypeId(type.id);
                                           setDeleteDialogSchedulingType(type.schedulingType);
                                         }}
-                                        StartIcon={Trash}
+                                        StartIcon="trash"
                                         className="w-full rounded-none">
                                         {t("delete")}
                                       </DropdownItem>
@@ -586,7 +573,7 @@ export const EventTypeList = ({
                 <div className="min-w-9 mx-5 flex sm:hidden">
                   <Dropdown>
                     <DropdownMenuTrigger asChild data-testid={`event-type-options-${type.id}`}>
-                      <Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
+                      <Button type="button" variant="icon" color="secondary" StartIcon="ellipsis" />
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
@@ -596,7 +583,7 @@ export const EventTypeList = ({
                               <DropdownItem
                                 href={calLink}
                                 target="_blank"
-                                StartIcon={ExternalLink}
+                                StartIcon="external-link"
                                 className="w-full rounded-none">
                                 {t("preview")}
                               </DropdownItem>
@@ -608,7 +595,7 @@ export const EventTypeList = ({
                                   navigator.clipboard.writeText(calLink);
                                   showToast(t("link_copied"), "success");
                                 }}
-                                StartIcon={Clipboard}
+                                StartIcon="clipboard"
                                 className="w-full rounded-none text-left">
                                 {t("copy_link")}
                               </DropdownItem>
@@ -629,7 +616,7 @@ export const EventTypeList = ({
                                   .then(() => showToast(t("link_shared"), "success"))
                                   .catch(() => showToast(t("failed"), "error"));
                               }}
-                              StartIcon={Upload}
+                              StartIcon="upload"
                               className="w-full rounded-none">
                               {t("share")}
                             </DropdownItem>
@@ -639,7 +626,7 @@ export const EventTypeList = ({
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
                               onClick={() => router.push(`/event-types/${type.id}`)}
-                              StartIcon={Edit}
+                              StartIcon="pencil"
                               className="w-full rounded-none">
                               {t("edit")}
                             </DropdownItem>
@@ -649,7 +636,7 @@ export const EventTypeList = ({
                           <DropdownMenuItem className="outline-none">
                             <DropdownItem
                               onClick={() => openDuplicateModal(type, group)}
-                              StartIcon={Copy}
+                              StartIcon="copy"
                               data-testid={`event-type-duplicate-${type.id}`}>
                               {t("duplicate")}
                             </DropdownItem>
@@ -667,7 +654,7 @@ export const EventTypeList = ({
                                     setDeleteDialogTypeId(type.id);
                                     setDeleteDialogSchedulingType(type.schedulingType);
                                   }}
-                                  StartIcon={Trash}
+                                  StartIcon="trash"
                                   className="w-full rounded-none">
                                   {t("delete")}
                                 </DropdownItem>
@@ -768,7 +755,7 @@ const EventTypeListHeading = ({
           <span className="text-subtle relative -top-px me-2 ms-2 text-xs">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
-                <Users className="-mt-px mr-1 inline h-3 w-3" />
+                <Icon name="users" className="-mt-px mr-1 inline h-3 w-3" />
                 {membershipCount}
               </Badge>
             </Link>
@@ -796,7 +783,7 @@ const CreateFirstEventTypeView = ({ slug }: { slug: string }) => {
 
   return (
     <EmptyScreen
-      Icon={LinkIcon}
+      Icon="link"
       headline={t("new_event_type_heading")}
       description={t("new_event_type_description")}
       className="mb-16"
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index ac15a7e4e0..5b19d37fe6 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -17,8 +17,7 @@ import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
-import { HeadSeo, UnpublishedEntity, UserAvatar } from "@calcom/ui";
-import { ArrowRight, Verified } from "@calcom/ui/components/icon";
+import { HeadSeo, Icon, UnpublishedEntity, UserAvatar } from "@calcom/ui";
 
 import { type getServerSideProps } from "./users-public-view.getServerSideProps";
 
@@ -121,10 +120,16 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
             <h1 className="font-cal text-emphasis my-1 text-3xl" data-testid="name-title">
               {profile.name}
               {!isOrg && user.verified && (
-                <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black" />
+                <Icon
+                  name="badge-check"
+                  className=" mx-1 -mt-1 inline h-6 w-6 fill-blue-500 text-white dark:text-black"
+                />
               )}
               {isOrg && (
-                <Verified className=" mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black" />
+                <Icon
+                  name="badge-check"
+                  className=" mx-1 -mt-1 inline h-6 w-6 fill-yellow-500 text-white dark:text-black"
+                />
               )}
             </h1>
             {!isBioEmpty && (
@@ -153,7 +158,10 @@ export function UserPage(props: InferGetServerSidePropsType<typeof getServerSide
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
                   className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-                  <ArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+                  <Icon
+                    name="arrow-right"
+                    className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
+                  />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
                     <Link
diff --git a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
index 279b0d2727..0cdf24d544 100644
--- a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
@@ -3,8 +3,7 @@
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
-import { Button, HeadSeo } from "@calcom/ui";
-import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon";
+import { Button, HeadSeo, Icon } from "@calcom/ui";
 
 import { type PageProps } from "./videos-meeting-ended-single-view.getServerSideProps";
 
@@ -28,7 +27,7 @@ export default function MeetingUnavailable(props: PageProps) {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                    <X className="h-6 w-6 text-red-600" />
+                    <Icon name="x" className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-headline">
@@ -40,14 +39,14 @@ export default function MeetingUnavailable(props: PageProps) {
                       {props.booking.title}
                     </h2>
                     <p className="text-subtle text-center">
-                      <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
+                      <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
                     </p>
                   </div>
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
                   <div className="mt-5">
-                    <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
                       {t("go_back")}
                     </Button>
                   </div>
diff --git a/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
index 6ee2012ce9..bcf4b8e79f 100644
--- a/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
@@ -3,8 +3,7 @@
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
-import { Button, HeadSeo, EmptyScreen } from "@calcom/ui";
-import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon";
+import { Button, HeadSeo, Icon, EmptyScreen } from "@calcom/ui";
 
 import { type PageProps } from "./videos-meeting-not-started-single-view.getServerSideProps";
 
@@ -15,19 +14,19 @@ export default function MeetingNotStarted(props: PageProps) {
       <HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
       <main className="mx-auto my-24 max-w-3xl">
         <EmptyScreen
-          Icon={Clock}
+          Icon="clock"
           headline={t("this_meeting_has_not_started_yet")}
           description={
             <>
               <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
               <p className="text-subtle text-center">
-                <Calendar className="-mt-1 mr-1 inline-block h-4 w-4" />
+                <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
                 {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
               </p>
             </>
           }
           buttonRaw={
-            <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
+            <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
               {t("go_back")}
             </Button>
           }
diff --git a/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx b/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx
index 4dd8bfe49a..2869dbd836 100644
--- a/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-no-meeting-found-single-view.tsx
@@ -2,7 +2,6 @@
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
-import { X, ArrowRight } from "@calcom/ui/components/icon";
 
 export default function NoMeetingFound() {
   const { t } = useLocale();
@@ -12,11 +11,11 @@ export default function NoMeetingFound() {
       <HeadSeo title={t("no_meeting_found")} description={t("no_meeting_found")} />
       <main className="mx-auto my-24 max-w-3xl">
         <EmptyScreen
-          Icon={X}
+          Icon="x"
           headline={t("no_meeting_found")}
           description={t("no_meeting_found_description")}
           buttonRaw={
-            <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
+            <Button data-testid="return-home" href="/event-types" EndIcon="arrow-right">
               {t("go_back_home")}
             </Button>
           }
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 84aed3e68b..7a8d74897b 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -10,7 +10,7 @@ import { APP_NAME, SEO_IMG_OGIMG_VIDEO, WEBSITE_URL } from "@calcom/lib/constant
 import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
-import { ChevronRight } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { type PageProps } from "./videos-single-view.getServerSideProps";
 
@@ -231,7 +231,8 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
             aria-label={`${open ? "close" : "open"} booking description sidebar`}
             className="h-20 w-6 rounded-r-md border border-l-0 border-gray-300/20 bg-black/60 text-white shadow-sm backdrop-blur-lg"
             onClick={() => setOpen(!open)}>
-            <ChevronRight
+            <Icon
+              name="chevron-right"
               aria-hidden
               className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
             />
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index c4b169d64d..4d0be25fe1 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -187,10 +187,6 @@ const nextConfig = {
     "lucide-react",
   ],
   modularizeImports: {
-    "@calcom/ui/components/icon": {
-      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
-      preventFullImport: true,
-    },
     "@calcom/features/insights/components": {
       transform: "@calcom/features/insights/components/{{member}}",
       skipDefaultConversion: true,
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 06d23a8223..4b759f1498 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -12,7 +12,7 @@ import {
 import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 import { Discord } from "@calcom/ui/components/icon/Discord";
 
 import PageWrapper from "@components/PageWrapper";
@@ -36,19 +36,19 @@ export default function Custom404() {
     {
       title: "Enterprise",
       description: "Learn more about organizations and subdomains in our enterprise plan.",
-      icon: Shield,
+      icon: "shield" as const,
       href: `${WEBSITE_URL}/enterprise`,
     },
     {
       title: t("documentation"),
       description: t("documentation_description"),
-      icon: FileText,
+      icon: "file-text" as const,
       href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
-      icon: BookOpen,
+      icon: "book-open" as const,
       href: `${WEBSITE_URL}/blog`,
     },
   ];
@@ -174,7 +174,7 @@ export default function Custom404() {
                     rel="noreferrer">
                     <div className="flex-shrink-0">
                       <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                        <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
+                        <Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
                       </span>
                     </div>
                     <div className="min-w-0 flex-1">
@@ -196,7 +196,7 @@ export default function Custom404() {
                       </p>
                     </div>
                     <div className="flex-shrink-0 self-center">
-                      <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                      <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                     </div>
                   </a>
                 </li>
@@ -215,7 +215,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <link.icon className="text-default h-6 w-6" aria-hidden="true" />
+                          <Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -228,7 +228,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{link.description}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -252,7 +252,7 @@ export default function Custom404() {
                     <p className="text-subtle text-base">{t("join_our_community")}</p>
                   </div>
                   <div className="flex-shrink-0 self-center">
-                    <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                    <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                   </div>
                 </a>
               </li>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index d91524a60d..2bb6a20609 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -4,7 +4,6 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
-import { Copy } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -33,7 +32,7 @@ export default function Error500() {
               <Button
                 color="secondary"
                 className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon={Copy}
+                StartIcon="copy"
                 onClick={() => {
                   navigator.clipboard.writeText(searchParams?.get("error") as string);
                   showToast("Link copied!", "success");
diff --git a/apps/web/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index de8563a9ec..b3a065c6c3 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -5,8 +5,7 @@ import Link from "next/link";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { SkeletonText } from "@calcom/ui";
-import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
+import { Icon, SkeletonText } from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
 
@@ -26,7 +25,7 @@ export default function Apps({ categories }: Omit<inferSSRProps<typeof getServer
         <Link
           href="/apps"
           className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
-          <ArrowLeft className="h-4 w-4" />
+          <Icon name="arrow-left" className="h-4 w-4" />
           {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
       </div>
@@ -42,7 +41,7 @@ export default function Apps({ categories }: Omit<inferSSRProps<typeof getServer
                 <h3 className="font-medium capitalize">{category.name}</h3>
                 <p className="text-subtle text-sm">
                   {t("number_apps", { count: category.count })}{" "}
-                  <ArrowRight className="inline-block h-4 w-4" />
+                  <Icon name="arrow-right" className="inline-block h-4 w-4" />
                 </p>
               </div>
             </Link>
diff --git a/apps/web/pages/apps/index.tsx b/apps/web/pages/apps/index.tsx
index 4aa501b718..46188fab96 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -16,7 +16,7 @@ import {
   PopularAppsSlider,
   RecentAppsSlider,
 } from "@calcom/ui";
-import { Search } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/apps/getServerSideProps";
 
@@ -45,7 +45,7 @@ function AppsSearch({
   return (
     <TextField
       className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
-      addOnLeading={<Search className="text-subtle h-4 w-4" />}
+      addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
       addOnClassname="!border-muted"
       containerClassName={classNames("focus:!ring-offset-0 m-1", className)}
       type="search"
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index d9120b037a..f0f54e8d07 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -7,23 +7,11 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppCategories } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, AppSkeletonLoader as SkeletonLoader, ShellSubHeading } from "@calcom/ui";
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import {
-  BarChart,
-  Calendar,
-  Contact,
-  CreditCard,
-  Grid,
-  Mail,
-  Plus,
-  Share2,
-  Video,
-} from "@calcom/ui/components/icon";
+import type { Icon } from "@calcom/ui";
+import { AppSkeletonLoader as SkeletonLoader, Button, EmptyScreen, ShellSubHeading } from "@calcom/ui";
 
 import { QueryCell } from "@lib/QueryCell";
 import type { querySchemaType } from "@lib/apps/installed/[category]/getServerSideProps";
-import { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
 
 import PageWrapper from "@components/PageWrapper";
 import { AppList } from "@components/apps/AppList";
@@ -50,17 +38,17 @@ const IntegrationsContainer = ({
   });
 
   // TODO: Refactor and reuse getAppCategories?
-  const emptyIcon: Record<AppCategories, LucideIcon> = {
-    calendar: Calendar,
-    conferencing: Video,
-    automation: Share2,
-    analytics: BarChart,
-    payment: CreditCard,
-    other: Grid,
-    web3: CreditCard, // deprecated
-    video: Video, // deprecated
-    messaging: Mail,
-    crm: Contact,
+  const emptyIcon: Record<AppCategories, React.ComponentProps<typeof Icon>["name"]> = {
+    calendar: "calendar",
+    conferencing: "video",
+    automation: "share-2",
+    analytics: "bar-chart",
+    payment: "credit-card",
+    other: "grid-3x3",
+    web3: "credit-card", // deprecated
+    video: "video", // deprecated
+    messaging: "mail",
+    crm: "contact",
   };
 
   return (
@@ -98,7 +86,7 @@ const IntegrationsContainer = ({
                   data-testid="add-apps"
                   href={variant ? `/apps/categories/${variant}` : "/apps"}
                   color="secondary"
-                  StartIcon={Plus}>
+                  StartIcon="plus">
                   {t("add")}
                 </Button>
               }
@@ -168,6 +156,6 @@ export default function InstalledApps() {
   );
 }
 
-export { getServerSideProps };
+export { getServerSideProps } from "@lib/apps/installed/[category]/getServerSideProps";
 
 InstalledApps.PageWrapper = PageWrapper;
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index 114ecabbc2..c1b23fab25 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -4,8 +4,7 @@ import z from "zod";
 
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
-import { X } from "@calcom/ui/components/icon";
+import { Button, Icon } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 import AuthContainer from "@components/ui/AuthContainer";
@@ -27,7 +26,7 @@ export default function Error() {
     <AuthContainer title="" description="">
       <div>
         <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <X className="h-6 w-6 text-red-600" />
+          <Icon name="x" className="h-6 w-6 text-red-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 61afdd6de6..18540fc607 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -5,21 +5,19 @@ import classNames from "classnames";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { FaGoogle } from "react-icons/fa";
 import { z } from "zod";
 
 import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
-import { WEBAPP_URL, WEBSITE_URL, HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
+import { HOSTED_CAL_FEATURES, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
-import { ArrowLeft, Lock } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { WithNonceProps } from "@lib/withNonce";
@@ -39,6 +37,10 @@ interface LoginValues {
   backupCode: string;
   csrfToken: string;
 }
+
+const GoogleIcon = () => (
+  <img className="text-subtle mr-2 h-4 w-4 dark:invert" src="/google-icon.svg" alt="" />
+);
 export default function Login({
   csrfToken,
   isGoogleLoginEnabled,
@@ -110,7 +112,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
           }
           setErrorMessage(null);
         }}
-        StartIcon={ArrowLeft}
+        StartIcon="arrow-left"
         color="minimal">
         {t("go_back")}
       </Button>
@@ -121,7 +123,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
             setErrorMessage(null);
             methods.setValue("totpCode", "");
           }}
-          StartIcon={Lock}
+          StartIcon="lock"
           color="minimal">
           {t("lost_access")}
         </Button>
@@ -244,7 +246,7 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
                     className="w-full justify-center"
                     disabled={formState.isSubmitting}
                     data-testid="google"
-                    StartIcon={FaGoogle}
+                    CustomStartIcon={<GoogleIcon />}
                     onClick={async (e) => {
                       e.preventDefault();
                       await signIn("google");
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index bf68e22518..0ba2466df5 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { Check } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -46,7 +46,7 @@ export function Logout(props: Props) {
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
         <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <Check className="h-6 w-6 text-green-600" />
+          <Icon name="check" className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
diff --git a/apps/web/pages/auth/oauth2/authorize.tsx b/apps/web/pages/auth/oauth2/authorize.tsx
index d63af3dd1c..b44ff58fc3 100644
--- a/apps/web/pages/auth/oauth2/authorize.tsx
+++ b/apps/web/pages/auth/oauth2/authorize.tsx
@@ -7,8 +7,7 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Avatar, Button, Select } from "@calcom/ui";
-import { Plus, Info } from "@calcom/ui/components/icon";
+import { Avatar, Button, Icon, Select } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -85,7 +84,7 @@ export default function Authorize() {
         <div className="flex items-center justify-center">
           <Avatar
             alt=""
-            fallback={<Plus className="text-subtle h-6 w-6" />}
+            fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
             className="items-center"
             imageSrc={client.logo}
             size="lg"
@@ -139,7 +138,7 @@ export default function Authorize() {
         </ul>
         <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
           <div>
-            <Info className="mr-1 mt-0.5 h-4 w-4" />
+            <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
           </div>
           <div className="ml-1 ">
             <div className="mb-1 text-sm font-medium">
diff --git a/apps/web/pages/auth/platform/authorize.tsx b/apps/web/pages/auth/platform/authorize.tsx
index 81163cdca0..ca877f05c6 100644
--- a/apps/web/pages/auth/platform/authorize.tsx
+++ b/apps/web/pages/auth/platform/authorize.tsx
@@ -3,9 +3,7 @@ import { useRouter } from "next/navigation";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar, Button } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
-import { Plus } from "@calcom/ui/components/icon";
+import { Avatar, Button, Icon } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -69,7 +67,7 @@ export default function Authorize() {
           {client.logo ? (
             <Avatar
               alt=""
-              fallback={<Plus className="text-subtle h-6 w-6" />}
+              fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
               className="items-center"
               imageSrc={client.logo}
               size="lg"
@@ -77,7 +75,7 @@ export default function Authorize() {
           ) : (
             <Avatar
               alt=""
-              fallback={<Plus className="text-subtle h-6 w-6" />}
+              fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
               className="items-center"
               imageSrc="/cal-com-icon.svg"
               size="lg"
@@ -100,7 +98,7 @@ export default function Authorize() {
         <ul className="space-y-4 text-sm text-black">{permissions}</ul>
         <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
           <div>
-            <Info className="mr-1 mt-0.5 h-4 w-4" />
+            <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
           </div>
           <div className="ml-1 ">
             <div className="mb-1 text-sm font-medium">
diff --git a/apps/web/pages/auth/verify-email.tsx b/apps/web/pages/auth/verify-email.tsx
index 0413303479..84fa9ce6d5 100644
--- a/apps/web/pages/auth/verify-email.tsx
+++ b/apps/web/pages/auth/verify-email.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { MailOpenIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
@@ -36,7 +35,7 @@ function VerifyEmailPage() {
           <EmptyScreen
             border
             dashedBorder={false}
-            Icon={MailOpenIcon}
+            Icon="mail-open"
             headline={t("check_your_email")}
             description={t("verify_email_page_body", { email: session?.user?.email, appName: APP_NAME })}
             className="bg-default"
diff --git a/apps/web/pages/auth/verify.tsx b/apps/web/pages/auth/verify.tsx
index ae1100409e..24c96f018a 100644
--- a/apps/web/pages/auth/verify.tsx
+++ b/apps/web/pages/auth/verify.tsx
@@ -14,7 +14,7 @@ import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Button, showToast } from "@calcom/ui";
-import { AlertTriangle, ExternalLink, MailOpen } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import Loader from "@components/Loader";
 import PageWrapper from "@components/PageWrapper";
@@ -63,7 +63,7 @@ const querySchema = z.object({
 
 const PaymentFailedIcon = () => (
   <div className="rounded-full bg-orange-900 p-3">
-    <AlertTriangle className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
+    <Icon name="triangle-alert" className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
   </div>
 );
 
@@ -112,7 +112,7 @@ const PaymentSuccess = () => (
 
 const MailOpenIcon = () => (
   <div className="bg-default rounded-full p-3">
-    <MailOpen className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+    <Icon name="mail-open" className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
   </div>
 );
 
@@ -213,7 +213,7 @@ export default function Verify(props: inferSSRProps<typeof getServerSideProps>)
                   : "https://mail.google.com/mail/u/0/"
               }
               target="_blank"
-              EndIcon={ExternalLink}>
+              EndIcon="external-link">
               Open in Gmail
             </Button>
           </div>
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 3f8cb3c195..2e8938151c 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -15,7 +15,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { EmptyScreen, showToast, ToggleGroup } from "@calcom/ui";
-import { Clock } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -110,7 +109,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
       {schedules.length === 0 ? (
         <div className="flex justify-center">
           <EmptyScreen
-            Icon={Clock}
+            Icon="clock"
             headline={t("new_schedule_heading")}
             description={t("new_schedule_description")}
             className="w-full"
diff --git a/apps/web/pages/connect-and-join.tsx b/apps/web/pages/connect-and-join.tsx
index 04baf31842..38d27f56d4 100644
--- a/apps/web/pages/connect-and-join.tsx
+++ b/apps/web/pages/connect-and-join.tsx
@@ -12,7 +12,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { TRPCClientError } from "@calcom/trpc/react";
 import { Button, EmptyScreen, Alert } from "@calcom/ui";
-import { PhoneCall } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -53,7 +52,7 @@ function ConnectAndJoin() {
       {session ? (
         <EmptyScreen
           headline={t("instant_tab_title")}
-          Icon={PhoneCall}
+          Icon="phone-call"
           description={t("uprade_to_create_instant_bookings")}
           buttonRaw={
             <div className="flex flex-col items-center justify-center	gap-4">
diff --git a/apps/web/pages/getting-started/[[...step]].tsx b/apps/web/pages/getting-started/[[...step]].tsx
index 7cc0080fd8..58523db50c 100644
--- a/apps/web/pages/getting-started/[[...step]].tsx
+++ b/apps/web/pages/getting-started/[[...step]].tsx
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useParamsWithFallback } from "@calcom/lib/hooks/useParamsWithFallback";
 import { trpc } from "@calcom/trpc";
 import { Button, StepCard, Steps } from "@calcom/ui";
-import { Loader } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
@@ -139,7 +139,7 @@ const OnboardingPage = () => {
               <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToIndex} />
             </div>
             <StepCard>
-              <Suspense fallback={<Loader />}>
+              <Suspense fallback={<Icon name="loader" />}>
                 {currentStep === "user-settings" && (
                   <UserSettings nextStep={() => goToIndex(1)} hideUsername={from === "signup"} />
                 )}
diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index e81fec9f2a..64ea23aae0 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -16,7 +16,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { Button, ButtonGroup } from "@calcom/ui";
-import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/insights/getServerSideProps";
 
@@ -28,17 +28,17 @@ export default function InsightsPage() {
 
   const features = [
     {
-      icon: <Users className="h-5 w-5" />,
+      icon: <Icon name="users" className="h-5 w-5" />,
       title: t("view_bookings_across"),
       description: t("view_bookings_across_description"),
     },
     {
-      icon: <RefreshCcw className="h-5 w-5" />,
+      icon: <Icon name="refresh-ccw" className="h-5 w-5" />,
       title: t("identify_booking_trends"),
       description: t("identify_booking_trends_description"),
     },
     {
-      icon: <UserPlus className="h-5 w-5" />,
+      icon: <Icon name="user-plus" className="h-5 w-5" />,
       title: t("spot_popular_event_types"),
       description: t("spot_popular_event_types_description"),
     },
diff --git a/apps/web/pages/settings/admin/oAuth/oAuthView.tsx b/apps/web/pages/settings/admin/oAuth/oAuthView.tsx
index 28110a3ec4..fb3338860e 100644
--- a/apps/web/pages/settings/admin/oAuth/oAuthView.tsx
+++ b/apps/web/pages/settings/admin/oAuth/oAuthView.tsx
@@ -5,9 +5,7 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { Meta, Form, Button, TextField, showToast, Tooltip, ImageUploader, Avatar } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
-import { Plus } from "@calcom/ui/components/icon";
+import { Meta, Form, Button, Icon, TextField, showToast, Tooltip, ImageUploader, Avatar } from "@calcom/ui";
 
 type FormValues = {
   name: string;
@@ -67,7 +65,7 @@ export default function OAuthView() {
             <div className="mb-5 mt-5 flex items-center">
               <Avatar
                 alt=""
-                fallback={<Plus className="text-subtle h-6 w-6" />}
+                fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
                 className="mr-5 items-center"
                 imageSrc={logo}
                 size="lg"
@@ -105,7 +103,7 @@ export default function OAuthView() {
                 }}
                 type="button"
                 className="rounded-l-none text-base"
-                StartIcon={Clipboard}>
+                StartIcon="clipboard">
                 {t("copy")}
               </Button>
             </Tooltip>
@@ -127,7 +125,7 @@ export default function OAuthView() {
                     }}
                     type="button"
                     className="rounded-l-none text-base"
-                    StartIcon={Clipboard}>
+                    StartIcon="clipboard">
                     {t("copy")}
                   </Button>
                 </Tooltip>
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index 91ad564e4e..4ba2f29720 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -8,7 +8,6 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta } from "@calcom/ui";
-import { ExternalLink } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -49,7 +48,7 @@ const BillingView = () => {
       <Meta title={t("billing")} description={t("manage_billing_description")} borderInShellHeader={true} />
       <div className="border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-8 text-sm sm:space-y-8">
         <CtaRow title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
-          <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon="external-link">
             {t("billing_portal")}
           </Button>
         </CtaRow>
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 1c73cf1b2e..b60df18aad 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -17,7 +17,6 @@ import {
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
-import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -47,7 +46,7 @@ const ApiKeysView = () => {
     return (
       <Button
         color="secondary"
-        StartIcon={Plus}
+        StartIcon="plus"
         onClick={() => {
           setApiKeyToEdit(undefined);
           setApiKeyModal(true);
@@ -95,7 +94,7 @@ const ApiKeysView = () => {
             </>
           ) : (
             <EmptyScreen
-              Icon={LinkIcon}
+              Icon="link"
               headline={t("create_first_api_key")}
               description={t("create_first_api_key_description", { appName: APP_NAME })}
               className="rounded-b-lg rounded-t-none border-t-0"
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 5a3965eaf8..07dbddd1d5 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -404,7 +404,7 @@ const AppearanceView = ({
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
-        EndIcon={ExternalLink}
+        EndIcon="external-link"
         className="mt-6"
         onClick={() => window.open(`${WEBAPP_URL}/${user.username}/${user.eventTypes[0].title}`, "_blank")}>
         Preview
diff --git a/apps/web/pages/settings/my-account/calendars.tsx b/apps/web/pages/settings/my-account/calendars.tsx
index 4d38f4dca1..5cfe5e7d0c 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -5,7 +5,6 @@ import { Fragment } from "react";
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta, SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 import { CalendarListContainer } from "@components/apps/CalendarListContainer";
@@ -30,7 +29,7 @@ const AddCalendarButton = () => {
 
   return (
     <>
-      <Button color="secondary" StartIcon={Plus} href="/apps/categories/calendar">
+      <Button color="secondary" StartIcon="plus" href="/apps/categories/calendar">
         {t("add_calendar")}
       </Button>
     </>
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 2f1b273d02..4fe4bb0d54 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -7,7 +7,6 @@ import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen, Meta, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { Calendar, Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -30,7 +29,7 @@ const AddConferencingButton = () => {
   const { t } = useLocale();
 
   return (
-    <Button color="secondary" StartIcon={Plus} href="/apps/categories/conferencing">
+    <Button color="secondary" StartIcon="plus" href="/apps/categories/conferencing">
       {t("add")}
     </Button>
   );
@@ -84,7 +83,7 @@ const ConferencingLayout = () => {
             if (!data.items.length) {
               return (
                 <EmptyScreen
-                  Icon={Calendar}
+                  Icon="calendar"
                   headline={t("no_category_apps", {
                     category: t("conferencing").toLowerCase(),
                   })}
diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
index 9534a56e8f..3b074c3aeb 100644
--- a/apps/web/pages/settings/my-account/out-of-office/index.tsx
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -1,4 +1,3 @@
-import { Trash2 } from "lucide-react";
 import React, { useState } from "react";
 import { Controller, useForm, useFormState } from "react-hook-form";
 
@@ -11,15 +10,20 @@ import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import {
   Button,
-  Meta,
-  showToast,
-  Select,
-  SkeletonText,
-  UpgradeTeamsBadge,
-  Switch,
   DateRangePicker,
+  Meta,
+  Select,
+  showToast,
+  SkeletonText,
+  Switch,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableNew,
+  TableRow,
+  UpgradeTeamsBadge,
 } from "@calcom/ui";
-import { TableNew, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -207,7 +211,7 @@ const OutOfOfficeEntriesList = () => {
                   color="minimal"
                   variant="icon"
                   disabled={deleteOutOfOfficeEntryMutation.isPending}
-                  StartIcon={Trash2}
+                  StartIcon="trash-2"
                   onClick={() => {
                     deleteOutOfOfficeEntryMutation.mutate({ outOfOfficeUid: item.uuid });
                   }}
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 8303e6a49d..eb1605bfc7 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -45,7 +45,6 @@ import {
   TextField,
   UserAvatar,
 } from "@calcom/ui";
-import { AlertTriangle, Trash2, Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 import TwoFactor from "@components/auth/TwoFactor";
@@ -341,7 +340,7 @@ const ProfileView = () => {
       <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
         <SectionBottomActions align="end">
           <DialogTrigger asChild>
-            <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
+            <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon="trash-2">
               {t("delete_account")}
             </Button>
           </DialogTrigger>
@@ -350,7 +349,7 @@ const ProfileView = () => {
           title={t("delete_account_modal_title")}
           description={t("confirm_delete_account_modal", { appName: APP_NAME })}
           type="creation"
-          Icon={AlertTriangle}>
+          Icon="triangle-alert">
           <>
             <div className="mb-10">
               <p className="text-default mb-4">{t("delete_account_confirmation_message")}</p>
@@ -393,7 +392,7 @@ const ProfileView = () => {
           title={t("confirm_password")}
           description={t("confirm_password_change_email")}
           type="creation"
-          Icon={AlertTriangle}>
+          Icon="triangle-alert">
           <div className="mb-10">
             <div className="mb-4 grid gap-2 md:grid-cols-2">
               <div>
@@ -442,7 +441,7 @@ const ProfileView = () => {
           title={t("confirm_auth_change")}
           description={t("confirm_auth_email_change")}
           type="creation"
-          Icon={AlertTriangle}>
+          Icon="triangle-alert">
           <DialogFooter>
             <Button
               color="primary"
@@ -676,7 +675,7 @@ const ProfileForm = ({
           <div className="text-default mt-2 flex items-center text-sm">{t("change_email_hint")}</div>
           <Button
             color="minimal"
-            StartIcon={Plus}
+            StartIcon="plus"
             className="mt-2"
             onClick={() => handleAddSecondaryEmail()}
             data-testid="add-secondary-email">
diff --git a/apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx b/apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx
index 944589fc23..6e5619d65a 100644
--- a/apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx
+++ b/apps/web/pages/settings/organizations/platform/oauth-clients/index.tsx
@@ -1,5 +1,4 @@
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
-import { Plus } from "lucide-react";
 import { useRouter } from "next/router";
 import React from "react";
 
@@ -39,7 +38,7 @@ export const OAuthClients = () => {
           router.push("/settings/organizations/platform/oauth-clients/create");
         }}
         color="secondary"
-        StartIcon={Plus}>
+        StartIcon="plus">
         Add
       </Button>
     );
@@ -83,7 +82,7 @@ export const OAuthClients = () => {
             <EmptyScreen
               headline="Create your first OAuth client"
               description="OAuth clients facilitate access to Cal.com on behalf of users"
-              Icon={Plus}
+              Icon="plus"
               className="rounded-b-lg rounded-t-none border-t-0"
               buttonRaw={<NewOAuthClientButton />}
             />
diff --git a/apps/web/pages/signup.tsx b/apps/web/pages/signup.tsx
index 444d282238..296689dc3b 100644
--- a/apps/web/pages/signup.tsx
+++ b/apps/web/pages/signup.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { CalendarHeart, Info, Link2, ShieldCheckIcon, StarIcon, Users } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { Trans } from "next-i18next";
 import Link from "next/link";
@@ -28,7 +27,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { signupSchema as apiSignupSchema } from "@calcom/prisma/zod-utils";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, HeadSeo, PasswordField, TextField, Form, Alert, showToast, CheckboxField } from "@calcom/ui";
+import {
+  Button,
+  HeadSeo,
+  PasswordField,
+  TextField,
+  Form,
+  Alert,
+  showToast,
+  CheckboxField,
+  Icon,
+} from "@calcom/ui";
 
 import { getServerSideProps } from "@lib/signup/getServerSideProps";
 
@@ -49,17 +58,17 @@ const FEATURES = [
     i18nOptions: {
       appName: APP_NAME,
     },
-    icon: CalendarHeart,
+    icon: "calendar-heart" as const,
   },
   {
     title: "set_availability",
     description: "set_availbility_description",
-    icon: Users,
+    icon: "users" as const,
   },
   {
     title: "share_a_link_or_embed",
     description: "share_a_link_or_embed_description",
-    icon: Link2,
+    icon: "link-2" as const,
     i18nOptions: {
       appName: APP_NAME,
     },
@@ -128,12 +137,12 @@ function UsernameField({
           <div className="text-sm ">
             {usernameTaken ? (
               <div className="text-error flex items-center">
-                <Info className="mr-1 inline-block h-4 w-4" />
+                <Icon name="info" className="mr-1 inline-block h-4 w-4" />
                 <p>{t("already_in_use_error")}</p>
               </div>
             ) : premium ? (
               <div data-testid="premium-username-warning" className="flex items-center">
-                <StarIcon className="mr-1 inline-block h-4 w-4" />
+                <Icon name="star" className="mr-1 inline-block h-4 w-4" />
                 <p>
                   {t("premium_username", {
                     price: getPremiumPlanPriceValue(),
@@ -394,18 +403,16 @@ export default function Signup({
                       color="secondary"
                       disabled={!!formMethods.formState.errors.username || premiumUsername}
                       loading={isGoogleLoading}
-                      StartIcon={() => (
-                        <>
-                          <img
-                            className={classNames(
-                              "text-subtle  mr-2 h-4 w-4 dark:invert",
-                              premiumUsername && "opacity-50"
-                            )}
-                            src="/google-icon.svg"
-                            alt=""
-                          />
-                        </>
-                      )}
+                      CustomStartIcon={
+                        <img
+                          className={classNames(
+                            "text-subtle  mr-2 h-4 w-4 dark:invert",
+                            premiumUsername && "opacity-50"
+                          )}
+                          src="/google-icon.svg"
+                          alt=""
+                        />
+                      }
                       className={classNames(
                         "w-full justify-center rounded-md text-center",
                         formMethods.formState.errors.username ? "opacity-50" : ""
@@ -467,7 +474,7 @@ export default function Signup({
                           `${process.env.NEXT_PUBLIC_WEBAPP_URL}/auth/sso/saml` + `?${sp.toString()}`
                         );
                       }}>
-                      <ShieldCheckIcon className="mr-2 h-5 w-5" />
+                      <Icon name="shield-check" className="mr-2 h-5 w-5" />
                       {t("saml_sso")}
                     </Button>
                   ) : null}
@@ -574,7 +581,7 @@ export default function Signup({
                 <>
                   <div className="max-w-52 mb-8 flex flex-col leading-none sm:mb-0">
                     <div className="text-emphasis items-center">
-                      <feature.icon className="mb-1 h-4 w-4" />
+                      <Icon name={feature.icon} className="mb-1 h-4 w-4" />
                       <span className="text-sm font-medium">{t(feature.title)}</span>
                     </div>
                     <div className="text-subtle text-sm">
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index f9b2449858..8435e5fe38 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -20,7 +20,6 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { teamMetadataSchema } from "@calcom/prisma/zod-utils";
 import { Avatar, Button, HeadSeo, UnpublishedEntity, UserAvatarGroup } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { getServerSideProps } from "@lib/team/[slug]/getServerSideProps";
@@ -236,7 +235,7 @@ function TeamPage({
                     <aside className="dark:text-inverted mt-8 flex justify-center text-center">
                       <Button
                         color="minimal"
-                        EndIcon={ArrowRight}
+                        EndIcon="arrow-right"
                         data-testid="book-a-team-member-btn"
                         className="dark:hover:bg-darkgray-200"
                         href={{
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 0d2d861a2f..dc33b4640b 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -6,7 +6,6 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -29,7 +28,7 @@ function Teams() {
           <Button
             data-testid="new-team-btn"
             variant="fab"
-            StartIcon={Plus}
+            StartIcon="plus"
             type="button"
             href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
             {t("new")}
diff --git a/apps/web/pages/upgrade.tsx b/apps/web/pages/upgrade.tsx
index 4c5b8958d8..55bccb8059 100644
--- a/apps/web/pages/upgrade.tsx
+++ b/apps/web/pages/upgrade.tsx
@@ -8,7 +8,6 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen } from "@calcom/ui";
 import { showToast } from "@calcom/ui";
-import { ArrowUpCircle, CheckCircle } from "@calcom/ui/components/icon";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -38,7 +37,7 @@ export default function UpgradePage() {
           <EmptyScreen
             headline="Your upgrade is here"
             description="Improve your scheduling experience by upgrading to the new plan and enjoy the new features."
-            Icon={ArrowUpCircle}
+            Icon="circle-arrow-up"
             buttonRaw={
               <Button
                 onClick={() => {
@@ -52,7 +51,7 @@ export default function UpgradePage() {
           <EmptyScreen
             headline="You are all set"
             description="You are already on the latest plan. Nothing to upgrade. Enjoy the new features and reach out to us with any questions!"
-            Icon={CheckCircle}
+            Icon="circle-check"
             buttonRaw={<Button href="mailto:support@cal.com">{t("contact_support")}</Button>}
           />
         )}
diff --git a/package.json b/package.json
index bff545b03f..27e7a5bf15 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
   },
   "dependencies": {
     "eslint": "^8.34.0",
-    "lucide-react": "^0.363.0",
     "turbo": "^1.10.1"
   },
   "resolutions": {
diff --git a/packages/app-store/_components/AppCard.tsx b/packages/app-store/_components/AppCard.tsx
index a4d744532e..4bfaa71db2 100644
--- a/packages/app-store/_components/AppCard.tsx
+++ b/packages/app-store/_components/AppCard.tsx
@@ -5,8 +5,7 @@ import { useTranslation } from "react-i18next";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import { classNames } from "@calcom/lib";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Switch, Badge, Avatar, Button } from "@calcom/ui";
-import { Settings } from "@calcom/ui/components/icon";
+import { Switch, Badge, Avatar, Button, Icon } from "@calcom/ui";
 
 import type { CredentialOwner } from "../types";
 import OmniInstallAppButton from "./OmniInstallAppButton";
@@ -128,7 +127,7 @@ export default function AppCard({
             <div className="relative p-4 pt-5 text-sm [&_input]:mb-0 [&_input]:leading-4">
               {!hideSettingsIcon && (
                 <Link href={`/apps/${app.slug}/setup`} className="absolute right-4 top-4">
-                  <Settings className="text-default h-4 w-4" aria-hidden="true" />
+                  <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
                 </Link>
               )}
               {children}
@@ -137,7 +136,7 @@ export default function AppCard({
             <div className="flex h-64 w-full flex-col items-center justify-center gap-4 ">
               <p>{t("this_app_is_not_setup_already")}</p>
               <Link href={`/apps/${app.slug}/setup`}>
-                <Button StartIcon={Settings}>{t("setup")}</Button>
+                <Button StartIcon="settings">{t("setup")}</Button>
               </Link>
             </div>
           )
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
index b082025c1d..daeb6ebb62 100644
--- a/packages/app-store/_components/OmniInstallAppButton.tsx
+++ b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -3,7 +3,6 @@ import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import useAddAppMutation from "../_utils/useAddAppMutation";
 import { InstallAppButton } from "../components";
@@ -74,7 +73,7 @@ export default function OmniInstallAppButton({
             loading={mutation.isPending}
             color="secondary"
             className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-            StartIcon={Plus}
+            StartIcon="plus"
             {...props}>
             {t("add")}
           </Button>
diff --git a/packages/app-store/_utils/getAppCategories.ts b/packages/app-store/_utils/getAppCategories.ts
index 73a785c2fc..a0cfb36d19 100644
--- a/packages/app-store/_utils/getAppCategories.ts
+++ b/packages/app-store/_utils/getAppCategories.ts
@@ -1,16 +1,6 @@
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import type { AppCategories } from "@calcom/prisma/enums";
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import {
-  Calendar,
-  Video,
-  CreditCard,
-  Share2,
-  BarChart,
-  Grid,
-  Mail,
-  Contact,
-} from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui";
 
 function getHref(baseURL: string, category: string, useQueryParam: boolean) {
   const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@@ -21,7 +11,7 @@ function getHref(baseURL: string, category: string, useQueryParam: boolean) {
 type AppCategoryEntry = {
   name: AppCategories;
   href: string;
-  icon: LucideIcon;
+  icon: IconName;
 };
 
 const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryEntry[] => {
@@ -31,42 +21,42 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean): AppCategoryE
     {
       name: "analytics",
       href: getHref(baseURL, "analytics", useQueryParam),
-      icon: BarChart,
+      icon: "bar-chart",
     },
     {
       name: "automation",
       href: getHref(baseURL, "automation", useQueryParam),
-      icon: Share2,
+      icon: "share-2",
     },
     {
       name: "calendar",
       href: getHref(baseURL, "calendar", useQueryParam),
-      icon: Calendar,
+      icon: "calendar",
     },
     {
       name: "conferencing",
       href: getHref(baseURL, "conferencing", useQueryParam),
-      icon: Video,
+      icon: "video",
     },
     {
       name: "crm",
       href: getHref(baseURL, "crm", useQueryParam),
-      icon: Contact,
+      icon: "contact",
     },
     {
       name: "messaging",
       href: getHref(baseURL, "messaging", useQueryParam),
-      icon: Mail,
+      icon: "mail",
     },
     {
       name: "payment",
       href: getHref(baseURL, "payment", useQueryParam),
-      icon: CreditCard,
+      icon: "credit-card",
     },
     {
       name: "other",
       href: getHref(baseURL, "other", useQueryParam),
-      icon: Grid,
+      icon: "grid-3x3",
     },
   ];
 };
diff --git a/packages/app-store/alby/components/AlbyPaymentComponent.tsx b/packages/app-store/alby/components/AlbyPaymentComponent.tsx
index 30e7063535..a9800fe6da 100644
--- a/packages/app-store/alby/components/AlbyPaymentComponent.tsx
+++ b/packages/app-store/alby/components/AlbyPaymentComponent.tsx
@@ -9,9 +9,7 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { Button } from "@calcom/ui";
-import { showToast } from "@calcom/ui";
-import { ClipboardCheck, Clipboard } from "@calcom/ui/components/icon";
+import { Button, showToast } from "@calcom/ui";
 import { Spinner } from "@calcom/ui/components/icon/Spinner";
 
 interface IAlbyPaymentComponentProps {
@@ -99,7 +97,7 @@ export const AlbyPaymentComponent = (props: IAlbyPaymentComponentProps) => {
                 color="secondary"
                 onClick={() => copyToClipboard(paymentRequest)}
                 className="text-subtle rounded-md"
-                StartIcon={isCopied ? ClipboardCheck : Clipboard}>
+                StartIcon={isCopied ? "clipboard-check" : "clipboard"}>
                 Copy Invoice
               </Button>
               <Link target="_blank" href="https://getalby.com" className="link mt-4 text-sm underline">
diff --git a/packages/app-store/alby/pages/setup/index.tsx b/packages/app-store/alby/pages/setup/index.tsx
index 67b8e83e56..5b73c9caee 100644
--- a/packages/app-store/alby/pages/setup/index.tsx
+++ b/packages/app-store/alby/pages/setup/index.tsx
@@ -8,7 +8,7 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { Badge, Button, showToast } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { albyCredentialKeysSchema } from "../../lib/albyCredentialKeysSchema";
 
@@ -169,9 +169,9 @@ function AlbySetupPage(props: IAlbySetupProps) {
 
             {/* TODO: remove when invoices are generated using user identifier */}
             <div className="mt-4 rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
-              <Info className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be used to
-              generate invoices. If you update your lightning address, please disconnect and setup the Alby
-              app again.
+              <Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
+              used to generate invoices. If you update your lightning address, please disconnect and setup the
+              Alby app again.
             </div>
             <Link href="/apps/alby">
               <Button color="secondary">Go to App Store Listing</Button>
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index d782141b8d..43978e4225 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -7,7 +7,6 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Form, showToast, TextField } from "@calcom/ui";
-import { Check, X } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -107,7 +106,7 @@ export default function CloseComSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
+                    StartIcon={testPassed === undefined ? undefined : testPassed ? "check" : "x"}
                     className={
                       testPassed !== undefined
                         ? testPassed
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index e69dc43ae4..6627671441 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { InstallAppButtonMap } from "./apps.browser.generated";
 import type { InstallAppButtonProps } from "./types";
@@ -121,7 +121,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="flex items-start">
                 <div>
-                  <Check className="mr-2 mt-1 font-semibold" />
+                  <Icon name="check" className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -144,7 +144,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="text-info flex items-start">
                 <div>
-                  <AlertCircle className="mr-2 mt-1 font-semibold" />
+                  <Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -160,7 +160,7 @@ export const AppDependencyComponent = ({
                           <span className="mr-1">
                             {t("connect_app", { dependencyName: dependency.name })}
                           </span>
-                          <ArrowRight />
+                          <Icon name="arrow-right" />
                         </Link>
                       </>
                     </div>
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index 158965a856..45a9689eb2 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -3,10 +3,8 @@ import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Input } from "@calcom/ui";
-import { Link, Search } from "@calcom/ui/components/icon";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui";
+import { Alert, Button, Dialog, DialogClose, DialogContent, DialogFooter, Icon, Input } from "@calcom/ui";
 
 interface ISearchDialog {
   isOpenDialog: boolean;
@@ -86,7 +84,7 @@ export const SearchDialog = (props: ISearchDialog) => {
     return null;
   };
 
-  const renderTab = (Icon: SVGComponent | LucideIcon, text: string, mode: Mode) => (
+  const renderTab = (iconName: IconName, text: string, mode: Mode) => (
     <div
       className={classNames(
         "flex cursor-pointer items-center border-b-2 p-2 text-sm ",
@@ -97,7 +95,7 @@ export const SearchDialog = (props: ISearchDialog) => {
         setGifImage("");
         setSelectedMode(mode);
       }}>
-      <Icon className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
+      <Icon name={iconName} className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
       {text}
     </div>
   );
@@ -120,8 +118,8 @@ export const SearchDialog = (props: ISearchDialog) => {
         </h3>
         <p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
         <div className="border-emphasis flex items-center border-b border-solid">
-          {renderTab(Search, t("search_giphy"), MODE_SEARCH)}
-          {renderTab(Link, t("add_link_from_giphy"), MODE_URL)}
+          {renderTab("search", t("search_giphy"), MODE_SEARCH)}
+          {renderTab("link", t("add_link_from_giphy"), MODE_URL)}
         </div>
         <form
           className="flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse"
diff --git a/packages/app-store/giphy/components/SelectGifInput.tsx b/packages/app-store/giphy/components/SelectGifInput.tsx
index 0583723fcb..717f08a878 100644
--- a/packages/app-store/giphy/components/SelectGifInput.tsx
+++ b/packages/app-store/giphy/components/SelectGifInput.tsx
@@ -2,7 +2,6 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { Edit, Plus, X } from "@calcom/ui/components/icon";
 
 import { SearchDialog } from "./SearchDialog";
 
@@ -28,7 +27,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
           <Button
             color="minimal"
             type="button"
-            StartIcon={Edit}
+            StartIcon="pencil"
             onClick={() => setShowDialog(true)}
             disabled={props.disabled}>
             Change
@@ -37,7 +36,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
           <Button
             color="minimal"
             type="button"
-            StartIcon={Plus}
+            StartIcon="plus"
             onClick={() => setShowDialog(true)}
             disabled={props.disabled}>
             Add from Giphy
@@ -48,7 +47,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
           <Button
             color="destructive"
             type="button"
-            StartIcon={X}
+            StartIcon="x"
             onClick={() => {
               setSelectedGif("");
               props.onChange("");
diff --git a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
index b8f9a56dd2..22e609de85 100644
--- a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
+++ b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean; appName: string }) => {
   const { t } = useLocale();
@@ -12,7 +12,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
-            <Check className="mr-2 mt-1 font-semibold" />
+            <Icon name="check" className="mr-2 mt-1 font-semibold" />
           </div>
           <div>
             <span className="font-semibold">{t("google_calendar_is_connected")}</span>
@@ -30,7 +30,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
       <div className="items-start space-x-2.5">
         <div className="flex items-start">
           <div>
-            <AlertCircle className="mr-2 mt-1 font-semibold" />
+            <Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
           </div>
           <div>
             <span className="font-semibold">{t("this_app_requires_google_calendar", { appName })}</span>
@@ -41,7 +41,7 @@ const ExistingGoogleCal = ({ gCalInstalled, appName }: { gCalInstalled?: boolean
                     href={`${WEBAPP_URL}/apps/google-calendar`}
                     className="text-info flex items-center underline">
                     <span className="mr-1">{t("connect_google_calendar")}</span>
-                    <ArrowRight />
+                    <Icon name="arrow-right" />
                   </Link>
                 </>
               </div>
diff --git a/packages/app-store/ics-feedcalendar/pages/setup/index.tsx b/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
index a194b6f4c2..3c0e2307be 100644
--- a/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
+++ b/packages/app-store/ics-feedcalendar/pages/setup/index.tsx
@@ -5,7 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Alert, Button, Form, TextField } from "@calcom/ui";
-import { Plus, Trash } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 export default function ICSFeedSetup() {
   const { t } = useLocale();
@@ -75,7 +75,7 @@ export default function ICSFeedSetup() {
                           type="button"
                           className="mb-2 h-min text-sm"
                           onClick={() => setUrls((urls) => urls.filter((_, ii) => i !== ii))}>
-                          <Trash size={16} />
+                          <Icon name="trash" size={16} />
                         </button>
                       ) : null}
                     </div>
@@ -88,7 +88,7 @@ export default function ICSFeedSetup() {
                   onClick={() => {
                     setUrls((urls) => urls.concat(""));
                   }}>
-                  {t("add")} <Plus size={16} />
+                  {t("add")} <Icon name="plus" size={16} />
                 </button>
 
                 {errorMessage && (
diff --git a/packages/app-store/make/pages/setup/index.tsx b/packages/app-store/make/pages/setup/index.tsx
index 4957bad38a..7c5de88a4e 100644
--- a/packages/app-store/make/pages/setup/index.tsx
+++ b/packages/app-store/make/pages/setup/index.tsx
@@ -6,8 +6,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Tooltip, showToast } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
+import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
 
 import type { getServerSideProps } from "./_getServerSideProps";
 
@@ -164,7 +163,7 @@ const CopyApiKey = ({ apiKey }: { apiKey: string }) => {
             }}
             type="button"
             className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-            <Clipboard className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
+            <Icon name="clipboard" className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
             {t("copy")}
           </Button>
         </Tooltip>
diff --git a/packages/app-store/paypal/pages/setup/index.tsx b/packages/app-store/paypal/pages/setup/index.tsx
index a93e33575b..5fcbd4f02a 100644
--- a/packages/app-store/paypal/pages/setup/index.tsx
+++ b/packages/app-store/paypal/pages/setup/index.tsx
@@ -1,4 +1,3 @@
-import { AlertCircleIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -7,6 +6,7 @@ import { Toaster } from "react-hot-toast";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { Button, showToast, TextField } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 
 export default function PayPalSetup() {
   const [newClientId, setNewClientId] = useState("");
@@ -88,7 +88,7 @@ export default function PayPalSetup() {
               </p>
 
               <p className="text-lgf text-default mt-5 inline-flex font-bold">
-                <AlertCircleIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
+                <Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" /> Important requirements:
               </p>
               <ul className="text-default ml-1 mt-2 list-disc pl-2">
                 <li>Paypal Business account</li>
@@ -140,7 +140,7 @@ export default function PayPalSetup() {
                 <li>You should be all setup after this.</li>
               </ol>
               <p className="text-default mt-5 inline-flex font-bold">
-                <AlertCircleIcon className="mr-2 mt-1 h-4 w-4" />
+                <Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" />
                 Reminder:
               </p>
               <p className="text-default mt-2">
diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index adbabd464b..fbe6f8ed46 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -33,7 +33,6 @@ import {
   TextAreaField,
   TextField,
 } from "@calcom/ui";
-import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import getFieldIdentifier from "../lib/getFieldIdentifier";
 import type { SerializableForm } from "../types/types";
@@ -174,7 +173,7 @@ export const FormActionsDropdown = ({
             variant="icon"
             color="secondary"
             className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
-            StartIcon={MoreHorizontal}
+            StartIcon="ellipsis"
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent>{children}</DropdownMenuContent>
diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index 84b8513506..22cb9f61b8 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -31,14 +31,6 @@ import {
   Tooltip,
   VerticalDivider,
 } from "@calcom/ui";
-import {
-  ExternalLink,
-  Link as LinkIcon,
-  Download,
-  Code,
-  Trash,
-  MessageCircle,
-} from "@calcom/ui/components/icon";
 
 import { getAbsoluteEventTypeRedirectUrl } from "../getEventTypeRedirectUrl";
 import { RoutingPages } from "../lib/RoutingPages";
@@ -90,7 +82,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={ExternalLink}
+            StartIcon="external-link"
           />
         </Tooltip>
         <FormAction
@@ -99,7 +91,7 @@ const Actions = ({
           color="secondary"
           variant="icon"
           type="button"
-          StartIcon={LinkIcon}
+          StartIcon="link"
           tooltip={t("copy_link_to_form")}
         />
 
@@ -111,7 +103,7 @@ const Actions = ({
             color="secondary"
             variant="icon"
             type="button"
-            StartIcon={Download}
+            StartIcon="download"
           />
         </Tooltip>
         <FormAction
@@ -119,7 +111,7 @@ const Actions = ({
           action="embed"
           color="secondary"
           variant="icon"
-          StartIcon={Code}
+          StartIcon="code"
           tooltip={t("embed")}
         />
         <DropdownMenuSeparator />
@@ -128,7 +120,7 @@ const Actions = ({
           action="_delete"
           // className="mr-3"
           variant="icon"
-          StartIcon={Trash}
+          StartIcon="trash"
           color="secondary"
           type="button"
           tooltip={t("delete")}
@@ -141,7 +133,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={LinkIcon}>
+              StartIcon="link">
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           </FormActionsDropdown>
@@ -157,7 +149,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={ExternalLink}>
+            StartIcon="external-link">
             {t("preview")}
           </FormAction>
           <FormAction
@@ -166,7 +158,7 @@ const Actions = ({
             routingForm={form}
             color="minimal"
             type="button"
-            StartIcon={LinkIcon}>
+            StartIcon="link">
             {t("copy_link_to_form")}
           </FormAction>
           <FormAction
@@ -175,7 +167,7 @@ const Actions = ({
             className="w-full"
             color="minimal"
             type="button"
-            StartIcon={Download}>
+            StartIcon="download">
             {t("download_responses")}
           </FormAction>
           <FormAction
@@ -184,7 +176,7 @@ const Actions = ({
             color="minimal"
             type="button"
             className="w-full"
-            StartIcon={Code}>
+            StartIcon="code">
             {t("embed")}
           </FormAction>
           {typeformApp ? (
@@ -194,7 +186,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={LinkIcon}>
+              StartIcon="link">
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           ) : null}
@@ -205,7 +197,7 @@ const Actions = ({
             className="w-full"
             type="button"
             color="destructive"
-            StartIcon={Trash}>
+            StartIcon="trash">
             {t("delete")}
           </FormAction>
           <div className="block sm:hidden">
@@ -495,7 +487,7 @@ function SingleForm({ form, appUrl, Page, enrichedWithUserProfileForm }: SingleF
                         className="mt-2 px-4 py-3"
                         severity="neutral"
                         title={t("no_responses_yet")}
-                        CustomIcon={MessageCircle}
+                        CustomIcon="message-circle"
                       />
                     </>
                   )}
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
index ae9146590a..7becdbb4ac 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -9,7 +9,7 @@ import type {
 } from "react-awesome-query-builder";
 
 import { Button as CalButton, TextField, TextArea } from "@calcom/ui";
-import { Trash, Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 const Select = dynamic(
   async () => (await import("@calcom/ui")).SelectWithValidation
@@ -214,7 +214,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   if (type === "delRule" || type == "delGroup") {
     return (
       <button className="ml-5">
-        <Trash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
+        <Icon name="trash" className="text-subtle m-0 h-4 w-4" onClick={onClick} />
       </button>
     );
   }
@@ -228,7 +228,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   }
   return (
     <CalButton
-      StartIcon={Plus}
+      StartIcon="plus"
       data-testid={dataTestId}
       type="button"
       color="secondary"
diff --git a/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
index 2c9abde29e..c54b3db6e4 100644
--- a/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
@@ -3,8 +3,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import { useWatch } from "react-hook-form";
-import { Controller, useFieldArray } from "react-hook-form";
+import { Controller, useFieldArray, useWatch } from "react-hook-form";
 import { v4 as uuidv4 } from "uuid";
 
 import Shell from "@calcom/features/shell/Shell";
@@ -15,12 +14,12 @@ import {
   Button,
   EmptyScreen,
   FormCard,
+  Icon,
   Label,
   SelectField,
   Skeleton,
   TextField,
 } from "@calcom/ui";
-import { Plus, FileText, X, ArrowUp, ArrowDown } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -270,7 +269,7 @@ function Field({
                           type="button"
                           onClick={() => move(index, -1)}
                           className="bg-default text-muted hover:text-emphasis invisible flex h-6 w-6 scale-0 items-center   justify-center rounded-md border p-1 transition-all hover:border-transparent  hover:shadow group-hover:visible group-hover:scale-100 ">
-                          <ArrowUp />
+                          <Icon name="arrow-up" />
                         </button>
                       ) : null}
                       {options.length && index !== options.length - 1 ? (
@@ -278,7 +277,7 @@ function Field({
                           type="button"
                           onClick={() => move(index, 1)}
                           className="bg-default text-muted hover:text-emphasis invisible flex h-6 w-6 scale-0 items-center   justify-center rounded-md border p-1 transition-all hover:border-transparent  hover:shadow group-hover:visible group-hover:scale-100 ">
-                          <ArrowDown />
+                          <Icon name="arrow-down" />
                         </button>
                       ) : null}
                     </div>
@@ -298,7 +297,7 @@ function Field({
                             type="button"
                             onClick={() => handleRemoveOptions(index)}
                             aria-label={t("remove")}>
-                            <X className="h-4 w-4" />
+                            <Icon name="x" className="h-4 w-4" />
                           </button>
                         }
                       />
@@ -311,7 +310,7 @@ function Field({
                   data-testid="add-attribute"
                   className="border-none"
                   type="button"
-                  StartIcon={Plus}
+                  StartIcon="plus"
                   color="secondary"
                   onClick={handleAddOptions}>
                   Add an option
@@ -425,7 +424,7 @@ const FormEdit = ({
             <Button
               data-testid="add-field"
               type="button"
-              StartIcon={Plus}
+              StartIcon="plus"
               color="secondary"
               onClick={addField}>
               Add field
@@ -437,7 +436,7 @@ const FormEdit = ({
   ) : (
     <div className="bg-default w-full">
       <EmptyScreen
-        Icon={FileText}
+        Icon="file-text"
         headline="Create your first field"
         description="Fields are the form fields that the booker would see."
         buttonRaw={
diff --git a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
index 92831e8d1b..48a37cc6ed 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -19,33 +19,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
 import {
+  ArrowButton,
   Badge,
   Button,
   ButtonGroup,
   CreateButtonWithTeamsList,
   EmptyScreen,
+  Icon,
   List,
   ListLinkItem,
   Tooltip,
-  ArrowButton,
 } from "@calcom/ui";
-import {
-  BarChart,
-  CheckCircle,
-  Code,
-  Copy,
-  Download,
-  Edit,
-  ExternalLink,
-  FileText,
-  GitMerge,
-  Link as LinkIcon,
-  Mail,
-  Menu,
-  MessageCircle,
-  Shuffle,
-  Trash,
-} from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -110,32 +94,32 @@ export default function RoutingForms({
   const forms = queryRes.data?.filtered;
   const features = [
     {
-      icon: <FileText className="h-5 w-5 text-orange-500" />,
+      icon: <Icon name="file-text" className="h-5 w-5 text-orange-500" />,
       title: t("create_your_first_form"),
       description: t("create_your_first_form_description"),
     },
     {
-      icon: <Shuffle className="h-5 w-5 text-lime-500" />,
+      icon: <Icon name="shuffle" className="h-5 w-5 text-lime-500" />,
       title: t("create_your_first_route"),
       description: t("route_to_the_right_person"),
     },
     {
-      icon: <BarChart className="h-5 w-5 text-blue-500" />,
+      icon: <Icon name="bar-chart" className="h-5 w-5 text-blue-500" />,
       title: t("reporting"),
       description: t("reporting_feature"),
     },
     {
-      icon: <CheckCircle className="h-5 w-5 text-teal-500" />,
+      icon: <Icon name="circle-check" className="h-5 w-5 text-teal-500" />,
       title: t("test_routing_form"),
       description: t("test_preview_description"),
     },
     {
-      icon: <Mail className="h-5 w-5 text-yellow-500" />,
+      icon: <Icon name="mail" className="h-5 w-5 text-yellow-500" />,
       title: t("routing_forms_send_email_owner"),
       description: t("routing_forms_send_email_owner_description"),
     },
     {
-      icon: <Download className="h-5 w-5 text-violet-500" />,
+      icon: <Icon name="download" className="h-5 w-5 text-violet-500" />,
       title: t("download_responses"),
       description: t("download_responses_description"),
     },
@@ -199,7 +183,7 @@ export default function RoutingForms({
                   queryRes={queryRes}
                   emptyScreen={
                     <EmptyScreen
-                      Icon={GitMerge}
+                      Icon="git-merge"
                       headline={t("create_your_first_form")}
                       description={t("create_your_first_form_description")}
                       buttonRaw={<NewFormButton />}
@@ -207,7 +191,7 @@ export default function RoutingForms({
                   }
                   noResultsScreen={
                     <EmptyScreen
-                      Icon={GitMerge}
+                      Icon="git-merge"
                       headline={t("no_results_for_filter")}
                       description={t("change_filter_common")}
                     />
@@ -265,7 +249,7 @@ export default function RoutingForms({
                                         action="preview"
                                         routingForm={form}
                                         target="_blank"
-                                        StartIcon={ExternalLink}
+                                        StartIcon="external-link"
                                         color="secondary"
                                         variant="icon"
                                       />
@@ -275,7 +259,7 @@ export default function RoutingForms({
                                       action="copyLink"
                                       color="secondary"
                                       variant="icon"
-                                      StartIcon={LinkIcon}
+                                      StartIcon="link"
                                       tooltip={t("copy_link_to_form")}
                                     />
                                     <FormAction
@@ -283,7 +267,7 @@ export default function RoutingForms({
                                       action="embed"
                                       color="secondary"
                                       variant="icon"
-                                      StartIcon={Code}
+                                      StartIcon="code"
                                       tooltip={t("embed")}
                                     />
                                     <FormActionsDropdown disabled={readOnly}>
@@ -292,14 +276,14 @@ export default function RoutingForms({
                                         routingForm={form}
                                         color="minimal"
                                         className="!flex"
-                                        StartIcon={Edit}>
+                                        StartIcon="pencil">
                                         {t("edit")}
                                       </FormAction>
                                       <FormAction
                                         action="download"
                                         routingForm={form}
                                         color="minimal"
-                                        StartIcon={Download}>
+                                        StartIcon="download">
                                         {t("download_responses")}
                                       </FormAction>
                                       <FormAction
@@ -307,7 +291,7 @@ export default function RoutingForms({
                                         routingForm={form}
                                         color="minimal"
                                         className="w-full"
-                                        StartIcon={Copy}>
+                                        StartIcon="copy">
                                         {t("duplicate")}
                                       </FormAction>
                                       {typeformApp?.isInstalled ? (
@@ -317,7 +301,7 @@ export default function RoutingForms({
                                           action="copyRedirectUrl"
                                           color="minimal"
                                           type="button"
-                                          StartIcon={LinkIcon}>
+                                          StartIcon="link">
                                           {t("Copy Typeform Redirect Url")}
                                         </FormAction>
                                       ) : null}
@@ -326,7 +310,7 @@ export default function RoutingForms({
                                         routingForm={form}
                                         color="destructive"
                                         className="w-full"
-                                        StartIcon={Trash}>
+                                        StartIcon="trash">
                                         {t("delete")}
                                       </FormAction>
                                     </FormActionsDropdown>
@@ -334,13 +318,13 @@ export default function RoutingForms({
                                 </>
                               }>
                               <div className="flex flex-wrap gap-1">
-                                <Badge variant="gray" startIcon={Menu}>
+                                <Badge variant="gray" startIcon="menu">
                                   {fields.length} {fields.length === 1 ? "field" : "fields"}
                                 </Badge>
-                                <Badge variant="gray" startIcon={GitMerge}>
+                                <Badge variant="gray" startIcon="git-merge">
                                   {userRoutes.length} {userRoutes.length === 1 ? "route" : "routes"}
                                 </Badge>
-                                <Badge variant="gray" startIcon={MessageCircle}>
+                                <Badge variant="gray" startIcon="message-circle">
                                   {form._count.responses}{" "}
                                   {form._count.responses === 1 ? "response" : "responses"}
                                 </Badge>
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 010d447d77..9dc4032c00 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -7,7 +7,6 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Form, showToast, TextField } from "@calcom/ui";
-import { Check, X } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -102,7 +101,7 @@ export default function SendgridSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
+                    StartIcon={testPassed === undefined ? undefined : testPassed ? "check" : "x"}
                     className={
                       testPassed !== undefined
                         ? testPassed
diff --git a/packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx b/packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx
index c79e7ecff2..92b9a9533d 100644
--- a/packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/templates/event-type-app-card/components/EventTypeAppCardInterface.tsx
@@ -2,7 +2,7 @@ import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { Sunrise, Sunset } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import type { appDataSchema } from "../zod";
 
@@ -27,8 +27,10 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       teamId={eventType.team?.id || undefined}>
       <div className="mt-2 text-sm">
         <div className="flex">
-          <span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <Sunrise /> : <Sunset />}</span>I am an AppCard for
-          Event with Title: {eventType.title}
+          <span className="ltr:mr-2 rtl:ml-2">
+            <Icon name={isSunrise ? "sunrise" : "sunset"} />
+          </span>
+          I am an AppCard for Event with Title: {eventType.title}
         </div>{" "}
         <div className="mt-2">
           Edit <span className="italic">packages/app-store/{app.slug}/EventTypeAppCardInterface.tsx</span> to
diff --git a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
index 01a8f3442c..f455de2b9a 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -1,8 +1,7 @@
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui";
-import { ExternalLink } from "@calcom/ui/components/icon";
+import { Button, Icon } from "@calcom/ui";
 
 export default function HowToUse() {
   const { t } = useLocale();
@@ -31,7 +30,11 @@ export default function HowToUse() {
                   href="/api/app-store/typeform/copy-typeform-redirect-url.png"
                   target="_blank"
                   className="text-subtle inline-flex items-baseline text-base">
-                  <ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <Icon
+                    name="external-link"
+                    className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2"
+                    aria-hidden="true"
+                  />
                   Click &quot;Copy Typeform Redirect URL&quot;
                 </Link>
               </li>
@@ -42,7 +45,11 @@ export default function HowToUse() {
                   href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
                   target="_blank"
                   className="text-subtle inline-flex items-baseline text-base">
-                  <ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <Icon
+                    name="external-link"
+                    className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2"
+                    aria-hidden="true"
+                  />
                   Redirect to your typeform
                 </Link>
               </li>
@@ -52,7 +59,11 @@ export default function HowToUse() {
                   href="https://www.typeform.com/help/a/use-recall-information-to-reference-typeform-answers-variables-and-more-360052320011/"
                   target="_blank"
                   className="text-subtle inline-flex items-baseline text-base">
-                  <ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <Icon
+                    name="external-link"
+                    className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2"
+                    aria-hidden="true"
+                  />
                   Recall Information in Typeform
                 </Link>{" "}
                 to add values to query params.
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index f935f04e39..5e02ed9720 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -6,8 +6,7 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import logger from "@calcom/lib/logger";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, showToast } from "@calcom/ui";
-import { Clock } from "@calcom/ui/components/icon";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, Icon, showToast } from "@calcom/ui";
 
 interface IConfirmDialogWipe {
   isOpenDialog: boolean;
@@ -80,7 +79,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
       <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <Clock className="m-auto h-5 w-5" />
+            <Icon name="clock" className="m-auto h-5 w-5" />
           </div>
           <div className="pt-1">
             <DialogHeader title="Wipe My Calendar" />
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index c07914e509..0294f02cdd 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -5,8 +5,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Tooltip, showToast } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
+import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
 
 export interface IZapierSetupProps {
   inviteLink?: string;
@@ -166,7 +165,7 @@ const CopyApiKey = ({ apiKey }: { apiKey: string }) => {
             }}
             type="button"
             className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-            <Clipboard className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
+            <Icon name="clipboard" className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
             {t("copy")}
           </Button>
         </Tooltip>
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index ee7bf677ae..115930e1a9 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -23,6 +23,7 @@ import {
   DialogFooter,
   EmptyScreen,
   Form,
+  Icon,
   List,
   showToast,
   SkeletonButton,
@@ -31,7 +32,6 @@ import {
   Switch,
   TextField,
 } from "@calcom/ui";
-import { AlertCircle, Edit } from "@calcom/ui/components/icon";
 
 import AppListCard from "../../../apps/web/components/AppListCard";
 
@@ -93,7 +93,7 @@ const IntegrationContainer = ({
           <div className="flex items-center justify-self-end">
             {app.keys && (
               <Button color="secondary" className="mr-2" onClick={() => showKeyModal()}>
-                <Edit />
+                <Icon name="pencil" />
               </Button>
             )}
 
@@ -296,7 +296,7 @@ const AdminAppsListContainer = () => {
   if (!apps || apps.length === 0) {
     return (
       <EmptyScreen
-        Icon={AlertCircle}
+        Icon="circle-alert"
         headline={t("no_available_apps")}
         description={t("no_available_apps_description")}
       />
diff --git a/packages/features/apps/components/AppSetDefaultLinkDialog.tsx b/packages/features/apps/components/AppSetDefaultLinkDialog.tsx
index 4e1c7c3d0f..825a245d1f 100644
--- a/packages/features/apps/components/AppSetDefaultLinkDialog.tsx
+++ b/packages/features/apps/components/AppSetDefaultLinkDialog.tsx
@@ -8,16 +8,15 @@ import { getEventLocationType } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
-  showToast,
-  Dialog,
-  DialogContent,
-  Form,
-  TextField,
-  DialogFooter,
   Button,
+  Dialog,
   DialogClose,
+  DialogContent,
+  DialogFooter,
+  Form,
+  showToast,
+  TextField,
 } from "@calcom/ui";
-import { AlertCircle } from "@calcom/ui/components/icon";
 
 type LocationTypeSetLinkDialogFormProps = {
   link?: string;
@@ -57,7 +56,7 @@ export function AppSetDefaultLinkDialog({
         title={t("default_app_link_title")}
         description={t("default_app_link_description")}
         type="creation"
-        Icon={AlertCircle}>
+        Icon="circle-alert">
         <Form
           form={form}
           handleSubmit={(values) => {
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index 73ec96c5f6..b5f1fd3adf 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -4,7 +4,6 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { ButtonProps } from "@calcom/ui";
 import { Button, ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@calcom/ui";
-import { Trash } from "@calcom/ui/components/icon";
 
 export default function DisconnectIntegration({
   credentialId,
@@ -47,7 +46,7 @@ export default function DisconnectIntegration({
         <DialogTrigger asChild>
           <Button
             color={buttonProps?.color || "destructive"}
-            StartIcon={trashIcon ? Trash : undefined}
+            StartIcon={!trashIcon ? undefined : "trash"}
             size="base"
             variant={trashIcon && !label ? "icon" : "button"}
             disabled={isGlobal}
diff --git a/packages/features/auth/SAMLLogin.tsx b/packages/features/auth/SAMLLogin.tsx
index bf263db744..b0d9973d5f 100644
--- a/packages/features/auth/SAMLLogin.tsx
+++ b/packages/features/auth/SAMLLogin.tsx
@@ -6,8 +6,7 @@ import z from "zod";
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui";
-import { Lock } from "@calcom/ui/components/icon";
+import { Button, Icon } from "@calcom/ui";
 
 interface Props {
   samlTenantID: string;
@@ -34,7 +33,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
 
   return (
     <Button
-      StartIcon={Lock}
+      StartIcon="lock"
       color="secondary"
       data-testid="saml"
       className="flex w-full justify-center"
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 30e6352f19..95c180cc2b 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -1,14 +1,13 @@
 import type { TFunction } from "next-i18next";
 import { Trans } from "next-i18next";
 import Link from "next/link";
-import { useState, useMemo } from "react";
+import { useMemo, useState } from "react";
 import type { FieldError } from "react-hook-form";
 
 import { IS_CALCOM, WEBSITE_URL } from "@calcom/lib/constants";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Alert, Button, EmptyScreen, Form } from "@calcom/ui";
-import { Calendar } from "@calcom/ui/components/icon";
+import { Alert, Button, EmptyScreen, Form, Icon } from "@calcom/ui";
 
 import { useBookerStore } from "../../store";
 import type { useEventReturnType } from "../../utils/event";
@@ -70,7 +69,7 @@ export const BookEventForm = ({
       <EmptyScreen
         headline={t("timeslot_missing_title")}
         description={t("timeslot_missing_description")}
-        Icon={Calendar}
+        Icon="calendar"
         buttonText={t("timeslot_missing_cta")}
         buttonOnClick={onCancel}
       />
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
index 34b9faac81..ab399400c4 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx
@@ -1,4 +1,3 @@
-import { Calendar, Clock } from "lucide-react";
 import type { ReactNode } from "react";
 
 import { useIsPlatform, useGetEventTypeById } from "@calcom/atoms/monorepo";
@@ -55,13 +54,13 @@ export const BookEventFormWrapperComponent = ({
     <>
       <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
       <div className="my-4 flex space-x-2 rounded-md leading-none">
-        <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">
+        <Badge variant="grayWithoutHover" startIcon="calendar" size="lg">
           <span>
             {parsedSelectedTimeslot.format("LL")} {parsedSelectedTimeslot.tz(timezone).format(timeFormat)}
           </span>
         </Badge>
         {(selectedDuration || eventLength) && (
-          <Badge variant="grayWithoutHover" startIcon={Clock} size="lg">
+          <Badge variant="grayWithoutHover" startIcon="clock" size="lg">
             <span>{selectedDuration || eventLength}</span>
           </Badge>
         )}
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 9e87e75dad..284ae0d66b 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -1,6 +1,6 @@
 import { m } from "framer-motion";
 import dynamic from "next/dynamic";
-import { useMemo, useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { shallow } from "zustand/shallow";
 
 import { Timezone as PlatformTimezoneSelect } from "@calcom/atoms/monorepo";
@@ -10,7 +10,6 @@ import { SeatsAvailabilityText } from "@calcom/features/bookings/components/Seat
 import { EventMetaBlock } from "@calcom/features/bookings/components/event-meta/Details";
 import { useTimePreferences } from "@calcom/features/bookings/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Calendar, Globe, User } from "@calcom/ui/components/icon";
 
 import { fadeInUp } from "../config";
 import { useBookerStore } from "../store";
@@ -101,7 +100,7 @@ export const EventMeta = ({
           )}
           <div className="space-y-4 font-medium rtl:-mr-2">
             {rescheduleUid && bookingData && (
-              <EventMetaBlock icon={Calendar}>
+              <EventMetaBlock icon="calendar">
                 {t("former_time")}
                 <br />
                 <span className="line-through" data-testid="former_time_p">
@@ -116,7 +115,7 @@ export const EventMeta = ({
               </EventMetaBlock>
             )}
             {selectedTimeslot && (
-              <EventMetaBlock icon={Calendar}>
+              <EventMetaBlock icon="calendar">
                 <FromToTime
                   date={selectedTimeslot}
                   duration={selectedDuration || event.length}
@@ -131,7 +130,7 @@ export const EventMeta = ({
             <EventMetaBlock
               className="cursor-pointer [&_.current-timezone:before]:focus-within:opacity-100 [&_.current-timezone:before]:hover:opacity-100"
               contentClassName="relative max-w-[90%]"
-              icon={Globe}>
+              icon="globe">
               {bookerState === "booking" ? (
                 <>{timezone}</>
               ) : (
@@ -156,7 +155,7 @@ export const EventMeta = ({
               )}
             </EventMetaBlock>
             {bookerState === "booking" && eventTotalSeats && bookingSeatAttendeesQty ? (
-              <EventMetaBlock icon={User} className={`${colorClass}`}>
+              <EventMetaBlock icon="user" className={`${colorClass}`}>
                 <div className="text-bookinghighlight flex items-start text-sm">
                   <p>
                     <SeatsAvailabilityText
diff --git a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
index de2fe1db0a..a72dcf33e6 100644
--- a/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
+++ b/packages/features/bookings/Booker/components/HavingTroubleFindingTime.tsx
@@ -1,8 +1,8 @@
-import { ArrowRight, InfoIcon } from "lucide-react";
 import { useState } from "react";
 
 import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui";
 
 type Props = {
   onButtonClick: () => void;
@@ -30,7 +30,7 @@ export function HavingTroubleFindingTime(props: Props) {
   return (
     <div className="bg-default border-subtle mt-6 flex w-1/2 min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm lg:w-1/3">
       <div className="flex items-center gap-2 overflow-x-hidden">
-        <InfoIcon className="text-default h-4 w-4" />
+        <Icon name="info" className="text-default h-4 w-4" />
         <p className="w-full  leading-none">{t("having_trouble_finding_time")}</p>
       </div>
       {/* TODO: we should give this more of a touch target on mobile */}
@@ -41,7 +41,7 @@ export function HavingTroubleFindingTime(props: Props) {
           props.onButtonClick();
           setInternalClick(true);
         }}>
-        {t("show_more")} <ArrowRight className="h-4 w-4" />
+        {t("show_more")} <Icon name="arrow-right" className="h-4 w-4" />
       </button>
     </div>
   );
diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index a04c1aa0b3..1c13399ed8 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -1,4 +1,3 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useCallback, useMemo } from "react";
 import { shallow } from "zustand/shallow";
 
@@ -7,8 +6,7 @@ import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { BookerLayouts } from "@calcom/prisma/zod-utils";
-import { Button, ButtonGroup, ToggleGroup, Tooltip } from "@calcom/ui";
-import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
+import { Button, ButtonGroup, Icon, ToggleGroup, Tooltip } from "@calcom/ui";
 
 import { TimeFormatToggle } from "../../components/TimeFormatToggle";
 import { useBookerStore } from "../store";
@@ -111,7 +109,7 @@ export function Header({
             className="group rtl:ml-1 rtl:rotate-180"
             variant="icon"
             color="minimal"
-            StartIcon={ChevronLeft}
+            StartIcon="chevron-left"
             aria-label="Previous Day"
             onClick={() => addToSelectedDate(layout === BookerLayouts.COLUMN_VIEW ? -nextSlots : -extraDays)}
           />
@@ -119,7 +117,7 @@ export function Header({
             className="group rtl:mr-1 rtl:rotate-180"
             variant="icon"
             color="minimal"
-            StartIcon={ChevronRight}
+            StartIcon="chevron-right"
             aria-label="Next Day"
             onClick={() => addToSelectedDate(layout === BookerLayouts.COLUMN_VIEW ? nextSlots : extraDays)}
           />
@@ -179,17 +177,17 @@ const LayoutToggle = ({
     return [
       {
         value: BookerLayouts.MONTH_VIEW,
-        label: <Calendar width="16" height="16" />,
+        label: <Icon name="calendar" width="16" height="16" />,
         tooltip: t("switch_monthly"),
       },
       {
         value: BookerLayouts.WEEK_VIEW,
-        label: <Grid width="16" height="16" />,
+        label: <Icon name="grid-3x3" width="16" height="16" />,
         tooltip: t("switch_weekly"),
       },
       {
         value: BookerLayouts.COLUMN_VIEW,
-        label: <Columns width="16" height="16" />,
+        label: <Icon name="columns-3" width="16" height="16" />,
         tooltip: t("switch_columnview"),
       },
     ].filter((layout) => enabledLayouts?.includes(layout.value as BookerLayouts));
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
index 69a93cdd3b..9c8ba5d4db 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarContinueModal.tsx
@@ -1,5 +1,3 @@
-import { CalendarSearch } from "lucide-react";
-
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Dialog, DialogContent, DialogFooter } from "@calcom/ui";
@@ -26,7 +24,7 @@ export function OverlayCalendarContinueModal(props: IOverlayCalendarContinueModa
                 props.onContinue();
               }}
               className="gap w-full items-center justify-center font-semibold"
-              StartIcon={CalendarSearch}>
+              StartIcon="calendar-search">
               {t("continue_with", { appName: APP_NAME })}
             </Button>
           </div>
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
index 216cc573b1..ab4eeaef6f 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
@@ -6,17 +6,17 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   Alert,
   Dialog,
+  DialogClose,
   DialogContent,
   EmptyScreen,
+  Icon,
   ListItem,
   ListItemText,
   ListItemTitle,
-  Switch,
-  DialogClose,
   SkeletonContainer,
   SkeletonText,
+  Switch,
 } from "@calcom/ui";
-import { Calendar } from "@calcom/ui/components/icon";
 
 import type { UseCalendarsReturnType } from "../hooks/useCalendars";
 
@@ -70,7 +70,7 @@ export function OverlayCalendarSettingsModal({
               <>
                 {connectedCalendars.length === 0 ? (
                   <EmptyScreen
-                    Icon={Calendar}
+                    Icon="calendar"
                     headline={t("no_calendar_installed")}
                     description={t("no_calendar_installed_description")}
                     buttonText={t("add_a_calendar")}
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
index a795908449..ac6ac18fe9 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSwitch.tsx
@@ -3,7 +3,6 @@ import { useEffect } from "react";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Switch } from "@calcom/ui";
-import { Settings } from "@calcom/ui/components/icon";
 
 import { useBookerStore } from "../../store";
 import { useOverlayCalendarStore } from "./store";
@@ -65,7 +64,7 @@ export function OverlayCalendarSwitch({ enabled, hasSession, onStateChange }: Ov
           data-testid="overlay-calendar-settings-button"
           variant="icon"
           color="secondary"
-          StartIcon={Settings}
+          StartIcon="settings"
           onClick={() => {
             setCalendarSettingsOverlay(true);
           }}
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 0d9ff9f00d..e4bda986d2 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -1,7 +1,6 @@
 // We do not need to worry about importing framer-motion here as it is lazy imported in Booker.
 import * as HoverCard from "@radix-ui/react-hover-card";
 import { AnimatePresence, m } from "framer-motion";
-import { CalendarX2, ChevronRight } from "lucide-react";
 import { useCallback, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
@@ -9,7 +8,7 @@ import type { Slots } from "@calcom/features/schedules";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
-import { Button, SkeletonText } from "@calcom/ui";
+import { Button, Icon, SkeletonText } from "@calcom/ui";
 
 import { useBookerStore } from "../Booker/store";
 import type { useEventReturnType } from "../Booker/utils/event";
@@ -155,7 +154,9 @@ const SlotItem = ({
               <m.div initial={{ width: 0 }} animate={{ width: "auto" }} exit={{ width: 0 }}>
                 <Button
                   variant={layout === "column_view" ? "icon" : "button"}
-                  StartIcon={layout === "column_view" ? ChevronRight : undefined}
+                  StartIcon={
+                    layout === "column_view" ? "chevron-right" : undefined
+                  }
                   onClick={() =>
                     onTimeSelect(slot.time, slot?.attendees || 0, seatsPerTimeSlot, slot.bookingUid)
                   }>
@@ -201,7 +202,7 @@ export const AvailableTimes = ({
           <div
             data-testId="no-slots-available"
             className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
-            <CalendarX2 className="text-muted mb-2 h-4 w-4" />
+            <Icon name="calendar-x-2" className="text-muted mb-2 h-4 w-4" />
             <p className={classNames("text-muted", showTimeFormatToggle ? "-mt-1 text-lg" : "text-sm")}>
               {t("all_booked_today")}
             </p>
diff --git a/packages/features/bookings/components/EventTypeFilter.tsx b/packages/features/bookings/components/EventTypeFilter.tsx
index 81d8c44a46..7427612258 100644
--- a/packages/features/bookings/components/EventTypeFilter.tsx
+++ b/packages/features/bookings/components/EventTypeFilter.tsx
@@ -2,15 +2,13 @@ import { useSession } from "next-auth/react";
 import { Fragment, useMemo } from "react";
 
 import {
-  FilterCheckboxFieldsContainer,
   FilterCheckboxField,
+  FilterCheckboxFieldsContainer,
 } from "@calcom/features/filters/components/TeamsFilter";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover } from "@calcom/ui";
-import { Divider } from "@calcom/ui";
-import { Link } from "@calcom/ui/components/icon";
+import { AnimatedPopover, Divider, Icon } from "@calcom/ui";
 
 import { groupBy } from "../groupBy";
 import { useFilterQuery } from "../lib/useFilterQuery";
@@ -72,7 +70,7 @@ export const EventTypeFilter = () => {
         <FilterCheckboxFieldsContainer>
           <FilterCheckboxField
             id="all"
-            icon={<Link className="h-4 w-4" />}
+            icon={<Icon name="link" className="h-4 w-4" />}
             checked={!query.eventTypeIds?.length}
             onChange={removeAllQueryParams}
             label={t("all_event_types_filter_label")}
diff --git a/packages/features/bookings/components/FilterToggle.tsx b/packages/features/bookings/components/FilterToggle.tsx
index 32ef451a4f..a27dd8f4d6 100644
--- a/packages/features/bookings/components/FilterToggle.tsx
+++ b/packages/features/bookings/components/FilterToggle.tsx
@@ -2,8 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Tooltip, Badge, Button } from "@calcom/ui";
-import { Filter } from "@calcom/ui/components/icon";
+import { Badge, Button, Icon, Tooltip } from "@calcom/ui";
 
 export interface FilterToggleProps {
   setIsFiltersVisible: Dispatch<SetStateAction<boolean>>;
@@ -21,7 +20,7 @@ export function FilterToggle({ setIsFiltersVisible }: FilterToggleProps) {
 
   return (
     <Button color="secondary" onClick={toggleFiltersVisibility} className="mb-4">
-      <Filter className="h-4 w-4" />
+      <Icon name="filter" className="h-4 w-4" />
       <Tooltip content={t("filters")}>
         <div className="mx-2">{t("filters")}</div>
       </Tooltip>
diff --git a/packages/features/bookings/components/PeopleFilter.tsx b/packages/features/bookings/components/PeopleFilter.tsx
index f5a1666a5a..445ab8c917 100644
--- a/packages/features/bookings/components/PeopleFilter.tsx
+++ b/packages/features/bookings/components/PeopleFilter.tsx
@@ -3,14 +3,13 @@ import { useState } from "react";
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import {
-  FilterCheckboxFieldsContainer,
   FilterCheckboxField,
+  FilterCheckboxFieldsContainer,
 } from "@calcom/features/filters/components/TeamsFilter";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, Divider, FilterSearchField } from "@calcom/ui";
-import { User } from "@calcom/ui/components/icon";
+import { AnimatedPopover, Avatar, Divider, FilterSearchField, Icon } from "@calcom/ui";
 
 export const PeopleFilter = () => {
   const { t } = useLocale();
@@ -43,7 +42,7 @@ export const PeopleFilter = () => {
       <FilterCheckboxFieldsContainer>
         <FilterCheckboxField
           id="all"
-          icon={<User className="h-4 w-4" />}
+          icon={<Icon name="user" className="h-4 w-4" />}
           checked={!query.userIds?.length}
           onChange={removeAllQueryParams}
           label={t("all_users_filter_label")}
diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx
index 3036b62d23..254bd9bad4 100644
--- a/packages/features/bookings/components/VerifyCodeDialog.tsx
+++ b/packages/features/bookings/components/VerifyCodeDialog.tsx
@@ -1,5 +1,5 @@
 import type { Dispatch, SetStateAction } from "react";
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import useDigitInput from "react-digit-input";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -10,10 +10,10 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
-  Label,
+  Icon,
   Input,
+  Label,
 } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
 
 export const VerifyCodeDialog = ({
   isOpenDialog,
@@ -116,7 +116,7 @@ export const VerifyCodeDialog = ({
             {error && (
               <div className="mt-2 flex items-center gap-x-2 text-sm text-red-700">
                 <div>
-                  <Info className="h-3 w-3" />
+                  <Icon name="info" className="h-3 w-3" />
                 </div>
                 <p>{error}</p>
               </div>
diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index b9a660c524..2effedd45c 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -8,9 +8,7 @@ import { useIsPlatform } from "@calcom/atoms/monorepo";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
-import { Tooltip } from "@calcom/ui";
-import { Link } from "@calcom/ui/components/icon";
-import { Video } from "@calcom/ui/components/icon";
+import { Icon, Tooltip } from "@calcom/ui";
 
 const excludeNullValues = (value: unknown) => !!value;
 
@@ -24,7 +22,7 @@ function RenderIcon({
   const isPlatform = useIsPlatform();
 
   if (isPlatform) {
-    return <Video className="me-[10px] h-4 w-4" />;
+    return <Icon name="video" className="me-[10px] h-4 w-4" />;
   }
 
   return (
@@ -87,7 +85,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
       return (
         <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
           {eventLocationType.iconUrl === "/link.svg" ? (
-            <Link className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+            <Icon name="link" className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
           ) : (
             <RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
           )}
diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx
index 8ed2d080ea..030cd704e8 100644
--- a/packages/features/bookings/components/event-meta/Details.tsx
+++ b/packages/features/bookings/components/event-meta/Details.tsx
@@ -1,12 +1,11 @@
-import { Fragment } from "react";
-import React from "react";
+import React, { Fragment } from "react";
 
 import { useBookerStore } from "@calcom/features/bookings/Booker/store";
+import { PriceIcon } from "@calcom/features/bookings/components/event-meta/PriceIcon";
 import classNames from "@calcom/lib/classNames";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Clock, CheckSquare, RefreshCcw } from "@calcom/ui/components/icon";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+import { Icon, type IconName } from "@calcom/ui";
 
 import type { PublicEvent } from "../../types";
 import { EventDetailBlocks } from "../../types";
@@ -14,7 +13,6 @@ import { AvailableEventLocations } from "./AvailableEventLocations";
 import { EventDuration } from "./Duration";
 import { EventOccurences } from "./Occurences";
 import { Price } from "./Price";
-import { getPriceIcon } from "./getPriceIcon";
 
 type EventDetailsPropsBase = {
   event: PublicEvent;
@@ -35,7 +33,9 @@ type EventDetailCustomBlock = {
 type EventDetailsProps = EventDetailsPropsBase & (EventDetailDefaultBlock | EventDetailCustomBlock);
 
 interface EventMetaProps {
-  icon?: React.FC<{ className: string }> | string | LucideIcon;
+  customIcon?: React.ReactNode;
+  icon?: IconName;
+  iconUrl?: string;
   children: React.ReactNode;
   // Emphasises the text in the block. For now only
   // applying in dark mode.
@@ -61,7 +61,9 @@ const defaultEventDetailsBlocks = [
  * rendered in a consistent way — adds an icon and children (text usually).
  */
 export const EventMetaBlock = ({
-  icon: Icon,
+  customIcon,
+  icon,
+  iconUrl,
   children,
   highlight,
   contentClassName,
@@ -77,9 +79,9 @@ export const EventMetaBlock = ({
         highlight ? "text-emphasis" : "text-text",
         className
       )}>
-      {typeof Icon === "string" ? (
+      {iconUrl ? (
         <img
-          src={Icon}
+          src={iconUrl}
           alt=""
           // @TODO: Use SVG's instead of images, so we can get rid of the filter.
           className={classNames(
@@ -89,7 +91,12 @@ export const EventMetaBlock = ({
           )}
         />
       ) : (
-        <>{!!Icon && <Icon className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0 rtl:ml-2" />}</>
+        <>
+          {customIcon ||
+            (!!icon && (
+              <Icon name={icon} className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0 rtl:ml-2" />
+            ))}
+        </>
       )}
       <div className={classNames("relative z-10 max-w-full break-words", contentClassName)}>{children}</div>
     </div>
@@ -125,7 +132,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
         switch (block) {
           case EventDetailBlocks.DURATION:
             return (
-              <EventMetaBlock key={block} icon={Clock}>
+              <EventMetaBlock key={block} icon="clock">
                 <EventDuration event={event} />
               </EventMetaBlock>
             );
@@ -142,7 +149,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
             if (!event.requiresConfirmation) return null;
 
             return (
-              <EventMetaBlock key={block} icon={CheckSquare}>
+              <EventMetaBlock key={block} icon="square-check">
                 {t("requires_confirmation")}
               </EventMetaBlock>
             );
@@ -151,7 +158,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
             if (!event.recurringEvent || rescheduleUid) return null;
 
             return (
-              <EventMetaBlock key={block} icon={RefreshCcw}>
+              <EventMetaBlock key={block} icon="refresh-ccw">
                 <EventOccurences event={event} />
               </EventMetaBlock>
             );
@@ -161,7 +168,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
             if (event.price <= 0 || paymentAppData.price <= 0) return null;
 
             return (
-              <EventMetaBlock key={block} icon={getPriceIcon(event.currency)}>
+              <EventMetaBlock key={block} customIcon={<PriceIcon currency={event.currency} />}>
                 <Price
                   price={paymentAppData.price}
                   currency={event.currency}
diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx
index 26d144d832..81594d026b 100644
--- a/packages/features/bookings/components/event-meta/Locations.tsx
+++ b/packages/features/bookings/components/event-meta/Locations.tsx
@@ -2,7 +2,6 @@ import { getEventLocationType, getTranslatedLocation } from "@calcom/app-store/l
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
-import { MapPin } from "@calcom/ui/components/icon";
 
 import type { PublicEvent } from "../../types";
 import { EventMetaBlock } from "./Details";
@@ -20,10 +19,11 @@ export const EventLocations = ({ event }: { event: PublicEvent }) => {
     return translatedLocation;
   };
   const eventLocationType = getEventLocationType(locations[0].type);
-  const icon = locations.length > 1 || !eventLocationType?.iconUrl ? MapPin : eventLocationType.iconUrl;
+  const iconUrl = locations.length > 1 || !eventLocationType?.iconUrl ? undefined : eventLocationType.iconUrl;
+  const icon = locations.length > 1 || !eventLocationType?.iconUrl ? "map-pin" : undefined;
 
   return (
-    <EventMetaBlock icon={icon} isDark={eventLocationType?.iconUrl?.includes("-dark")}>
+    <EventMetaBlock iconUrl={iconUrl} icon={icon} isDark={eventLocationType?.iconUrl?.includes("-dark")}>
       {locations.length === 1 && (
         <Tooltip content={getLocationToDisplay(locations[0])}>
           <div className="" key={locations[0].type}>
diff --git a/packages/features/bookings/components/event-meta/PayIcon.tsx b/packages/features/bookings/components/event-meta/PayIcon.tsx
new file mode 100644
index 0000000000..b723c04ea0
--- /dev/null
+++ b/packages/features/bookings/components/event-meta/PayIcon.tsx
@@ -0,0 +1,6 @@
+import { Icon } from "@calcom/ui";
+
+export function PayIcon(props: { currency: string; className?: string }) {
+  const { className, currency } = props;
+  return <Icon name={currency !== "BTC" ? "credit-card" : "zap"} className={className} />;
+}
diff --git a/packages/features/bookings/components/event-meta/PriceIcon.tsx b/packages/features/bookings/components/event-meta/PriceIcon.tsx
new file mode 100644
index 0000000000..dd48d79205
--- /dev/null
+++ b/packages/features/bookings/components/event-meta/PriceIcon.tsx
@@ -0,0 +1,8 @@
+import { Icon } from "@calcom/ui";
+import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
+
+export function PriceIcon(props: { currency: string; className?: string }) {
+  const { className, currency } = props;
+  if (currency !== "BTC") return <Icon name="credit-card" className={className} />;
+  return <SatSymbol className={className} />;
+}
diff --git a/packages/features/bookings/components/event-meta/getPayIcon.ts b/packages/features/bookings/components/event-meta/getPayIcon.ts
deleted file mode 100644
index 2c44c4cc39..0000000000
--- a/packages/features/bookings/components/event-meta/getPayIcon.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { CreditCard, Zap } from "lucide-react";
-
-import type { LucideIcon } from "@calcom/ui/components/icon";
-
-export function getPayIcon(currency: string): React.FC<{ className: string }> | string | LucideIcon {
-  return currency !== "BTC" ? CreditCard : Zap;
-}
diff --git a/packages/features/bookings/components/event-meta/getPriceIcon.ts b/packages/features/bookings/components/event-meta/getPriceIcon.ts
deleted file mode 100644
index 5a1e9a1c76..0000000000
--- a/packages/features/bookings/components/event-meta/getPriceIcon.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { CreditCard } from "lucide-react";
-
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import { SatSymbol } from "@calcom/ui/components/icon/SatSymbol";
-
-export function getPriceIcon(currency: string): React.FC<{ className: string }> | string | LucideIcon {
-  return currency !== "BTC" ? CreditCard : (SatSymbol as React.FC<{ className: string }>);
-}
diff --git a/packages/features/bookings/components/event-meta/index.ts b/packages/features/bookings/components/event-meta/index.ts
index debcc5a3ac..42cf522430 100644
--- a/packages/features/bookings/components/event-meta/index.ts
+++ b/packages/features/bookings/components/event-meta/index.ts
@@ -2,5 +2,5 @@ export { EventDetails, EventMetaBlock } from "./Details";
 export { EventTitle } from "./Title";
 export { EventMetaSkeleton } from "./Skeleton";
 export { EventMembers } from "./Members";
-export { getPriceIcon } from "./getPriceIcon";
-export { getPayIcon } from "./getPayIcon";
+export { PriceIcon } from "./PriceIcon";
+export { PayIcon } from "./PayIcon";
diff --git a/packages/features/calendars/CalendarSwitch.tsx b/packages/features/calendars/CalendarSwitch.tsx
index 4cbb86a543..d8c2b33075 100644
--- a/packages/features/calendars/CalendarSwitch.tsx
+++ b/packages/features/calendars/CalendarSwitch.tsx
@@ -4,8 +4,7 @@ import { useState } from "react";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { showToast, Switch } from "@calcom/ui";
-import { ArrowLeft, RotateCw } from "@calcom/ui/components/icon";
+import { Icon, showToast, Switch } from "@calcom/ui";
 
 interface ICalendarSwitchProps {
   title: string;
@@ -81,11 +80,13 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
       </label>
       {!!props.destination && (
         <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <ArrowLeft className="h-4 w-4" />
+          <Icon name="arrow-left" className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
       )}
-      {mutation.isPending && <RotateCw className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
+      {mutation.isPending && (
+        <Icon name="rotate-cw" className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />
+      )}
     </div>
   );
 };
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index bd1a042022..6ca6a68cd5 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -11,8 +11,6 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { Button, SkeletonText } from "@calcom/ui";
-import { ChevronLeft, ChevronRight } from "@calcom/ui/components/icon";
-import { ArrowRight } from "@calcom/ui/components/icon";
 
 export type DatePickerProps = {
   /** which day of the week to render the calendar. Usually Sunday (=0) or Monday (=1) - default: Sunday */
@@ -95,7 +93,7 @@ const NoAvailabilityOverlay = ({
   return (
     <div className="bg-muted border-subtle absolute left-1/2 top-40 -mt-10 w-max -translate-x-1/2 -translate-y-1/2 transform rounded-md border p-8 shadow-sm">
       <h4 className="text-emphasis mb-4 font-medium">{t("no_availability_in_month", { month: month })}</h4>
-      <Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight} data-testid="view_next_month">
+      <Button onClick={nextMonthButton} color="primary" EndIcon="arrow-right" data-testid="view_next_month">
         {t("view_next_month")}
       </Button>
     </div>
@@ -281,7 +279,7 @@ const DatePicker = ({
               data-testid="decrementMonth"
               color="minimal"
               variant="icon"
-              StartIcon={ChevronLeft}
+              StartIcon="chevron-left"
             />
             <Button
               className="group p-1 opacity-70 hover:opacity-100 rtl:rotate-180"
@@ -289,7 +287,7 @@ const DatePicker = ({
               data-testid="incrementMonth"
               color="minimal"
               variant="icon"
-              StartIcon={ChevronRight}
+              StartIcon="chevron-right"
             />
           </div>
         </div>
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index b4cc86e803..a05350febe 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -6,8 +6,7 @@ import { components } from "react-select";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { DestinationCalendar } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Select, Badge } from "@calcom/ui";
-import { Check } from "@calcom/ui/components/icon";
+import { Badge, Icon, Select } from "@calcom/ui";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
@@ -41,7 +40,7 @@ const OptionComponent = ({ ...props }: OptionProps<Option>) => {
     <components.Option {...props}>
       <div className="flex">
         <span className="mr-auto">{label}</span>
-        {props.isSelected && <Check className="ml-2 h-4 w-4" />}
+        {props.isSelected && <Icon name="check" className="ml-2 h-4 w-4" />}
       </div>
     </components.Option>
   );
diff --git a/packages/features/calendars/weeklyview/components/calendar.stories.mdx b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
index fb8943ec13..7ddc72c444 100644
--- a/packages/features/calendars/weeklyview/components/calendar.stories.mdx
+++ b/packages/features/calendars/weeklyview/components/calendar.stories.mdx
@@ -11,7 +11,7 @@ import { events, blockingDates } from "../_storybookData";
 import "../styles/styles.css";
 import { Calendar } from "./Calendar";
 
-<Meta title="UI/Calendar" component={Calendar} />
+<Meta title="UI/Calendar" component="calendar" />
 
 <Title title="Calendar" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
 
@@ -19,7 +19,7 @@ import { Calendar } from "./Calendar";
 
 The Args Table below shows you a breakdown of what props can be passed into the Calendar component. All props should have a desciption to make it self explanitory to see what is going on.
 
-<CustomArgsTable of={Calendar} />
+<CustomArgsTable of="calendar" />
 
 ## Example
 
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index 309da3f8ff..4ff86c79fe 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -1,6 +1,5 @@
 import dayjs from "@calcom/dayjs";
-import { Button, ButtonGroup } from "@calcom/ui";
-import { ChevronLeft, ChevronRight } from "@calcom/ui/components/icon";
+import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 import { useCalendarStore } from "../../state/store";
 
@@ -30,7 +29,7 @@ export function SchedulerHeading() {
         <ButtonGroup combined>
           {/* TODO: i18n label with correct view */}
           <Button
-            StartIcon={ChevronLeft}
+            StartIcon="chevron-left"
             variant="icon"
             color="secondary"
             aria-label="Previous Week"
@@ -39,7 +38,7 @@ export function SchedulerHeading() {
             }}
           />
           <Button
-            StartIcon={ChevronRight}
+            StartIcon="chevron-right"
             variant="icon"
             color="secondary"
             aria-label="Next Week"
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index a99b94cebd..c2ab1b305f 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -6,8 +6,17 @@ import type { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, DialogFooter, Form, showToast, Switch, TextField, Tooltip, SelectField } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
+import {
+  Button,
+  DialogFooter,
+  Form,
+  Icon,
+  SelectField,
+  showToast,
+  Switch,
+  TextField,
+  Tooltip,
+} from "@calcom/ui";
 
 export default function ApiKeyDialogForm({
   defaultValues,
@@ -96,7 +105,7 @@ export default function ApiKeyDialogForm({
                   }}
                   type="button"
                   className="rounded-l-none text-base"
-                  StartIcon={Clipboard}>
+                  StartIcon="clipboard">
                   {t("copy")}
                 </Button>
               </Tooltip>
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index 808e560729..8dc8f01058 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -13,7 +13,6 @@ import {
   DropdownMenuTrigger,
   showToast,
 } from "@calcom/ui";
-import { MoreHorizontal, Edit2, Trash } from "@calcom/ui/components/icon";
 
 export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
 
@@ -69,12 +68,12 @@ const ApiKeyListItem = ({
       <div>
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
+            <Button type="button" variant="icon" color="secondary" StartIcon="ellipsis" />
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <DropdownItem type="button" onClick={onEditClick} StartIcon={Edit2}>
+              <DropdownItem type="button" onClick={onEditClick} StartIcon="pencil">
                 {t("edit") as string}
               </DropdownItem>
             </DropdownMenuItem>
@@ -88,7 +87,7 @@ const ApiKeyListItem = ({
                     id: apiKey.id,
                   })
                 }
-                StartIcon={Trash}>
+                StartIcon="trash">
                 {t("delete") as string}
               </DropdownItem>
             </DropdownMenuItem>
diff --git a/packages/features/ee/common/components/LicenseRequired.tsx b/packages/features/ee/common/components/LicenseRequired.tsx
index 411eb44c1a..1f3422aa26 100644
--- a/packages/features/ee/common/components/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/LicenseRequired.tsx
@@ -6,7 +6,6 @@ import React, { Fragment, useEffect } from "react";
 import { SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen, Alert } from "@calcom/ui";
-import { AlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -58,7 +57,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
         </>
       ) : (
         <EmptyScreen
-          Icon={AlertTriangle}
+          Icon="triangle-alert"
           headline={t("enterprise_license")}
           description={
             <Trans i18nKey="enterprise_license_description">
diff --git a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
index 056cf43fb7..fb96fe19d7 100644
--- a/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
+++ b/packages/features/ee/dsync/components/ConfigureDirectorySync.tsx
@@ -14,7 +14,6 @@ import {
   showToast,
   EmptyScreen,
 } from "@calcom/ui";
-import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
 
 import CreateDirectory from "./CreateDirectory";
 import DirectoryInfo from "./DirectoryInfo";
@@ -57,7 +56,7 @@ const ConfigureDirectorySync = ({ organizationId }: { organizationId: number | n
         <EmptyScreen
           headline="Error"
           description={error.message || "Error getting dsync data"}
-          Icon={AlertTriangle}
+          Icon="triangle-alert"
         />
       </div>
     );
@@ -79,7 +78,7 @@ const ConfigureDirectorySync = ({ organizationId }: { organizationId: number | n
           {/* Delete directory sync connection */}
           <Dialog open={deleteDirectoryOpen} onOpenChange={setDeleteDirectoryOpen}>
             <DialogTrigger asChild>
-              <Button color="destructive" className="mt-1" StartIcon={Trash2}>
+              <Button color="destructive" className="mt-1" StartIcon="trash">
                 {t("directory_sync_delete_connection")}
               </Button>
             </DialogTrigger>
@@ -87,7 +86,7 @@ const ConfigureDirectorySync = ({ organizationId }: { organizationId: number | n
               title={t("directory_sync_delete_title")}
               description={t("directory_sync_delete_description")}
               type="creation"
-              Icon={AlertTriangle}>
+              Icon="triangle-alert">
               <>
                 <div className="mb-10">
                   <p className="text-default mb-4">{t("directory_sync_delete_confirmation")}</p>
diff --git a/packages/features/ee/dsync/components/DirectoryInfo.tsx b/packages/features/ee/dsync/components/DirectoryInfo.tsx
index 9fd2e3ba7c..43f47653a3 100644
--- a/packages/features/ee/dsync/components/DirectoryInfo.tsx
+++ b/packages/features/ee/dsync/components/DirectoryInfo.tsx
@@ -2,7 +2,7 @@ import type { Directory } from "@boxyhq/saml-jackson";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast, Label, Tooltip } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 const DirectoryInfo = ({ directory }: { directory: Directory }) => {
   const { t } = useLocale();
@@ -28,7 +28,7 @@ const DirectoryInfo = ({ directory }: { directory: Directory }) => {
               }}
               type="button"
               className="rounded-l-none text-base"
-              StartIcon={Clipboard}>
+              StartIcon="clipboard">
               {t("copy")}
             </Button>
           </Tooltip>
@@ -50,7 +50,7 @@ const DirectoryInfo = ({ directory }: { directory: Directory }) => {
               }}
               type="button"
               className="rounded-l-none text-base"
-              StartIcon={Clipboard}>
+              StartIcon="clipboard">
               {t("copy")}
             </Button>
           </Tooltip>
diff --git a/packages/features/ee/dsync/components/GroupNameCell.tsx b/packages/features/ee/dsync/components/GroupNameCell.tsx
index 06a53dc00a..2619350e73 100644
--- a/packages/features/ee/dsync/components/GroupNameCell.tsx
+++ b/packages/features/ee/dsync/components/GroupNameCell.tsx
@@ -3,8 +3,7 @@ import { useState } from "react";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, TextField, showToast } from "@calcom/ui";
-import { X, Plus } from "@calcom/ui/components/icon";
+import { Badge, Icon, showToast, TextField } from "@calcom/ui";
 
 interface GroupNameCellProps {
   groupNames: string[];
@@ -76,7 +75,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
           <div className="flex items-center space-x-2 ">
             <p>{name}</p>
             <div className="hover:bg-emphasis rounded p-1">
-              <X className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
+              <Icon name="x" className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
             </div>
           </div>
         </Badge>
@@ -106,7 +105,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
             <p>{t("add_group_name")}</p>
           )}
           <div className={classNames("rounded p-1", showTextInput && "hover:bg-emphasis ml-2")}>
-            <Plus className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
+            <Icon name="plus" className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
           </div>
         </div>
       </Badge>
diff --git a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
index 6728d25c21..0c14d27633 100644
--- a/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
+++ b/packages/features/ee/managed-event-types/hooks/useLockedFieldsManager.tsx
@@ -1,8 +1,8 @@
 // eslint-disable-next-line no-restricted-imports
 import { get } from "lodash";
 import type { TFunction } from "next-i18next";
-import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import type z from "zod";
 
@@ -11,8 +11,7 @@ import { classNames } from "@calcom/lib";
 import type { Prisma } from "@calcom/prisma/client";
 import { SchedulingType } from "@calcom/prisma/enums";
 import type { _EventTypeModel } from "@calcom/prisma/zod/eventtype";
-import { Tooltip, Badge, Switch } from "@calcom/ui";
-import { Lock, Unlock } from "@calcom/ui/components/icon";
+import { Badge, Icon, Switch, Tooltip } from "@calcom/ui";
 
 export const LockedSwitch = (
   isManagedEventType: boolean,
@@ -60,11 +59,7 @@ export const LockedIndicator = (
             )}>
             {!options.simple && (
               <span className="inline-flex">
-                {isLocked ? (
-                  <Lock className="text-subtle h-3 w-3" />
-                ) : (
-                  <Unlock className="text-subtle h-3 w-3" />
-                )}
+                <Icon name={isLocked ? "lock" : "lock-open"} className="text-subtle h-3 w-3" />
                 <span className="ml-1 font-medium">{stateText}</span>
               </span>
             )}
diff --git a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
index df1a3146c2..8559813508 100644
--- a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
@@ -6,8 +6,7 @@ import z from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Avatar, Button, Form, ImageUploader, Label, TextAreaField } from "@calcom/ui";
-import { ArrowRight, Plus } from "@calcom/ui/components/icon";
+import { Alert, Avatar, Button, Form, Icon, ImageUploader, Label, TextAreaField } from "@calcom/ui";
 
 const querySchema = z.object({
   id: z.string(),
@@ -64,7 +63,7 @@ export const AboutOrganizationForm = () => {
                 <div className="flex items-center">
                   <Avatar
                     alt=""
-                    fallback={<Plus className="text-subtle h-6 w-6" />}
+                    fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
                     className="items-center"
                     imageSrc={image}
                     size="lg"
@@ -112,7 +111,7 @@ export const AboutOrganizationForm = () => {
               aboutOrganizationFormMethods.formState.isSubmitting || updateOrganizationMutation.isPending
             }
             color="primary"
-            EndIcon={ArrowRight}
+            EndIcon="arrow-right"
             type="submit"
             className="w-full justify-center">
             {t("continue")}
diff --git a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
index 13a3067d26..d049b59d3b 100644
--- a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
+++ b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
@@ -1,7 +1,7 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { useFieldArray, useForm, Controller } from "react-hook-form";
+import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { classNames } from "@calcom/lib";
@@ -10,8 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import { UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
-import { Button, showToast, TextField, CheckboxField, Form } from "@calcom/ui";
-import { ArrowRight, Plus, X } from "@calcom/ui/components/icon";
+import { Button, CheckboxField, Form, Icon, showToast, TextField } from "@calcom/ui";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
@@ -209,7 +208,10 @@ const AddNewTeamsFormChild = ({
                     className="group/remove mx-2 px-0 hover:bg-transparent"
                     onClick={() => handleRemoveInput(index)}
                     aria-label="Remove Team">
-                    <X className="bg-subtle text group-hover/remove:text-inverted group-hover/remove:bg-inverted h-5 w-5 rounded-full p-1" />
+                    <Icon
+                      name="x"
+                      className="bg-subtle text group-hover/remove:text-inverted group-hover/remove:bg-inverted h-5 w-5 rounded-full p-1"
+                    />
                   </Button>
                 )
               }
@@ -221,7 +223,7 @@ const AddNewTeamsFormChild = ({
         {counter === 5 && <p className="text-subtle my-2 text-sm">{t("org_max_team_warnings")}</p>}
         {counter < 5 && (
           <Button
-            StartIcon={Plus}
+            StartIcon="plus"
             color="secondary"
             disabled={createTeamsMutation.isPending}
             onClick={handleCounterIncrease}
@@ -231,7 +233,7 @@ const AddNewTeamsFormChild = ({
           </Button>
         )}
         <Button
-          EndIcon={ArrowRight}
+          EndIcon="arrow-right"
           color="primary"
           className="mt-6 w-full justify-center"
           data-testId="continue_or_checkout"
diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index 921145c42a..39001bd04f 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -1,6 +1,5 @@
-import { useSession } from "next-auth/react";
-import { signIn } from "next-auth/react";
 import type { SessionContextValue } from "next-auth/react";
+import { signIn, useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -14,8 +13,7 @@ import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { Ensure } from "@calcom/types/utils";
-import { Button, Form, TextField, Alert, RadioGroup as RadioArea } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Alert, Button, Form, RadioGroup as RadioArea, TextField } from "@calcom/ui";
 
 function extractDomainFromEmail(email: string) {
   let out = "";
@@ -273,7 +271,7 @@ const CreateANewOrganizationFormChild = ({ session }: { session: Ensure<SessionC
               newOrganizationFormMethods.formState.isSubmitting || createOrganizationMutation.isPending
             }
             color="primary"
-            EndIcon={ArrowRight}
+            EndIcon="arrow-right"
             type="submit"
             form="createOrg"
             className="w-full justify-center">
diff --git a/packages/features/ee/organizations/pages/components/MemberListItem.tsx b/packages/features/ee/organizations/pages/components/MemberListItem.tsx
index 68357d61e5..f48e62fa64 100644
--- a/packages/features/ee/organizations/pages/components/MemberListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/MemberListItem.tsx
@@ -11,10 +11,10 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  Icon,
   Tooltip,
   UserAvatar,
 } from "@calcom/ui";
-import { ExternalLink, MoreHorizontal } from "@calcom/ui/components/icon";
 
 interface Props {
   member: RouterOutputs["viewer"]["organizations"]["listOtherTeamMembers"]["rows"][number];
@@ -73,7 +73,7 @@ export default function MemberListItem(props: Props) {
                   color="secondary"
                   className={classNames("rounded-r-md")}
                   variant="icon"
-                  StartIcon={ExternalLink}
+                  StartIcon="external-link"
                   disabled={!member.accepted}
                 />
               </Tooltip>
@@ -82,7 +82,12 @@ export default function MemberListItem(props: Props) {
             <div className="flex md:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" variant="icon" color="minimal" StartIcon={MoreHorizontal} />
+                  <Button
+                    type="button"
+                    variant="icon"
+                    color="minimal"
+                    StartIcon="ellipsis"
+                  />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem className="outline-none">
@@ -91,7 +96,7 @@ export default function MemberListItem(props: Props) {
                       href={`/${user.username}`}
                       target="_blank"
                       type="button"
-                      StartIcon={ExternalLink}>
+                      StartIcon="external-link">
                       {t("view_public_page")}
                     </DropdownItem>
                   </DropdownMenuItem>
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
index cfd7501843..f5a5eb4dd6 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
@@ -16,7 +16,6 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui";
-import { Edit2, ExternalLink, Link as LinkIcon, MoreHorizontal, Trash } from "@calcom/ui/components/icon";
 
 import { useOrgBranding } from "../../../organizations/context/provider";
 
@@ -83,7 +82,7 @@ export default function OtherTeamListItem(props: Props) {
                       showToast(t("link_copied"), "success");
                     }}
                     variant="icon"
-                    StartIcon={LinkIcon}
+                    StartIcon="link"
                   />
                 </Tooltip>
               )}
@@ -94,7 +93,7 @@ export default function OtherTeamListItem(props: Props) {
                     type="button"
                     color="secondary"
                     variant="icon"
-                    StartIcon={MoreHorizontal}
+                    StartIcon="ellipsis"
                   />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent hidden={hideDropdown}>
@@ -102,7 +101,7 @@ export default function OtherTeamListItem(props: Props) {
                     <DropdownItem
                       type="button"
                       href={`/settings/teams/other/${team.id}/profile`}
-                      StartIcon={Edit2}>
+                      StartIcon="pencil">
                       {t("edit_team") as string}
                     </DropdownItem>
                   </DropdownMenuItem>
@@ -117,7 +116,7 @@ export default function OtherTeamListItem(props: Props) {
                             ? `${orgBranding.fullDomain}`
                             : `${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/other`
                         }/${team.slug}`}
-                        StartIcon={ExternalLink}>
+                        StartIcon="external-link">
                         {t("preview_team") as string}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -129,7 +128,7 @@ export default function OtherTeamListItem(props: Props) {
                         <DropdownItem
                           color="destructive"
                           type="button"
-                          StartIcon={Trash}
+                          StartIcon="trash"
                           onClick={(e) => {
                             e.stopPropagation();
                           }}>
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
index eaf6373169..2acb0a8dcb 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
@@ -8,15 +8,14 @@ import LicenseRequired from "@calcom/ee/common/components/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
-  Meta,
-  DropdownActions,
-  showToast,
-  Table,
   Badge,
   ConfirmationDialogContent,
   Dialog,
+  DropdownActions,
+  Meta,
+  showToast,
+  Table,
 } from "@calcom/ui";
-import { Check, CheckCheck, Trash, Edit, BookOpenCheck } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../../../settings/layouts/SettingsLayout";
 import { subdomainSuffix } from "../../../../organizations/lib/orgDomains";
@@ -145,7 +144,7 @@ function AdminOrgTable() {
                                   orgId: org.id,
                                 });
                               },
-                              icon: Check,
+                              icon: "check" as const,
                             },
                           ]
                         : []),
@@ -162,7 +161,7 @@ function AdminOrgTable() {
                                   },
                                 });
                               },
-                              icon: CheckCheck,
+                              icon: "check-check" as const,
                             },
                           ]
                         : []),
@@ -170,7 +169,7 @@ function AdminOrgTable() {
                         id: "edit",
                         label: t("edit"),
                         href: `/settings/admin/organizations/${org.id}/edit`,
-                        icon: Edit,
+                        icon: "pencil" as const,
                       },
                       ...(!org.slug
                         ? [
@@ -180,7 +179,7 @@ function AdminOrgTable() {
                               onClick: () => {
                                 publishOrg(org);
                               },
-                              icon: BookOpenCheck,
+                              icon: "book-open-check" as const,
                             },
                           ]
                         : []),
@@ -190,7 +189,7 @@ function AdminOrgTable() {
                         onClick: () => {
                           setOrgToDelete(org);
                         },
-                        icon: Trash,
+                        icon: "trash" as const,
                       },
                     ]}
                   />
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index 2b05dbc047..0191972acb 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -17,7 +17,7 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Button, Form, Meta, showToast, SettingsToggle, Avatar, ImageUploader } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 type BrandColorsFormValues = {
   brandColor: string;
@@ -91,7 +91,7 @@ const OrgAppearanceView = ({
               <Avatar
                 alt="calVideoLogo"
                 imageSrc={currentOrg?.calVideoLogo}
-                fallback={<Plus className="text-subtle h-6 w-6" />}
+                fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
                 size="lg"
               />
               <div className="ms-4">
diff --git a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
index 77a0d797f5..43f2e07682 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
@@ -13,7 +13,7 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Meta, showToast, Button } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import MakeTeamPrivateSwitch from "../../../teams/components/MakeTeamPrivateSwitch";
@@ -145,7 +145,7 @@ const MembersView = () => {
             <Button
               type="button"
               color="primary"
-              StartIcon={Plus}
+              StartIcon="plus"
               className="ml-auto"
               onClick={() => setShowMemberInvitationModal(true)}
               data-testid="new-member-button">
diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
index f6ea86f628..e4d35ef37d 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
@@ -5,7 +5,7 @@ import type { Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState, useLayoutEffect, useEffect } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -20,23 +20,24 @@ import objectKeys from "@calcom/lib/objectKeys";
 import slugify from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
-import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 import {
   Avatar,
   Button,
   ConfirmationDialogContent,
   Dialog,
   DialogTrigger,
+  Editor,
   Form,
+  Icon,
   ImageUploader,
   Label,
   LinkIconButton,
   Meta,
   showToast,
+  SkeletonContainer,
+  SkeletonText,
   TextField,
-  Editor,
 } from "@calcom/ui";
-import { ExternalLink, Link as LinkIcon, Trash2 } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../../settings/layouts/SettingsLayout";
 import { subdomainSuffix } from "../../../organizations/lib/orgDomains";
@@ -299,10 +300,12 @@ const OtherTeamProfileView = () => {
               </div>
               <div className="">
                 <Link href={permalink} passHref={true} target="_blank">
-                  <LinkIconButton Icon={ExternalLink}>{t("preview")}</LinkIconButton>
+                  <LinkIconButton Icon="external-link">
+                    {t("preview")}
+                  </LinkIconButton>
                 </Link>
                 <LinkIconButton
-                  Icon={LinkIcon}
+                  Icon="link"
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Copied to clipboard", "success");
@@ -318,7 +321,10 @@ const OtherTeamProfileView = () => {
 
           <Dialog>
             <DialogTrigger asChild>
-              <Button color="destructive" className="border" StartIcon={Trash2}>
+              <Button
+                color="destructive"
+                className="border"
+                StartIcon="trash-2">
                 {t("disband_team")}
               </Button>
             </DialogTrigger>
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index 0bc2c91ab0..bce21646ac 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -2,9 +2,8 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prisma } from "@prisma/client";
-import { LinkIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState, useLayoutEffect, useEffect } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -19,20 +18,21 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import {
   Avatar,
-  Button,
-  Form,
-  ImageUploader,
   BannerUploader,
+  Button,
+  Editor,
+  Form,
+  Icon,
+  ImageUploader,
   Label,
+  LinkIconButton,
   Meta,
   showToast,
-  TextField,
-  Editor,
-  LinkIconButton,
   SkeletonAvatar,
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
+  TextField,
 } from "@calcom/ui";
 
 import { getLayout } from "../../../../settings/layouts/SettingsLayout";
@@ -146,7 +146,7 @@ const OrgProfileView = () => {
             </div>
             <div className="">
               <LinkIconButton
-                Icon={LinkIcon}
+                Icon="link"
                 onClick={() => {
                   navigator.clipboard.writeText(orgBranding.fullDomain);
                   showToast("Copied to clipboard", "success");
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 9a07c5209a..36a9f9320f 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -9,8 +9,8 @@ import { useEffect, useState } from "react";
 import { getSuccessPageLocationMessage } from "@calcom/app-store/locations";
 import dayjs from "@calcom/dayjs";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { PayIcon } from "@calcom/features/bookings/components/event-meta/PayIcon";
 import { Price } from "@calcom/features/bookings/components/event-meta/Price";
-import { getPayIcon } from "@calcom/features/bookings/components/event-meta/getPayIcon";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -76,7 +76,6 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
   }, [isEmbed]);
 
   const eventName = props.booking.title;
-  const PayIcon = getPayIcon(paymentAppData.currency);
 
   return (
     <div className="h-screen">
@@ -103,7 +102,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                    <PayIcon className="h-8 w-8 text-green-600" />
+                    <PayIcon currency={paymentAppData.currency} className="h-8 w-8 text-green-600" />
                   </div>
 
                   <div className="mt-3 text-center sm:mt-5">
diff --git a/packages/features/ee/sso/components/ConnectionInfo.tsx b/packages/features/ee/sso/components/ConnectionInfo.tsx
index 3ec6f30c59..cab9771833 100644
--- a/packages/features/ee/sso/components/ConnectionInfo.tsx
+++ b/packages/features/ee/sso/components/ConnectionInfo.tsx
@@ -4,14 +4,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
   Button,
-  showToast,
-  Tooltip,
   ConfirmationDialogContent,
   Dialog,
   DialogTrigger,
+  Icon,
   Label,
+  showToast,
+  Tooltip,
 } from "@calcom/ui";
-import { Clipboard } from "@calcom/ui/components/icon";
 
 export default function ConnectionInfo({
   teamId,
@@ -103,7 +103,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Clipboard className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -125,7 +125,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Clipboard className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -161,7 +161,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Clipboard className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
diff --git a/packages/features/ee/support/components/ContactMenuItem.tsx b/packages/features/ee/support/components/ContactMenuItem.tsx
index aa368fb369..005433a25f 100644
--- a/packages/features/ee/support/components/ContactMenuItem.tsx
+++ b/packages/features/ee/support/components/ContactMenuItem.tsx
@@ -1,8 +1,7 @@
 import { JOIN_DISCORD } from "@calcom/lib/constants";
 import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { UpgradeTeamsBadge } from "@calcom/ui";
-import { ExternalLink } from "@calcom/ui/components/icon";
+import { Icon, UpgradeTeamsBadge } from "@calcom/ui";
 
 import FreshChatMenuItem from "../lib/freshchat/FreshChatMenuItem";
 import HelpscoutMenuItem from "../lib/helpscout/HelpscoutMenuItem";
@@ -37,7 +36,10 @@ export default function ContactMenuItem(props: ContactMenuItem) {
         target="_blank"
         className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium">
         {t("community_support")}{" "}
-        <ExternalLink className="group-hover:text-subtle text-muted ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3" />
+        <Icon
+          name="external-link"
+          className="group-hover:text-subtle text-muted ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
+        />
       </a>
     </>
   );
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index 511879cece..ed99d84542 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -7,7 +7,7 @@ import { useHasPaidPlan } from "@calcom/lib/hooks/useHasPaidPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast, TextArea } from "@calcom/ui";
-import { ExternalLink, AlertTriangle } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { useFreshChat } from "../lib/freshchat/FreshChatProvider";
 import { isFreshChatEnabled } from "../lib/freshchat/FreshChatScript";
@@ -59,7 +59,8 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           className="hover:bg-subtle hover:text-emphasis text-default flex w-full px-5 py-2 pr-4 text-sm font-medium"
           rel="noreferrer">
           {t("documentation")}
-          <ExternalLink
+          <Icon
+            name="external-link"
             className={classNames(
               "group-hover:text-subtle text-muted",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -178,7 +179,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         {mutation.isError && (
           <div className="bg-error mb-4 flex p-4 text-sm text-red-700">
             <div className="flex-shrink-0">
-              <AlertTriangle className="h-5 w-5" />
+              <Icon name="triangle-alert" className="h-5 w-5" />
             </div>
             <div className="ml-3 flex-grow">
               <p className="font-medium">{t("feedback_error")}</p>
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index 601cd6396c..7b7eac226e 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -1,6 +1,6 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import InviteLinkSettingsModal from "@calcom/features/ee/teams/components/InviteLinkSettingsModal";
@@ -9,20 +9,20 @@ import { classNames } from "@calcom/lib";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTelemetry, telemetryEventTypes } from "@calcom/lib/telemetry";
+import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import {
   Badge,
   Button,
+  Icon,
   showToast,
   SkeletonButton,
   SkeletonContainer,
   SkeletonText,
   UserAvatar,
 } from "@calcom/ui";
-import { ArrowRight, Plus, Trash2 } from "@calcom/ui/components/icon";
 
 type TeamMember = RouterOutputs["viewer"]["teams"]["get"]["members"][number];
 
@@ -120,7 +120,7 @@ export const AddNewTeamMembersForm = ({
         <Button
           color="secondary"
           data-testid="new-member-button"
-          StartIcon={Plus}
+          StartIcon="plus"
           onClick={() => setMemberInviteModal(true)}
           className={classNames("w-full justify-center", defaultValues.members.length > 0 && "mt-6")}>
           {isOrg ? t("add_org_members") : t("add_team_member")}
@@ -196,7 +196,7 @@ export const AddNewTeamMembersForm = ({
       <hr className="border-subtle my-6" />
       <Button
         data-testid="publish-button"
-        EndIcon={!orgBranding || isOrg ? ArrowRight : undefined}
+        EndIcon={!orgBranding || isOrg ? "arrow-right" : undefined}
         color="primary"
         className="w-full justify-center"
         disabled={publishTeamMutation.isPending}
@@ -287,7 +287,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
       {(member.role !== "OWNER" || isOrgAdminOrOwner) && member.id !== session.data?.user.id && (
         <Button
           data-testid="remove-member-button"
-          StartIcon={Trash2}
+          StartIcon="trash-2"
           variant="icon"
           color="secondary"
           className="h-[36px] w-[36px]"
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index 008211fa36..bbacde3575 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -3,10 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
-import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { Alert, Button, Form, TextField, DialogFooter } from "@calcom/ui";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { trpc } from "@calcom/trpc/react";
+import { Alert, Button, DialogFooter, Form, TextField } from "@calcom/ui";
 
 import { useOrgBranding } from "../../organizations/context/provider";
 import { subdomainSuffix } from "../../organizations/lib/orgDomains";
@@ -55,7 +54,7 @@ export const CreateANewTeamForm = (props: CreateANewTeamFormProps) => {
       <Button
         disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isPending}
         color="primary"
-        EndIcon={ArrowRight}
+        EndIcon="arrow-right"
         type="submit"
         className="w-full justify-center"
         data-testid="continue-button">
diff --git a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
index 65d67dbb54..08b3112bd5 100644
--- a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
+++ b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
@@ -1,4 +1,3 @@
-import { UsersIcon, XIcon } from "lucide-react";
 import type { PropsWithChildren } from "react";
 import { useState } from "react";
 
@@ -75,7 +74,7 @@ export function GoogleWorkspaceInviteButton(
               mutation.mutate();
             }}
             className="w-full justify-center gap-2"
-            StartIcon={UsersIcon}
+            StartIcon="users"
             loading={mutation.isPending}>
             {t("import_from_google_workspace")}
           </Button>
@@ -84,7 +83,7 @@ export function GoogleWorkspaceInviteButton(
           <Button
             color="secondary"
             loading={removeConnectionMutation.isPending}
-            StartIcon={XIcon}
+            StartIcon="x"
             onClick={() => {
               removeConnectionMutation.mutate();
               utils.viewer.googleWorkspace.checkForGWorkspace.invalidate();
@@ -102,7 +101,7 @@ export function GoogleWorkspaceInviteButton(
       type="button"
       color="secondary"
       loading={googleWorkspaceLoading}
-      StartIcon={GoogleIcon}
+      CustomStartIcon={<GoogleIcon />}
       onClick={async () => {
         setGoogleWorkspaceLoading(true);
         const params = new URLSearchParams({
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index 47b1c5255d..01cc22fc41 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -1,8 +1,7 @@
-import { BuildingIcon, PaperclipIcon, UserIcon, Users } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
-import { useMemo, useState, useRef } from "react";
 import type { FormEvent } from "react";
+import { useMemo, useRef, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import TeamInviteFromOrg from "@calcom/ee/organizations/components/TeamInviteFromOrg";
@@ -19,14 +18,14 @@ import {
   DialogContent,
   DialogFooter,
   Form,
+  Icon,
   Label,
+  Select,
   showToast,
+  TextAreaField,
   TextField,
   ToggleGroup,
-  Select,
-  TextAreaField,
 } from "@calcom/ui";
-import { Link } from "@calcom/ui/components/icon";
 
 import type { PendingMember } from "../lib/types";
 import { GoogleWorkspaceInviteButton } from "./GoogleWorkspaceInviteButton";
@@ -111,15 +110,15 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
       {
         value: "INDIVIDUAL",
         label: t("invite_team_individual_segment"),
-        iconLeft: <UserIcon />,
+        iconLeft: <Icon name="user" />,
       },
-      { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <Users /> },
+      { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <Icon name="users" /> },
     ];
     if (props?.orgMembers && props.orgMembers?.length > 0) {
       array.unshift({
         value: "ORGANIZATION",
         label: t("organization"),
-        iconLeft: <BuildingIcon />,
+        iconLeft: <Icon name="building" />,
       });
     }
     return array;
@@ -299,7 +298,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                       importRef.current.click();
                     }
                   }}
-                  StartIcon={PaperclipIcon}
+                  StartIcon="paperclip"
                   className="mt-3 justify-center stroke-2">
                   {t("upload_csv_file")}
                 </Button>
@@ -413,7 +412,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                   }}
                   className={classNames("gap-2", props.token && "opacity-50")}
                   data-testid="copy-invite-link-button">
-                  <Link className="text-default h-4 w-4" aria-hidden="true" />
+                  <Icon name="link" className="text-default h-4 w-4" aria-hidden="true" />
                   <span className="hidden sm:inline">{t("copy_invite_link")}</span>
                 </Button>
               </div>
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 403fa906c1..1d56be5890 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -1,5 +1,4 @@
 import classNames from "classnames";
-import { SendIcon } from "lucide-react";
 import { signIn } from "next-auth/react";
 import { useState } from "react";
 
@@ -24,9 +23,8 @@ import {
   DropdownMenuTrigger,
   showToast,
   Tooltip,
+  UserAvatar,
 } from "@calcom/ui";
-import { UserAvatar } from "@calcom/ui";
-import { ExternalLink, MoreHorizontal, Edit2, Lock, UserX } from "@calcom/ui/components/icon";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamAvailabilityModal from "./TeamAvailabilityModal";
@@ -199,7 +197,7 @@ export default function MemberListItem(props: Props) {
                   onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
                   color="secondary"
                   variant="icon"
-                  StartIcon={Clock}
+                  StartIcon="clock"
                 />
               </Tooltip> */}
               {!!props.member.accepted && (
@@ -210,7 +208,7 @@ export default function MemberListItem(props: Props) {
                     color="secondary"
                     className={classNames(!editMode ? "rounded-r-md" : "")}
                     variant="icon"
-                    StartIcon={ExternalLink}
+                    StartIcon="external-link"
                     disabled={!props.member.accepted}
                   />
                 </Tooltip>
@@ -222,7 +220,7 @@ export default function MemberListItem(props: Props) {
                       className="radix-state-open:rounded-r-md"
                       color="secondary"
                       variant="icon"
-                      StartIcon={MoreHorizontal}
+                      StartIcon="ellipsis"
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
@@ -230,7 +228,7 @@ export default function MemberListItem(props: Props) {
                       <DropdownItem
                         type="button"
                         onClick={() => setShowChangeMemberRoleModal(true)}
-                        StartIcon={Edit2}>
+                        StartIcon="pencil">
                         {t("edit")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -240,7 +238,7 @@ export default function MemberListItem(props: Props) {
                           <DropdownItem
                             type="button"
                             onClick={() => setShowImpersonateModal(true)}
-                            StartIcon={Lock}>
+                            StartIcon="lock">
                             {t("impersonate")}
                           </DropdownItem>
                         </DropdownMenuItem>
@@ -258,7 +256,7 @@ export default function MemberListItem(props: Props) {
                               language: i18n.language,
                             });
                           }}
-                          StartIcon={SendIcon}>
+                          StartIcon="send">
                           {t("resend_invitation")}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -268,7 +266,7 @@ export default function MemberListItem(props: Props) {
                         type="button"
                         onClick={() => setShowDeleteModal(true)}
                         color="destructive"
-                        StartIcon={UserX}>
+                        StartIcon="user-x">
                         {t("remove")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -279,7 +277,7 @@ export default function MemberListItem(props: Props) {
             <div className="flex md:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" variant="icon" color="minimal" StartIcon={MoreHorizontal} />
+                  <Button type="button" variant="icon" color="minimal" StartIcon="ellipsis" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem className="outline-none">
@@ -288,7 +286,7 @@ export default function MemberListItem(props: Props) {
                       href={!props.member.accepted ? undefined : `/${props.member.username}`}
                       target="_blank"
                       type="button"
-                      StartIcon={ExternalLink}>
+                      StartIcon="external-link">
                       {t("view_public_page")}
                     </DropdownItem>
                   </DropdownMenuItem>
@@ -298,7 +296,7 @@ export default function MemberListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           onClick={() => setShowChangeMemberRoleModal(true)}
-                          StartIcon={Edit2}>
+                          StartIcon="pencil">
                           {t("edit")}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -307,7 +305,7 @@ export default function MemberListItem(props: Props) {
                           type="button"
                           color="destructive"
                           onClick={() => setShowDeleteModal(true)}
-                          StartIcon={UserX}>
+                          StartIcon="user-x">
                           {t("remove")}
                         </DropdownItem>
                       </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 8c55dd287a..bbc41dd212 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -7,13 +7,12 @@ import {
   Avatar,
   Button,
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
   showToast,
 } from "@calcom/ui";
-import { Ban, Check, MoreHorizontal, X } from "@calcom/ui/components/icon";
 
 interface Props {
   team: {
@@ -95,7 +94,7 @@ export default function TeamInviteListItem(props: Props) {
                 variant="icon"
                 color="secondary"
                 onClick={declineInvite}
-                StartIcon={Ban}
+                StartIcon="ban"
               />
               <Button
                 type="button"
@@ -103,22 +102,22 @@ export default function TeamInviteListItem(props: Props) {
                 variant="icon"
                 color="secondary"
                 onClick={acceptInvite}
-                StartIcon={Check}
+                StartIcon="check"
               />
             </div>
             <div className="block sm:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
+                  <Button type="button" color="minimal" variant="icon" StartIcon="ellipsis" />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
-                    <DropdownItem type="button" StartIcon={Check} onClick={acceptInvite}>
+                    <DropdownItem type="button" StartIcon="check" onClick={acceptInvite}>
                       {t("accept")}
                     </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
-                    <DropdownItem color="destructive" type="button" StartIcon={X} onClick={declineInvite}>
+                    <DropdownItem color="destructive" type="button" StartIcon="x" onClick={declineInvite}>
                       {t("reject")}
                     </DropdownItem>
                   </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index 88c82fb456..5067a1a4d4 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -5,8 +5,7 @@ import { trackFormbricksAction } from "@calcom/lib/formbricks-client";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Card, showToast } from "@calcom/ui";
-import { UserPlus, Building, LineChart, Paintbrush, Users, Edit } from "@calcom/ui/components/icon";
+import { Card, Icon, showToast } from "@calcom/ui";
 
 import TeamListItem from "./TeamListItem";
 
@@ -61,10 +60,10 @@ export default function TeamList(props: Props) {
           (team, i) =>
             team.role !== "MEMBER" &&
             i === 0 && (
-              <div className="bg-subtle p-4">
+              <div className="bg-subtle p-4" key={team.id}>
                 <div className="grid-col-1 grid gap-2 md:grid-cols-3">
                   <Card
-                    icon={<Building className="h-5 w-5 text-red-700" />}
+                    icon={<Icon name="building" className="h-5 w-5 text-red-700" />}
                     variant="basic"
                     title={t("You have a lot of teams")}
                     description={t(
@@ -77,7 +76,7 @@ export default function TeamList(props: Props) {
                     }}
                   />
                   <Card
-                    icon={<Paintbrush className="h-5 w-5 text-orange-700" />}
+                    icon={<Icon name="paintbrush" className="h-5 w-5 text-orange-700" />}
                     variant="basic"
                     title={t("Get a clean subdomain")}
                     description={t(
@@ -89,7 +88,7 @@ export default function TeamList(props: Props) {
                     }}
                   />
                   <Card
-                    icon={<LineChart className="h-5 w-5 text-green-700" />}
+                    icon={<Icon name="line-chart" className="h-5 w-5 text-green-700" />}
                     variant="basic"
                     title={t("Admin tools and analytics")}
                     description={t(
@@ -126,7 +125,7 @@ export default function TeamList(props: Props) {
                   <h3 className="text-emphasis mb-4 text-sm font-semibold">{t("recommended_next_steps")}</h3>
                   <div className="grid-col-1 grid gap-2 md:grid-cols-3">
                     <Card
-                      icon={<UserPlus className="h-5 w-5 text-green-700" />}
+                      icon={<Icon name="user-plus" className="h-5 w-5 text-green-700" />}
                       variant="basic"
                       title={t("invite_team_member")}
                       description={t("meetings_are_better_with_the_right")}
@@ -136,7 +135,7 @@ export default function TeamList(props: Props) {
                       }}
                     />
                     <Card
-                      icon={<Users className="h-5 w-5 text-orange-700" />}
+                      icon={<Icon name="users" className="h-5 w-5 text-orange-700" />}
                       variant="basic"
                       title={t("collective_or_roundrobin")}
                       description={t("book_your_team_members")}
@@ -146,7 +145,7 @@ export default function TeamList(props: Props) {
                       }}
                     />
                     <Card
-                      icon={<Edit className="h-5 w-5 text-purple-700" />}
+                      icon={<Icon name="pencil" className="h-5 w-5 text-purple-700" />}
                       variant="basic"
                       title={t("appearance")}
                       description={t("appearance_description")}
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index b7226a6fdc..f697eb1454 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -29,18 +29,6 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui";
-import {
-  Check,
-  Edit2,
-  ExternalLink,
-  Globe,
-  Link as LinkIcon,
-  LogOut,
-  MoreHorizontal,
-  Send,
-  Trash,
-  X,
-} from "@calcom/ui/components/icon";
 
 import { TeamRole } from "./TeamPill";
 
@@ -211,7 +199,7 @@ export default function TeamListItem(props: Props) {
                   type="button"
                   color="secondary"
                   data-testid={`accept-invitation-${team.id}`}
-                  StartIcon={Check}
+                  StartIcon="check"
                   className="me-2 ms-2"
                   onClick={acceptInvite}>
                   {t("accept")}
@@ -220,16 +208,16 @@ export default function TeamListItem(props: Props) {
               <div className="block sm:hidden">
                 <Dropdown>
                   <DropdownMenuTrigger asChild>
-                    <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
+                    <Button type="button" color="minimal" variant="icon" StartIcon="ellipsis" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
-                      <DropdownItem type="button" StartIcon={Check} onClick={acceptInvite}>
+                      <DropdownItem type="button" StartIcon="check" onClick={acceptInvite}>
                         {t("accept")}
                       </DropdownItem>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                      <DropdownItem color="destructive" type="button" StartIcon={X} onClick={declineInvite}>
+                      <DropdownItem color="destructive" type="button" StartIcon="x" onClick={declineInvite}>
                         {t("reject")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -255,7 +243,7 @@ export default function TeamListItem(props: Props) {
                         showToast(t("link_copied"), "success");
                       }}
                       variant="icon"
-                      StartIcon={LinkIcon}
+                      StartIcon="link"
                     />
                   </Tooltip>
                 )}
@@ -266,7 +254,7 @@ export default function TeamListItem(props: Props) {
                       type="button"
                       color="secondary"
                       variant="icon"
-                      StartIcon={MoreHorizontal}
+                      StartIcon="ellipsis"
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent hidden={hideDropdown}>
@@ -275,7 +263,7 @@ export default function TeamListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           href={`/settings/teams/${team.id}/profile`}
-                          StartIcon={Edit2}>
+                          StartIcon="pencil">
                           {t("edit_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -290,7 +278,7 @@ export default function TeamListItem(props: Props) {
                             orgSlug: team.parent ? team.parent.slug : null,
                             teamSlug: team.slug,
                           })}`}
-                          StartIcon={ExternalLink}>
+                          StartIcon="external-link">
                           {t("preview_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -302,7 +290,7 @@ export default function TeamListItem(props: Props) {
                           onClick={() => {
                             setOpenMemberInvitationModal(true);
                           }}
-                          StartIcon={Send}>
+                          StartIcon="send">
                           {t("invite_team_member") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -315,7 +303,7 @@ export default function TeamListItem(props: Props) {
                             <DropdownItem
                               color="destructive"
                               type="button"
-                              StartIcon={Trash}
+                              StartIcon="trash"
                               onClick={(e) => {
                                 e.stopPropagation();
                               }}>
@@ -343,7 +331,7 @@ export default function TeamListItem(props: Props) {
                             <DropdownItem
                               color="destructive"
                               type="button"
-                              StartIcon={LogOut}
+                              StartIcon="log-out"
                               onClick={(e) => {
                                 e.stopPropagation();
                               }}>
@@ -390,7 +378,7 @@ const TeamPublishButton = ({ teamId }: { teamId: number }) => {
         onClick={() => {
           publishTeamMutation.mutate({ teamId });
         }}
-        StartIcon={Globe}>
+        StartIcon="globe">
         {t("team_publish")}
       </DropdownItem>
     </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index 6565939568..d9efa111fb 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -5,8 +5,7 @@ import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, ButtonGroup, EmptyScreen, Label, showToast } from "@calcom/ui";
-import { EyeOff, Mail, RefreshCcw, UserPlus, Users, Video } from "@calcom/ui/components/icon";
+import { Alert, Button, ButtonGroup, EmptyScreen, Icon, Label, showToast } from "@calcom/ui";
 
 import { UpgradeTip } from "../../../tips";
 import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
@@ -63,32 +62,32 @@ export function TeamsListing() {
 
   const features = [
     {
-      icon: <Users className="h-5 w-5 text-red-500" />,
+      icon: <Icon name="users" className="h-5 w-5 text-red-500" />,
       title: t("collective_scheduling"),
       description: t("make_it_easy_to_book"),
     },
     {
-      icon: <RefreshCcw className="h-5 w-5 text-blue-500" />,
+      icon: <Icon name="refresh-ccw" className="h-5 w-5 text-blue-500" />,
       title: t("round_robin"),
       description: t("find_the_best_person"),
     },
     {
-      icon: <UserPlus className="h-5 w-5 text-green-500" />,
+      icon: <Icon name="user-plus" className="h-5 w-5 text-green-500" />,
       title: t("fixed_round_robin"),
       description: t("add_one_fixed_attendee"),
     },
     {
-      icon: <Mail className="h-5 w-5 text-orange-500" />,
+      icon: <Icon name="mail" className="h-5 w-5 text-orange-500" />,
       title: t("sms_attendee_action"),
       description: t("send_reminder_sms"),
     },
     {
-      icon: <Video className="h-5 w-5 text-purple-500" />,
+      icon: <Icon name="video" className="h-5 w-5 text-purple-500" />,
       title: `Cal Video ${t("recordings_title")}`,
       description: t("upgrade_to_access_recordings_description"),
     },
     {
-      icon: <EyeOff className="h-5 w-5 text-indigo-500" />,
+      icon: <Icon name="eye-off" className="h-5 w-5 text-indigo-500" />,
       title: t("disable_cal_branding", { appName: APP_NAME }),
       description: t("disable_cal_branding_description", { appName: APP_NAME }),
     },
@@ -148,7 +147,7 @@ export function TeamsListing() {
           <TeamList teams={teams} />
         ) : (
           <EmptyScreen
-            Icon={Users}
+            Icon="users"
             headline={t("create_team_to_get_started")}
             description={t("create_first_team_and_invite_others")}
             buttonRaw={
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 6ae8bb0352..3e1a938c7b 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -3,7 +3,6 @@ import { usePathname } from "next/navigation";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta } from "@calcom/ui";
-import { ExternalLink } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -21,7 +20,7 @@ const BillingView = () => {
           <p>{t("view_and_edit_billing_details")}</p>
         </div>
         <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
-          <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon="external-link">
             {t("billing_portal")}
           </Button>
         </div>
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index ac19cba475..d534118eb2 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -11,7 +11,7 @@ import { MembershipRole } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Meta, showToast, TextField } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
@@ -147,7 +147,7 @@ const MembersView = () => {
             <Button
               type="button"
               color="primary"
-              StartIcon={Plus}
+              StartIcon="plus"
               className="ml-auto"
               onClick={() => setShowMemberInvitationModal(true)}
               data-testid="new-member-button">
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 6a3d50a5c0..2d31cf874e 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -5,7 +5,7 @@ import type { Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useLayoutEffect, useState, useEffect } from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -37,13 +37,12 @@ import {
   LinkIconButton,
   Meta,
   showToast,
+  SkeletonAvatar,
+  SkeletonButton,
   SkeletonContainer,
   SkeletonText,
   TextField,
-  SkeletonAvatar,
-  SkeletonButton,
 } from "@calcom/ui";
-import { ExternalLink, Link as LinkIcon, LogOut, Trash2 } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -182,10 +181,10 @@ const ProfileView = () => {
           </div>
           <div>
             <Link href={permalink} passHref={true} target="_blank">
-              <LinkIconButton Icon={ExternalLink}>{t("preview")}</LinkIconButton>
+              <LinkIconButton Icon="external-link">{t("preview")}</LinkIconButton>
             </Link>
             <LinkIconButton
-              Icon={LinkIcon}
+              Icon="link"
               onClick={() => {
                 navigator.clipboard.writeText(permalink);
                 showToast("Copied to clipboard", "success");
@@ -209,7 +208,7 @@ const ProfileView = () => {
               <Button
                 color="destructive"
                 className="border"
-                StartIcon={Trash2}
+                StartIcon="trash-2"
                 data-testid="disband-team-button">
                 {t("disband_team")}
               </Button>
@@ -229,7 +228,7 @@ const ProfileView = () => {
         <Dialog>
           <SectionBottomActions align="end">
             <DialogTrigger asChild>
-              <Button color="destructive" className="border" StartIcon={LogOut}>
+              <Button color="destructive" className="border" StartIcon="log-out">
                 {t("leave_team")}
               </Button>
             </DialogTrigger>
diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx
index 233b4d4eab..6a6234d60d 100644
--- a/packages/features/ee/users/components/UsersTable.tsx
+++ b/packages/features/ee/users/components/UsersTable.tsx
@@ -17,11 +17,11 @@ import {
   DialogContent,
   DialogFooter,
   DropdownActions,
+  Icon,
   showToast,
   Table,
   TextField,
 } from "@calcom/ui";
-import { Edit, Lock, Trash, User, VenetianMask, Shield } from "@calcom/ui/components/icon";
 
 import { withLicenseRequired } from "../../common/components/LicenseRequired";
 
@@ -191,7 +191,7 @@ function UsersTableBare() {
                       <span className="ml-3">/{user.username}</span>
                       {user.locked && (
                         <span className="ml-3">
-                          <Lock />
+                          <Icon name="lock" />
                         </span>
                       )}
                       <br />
@@ -213,25 +213,25 @@ function UsersTableBare() {
                           id: "edit",
                           label: "Edit",
                           href: `/settings/admin/users/${user.id}/edit`,
-                          icon: Edit,
+                          icon: "pencil",
                         },
                         {
                           id: "reset-password",
                           label: "Reset Password",
                           onClick: () => sendPasswordResetEmail.mutate({ userId: user.id }),
-                          icon: Lock,
+                          icon: "lock",
                         },
                         {
                           id: "impersonate-user",
                           label: "Impersonate User",
                           onClick: () => handleImpersonateUser(user?.username),
-                          icon: User,
+                          icon: "user",
                         },
                         {
                           id: "lock-user",
                           label: user.locked ? "Unlock User Account" : "Lock User Account",
                           onClick: () => lockUserAccount.mutate({ userId: user.id, locked: !user.locked }),
-                          icon: Lock,
+                          icon: "lock",
                         },
                         {
                           id: "impersonation",
@@ -240,21 +240,21 @@ function UsersTableBare() {
                             setSelectedUser(user.username);
                             setShowImpersonateModal(true);
                           },
-                          icon: VenetianMask,
+                          icon: "venetian-mask",
                         },
                         {
                           id: "remove-2fa",
                           label: "Remove 2FA",
                           color: "destructive",
                           onClick: () => removeTwoFactor.mutate({ userId: user.id }),
-                          icon: Shield,
+                          icon: "shield",
                         },
                         {
                           id: "delete",
                           label: "Delete",
                           color: "destructive",
                           onClick: () => setUserToDelete(user.id),
-                          icon: Trash,
+                          icon: "trash",
                         },
                       ]}
                     />
diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index d286a8860b..a9ed503185 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useState, Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -9,9 +9,7 @@ import type { RecordingItemSchema } from "@calcom/prisma/zod-utils";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { PartialReference } from "@calcom/types/EventManager";
-import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
-import { Button } from "@calcom/ui";
-import { Download } from "@calcom/ui/components/icon";
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, Icon } from "@calcom/ui";
 
 import RecordingListSkeleton from "./components/RecordingListSkeleton";
 
@@ -129,7 +127,7 @@ const ViewRecordingsList = ({ roomName, hasTeamPlan }: { roomName: string; hasTe
                 </div>
                 {hasTeamPlan ? (
                   <Button
-                    StartIcon={Download}
+                    StartIcon="download"
                     className="ml-4 lg:ml-0"
                     loading={isFetching && recordingId === recording.id}
                     onClick={() => handleDownloadClick(recording.id)}>
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index 3c327d02ce..e1f492abab 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -18,13 +18,13 @@ import {
   DialogFooter,
   EmailField,
   Form,
+  Icon,
   Input,
   Label,
   PhoneInput,
   Select,
   Tooltip,
 } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
 
 import { WORKFLOW_ACTIONS } from "../lib/constants";
 import { onlyLettersNumbersSpaces } from "../pages/workflow";
@@ -220,7 +220,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                   <div className="flex">
                     <Label>{t("sender_id")}</Label>
                     <Tooltip content={t("sender_id_info")}>
-                      <Info className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
+                      <Icon name="info" className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
                     </Tooltip>
                   </div>
                   <Input type="text" placeholder={SENDER_ID} maxLength={11} {...form.register(`senderId`)} />
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index db54ad6c26..d72102d20b 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -3,25 +3,23 @@ import { useRouter } from "next/navigation";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import { CreateButtonWithTeamsList, EmptyScreen as ClassicEmptyScreen, showToast } from "@calcom/ui";
-import { Mail, Smartphone, Zap } from "@calcom/ui/components/icon";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+import type { IconName } from "@calcom/ui";
+import { CreateButtonWithTeamsList, EmptyScreen as ClassicEmptyScreen, Icon, showToast } from "@calcom/ui";
 
 type WorkflowExampleType = {
-  Icon: SVGComponent | LucideIcon;
+  Icon: IconName;
   text: string;
 };
 
 function WorkflowExample(props: WorkflowExampleType) {
-  const { Icon, text } = props;
+  const { Icon: iconName, text } = props;
 
   return (
     <div className="border-subtle mx-2 my-2 max-h-24 max-w-[600px] rounded-md border border-solid p-6">
       <div className="flex ">
         <div className="flex items-center justify-center">
           <div className="bg-emphasis dark:bg-default mr-4 flex h-10 w-10 items-center justify-center rounded-full">
-            <Icon className="text-default h-6 w-6 stroke-[2px]" />
+            <Icon name={iconName} className="text-default h-6 w-6 stroke-[2px]" />
           </div>
         </div>
         <div className="m-auto w-full flex-grow items-center justify-center ">
@@ -54,24 +52,24 @@ export default function EmptyScreen(props: { isFilteredView: boolean }) {
   });
 
   const workflowsExamples = [
-    { icon: Smartphone, text: t("workflow_example_1") },
-    { icon: Smartphone, text: t("workflow_example_2") },
-    { icon: Mail, text: t("workflow_example_3") },
-    { icon: Mail, text: t("workflow_example_4") },
-    { icon: Mail, text: t("workflow_example_5") },
-    { icon: Smartphone, text: t("workflow_example_6") },
-  ];
+    { icon: "smartphone", text: t("workflow_example_1") },
+    { icon: "smartphone", text: t("workflow_example_2") },
+    { icon: "mail", text: t("workflow_example_3") },
+    { icon: "mail", text: t("workflow_example_4") },
+    { icon: "mail", text: t("workflow_example_5") },
+    { icon: "smartphone", text: t("workflow_example_6") },
+  ] as const;
   // new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (Smile icon),
 
   if (props.isFilteredView) {
-    return <ClassicEmptyScreen Icon={Zap} headline={t("no_workflows")} description={t("change_filter")} />;
+    return <ClassicEmptyScreen Icon="zap" headline={t("no_workflows")} description={t("change_filter")} />;
   }
 
   return (
     <>
       <div className="min-h-80 flex w-full flex-col items-center justify-center rounded-md ">
         <div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full">
-          <Zap className="dark:text-default inline-block h-10 w-10 stroke-[1.3px]" />
+          <Icon name="zap" className="dark:text-default inline-block h-10 w-10 stroke-[1.3px]" />
         </div>
         <div className="max-w-[420px] text-center">
           <h2 className="text-semibold font-cal mt-6 text-xl dark:text-gray-300">{t("workflows")}</h2>
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index b425347ecb..6a955a16ef 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -13,8 +13,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { WorkflowActions } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, showToast, Switch, Tooltip, Alert } from "@calcom/ui";
-import { ExternalLink, Zap, Lock, Info } from "@calcom/ui/components/icon";
+import { Alert, Button, EmptyScreen, Icon, showToast, Switch, Tooltip } from "@calcom/ui";
 
 import LicenseRequired from "../../common/components/LicenseRequired";
 import { getActionIcon } from "../lib/getActionIcon";
@@ -151,7 +150,7 @@ const WorkflowListItem = (props: ItemProps) => {
             <Link href={`/workflows/${workflow.id}`} passHref={true} target="_blank">
               <Button type="button" color="minimal" className="mr-4">
                 <div className="hidden ltr:mr-2 rtl:ml-2 sm:block">{t("edit")}</div>
-                <ExternalLink className="text-default -mt-[2px] h-4 w-4 stroke-2" />
+                <Icon name="external-link" className="text-default -mt-[2px] h-4 w-4 stroke-2" />
               </Button>
             </Link>
           </div>
@@ -168,7 +167,7 @@ const WorkflowListItem = (props: ItemProps) => {
           }>
           <div className="flex items-center ltr:mr-2 rtl:ml-2">
             {workflow.readOnly && props.isChildrenManagedEventType && (
-              <Lock className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
+              <Icon name="lock" className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
             )}
             <Switch
               checked={isActive}
@@ -183,7 +182,7 @@ const WorkflowListItem = (props: ItemProps) => {
 
       {needsRequiresConfirmationWarning ? (
         <div className="text-attention -mb-2 mt-3 flex">
-          <Info className="mr-1 mt-0.5 h-4 w-4" />
+          <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
           <p className="text-sm">{t("requires_confirmation_mandatory")}</p>
         </div>
       ) : (
@@ -311,7 +310,7 @@ function EventWorkflowsTab(props: Props) {
           ) : (
             <div className="pt-2 before:border-0">
               <EmptyScreen
-                Icon={Zap}
+                Icon="zap"
                 headline={t("workflows")}
                 description={t("no_workflows_description")}
                 buttonRaw={
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index 10fc326445..9ab46da982 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -1,5 +1,4 @@
-import { SkeletonText } from "@calcom/ui";
-import { Bell, Link as LinkIcon } from "@calcom/ui/components/icon";
+import { Icon, SkeletonText } from "@calcom/ui";
 
 function SkeletonLoader() {
   return (
@@ -21,9 +20,9 @@ function SkeletonItem() {
           <div className="flex flex-col space-y-2">
             <SkeletonText className="h-4 w-16 sm:w-24" />
             <div className="flex">
-              <Bell className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
+              <Icon name="bell" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
-              <LinkIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
+              <Icon name="link" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-28 sm:w-36" />
             </div>
           </div>
diff --git a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
index baa797e90a..1087adc73b 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -4,13 +4,13 @@ import type { UseFormReturn } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
+  Icon,
   TextField,
 } from "@calcom/ui";
-import { ChevronDown } from "@calcom/ui/components/icon";
 
 import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
 import type { FormValues } from "../pages/workflow";
@@ -46,7 +46,7 @@ export const TimeTimeUnitInput = (props: Props) => {
                     {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
                   </div>
                   <div className="w-1/4 pt-1">
-                    <ChevronDown />
+                    <Icon name="chevron-down" />
                   </div>
                 </button>
               </DropdownMenuTrigger>
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index 017f9e7e4c..3e3a78f7c0 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -6,13 +6,12 @@ import { Controller } from "react-hook-form";
 
 import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { WorkflowTemplates } from "@calcom/prisma/enums";
 import type { WorkflowActions } from "@calcom/prisma/enums";
-import { trpc } from "@calcom/trpc/react";
+import { WorkflowTemplates } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
-import { Button, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui";
-import { ArrowDown, Trash2 } from "@calcom/ui/components/icon";
+import { Button, Icon, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui";
 
 import { isSMSAction, isWhatsappAction } from "../lib/actionHelperFunctions";
 import type { FormValues } from "../pages/workflow";
@@ -160,7 +159,7 @@ export default function WorkflowDetailsPage(props: Props) {
           {!props.readOnly && (
             <Button
               type="button"
-              StartIcon={Trash2}
+              StartIcon="trash-2"
               color="destructive"
               className="border"
               onClick={() => setDeleteDialogOpen(true)}>
@@ -203,7 +202,7 @@ export default function WorkflowDetailsPage(props: Props) {
           {!props.readOnly && (
             <>
               <div className="my-3 flex justify-center">
-                <ArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
+                <Icon name="arrow-down" className="text-subtle stroke-[1.5px] text-3xl" />
               </div>
               <div className="flex justify-center">
                 <Button
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index f2900ba032..5f67d3e343 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -1,5 +1,5 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import type { Workflow, WorkflowStep, Membership } from "@prisma/client";
+import type { Membership, Workflow, WorkflowStep } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
@@ -9,19 +9,19 @@ import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
+  ArrowButton,
+  Avatar,
+  Badge,
   Button,
   ButtonGroup,
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
+  Icon,
   Tooltip,
-  Badge,
-  Avatar,
-  ArrowButton,
 } from "@calcom/ui";
-import { Edit2, Link as LinkIcon, MoreHorizontal, Trash2 } from "@calcom/ui/components/icon";
 
 import { getActionIcon } from "../lib/getActionIcon";
 import { DeleteDialog } from "./DeleteDialog";
@@ -167,7 +167,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                       </p>
                                     ))}>
                                   <div>
-                                    <LinkIcon className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                    <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                                     {t("active_on_event_types", {
                                       count: workflow.activeOn.filter((wf) =>
                                         workflow.teamId ? wf.eventType.parentId === null : true
@@ -177,7 +177,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                 </Tooltip>
                               ) : (
                                 <div>
-                                  <LinkIcon className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                  <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                                   {t("no_active_event_types")}
                                 </div>
                               )}
@@ -227,7 +227,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               type="button"
                               color="secondary"
                               variant="icon"
-                              StartIcon={Edit2}
+                              StartIcon="pencil"
                               disabled={workflow.readOnly}
                               onClick={async () => await router.replace(`/workflows/${workflow.id}`)}
                               data-testid="edit-button"
@@ -242,7 +242,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               color="secondary"
                               variant="icon"
                               disabled={workflow.readOnly}
-                              StartIcon={Trash2}
+                              StartIcon="trash-2"
                               data-testid="delete-button"
                             />
                           </Tooltip>
@@ -256,14 +256,14 @@ export default function WorkflowListPage({ workflows }: Props) {
                                 type="button"
                                 color="minimal"
                                 variant="icon"
-                                StartIcon={MoreHorizontal}
+                                StartIcon="ellipsis"
                               />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent>
                               <DropdownMenuItem>
                                 <DropdownItem
                                   type="button"
-                                  StartIcon={Edit2}
+                                  StartIcon="pencil"
                                   onClick={async () => await router.replace(`/workflows/${workflow.id}`)}>
                                   {t("edit")}
                                 </DropdownItem>
@@ -272,7 +272,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                 <DropdownItem
                                   type="button"
                                   color="destructive"
-                                  StartIcon={Trash2}
+                                  StartIcon="trash-2"
                                   onClick={() => {
                                     setDeleteDialogOpen(true);
                                     setwWorkflowToDeleteId(workflow.id);
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 707c16def1..547b073055 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -1,6 +1,6 @@
 import type { WorkflowStep } from "@prisma/client";
 import type { Dispatch, SetStateAction } from "react";
-import { useRef, useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 import { Controller } from "react-hook-form";
 import "react-phone-number-input/style.css";
@@ -10,11 +10,11 @@ import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { getTimeFormatStringFromUserTimeFormat } from "@calcom/lib/timeFormat";
-import { WorkflowTemplates, TimeUnit, WorkflowActions } from "@calcom/prisma/enums";
-import { WorkflowTriggerEvents } from "@calcom/prisma/enums";
-import { trpc } from "@calcom/trpc/react";
+import { TimeUnit, WorkflowActions, WorkflowTemplates, WorkflowTriggerEvents } from "@calcom/prisma/enums";
 import type { RouterOutputs } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import {
+  AddVariablesDropdown,
   Badge,
   Button,
   CheckboxField,
@@ -23,31 +23,30 @@ import {
   DialogContent,
   DialogFooter,
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
+  Editor,
   EmailField,
+  Icon,
+  Input,
   Label,
   PhoneInput,
   Select,
   showToast,
   TextArea,
   TextField,
-  Editor,
-  AddVariablesDropdown,
-  Input,
   Tooltip,
 } from "@calcom/ui";
-import { ArrowDown, MoreHorizontal, Trash2, HelpCircle, Info } from "@calcom/ui/components/icon";
 
 import {
+  getWhatsappTemplateForAction,
   isAttendeeAction,
   isSMSAction,
   isSMSOrWhatsappAction,
-  isWhatsappAction,
-  getWhatsappTemplateForAction,
   isTextMessageToAttendeeAction,
+  isWhatsappAction,
 } from "../lib/actionHelperFunctions";
 import { DYNAMIC_TEXT_VARIABLES } from "../lib/constants";
 import { getWorkflowTemplateOptions, getWorkflowTriggerOptions } from "../lib/getOptions";
@@ -317,7 +316,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <TimeTimeUnitInput form={form} disabled={props.readOnly} />
                 {!props.readOnly && (
                   <div className="mt-1 flex text-gray-500">
-                    <Info className="mr-1 mt-0.5 h-4 w-4" />
+                    <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
                     <p className="text-sm">{t("testing_workflow_info_message")}</p>
                   </div>
                 )}
@@ -350,7 +349,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="my-3 flex justify-center">
-          <ArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
+          <Icon name="arrow-down" className="text-subtle stroke-[1.5px] text-3xl" />
         </div>
         <div className="flex justify-center">
           <div className="min-w-80 bg-default border-subtle flex w-full rounded-md border p-7">
@@ -371,13 +370,13 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   <div>
                     <Dropdown>
                       <DropdownMenuTrigger asChild>
-                        <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
+                        <Button type="button" color="minimal" variant="icon" StartIcon="ellipsis" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         <DropdownMenuItem>
                           <DropdownItem
                             type="button"
-                            StartIcon={Trash2}
+                            StartIcon="trash-2"
                             color="destructive"
                             onClick={() => {
                               const steps = form.getValues("steps");
@@ -540,7 +539,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
                 {isRequiresConfirmationNeeded ? (
                   <div className="text-attention mb-3 mt-2 flex">
-                    <Info className="mr-1 mt-0.5 h-4 w-4" />
+                    <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
                     <p className="text-sm">{t("requires_confirmation_mandatory")}</p>
                   </div>
                 ) : (
@@ -644,7 +643,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         <div className="flex">
                           <Label>{t("sender_id")}</Label>
                           <Tooltip content={t("sender_id_info")}>
-                            <Info className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
+                            <Icon name="info" className="ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
                           </Tooltip>
                         </div>
                         <Input
@@ -884,7 +883,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
                       <div className="text-default mt-2 flex text-sm">
-                        <HelpCircle className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <Icon name="circle-help" className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p className="text-left">{t("using_booking_questions_as_variables")}</p>
                       </div>
                     </button>
diff --git a/packages/features/ee/workflows/lib/getActionIcon.tsx b/packages/features/ee/workflows/lib/getActionIcon.tsx
index 6b61c68b70..b1fedf62a3 100644
--- a/packages/features/ee/workflows/lib/getActionIcon.tsx
+++ b/packages/features/ee/workflows/lib/getActionIcon.tsx
@@ -2,25 +2,35 @@ import type { WorkflowStep } from "@prisma/client";
 
 import { isSMSOrWhatsappAction } from "@calcom/features/ee/workflows/lib/actionHelperFunctions";
 import { classNames } from "@calcom/lib";
-import { WorkflowActions } from "@calcom/prisma/enums";
-import { Zap, Smartphone, Mail, Bell } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.Element {
   if (steps.length === 0) {
-    return <Zap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
+    return (
+      <Icon
+        name="zap"
+        className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
+        aria-hidden="true"
+      />
+    );
   }
 
   if (steps.length === 1) {
     if (isSMSOrWhatsappAction(steps[0].action)) {
       return (
-        <Smartphone
+        <Icon
+          name="smartphone"
           className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
           aria-hidden="true"
         />
       );
     } else {
       return (
-        <Mail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
+        <Icon
+          name="mail"
+          className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
+          aria-hidden="true"
+        />
       );
     }
   }
@@ -43,21 +53,34 @@ export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.El
     switch (messageType) {
       case "SMS":
         return (
-          <Smartphone
+          <Icon
+            name="smartphone"
             className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
             aria-hidden="true"
           />
         );
       case "EMAIL":
         return (
-          <Mail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
+          <Icon
+            name="mail"
+            className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
+            aria-hidden="true"
+          />
         );
       case "MIX":
         return (
-          <Bell className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
+          <Icon
+            name="bell"
+            className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
+            aria-hidden="true"
+          />
         );
       default:
-        <Zap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
+        <Icon
+          name="zap"
+          className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
+          aria-hidden="true"
+        />;
     }
   }
 
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index d68f4cf14a..8134f4e1ad 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -10,8 +10,7 @@ import { shallow } from "zustand/shallow";
 
 import type { Dayjs } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
-import { AvailableTimesHeader } from "@calcom/features/bookings";
-import { AvailableTimes } from "@calcom/features/bookings";
+import { AvailableTimes, AvailableTimesHeader } from "@calcom/features/bookings";
 import { useBookerStore, useInitializeBookerStore } from "@calcom/features/bookings/Booker/store";
 import { useEvent, useScheduleForEvent } from "@calcom/features/bookings/Booker/utils/event";
 import { useTimePreferences } from "@calcom/features/bookings/lib/timePreferences";
@@ -33,6 +32,7 @@ import {
   DialogContent,
   DialogFooter,
   HorizontalTabs,
+  Icon,
   Label,
   Select,
   showToast,
@@ -40,7 +40,6 @@ import {
   TextField,
   TimezoneSelect,
 } from "@calcom/ui";
-import { ArrowLeft, Sun } from "@calcom/ui/components/icon";
 
 import { getDimension } from "./lib/getDimension";
 import type { EmbedTabs, EmbedType, EmbedTypes, PreviewState } from "./types";
@@ -93,7 +92,7 @@ function useRouterHelpers() {
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <Sun className="text-subtle mr-2 h-4 w-4" />
+      <Icon name="sun" className="text-subtle mr-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -727,7 +726,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(["embedType", "embedTabName"]);
               }}>
-              <ArrowLeft className="mr-4 w-4" />
+              <Icon name="arrow-left" className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
@@ -1154,7 +1153,7 @@ type EmbedButtonProps<T> = {
   eventId?: number;
 };
 
-export const EmbedButton = <T extends React.ElementType>({
+export const EmbedButton = <T extends React.ElementType = typeof Button>({
   embedUrl,
   children,
   className = "",
diff --git a/packages/features/embed/lib/EmbedTabs.tsx b/packages/features/embed/lib/EmbedTabs.tsx
index 18b8cf28f6..654ee273bb 100644
--- a/packages/features/embed/lib/EmbedTabs.tsx
+++ b/packages/features/embed/lib/EmbedTabs.tsx
@@ -1,16 +1,15 @@
-import { forwardRef } from "react";
 import type { MutableRefObject } from "react";
+import { forwardRef } from "react";
 
 import type { BookerLayout } from "@calcom/features/bookings/Booker/types";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TextArea } from "@calcom/ui";
-import { Code, Trello } from "@calcom/ui/components/icon";
 
-import type { EmbedType, PreviewState, EmbedFramework } from "../types";
+import type { EmbedFramework, EmbedType, PreviewState } from "../types";
 import { Codes, doWeNeedCalOriginProp } from "./EmbedCodes";
-import { EMBED_PREVIEW_HTML_URL, embedLibUrl } from "./constants";
+import { embedLibUrl, EMBED_PREVIEW_HTML_URL } from "./constants";
 import { getApiName } from "./getApiName";
 import { getDimension } from "./getDimension";
 import { useEmbedCalOrigin } from "./hooks";
@@ -19,7 +18,7 @@ export const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: Code,
+    icon: "code" as const,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -75,7 +74,7 @@ export const tabs = [
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: Code,
+    icon: "code" as const,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -124,7 +123,7 @@ export const tabs = [
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: Trello,
+    icon: "trello" as const,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index cd2bf463ba..58ac75a9f2 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -1,10 +1,10 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useState } from "react";
 import type { Dispatch, SetStateAction } from "react";
+import { useState } from "react";
 import { useFormContext } from "react-hook-form";
 import type { Props } from "react-select";
 
-import type { Host, FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { FormValues, Host } from "@calcom/features/eventtypes/lib/types";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
@@ -14,11 +14,11 @@ import {
   DialogClose,
   DialogContent,
   DialogFooter,
+  Icon,
   Label,
   Select,
   Tooltip,
 } from "@calcom/ui";
-import { X } from "@calcom/ui/components/icon";
 
 export type CheckedSelectOption = {
   avatar: string;
@@ -86,7 +86,8 @@ export const CheckedTeamSelect = ({
                   <></>
                 )}
 
-                <X
+                <Icon
+                  name="x"
                   onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
                   className="my-auto h-4 w-4"
                 />
diff --git a/packages/features/eventtypes/components/CheckedUserSelect.tsx b/packages/features/eventtypes/components/CheckedUserSelect.tsx
index c2d94186e5..bca67fc99e 100644
--- a/packages/features/eventtypes/components/CheckedUserSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedUserSelect.tsx
@@ -2,8 +2,7 @@ import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar, EmptyScreen, Label, Select } from "@calcom/ui";
-import { UserPlus, X } from "@calcom/ui/components/icon";
+import { Avatar, EmptyScreen, Icon, Label, Select } from "@calcom/ui";
 
 export type CheckedUserSelectOption = {
   avatar: string;
@@ -47,7 +46,8 @@ export const CheckedUserSelect = ({
                     className={`flex px-3 py-2 ${index === value.length - 1 ? "" : "border-b"}`}>
                     <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
                     <p className="my-auto ml-3 text-sm text-gray-900">{option.label}</p>
-                    <X
+                    <Icon
+                      name="x"
                       onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
                       className="my-auto ml-auto"
                     />
@@ -60,7 +60,7 @@ export const CheckedUserSelect = ({
       ) : (
         <div className="mt-6">
           <EmptyScreen
-            Icon={UserPlus}
+            Icon="user-plus"
             headline={t("no_assigned_members")}
             description={t("start_assigning_members_above")}
           />
diff --git a/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx b/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
index dfa28c5c8c..d860c49184 100644
--- a/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
+++ b/packages/features/eventtypes/components/ChildrenEventTypeSelect.tsx
@@ -5,8 +5,7 @@ import { classNames } from "@calcom/lib";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { MembershipRole } from "@calcom/prisma/enums";
-import { Avatar, Badge, Button, ButtonGroup, Select, Switch, Tooltip } from "@calcom/ui";
-import { ExternalLink, X } from "@calcom/ui/components/icon";
+import { Avatar, Badge, Button, ButtonGroup, Icon, Select, Switch, Tooltip } from "@calcom/ui";
 
 export type ChildrenEventType = {
   value: string;
@@ -107,7 +106,7 @@ export const ChildrenEventTypeSelect = ({
                           target="_blank"
                           variant="icon"
                           href={`${WEBSITE_URL}/${children.owner?.username}/${children.slug}`}
-                          StartIcon={ExternalLink}
+                          StartIcon="external-link"
                         />
                       </Tooltip>
                     )}
@@ -119,7 +118,7 @@ export const ChildrenEventTypeSelect = ({
                         onClick={() =>
                           props.onChange(value.filter((item) => item.owner.id !== children.owner.id))
                         }
-                        StartIcon={X}
+                        StartIcon="x"
                       />
                     </Tooltip>
                   </ButtonGroup>
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index b54cce64b8..afe8c59c13 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import type { z } from "zod";
 
 import { Price } from "@calcom/features/bookings/components/event-meta/Price";
-import { getPriceIcon } from "@calcom/features/bookings/components/event-meta/getPriceIcon";
+import { PriceIcon } from "@calcom/features/bookings/components/event-meta/PriceIcon";
 import { classNames, parseRecurringEvent } from "@calcom/lib";
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -11,7 +11,6 @@ import type { baseEventTypeSelect } from "@calcom/prisma";
 import { SchedulingType } from "@calcom/prisma/enums";
 import type { EventTypeModel } from "@calcom/prisma/zod";
 import { Badge } from "@calcom/ui";
-import { Clock, Users, RefreshCw, Clipboard, Plus, User, Lock } from "@calcom/ui/components/icon";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
@@ -59,34 +58,34 @@ export const EventTypeDescription = ({
           {eventType.metadata?.multipleDuration ? (
             eventType.metadata.multipleDuration.map((dur, idx) => (
               <li key={idx}>
-                <Badge variant="gray" startIcon={Clock}>
+                <Badge variant="gray" startIcon="clock">
                   {dur}m
                 </Badge>
               </li>
             ))
           ) : (
             <li>
-              <Badge variant="gray" startIcon={Clock}>
+              <Badge variant="gray" startIcon="clock">
                 {eventType.length}m
               </Badge>
             </li>
           )}
           {eventType.schedulingType && eventType.schedulingType !== SchedulingType.MANAGED && (
             <li>
-              <Badge variant="gray" startIcon={Users}>
+              <Badge variant="gray" startIcon="users">
                 {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
                 {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
               </Badge>
             </li>
           )}
           {eventType.metadata?.managedEventConfig && !isPublic && (
-            <Badge variant="gray" startIcon={Lock}>
+            <Badge variant="gray" startIcon="lock">
               {t("managed")}
             </Badge>
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
             <li className="hidden xl:block" data-testid="repeat-eventtype">
-              <Badge variant="gray" startIcon={RefreshCw}>
+              <Badge variant="gray" startIcon="refresh-cw">
                 {t("repeats_up_to", {
                   count: recurringEvent.count,
                 })}
@@ -95,7 +94,11 @@ export const EventTypeDescription = ({
           )}
           {paymentAppData.enabled && (
             <li>
-              <Badge variant="gray" startIcon={getPriceIcon(paymentAppData.currency)}>
+              <Badge
+                variant="gray"
+                customStartIcon={
+                  <PriceIcon currency={paymentAppData.currency} className="h-3 w-3 stroke-[3px]" />
+                }>
                 <Price
                   currency={paymentAppData.currency}
                   price={paymentAppData.price}
@@ -106,7 +109,7 @@ export const EventTypeDescription = ({
           )}
           {eventType.requiresConfirmation && (
             <li className="hidden xl:block" data-testid="requires-confirmation-badge">
-              <Badge variant="gray" startIcon={Clipboard}>
+              <Badge variant="gray" startIcon="clipboard">
                 {eventType.metadata?.requiresConfirmationThreshold
                   ? t("may_require_confirmation")
                   : t("requires_confirmation")}
@@ -116,7 +119,7 @@ export const EventTypeDescription = ({
           {/* TODO: Maybe add a tool tip to this? */}
           {eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
             <li className="block xl:hidden">
-              <Badge variant="gray" startIcon={Plus}>
+              <Badge variant="gray" startIcon="plus">
                 <p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
               </Badge>
             </li>
@@ -125,7 +128,7 @@ export const EventTypeDescription = ({
           )}
           {eventType?.seatsPerTimeSlot ? (
             <li>
-              <Badge variant="gray" startIcon={User}>
+              <Badge variant="gray" startIcon="user">
                 <p>{t("event_type_seats", { numberOfSeats: eventType.seatsPerTimeSlot })} </p>
               </Badge>
             </li>
diff --git a/packages/features/eventtypes/components/MultiDropdownSelect.tsx b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
index c4a137c81b..46fd4416f7 100644
--- a/packages/features/eventtypes/components/MultiDropdownSelect.tsx
+++ b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
@@ -2,7 +2,6 @@ import type { GroupBase, Props, ValueContainerProps } from "react-select";
 import { components } from "react-select";
 
 import { Select } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
   children,
@@ -24,7 +23,8 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
       {overflowCounter > 0 && (
         <span className="bg-subtle text-default flex items-center justify-center rounded-md px-2 py-[5px] text-[14px] font-medium leading-4">
           <>
-            <Plus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
+            <Icon name="plus" className="mr-1 inline h-3 w-3 stroke-[3px]" />{" "}
+            <span>{overflowCounter} more</span>
           </>
         </span>
       )}
diff --git a/packages/features/filters/components/TeamsFilter.tsx b/packages/features/filters/components/TeamsFilter.tsx
index ee04e858f4..4648ac8f5c 100644
--- a/packages/features/filters/components/TeamsFilter.tsx
+++ b/packages/features/filters/components/TeamsFilter.tsx
@@ -1,15 +1,14 @@
 import { useSession } from "next-auth/react";
-import type { ReactNode, InputHTMLAttributes } from "react";
+import type { InputHTMLAttributes, ReactNode } from "react";
 import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
-import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, Divider, Tooltip, VerticalDivider } from "@calcom/ui";
-import { Layers, User } from "@calcom/ui/components/icon";
+import { trpc } from "@calcom/trpc/react";
+import { AnimatedPopover, Avatar, Divider, Icon, Tooltip, VerticalDivider } from "@calcom/ui";
 
 import { filterQuerySchema } from "../lib/getTeamsFiltersFromQuery";
 
@@ -73,7 +72,7 @@ export const TeamsFilter = ({
         <FilterCheckboxFieldsContainer>
           <FilterCheckboxField
             id="all"
-            icon={<Layers className="h-4 w-4" />}
+            icon={<Icon name="layers" className="h-4 w-4" />}
             checked={!query.teamIds && !isUserInQuery}
             onChange={removeAllQueryParams}
             label={t("all")}
@@ -81,7 +80,7 @@ export const TeamsFilter = ({
 
           <FilterCheckboxField
             id="yours"
-            icon={<User className="h-4 w-4" />}
+            icon={<Icon name="user" className="h-4 w-4" />}
             checked={!!isUserInQuery}
             onChange={(e) => {
               if (e.target.checked) {
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index adb2944d5c..4949de5668 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -1,30 +1,30 @@
 import { useEffect } from "react";
 import type { z } from "zod";
 
-import Widgets from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
 import type {
-  TextLikeComponentProps,
   SelectLikeComponentProps,
+  TextLikeComponentProps,
 } from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
+import Widgets from "@calcom/app-store/routing-forms/components/react-awesome-query-builder/widgets";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
-  PhoneInput,
   AddressInput,
   Button,
-  Label,
-  Group,
-  RadioField,
-  EmailField,
-  Tooltip,
-  InputField,
   CheckboxField,
+  EmailField,
+  Group,
+  Icon,
+  InfoBadge,
+  InputField,
+  Label,
+  PhoneInput,
+  RadioField,
+  Tooltip,
 } from "@calcom/ui";
-import { InfoBadge } from "@calcom/ui";
-import { UserPlus, X } from "@calcom/ui/components/icon";
 
 import { ComponentForField } from "./FormBuilderField";
 import { propsTypes } from "./propsTypes";
-import type { FieldType, variantsConfigSchema, fieldSchema } from "./schema";
+import type { fieldSchema, FieldType, variantsConfigSchema } from "./schema";
 import { preprocessNameFieldDataWithVariant } from "./utils";
 
 export const isValidValueProp: Record<Component["propsType"], (val: unknown) => boolean> = {
@@ -264,7 +264,7 @@ export const Components: Record<FieldType, Component> = {
                         !readOnly ? (
                           <Tooltip content="Remove email">
                             <button className="m-1" type="button">
-                              <X width={12} className="text-default" />
+                              <Icon name="x" width={12} className="text-default" />
                             </button>
                           </Tooltip>
                         ) : null
@@ -278,7 +278,7 @@ export const Components: Record<FieldType, Component> = {
                   data-testid="add-another-guest"
                   type="button"
                   color="minimal"
-                  StartIcon={UserPlus}
+                  StartIcon="user-plus"
                   className="my-2.5"
                   onClick={() => {
                     value.push("");
@@ -297,7 +297,7 @@ export const Components: Record<FieldType, Component> = {
               data-testid="add-guests"
               color="minimal"
               variant="button"
-              StartIcon={UserPlus}
+              StartIcon="user-plus"
               onClick={() => {
                 value.push("");
                 setValue(value);
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 62e6ec8377..33b8183f4e 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -1,7 +1,7 @@
 import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useState, useEffect } from "react";
-import { Controller, useFieldArray, useFormContext, useForm } from "react-hook-form";
-import type { UseFormReturn, SubmitHandler } from "react-hook-form";
+import { useEffect, useState } from "react";
+import type { SubmitHandler, UseFormReturn } from "react-hook-form";
+import { Controller, useFieldArray, useForm, useFormContext } from "react-hook-form";
 import type { z } from "zod";
 
 import { getAndUpdateNormalizedValues } from "@calcom/features/form-builder/FormBuilderField";
@@ -9,23 +9,23 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import {
-  Label,
   Badge,
+  BooleanToggleGroupField,
   Button,
   Dialog,
   DialogClose,
   DialogContent,
-  DialogHeader,
   DialogFooter,
+  DialogHeader,
   Form,
-  BooleanToggleGroupField,
-  SelectField,
-  InputField,
+  Icon,
   Input,
-  Switch,
+  InputField,
+  Label,
+  SelectField,
   showToast,
+  Switch,
 } from "@calcom/ui";
-import { ArrowDown, ArrowUp, X, Plus, Trash2 } from "@calcom/ui/components/icon";
 
 import { fieldTypesConfigMap } from "./fieldTypes";
 import { fieldsThatSupportLabelAsSafeHtml } from "./fieldsThatSupportLabelAsSafeHtml";
@@ -163,7 +163,7 @@ export const FormBuilder = function FormBuilder({
                         type="button"
                         className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-subtle hover:border-emphasis invisible absolute -left-[12px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index - 1)}>
-                        <ArrowUp className="h-5 w-5" />
+                        <Icon name="arrow-up" className="h-5 w-5" />
                       </button>
                     )}
                     {index < fields.length - 1 && (
@@ -171,7 +171,7 @@ export const FormBuilder = function FormBuilder({
                         type="button"
                         className="bg-default text-muted hover:border-emphasis border-subtle hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index + 1)}>
-                        <ArrowDown className="h-5 w-5" />
+                        <Icon name="arrow-down" className="h-5 w-5" />
                       </button>
                     )}
                   </>
@@ -226,7 +226,7 @@ export const FormBuilder = function FormBuilder({
                         onClick={() => {
                           removeField(index);
                         }}
-                        StartIcon={Trash2}
+                        StartIcon="trash-2"
                       />
                     )}
                     <Button
@@ -258,7 +258,7 @@ export const FormBuilder = function FormBuilder({
             data-testid="add-field"
             onClick={addField}
             className="mt-4"
-            StartIcon={Plus}>
+            StartIcon="plus">
             {addFieldLabel}
           </Button>
         )}
@@ -367,7 +367,7 @@ function Options({
                     className="-ml-8 mb-2 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
                     size="sm"
                     color="minimal"
-                    StartIcon={X}
+                    StartIcon="x"
                     onClick={() => {
                       if (!value) {
                         return;
@@ -389,7 +389,7 @@ function Options({
               value.push({ label: "", value: "" });
               onChange(value);
             }}
-            StartIcon={Plus}>
+            StartIcon="plus">
             Add an Option
           </Button>
         )}
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index 52d363a16f..c9b6a1e9f3 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -5,8 +5,7 @@ import type { z } from "zod";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Label, InfoBadge } from "@calcom/ui";
-import { Info } from "@calcom/ui/components/icon";
+import { Icon, InfoBadge, Label } from "@calcom/ui";
 
 import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "./fieldTypes";
@@ -97,7 +96,7 @@ export const FormBuilderField = ({
                     <div
                       data-testid={`error-message-${field.name}`}
                       className="mt-2 flex items-center text-sm text-red-700 ">
-                      <Info className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                      <Icon name="info" className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                       <p>{t(message || "invalid_input")}</p>
                     </div>
                   );
diff --git a/packages/features/insights/filters/Download/index.tsx b/packages/features/insights/filters/Download/index.tsx
index e9250fe9d5..62c2caf0ac 100644
--- a/packages/features/insights/filters/Download/index.tsx
+++ b/packages/features/insights/filters/Download/index.tsx
@@ -1,10 +1,8 @@
-import { FileDownIcon } from "lucide-react";
-
 import { useFilterContext } from "@calcom/features/insights/context/provider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc";
 import { trpc } from "@calcom/trpc";
-import { Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuTrigger, Button } from "@calcom/ui";
+import { Button, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuTrigger, Icon } from "@calcom/ui";
 
 const Download = () => {
   const { filter } = useFilterContext();
@@ -58,7 +56,7 @@ const Download = () => {
     <Dropdown modal={false}>
       <DropdownMenuTrigger asChild>
         <Button
-          EndIcon={FileDownIcon}
+          EndIcon="file-down"
           color="secondary"
           {...(isPending && { loading: isPending })}
           className="self-end sm:self-baseline">
diff --git a/packages/features/insights/filters/FilterType.tsx b/packages/features/insights/filters/FilterType.tsx
index b29ae93609..bc1c87984a 100644
--- a/packages/features/insights/filters/FilterType.tsx
+++ b/packages/features/insights/filters/FilterType.tsx
@@ -1,19 +1,22 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
+import type { IconName } from "@calcom/ui";
 import {
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
+  Icon,
   Tooltip,
 } from "@calcom/ui";
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import { Plus, Link, User, Check } from "@calcom/ui/components/icon";
 
 import { useFilterContext } from "../context/provider";
 
-type Option = { value: "event-type" | "user"; label: string; StartIcon?: SVGComponent | LucideIcon };
+type Option = {
+  value: "event-type" | "user";
+  label: string;
+  StartIcon: IconName;
+};
 
 export const FilterType = () => {
   const { t } = useLocale();
@@ -24,12 +27,12 @@ export const FilterType = () => {
     {
       label: t("event_type"),
       value: "event-type",
-      StartIcon: Link,
+      StartIcon: "link",
     },
     {
       label: t("user"),
       value: "user",
-      StartIcon: User,
+      StartIcon: "user",
     },
   ];
 
@@ -46,7 +49,7 @@ export const FilterType = () => {
     <Dropdown>
       <DropdownMenuTrigger asChild>
         <div className="hover:border-emphasis border-default text-default hover:text-emphasis focus:border-subtle mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
-          <Plus className="mr-2 h-4 w-4" />
+          <Icon name="plus" className="mr-2 h-4 w-4" />
           <Tooltip content={t("add_filter")}>
             <div>{t("add_filter")}</div>
           </Tooltip>
@@ -67,7 +70,7 @@ export const FilterType = () => {
               childrenClassName="w-full">
               <div className="flex w-full items-center justify-between">
                 {t(option.label)}
-                {filterValue?.value === option.value && <Check className="h-4 w-4" />}
+                {filterValue?.value === option.value && <Icon name="check" className="h-4 w-4" />}
               </div>
             </DropdownItem>
           </DropdownMenuItem>
diff --git a/packages/features/insights/filters/TeamAndSelfList.tsx b/packages/features/insights/filters/TeamAndSelfList.tsx
index 23d0a12546..f647310097 100644
--- a/packages/features/insights/filters/TeamAndSelfList.tsx
+++ b/packages/features/insights/filters/TeamAndSelfList.tsx
@@ -8,8 +8,7 @@ import {
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { AnimatedPopover, Avatar, Divider } from "@calcom/ui";
-import { Layers, User } from "@calcom/ui/components/icon";
+import { AnimatedPopover, Avatar, Divider, Icon } from "@calcom/ui";
 
 import { useFilterContext } from "../context/provider";
 
@@ -87,7 +86,7 @@ export const TeamAndSelfList = () => {
         {isSuccess && data?.length > 0 && data[0].isOrg && (
           <FilterCheckboxField
             id="all"
-            icon={<Layers className="h-4 w-4" />}
+            icon={<Icon name="layers" className="h-4 w-4" />}
             checked={isAll}
             onChange={(e) => {
               setConfigFilters({
@@ -141,7 +140,7 @@ export const TeamAndSelfList = () => {
 
         <FilterCheckboxField
           id="yours"
-          icon={<User className="h-4 w-4" />}
+          icon={<Icon name="user" className="h-4 w-4" />}
           checked={selectedUserId === session.data?.user.id}
           onChange={(e) => {
             if (e.target.checked) {
diff --git a/packages/features/insights/filters/index.tsx b/packages/features/insights/filters/index.tsx
index a0521ca869..3edae81c6e 100644
--- a/packages/features/insights/filters/index.tsx
+++ b/packages/features/insights/filters/index.tsx
@@ -1,7 +1,6 @@
 import { useFilterContext } from "@calcom/features/insights/context/provider";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Tooltip } from "@calcom/ui";
-import { X } from "@calcom/ui/components/icon";
+import { Button, Icon, Tooltip } from "@calcom/ui";
 
 import { DateSelect } from "./DateSelect";
 import { Download } from "./Download/index";
@@ -28,7 +27,7 @@ const ClearFilters = () => {
         onClick={() => {
           clearFilters();
         }}>
-        <X className="mr-1 h-4 w-4" />
+        <Icon name="x" className="mr-1 h-4 w-4" />
         {t("clear")}
       </Button>
     </Tooltip>
@@ -58,7 +57,7 @@ export const Filters = () => {
                     color="secondary"
                     target="_blank"
                     rel="noreferrer"
-                    StartIcon={Settings}
+                    StartIcon="settings"
                     className="h-[38px]"
                   />
                 </Tooltip>
@@ -68,7 +67,7 @@ export const Filters = () => {
             color="secondary"
             target="_blank"
             rel="noreferrer"
-            StartIcon={Download}
+            StartIcon="download"
             className="h-[38px]"
           />
         </Tooltip>
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index cdc1fa7cc6..3c7409f0ae 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -1,3 +1,4 @@
+import type { Action } from "kbar";
 import {
   KBarAnimator,
   KBarPortal,
@@ -9,7 +10,6 @@ import {
   useMatches,
   useRegisterActions,
 } from "kbar";
-import type { Action } from "kbar";
 import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 
@@ -18,8 +18,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
-import { Tooltip } from "@calcom/ui";
-import { Search, ArrowUp, ArrowDown, CornerDownLeft, Command } from "@calcom/ui/components/icon";
+import { Icon, Tooltip } from "@calcom/ui";
 
 type shortcutArrayType = {
   shortcuts?: string[];
@@ -242,7 +241,7 @@ export const KBarContent = () => {
       <KBarPositioner>
         <KBarAnimator className="bg-default z-10 w-full max-w-screen-sm overflow-hidden rounded-md shadow-lg">
           <div className="border-subtle flex items-center justify-center border-b">
-            <Search className="text-default mx-3 h-4 w-4" />
+            <Icon name="search" className="text-default mx-3 h-4 w-4" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
               className="bg-default placeholder:text-subtle text-default w-full rounded-sm py-2.5 focus-visible:outline-none"
@@ -250,11 +249,11 @@ export const KBarContent = () => {
           </div>
           <RenderResults />
           <div className="text-subtle border-subtle hidden items-center space-x-1 border-t px-2 py-1.5 text-xs sm:flex">
-            <ArrowUp className="h-4 w-4" />
-            <ArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
-            <CornerDownLeft className="h-4 w-4" />
+            <Icon name="arrow-up" className="h-4 w-4" />
+            <Icon name="arrow-down" className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
+            <Icon name="corner-down-left" className="h-4 w-4" />
             <span className="pr-2">{t("open")}</span>
-            {isMac ? <Command className="h-3 w-3" /> : "CTRL"}
+            {isMac ? <Icon name="command" className="h-3 w-3" /> : "CTRL"}
             <span className="pr-1">+ K </span>
             <span className="pr-2">{t("close")}</span>
           </div>
@@ -274,7 +273,7 @@ export const KBarTrigger = () => {
           color="minimal"
           onClick={query.toggle}
           className="text-default hover:bg-subtle todesktop:hover:!bg-transparent lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md px-3 py-2 text-sm font-medium transition lg:px-2">
-          <Search className="h-4 w-4 flex-shrink-0 text-inherit" />
+          <Icon name="search" className="h-4 w-4 flex-shrink-0 text-inherit" />
         </button>
       </Tooltip>
     </>
diff --git a/packages/features/schedules/components/DateOverrideList.tsx b/packages/features/schedules/components/DateOverrideList.tsx
index 06c6dd6985..ea96959be5 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -1,7 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TimeRange, WorkingHours } from "@calcom/types/schedule";
-import { Button, DialogTrigger, Tooltip } from "@calcom/ui";
-import { Edit2, Trash2 } from "@calcom/ui/components/icon";
+import { Button, DialogTrigger, Icon, Tooltip } from "@calcom/ui";
 
 import DateOverrideInputDialog from "./DateOverrideInputDialog";
 
@@ -86,7 +85,7 @@ const DateOverrideList = ({
                     className="text-default"
                     color="minimal"
                     variant="icon"
-                    StartIcon={Edit2}
+                    StartIcon="pencil"
                   />
                 </DialogTrigger>
               }
@@ -105,7 +104,7 @@ const DateOverrideList = ({
                 })}
                 color="destructive"
                 variant="icon"
-                StartIcon={Trash2}
+                StartIcon="trash-2"
                 onClick={() => {
                   replace([...fields.filter((currentItem) => currentItem.id !== item.id)]);
                 }}
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 77aa0d4955..546cbac4ea 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -12,10 +12,10 @@ import {
   DialogFooter,
   DialogTrigger,
   Form,
+  Icon,
   InputField,
   showToast,
 } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 export function NewScheduleButton({
   name = "new-schedule",
@@ -65,7 +65,7 @@ export function NewScheduleButton({
   return (
     <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
       <DialogTrigger asChild>
-        <Button variant="fab" data-testid={name} StartIcon={Plus}>
+        <Button variant="fab" data-testid={name} StartIcon="plus">
           {t("new")}
         </Button>
       </DialogTrigger>
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 13aa9ee510..5d3f0982e5 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type {
   ArrayPath,
   Control,
@@ -22,15 +22,15 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { TimeRange } from "@calcom/types/schedule";
 import {
   Button,
+  CheckboxField,
   Dropdown,
   DropdownMenuContent,
   DropdownMenuTrigger,
+  Icon,
   Select,
   SkeletonText,
   Switch,
-  CheckboxField,
 } from "@calcom/ui";
-import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
 
 export type { TimeRange };
 
@@ -150,7 +150,7 @@ const CopyButton = ({
           tooltip={labels?.copyTime ?? t("copy_times_to_tooltip")}
           color="minimal"
           variant="icon"
-          StartIcon={Copy}
+          StartIcon="copy"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -294,7 +294,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 type="button"
                 color="minimal"
                 variant="icon"
-                StartIcon={Plus}
+                StartIcon="plus"
                 onClick={() => {
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   const slotRange: any = getDateSlotRange(
@@ -342,7 +342,7 @@ const RemoveTimeButton = ({
       type="button"
       variant="icon"
       color="destructive"
-      StartIcon={Trash}
+      StartIcon="trash"
       onClick={() => remove(index)}
       className={className}
       tooltip={labels?.deleteTime ?? t("delete")}
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index f3ddb528b9..ab66b23030 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -9,13 +9,13 @@ import {
   Badge,
   Button,
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuTrigger,
+  Icon,
   showToast,
 } from "@calcom/ui";
-import { Globe, MoreHorizontal, Trash, Star, Copy } from "@calcom/ui/components/icon";
 
 export function ScheduleListItem({
   schedule,
@@ -69,7 +69,7 @@ export function ScheduleListItem({
                 ))}
               {(schedule.timeZone || displayOptions?.timeZone) && (
                 <p className="my-1 flex items-center first-letter:text-xs">
-                  <Globe className="h-3.5 w-3.5" />
+                  <Icon name="globe" className="h-3.5 w-3.5" />
                   &nbsp;{schedule.timeZone ?? displayOptions?.timeZone}
                 </p>
               )}
@@ -84,7 +84,7 @@ export function ScheduleListItem({
               type="button"
               variant="icon"
               color="secondary"
-              StartIcon={MoreHorizontal}
+              StartIcon="ellipsis"
             />
           </DropdownMenuTrigger>
           {!isPending && data && (
@@ -93,7 +93,7 @@ export function ScheduleListItem({
                 {!schedule.isDefault && (
                   <DropdownItem
                     type="button"
-                    StartIcon={Star}
+                    StartIcon="star"
                     onClick={() => {
                       updateDefault({
                         scheduleId: schedule.id,
@@ -108,7 +108,7 @@ export function ScheduleListItem({
                 <DropdownItem
                   type="button"
                   data-testid={`schedule-duplicate${schedule.id}`}
-                  StartIcon={Copy}
+                  StartIcon="copy"
                   onClick={() => {
                     duplicateFunction({
                       scheduleId: schedule.id,
@@ -121,7 +121,7 @@ export function ScheduleListItem({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={Trash}
+                  StartIcon="trash"
                   data-testid="delete-schedule"
                   onClick={() => {
                     if (!isDeletable) {
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 099bb464ea..f3573f8dd5 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -16,27 +16,13 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { IdentityProvider, MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { VerticalTabItemProps } from "@calcom/ui";
-import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
-import {
-  ArrowLeft,
-  ChevronDown,
-  ChevronRight,
-  CreditCard,
-  Key,
-  Loader,
-  Lock,
-  Menu,
-  Plus,
-  Terminal,
-  User,
-  Users,
-} from "@calcom/ui/components/icon";
+import { Badge, Button, ErrorBoundary, Icon, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 
 const tabs: VerticalTabItemProps[] = [
   {
     name: "my_account",
     href: "/settings/my-account",
-    icon: User,
+    icon: "user",
     children: [
       { name: "profile", href: "/settings/my-account/profile" },
       { name: "general", href: "/settings/my-account/general" },
@@ -51,7 +37,7 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "security",
     href: "/settings/security",
-    icon: Key,
+    icon: "key",
     children: [
       { name: "password", href: "/settings/security/password" },
       { name: "impersonation", href: "/settings/security/impersonation" },
@@ -61,13 +47,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "billing",
     href: "/settings/billing",
-    icon: CreditCard,
+    icon: "credit-card",
     children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: Terminal,
+    icon: "terminal",
     children: [
       //
       { name: "webhooks", href: "/settings/developer/webhooks" },
@@ -118,13 +104,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "teams",
     href: "/teams",
-    icon: Users,
+    icon: "users",
     children: [],
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: Lock,
+    icon: "lock",
     children: [
       //
       { name: "features", href: "/settings/admin/flags" },
@@ -191,7 +177,10 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       href="/"
       className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
-      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
+      <Icon
+        name="arrow-left"
+        className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
+      />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
         {name}
       </Skeleton>
@@ -274,7 +263,7 @@ const SettingsSidebarContainer = ({
     tabsWithPermissions.splice(teamsIndex + 1, 0, {
       name: "other_teams",
       href: "/settings/organizations/teams/other",
-      icon: Users,
+      icon: "users",
       children: [],
     });
   }
@@ -300,7 +289,10 @@ const SettingsSidebarContainer = ({
                   <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
                     <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-9 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                       {tab && tab.icon && (
-                        <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                        <Icon
+                          name={tab.icon}
+                          className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                        />
                       )}
                       {!tab.icon && tab?.avatar && (
                         <img
@@ -342,7 +334,10 @@ const SettingsSidebarContainer = ({
                     <Link href={tab.href}>
                       <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                         {tab && tab.icon && (
-                          <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                          <Icon
+                            name={tab.icon}
+                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                          />
                         )}
                         <Skeleton
                           title={tab.name}
@@ -388,9 +383,9 @@ const SettingsSidebarContainer = ({
                                   }>
                                   <div className="me-3">
                                     {teamMenuState[index].teamMenuOpen ? (
-                                      <ChevronDown className="h-4 w-4" />
+                                      <Icon name="chevron-down" className="h-4 w-4" />
                                     ) : (
-                                      <ChevronRight className="h-4 w-4" />
+                                      <Icon name="chevron-right" className="h-4 w-4" />
                                     )}
                                   </div>
                                   {!team.parentId && (
@@ -464,7 +459,7 @@ const SettingsSidebarContainer = ({
                         name={t("add_a_team")}
                         href={`${WEBAPP_URL}/settings/teams/new`}
                         textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
-                        icon={Plus}
+                        icon="plus"
                         disableChevron
                       />
                     )}
@@ -478,7 +473,10 @@ const SettingsSidebarContainer = ({
                     <Link href={tab.href}>
                       <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                         {tab && tab.icon && (
-                          <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                          <Icon
+                            name={tab.icon}
+                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                          />
                         )}
                         <Skeleton
                           title={t("org_admin_other_teams")}
@@ -524,9 +522,9 @@ const SettingsSidebarContainer = ({
                                   }>
                                   <div className="me-3">
                                     {otherTeamMenuState[index].teamMenuOpen ? (
-                                      <ChevronDown className="h-4 w-4" />
+                                      <Icon name="chevron-down" className="h-4 w-4" />
                                     ) : (
-                                      <ChevronRight className="h-4 w-4" />
+                                      <Icon name="chevron-right" className="h-4 w-4" />
                                     )}
                                   </div>
                                   {!otherTeam.parentId && (
@@ -585,14 +583,14 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
     <>
       <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b py-2 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button StartIcon={Menu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
+          <Button StartIcon="menu" color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
 
           <button
             className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
             onClick={() => router.back()}>
-            <ArrowLeft className="text-default h-4 w-4" />
+            <Icon name="arrow-left" className="text-default h-4 w-4" />
             <p className="text-emphasis font-semibold">{t("settings")}</p>
           </button>
         </div>
@@ -650,7 +648,7 @@ export default function SettingsLayout({
         <div className="mx-auto max-w-full justify-center lg:max-w-4xl">
           <ShellHeader />
           <ErrorBoundary>
-            <Suspense fallback={<Loader />}>{children}</Suspense>
+            <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
           </ErrorBoundary>
         </div>
       </div>
@@ -704,7 +702,7 @@ export function ShellHeader() {
         <div className="flex w-full items-center">
           {meta.backButton && (
             <a href="javascript:history.back()">
-              <ArrowLeft className="mr-7" />
+              <Icon name="arrow-left" className="mr-7" />
             </a>
           )}
           <div>
diff --git a/packages/features/settings/layouts/SettingsLayoutAppDir.tsx b/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
index d87b1fdd98..8096e0f67d 100644
--- a/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
+++ b/packages/features/settings/layouts/SettingsLayoutAppDir.tsx
@@ -18,27 +18,13 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { IdentityProvider, MembershipRole, UserPermissionRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { VerticalTabItemProps } from "@calcom/ui";
-import { Badge, Button, ErrorBoundary, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
-import {
-  ArrowLeft,
-  ChevronDown,
-  ChevronRight,
-  CreditCard,
-  Key,
-  Loader,
-  Lock,
-  Menu,
-  Plus,
-  Terminal,
-  User,
-  Users,
-} from "@calcom/ui/components/icon";
+import { Badge, Button, ErrorBoundary, Icon, Skeleton, useMeta, VerticalTabItem } from "@calcom/ui";
 
 const tabs: VerticalTabItemProps[] = [
   {
     name: "my_account",
     href: "/settings/my-account",
-    icon: User,
+    icon: "user",
     children: [
       { name: "profile", href: "/settings/my-account/profile" },
       { name: "general", href: "/settings/my-account/general" },
@@ -52,7 +38,7 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "security",
     href: "/settings/security",
-    icon: Key,
+    icon: "key",
     children: [
       { name: "password", href: "/settings/security/password" },
       { name: "impersonation", href: "/settings/security/impersonation" },
@@ -62,13 +48,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "billing",
     href: "/settings/billing",
-    icon: CreditCard,
+    icon: "credit-card",
     children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: Terminal,
+    icon: "terminal",
     children: [
       //
       { name: "webhooks", href: "/settings/developer/webhooks" },
@@ -106,13 +92,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "teams",
     href: "/teams",
-    icon: Users,
+    icon: "users",
     children: [],
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: Lock,
+    icon: "lock",
     children: [
       //
       { name: "features", href: "/settings/admin/flags" },
@@ -179,7 +165,10 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       href="/"
       className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
-      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
+      <Icon
+        name="arrow-left"
+        className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
+      />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
         {name}
       </Skeleton>
@@ -260,7 +249,7 @@ const SettingsSidebarContainer = ({
     tabsWithPermissions.splice(teamsIndex + 1, 0, {
       name: "other_teams",
       href: "/settings/organizations/teams/other",
-      icon: Users,
+      icon: "users",
       children: [],
     });
   }
@@ -286,7 +275,10 @@ const SettingsSidebarContainer = ({
                   <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
                     <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-9 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                       {tab && tab.icon && (
-                        <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                        <Icon
+                          name={tab.icon}
+                          className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                        />
                       )}
                       {!tab.icon && tab?.avatar && (
                         <img
@@ -328,7 +320,10 @@ const SettingsSidebarContainer = ({
                     <Link href={tab.href}>
                       <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                         {tab && tab.icon && (
-                          <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                          <Icon
+                            name={tab.icon}
+                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                          />
                         )}
                         <Skeleton
                           title={tab.name}
@@ -374,9 +369,9 @@ const SettingsSidebarContainer = ({
                                   }>
                                   <div className="me-3">
                                     {teamMenuState[index].teamMenuOpen ? (
-                                      <ChevronDown className="h-4 w-4" />
+                                      <Icon name="chevron-down" className="h-4 w-4" />
                                     ) : (
-                                      <ChevronRight className="h-4 w-4" />
+                                      <Icon name="chevron-right" className="h-4 w-4" />
                                     )}
                                   </div>
                                   {!team.parentId && (
@@ -458,7 +453,7 @@ const SettingsSidebarContainer = ({
                         name={t("add_a_team")}
                         href={`${WEBAPP_URL}/settings/teams/new`}
                         textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
-                        icon={Plus}
+                        icon="plus"
                         disableChevron
                       />
                     )}
@@ -472,7 +467,10 @@ const SettingsSidebarContainer = ({
                     <Link href={tab.href}>
                       <div className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-default group flex h-9 w-full flex-row items-center rounded-md px-2 py-[10px]  text-sm font-medium leading-none">
                         {tab && tab.icon && (
-                          <tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
+                          <Icon
+                            name={tab.icon}
+                            className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0"
+                          />
                         )}
                         <Skeleton
                           title={t("org_admin_other_teams")}
@@ -518,9 +516,9 @@ const SettingsSidebarContainer = ({
                                   }>
                                   <div className="me-3">
                                     {otherTeamMenuState[index].teamMenuOpen ? (
-                                      <ChevronDown className="h-4 w-4" />
+                                      <Icon name="chevron-down" className="h-4 w-4" />
                                     ) : (
-                                      <ChevronRight className="h-4 w-4" />
+                                      <Icon name="chevron-right" className="h-4 w-4" />
                                     )}
                                   </div>
                                   {!otherTeam.parentId && (
@@ -579,14 +577,14 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
     <>
       <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b py-2 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button StartIcon={Menu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
+          <Button StartIcon="menu" color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
 
           <button
             className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
             onClick={() => router.back()}>
-            <ArrowLeft className="text-default h-4 w-4" />
+            <Icon name="arrow-left" className="text-default h-4 w-4" />
             <p className="text-emphasis font-semibold">{t("settings")}</p>
           </button>
         </div>
@@ -644,7 +642,7 @@ export default function SettingsLayout({
         <div className="mx-auto max-w-full justify-center lg:max-w-4xl">
           <ShellHeader />
           <ErrorBoundary>
-            <Suspense fallback={<Loader />}>{children}</Suspense>
+            <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
           </ErrorBoundary>
         </div>
       </div>
@@ -698,7 +696,7 @@ export function ShellHeader() {
         <div className="flex w-full items-center">
           {meta.backButton && (
             <a href="javascript:history.back()">
-              <ArrowLeft className="mr-7" />
+              <Icon name="arrow-left" className="mr-7" />
             </a>
           )}
           <div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index b9d3e1c5c4..4636bb7f9a 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -41,12 +41,12 @@ import classNames from "@calcom/lib/classNames";
 import {
   APP_NAME,
   DESKTOP_APP_LINK,
+  ENABLE_PROFILE_SWITCHER,
+  IS_VISUAL_REGRESSION_TESTING,
   JOIN_DISCORD,
   ROADMAP,
-  WEBAPP_URL,
-  IS_VISUAL_REGRESSION_TESTING,
   TOP_BANNER_HEIGHT,
-  ENABLE_PROFILE_SWITCHER,
+  WEBAPP_URL,
 } from "@calcom/lib/constants";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
 import getBrandColours from "@calcom/lib/getBrandColours";
@@ -58,7 +58,6 @@ import type { User } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import useEmailVerifyCheck from "@calcom/trpc/react/hooks/useEmailVerifyCheck";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
 import {
   Avatar,
   Button,
@@ -73,38 +72,14 @@ import {
   DropdownMenuTrigger,
   ErrorBoundary,
   HeadSeo,
+  Icon,
   Logo,
   showToast,
   SkeletonText,
   Tooltip,
   useCalcomTheme,
+  type IconName,
 } from "@calcom/ui";
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import {
-  ArrowLeft,
-  ArrowRight,
-  BarChart,
-  Calendar,
-  ChevronDown,
-  Clock,
-  Copy,
-  Download,
-  ExternalLink,
-  FileText,
-  Grid,
-  HelpCircle,
-  Link as LinkIcon,
-  LogOut,
-  Map,
-  Moon,
-  MoreHorizontal,
-  Settings,
-  User as UserIcon,
-  Users,
-  Sparkles,
-  Zap,
-  Check,
-} from "@calcom/ui/components/icon";
 import { Discord } from "@calcom/ui/components/icon/Discord";
 
 import { useOrgBranding } from "../ee/organizations/context/provider";
@@ -481,7 +456,8 @@ function UserDropdown({ small }: UserDropdownProps) {
                   {user.name || "Nameless User"}
                 </span>
               </span>
-              <ChevronDown
+              <Icon
+                name="chevron-down"
                 className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 rtl:mr-4"
                 aria-hidden="true"
               />
@@ -506,9 +482,7 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props: { className?: string }) => (
-                      <UserIcon className={classNames("text-default", props.className)} aria-hidden="true" />
-                    )}
+                    CustomStartIcon={<Icon name="user" className="text-default h-4 w-4" aria-hidden="true" />}
                     href="/settings/my-account/profile">
                     {t("my_profile")}
                   </DropdownItem>
@@ -516,9 +490,9 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props: { className?: string }) => (
-                      <Settings className={classNames("text-default", props.className)} aria-hidden="true" />
-                    )}
+                    CustomStartIcon={
+                      <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
+                    }
                     href="/settings/my-account/general">
                     {t("my_settings")}
                   </DropdownItem>
@@ -526,9 +500,7 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props: { className?: string }) => (
-                      <Moon className={classNames("text-default", props.className)} aria-hidden="true" />
-                    )}
+                    CustomStartIcon={<Icon name="moon" className="text-default h-4 w-4" aria-hidden="true" />}
                     href="/settings/my-account/out-of-office">
                     {t("out_of_office")}
                   </DropdownItem>
@@ -536,7 +508,7 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem>
                   <DropdownItem
-                    StartIcon={() => <Discord className="text-default h-4 w-4" />}
+                    CustomStartIcon={<Discord className="text-default h-4 w-4" />}
                     target="_blank"
                     rel="noreferrer"
                     href={JOIN_DISCORD}>
@@ -544,22 +516,21 @@ function UserDropdown({ small }: UserDropdownProps) {
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
-                  <DropdownItem StartIcon={Map} target="_blank" href={ROADMAP}>
+                  <DropdownItem StartIcon="map" target="_blank" href={ROADMAP}>
                     {t("visit_roadmap")}
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props: { className?: string }) => (
-                      <HelpCircle aria-hidden="true" {...props} />
-                    )}
+                    StartIcon="circle-help"
+                    aria-hidden="true"
                     onClick={() => setHelpOpen(true)}>
                     {t("help")}
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem className="todesktop:hidden hidden lg:flex">
-                  <DropdownItem StartIcon={Download} target="_blank" rel="noreferrer" href={DESKTOP_APP_LINK}>
+                  <DropdownItem StartIcon="download" target="_blank" rel="noreferrer" href={DESKTOP_APP_LINK}>
                     {t("download_desktop_app")}
                   </DropdownItem>
                 </DropdownMenuItem>
@@ -569,7 +540,8 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props: { className?: string }) => <LogOut aria-hidden="true" {...props} />}
+                    StartIcon="log-out"
+                    aria-hidden="true"
                     onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
                     {t("sign_out")}
                   </DropdownItem>
@@ -589,7 +561,7 @@ export type NavigationItemType = {
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
   target?: HTMLAnchorElement["target"];
   badge?: React.ReactNode;
-  icon?: SVGComponent | LucideIcon;
+  icon?: IconName;
   child?: NavigationItemType[];
   pro?: true;
   onlyMobile?: boolean;
@@ -612,31 +584,31 @@ const navigation: NavigationItemType[] = [
   {
     name: "event_types_page_title",
     href: "/event-types",
-    icon: LinkIcon,
+    icon: "link",
   },
   {
     name: "bookings",
     href: "/bookings/upcoming",
-    icon: Calendar,
+    icon: "calendar",
     badge: <UnconfirmedBookingBadge />,
     isCurrent: ({ pathname }) => pathname?.startsWith("/bookings") ?? false,
   },
   {
     name: "availability",
     href: "/availability",
-    icon: Clock,
+    icon: "clock",
   },
   {
     name: "teams",
     href: "/teams",
-    icon: Users,
+    icon: "users",
     onlyDesktop: true,
     badge: <TeamInviteBadge />,
   },
   {
     name: "apps",
     href: "/apps",
-    icon: Grid,
+    icon: "grid-3x3",
     isCurrent: ({ pathname: path, item }) => {
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
       return (path?.startsWith(item.href) ?? false) && !(path?.includes("routing-forms/") ?? false);
@@ -666,23 +638,23 @@ const navigation: NavigationItemType[] = [
   {
     name: MORE_SEPARATOR_NAME,
     href: "/more",
-    icon: MoreHorizontal,
+    icon: "ellipsis",
   },
   {
     name: "Routing Forms",
     href: "/apps/routing-forms/forms",
-    icon: FileText,
+    icon: "file-text",
     isCurrent: ({ pathname }) => pathname?.startsWith("/apps/routing-forms/") ?? false,
   },
   {
     name: "workflows",
     href: "/workflows",
-    icon: Zap,
+    icon: "zap",
   },
   {
     name: "insights",
     href: "/insights",
-    icon: BarChart,
+    icon: "bar-chart",
   },
 ];
 
@@ -764,7 +736,8 @@ const NavigationItem: React.FC<{
           )}
           aria-current={current ? "page" : undefined}>
           {item.icon && (
-            <item.icon
+            <Icon
+              name={item.icon}
               className="todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit"
               aria-hidden="true"
               aria-current={current ? "page" : undefined}
@@ -835,7 +808,8 @@ const MobileNavigationItem: React.FC<{
       aria-current={current ? "page" : undefined}>
       {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
       {item.icon && (
-        <item.icon
+        <Icon
+          name={item.icon}
           className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit"
           aria-hidden="true"
           aria-current={current ? "page" : undefined}
@@ -860,10 +834,12 @@ const MobileNavigationMoreItem: React.FC<{
     <li className="border-subtle border-b last:border-b-0" key={item.name}>
       <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
         <span className="text-default flex items-center font-semibold ">
-          {item.icon && <item.icon className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />}
+          {item.icon && (
+            <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
+          )}
           {isLocaleReady ? t(item.name) : <SkeletonText />}
         </span>
-        <ArrowRight className="text-subtle h-5 w-5" />
+        <Icon name="arrow-right" className="text-subtle h-5 w-5" />
       </Link>
     </li>
   );
@@ -902,7 +878,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
     {
       name: "view_public_page",
       href: publicPageUrl,
-      icon: ExternalLink,
+      icon: "external-link",
       target: "__blank",
     },
     {
@@ -913,12 +889,12 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
         navigator.clipboard.writeText(publicPageUrl);
         showToast(t("link_copied"), "success");
       },
-      icon: Copy,
+      icon: "copy",
     },
     {
       name: "settings",
       href: user?.org ? `/settings/organizations/profile` : "/settings/my-account/profile",
-      icon: Settings,
+      icon: "settings",
     },
   ];
   return (
@@ -960,13 +936,19 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                 color="minimal"
                 onClick={() => window.history.back()}
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <ArrowLeft className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
+                <Icon
+                  name="arrow-left"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <ArrowRight className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
+                <Icon
+                  name="arrow-right"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                />
               </button>
               {!!orgBranding && (
                 <div data-testid="user-dropdown-trigger" className="flex items-center">
@@ -987,7 +969,7 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
 
         <div>
           <Tips />
-          {bottomNavItems.map(({ icon: Icon, ...item }, index) => (
+          {bottomNavItems.map((item, index) => (
             <Tooltip side="right" content={t(item.name)} className="lg:hidden" key={item.name}>
               <ButtonOrLink
                 id={item.name}
@@ -1002,8 +984,9 @@ function SideBar({ bannersHeight, user }: SideBarProps) {
                   index === 0 && "mt-3"
                 )}
                 onClick={item.onClick}>
-                {!!Icon && (
+                {!!item.icon && (
                   <Icon
+                    name={item.icon}
                     className={classNames(
                       "h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
                       "me-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2"
@@ -1049,7 +1032,7 @@ export function ShellMain(props: LayoutProps) {
               onClick={() =>
                 typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
               }
-              StartIcon={ArrowLeft}
+              StartIcon="arrow-left"
               aria-label="Go Back"
               className="rounded-md ltr:mr-2 rtl:ml-2"
             />
@@ -1145,7 +1128,7 @@ function TopNav() {
           <button className="hover:bg-muted hover:text-subtle text-muted rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
             <span className="sr-only">{t("settings")}</span>
             <Link href="/settings/my-account/profile">
-              <Settings className="text-default h-4 w-4" aria-hidden="true" />
+              <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
             </Link>
           </button>
           <UserDropdown small />
@@ -1200,7 +1183,8 @@ function ProfileDropdown() {
             <span className="block w-20 overflow-hidden overflow-ellipsis whitespace-nowrap">
               {currentOption.label}
             </span>
-            <ChevronDown
+            <Icon
+              name="chevron-down"
               className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 rtl:mr-4"
               aria-hidden="true"
             />
@@ -1240,7 +1224,9 @@ function ProfileDropdown() {
                     <Avatar alt={option.label || ""} size="xsm" />
                     <span className="ml-2">{option.label}</span>
                   </span>
-                  {isSelected ? <Check className="ml-2 inline h-4 w-4" aria-hidden="true" /> : null}
+                  {isSelected ? (
+                    <Icon name="check" className="ml-2 inline h-4 w-4" aria-hidden="true" />
+                  ) : null}
                 </DropdownItem>
               </DropdownMenuItem>
             );
diff --git a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
index 573c8f5641..ef49719813 100644
--- a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
@@ -21,7 +21,6 @@ import {
   showToast,
   TimezoneSelect,
 } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 import type { SliderUser } from "./AvailabilitySliderTable";
 
@@ -72,7 +71,11 @@ const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]
           excludedDates={excludedDates}
           onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
           Trigger={
-            <Button color="secondary" StartIcon={Plus} data-testid="add-override" disabled={disabled}>
+            <Button
+              color="secondary"
+              StartIcon="plus"
+              data-testid="add-override"
+              disabled={disabled}>
               {t("add_an_override")}
             </Button>
           }
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index 5f2616ba06..97bf068eac 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -1,7 +1,6 @@
 import { keepPreviousData } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
-import { useMemo, useRef, useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
@@ -10,11 +9,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc";
 import type { UserProfile } from "@calcom/types/UserProfile";
-import { Button, ButtonGroup, DataTable } from "@calcom/ui";
-import { UserAvatar } from "@calcom/ui";
+import { Button, ButtonGroup, DataTable, Icon, UserAvatar } from "@calcom/ui";
 
 import { UpgradeTip } from "../../tips/UpgradeTip";
-import { TBContext, createTimezoneBuddyStore } from "../store";
+import { createTimezoneBuddyStore, TBContext } from "../store";
 import { AvailabilityEditSheet } from "./AvailabilityEditSheet";
 import { TimeDial } from "./TimeDial";
 
@@ -139,13 +137,13 @@ export function AvailabilitySliderTable(props: { userTimeFormat: number | null }
                 <Button
                   color="minimal"
                   variant="icon"
-                  StartIcon={ChevronLeftIcon}
+                  StartIcon="chevron-left"
                   onClick={() => setBrowsingDate(browsingDate.subtract(1, "day"))}
                 />
                 <Button
                   onClick={() => setBrowsingDate(browsingDate.add(1, "day"))}
                   color="minimal"
-                  StartIcon={ChevronRightIcon}
+                  StartIcon="chevron-right"
                   variant="icon"
                 />
               </ButtonGroup>
diff --git a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx b/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
index 90e6318184..063f74cbe9 100644
--- a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
+++ b/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
@@ -1,9 +1,8 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useMemo } from "react";
 
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, ButtonGroup } from "@calcom/ui";
+import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 import { useTroubleshooterStore } from "../store";
 
@@ -53,7 +52,7 @@ export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: numbe
             className="group rtl:ml-1 rtl:rotate-180"
             variant="icon"
             color="minimal"
-            StartIcon={ChevronLeft}
+            StartIcon="chevron-left"
             aria-label="Previous Day"
             onClick={() => addToSelectedDate(-extraDays)}
           />
@@ -61,7 +60,7 @@ export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: numbe
             className="group rtl:mr-1 rtl:rotate-180"
             variant="icon"
             color="minimal"
-            StartIcon={ChevronRight}
+            StartIcon="chevron-right"
             aria-label="Next Day"
             onClick={() => addToSelectedDate(extraDays)}
           />
diff --git a/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx b/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx
index 901296a509..25b722cda4 100644
--- a/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx
+++ b/packages/features/troubleshooter/components/TroubleshooterSidebar.tsx
@@ -1,8 +1,7 @@
-import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Skeleton } from "@calcom/ui";
+import { Icon, Skeleton } from "@calcom/ui";
 
 import { CalendarToggleContainer } from "./CalendarToggleContainer";
 import { EventScheduleItem } from "./EventScheduleItem";
@@ -13,7 +12,10 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
     <Link
       href="/availability"
       className="hover:bg-subtle group-hover:text-default text-emphasis group flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2">
-      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
+      <Icon
+        name="arrow-left"
+        className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
+      />
       <Skeleton
         title={name}
         as="p"
@@ -29,7 +31,7 @@ export const TroubleshooterSidebar = () => {
   const { t } = useLocale();
 
   return (
-    <div className="relative z-10 hidden w-full flex-col gap-6 h-screen overflow-y-auto py-6 pl-4 pr-6 sm:flex md:pl-0">
+    <div className="relative z-10 hidden h-screen w-full flex-col gap-6 overflow-y-auto py-6 pl-4 pr-6 sm:flex md:pl-0">
       <BackButtonInSidebar name={t("troubleshooter")} />
       <EventTypeSelect />
       <EventScheduleItem />
diff --git a/packages/features/troubleshooter/layout.tsx b/packages/features/troubleshooter/layout.tsx
index b9579450d3..e6ef95938c 100644
--- a/packages/features/troubleshooter/layout.tsx
+++ b/packages/features/troubleshooter/layout.tsx
@@ -2,8 +2,7 @@ import type { ComponentProps } from "react";
 import React, { Suspense } from "react";
 
 import type Shell from "@calcom/features/shell/Shell";
-import { ErrorBoundary } from "@calcom/ui";
-import { Loader } from "@calcom/ui/components/icon";
+import { ErrorBoundary, Icon } from "@calcom/ui";
 
 export default function TroubleshooterLayout({
   children,
@@ -11,7 +10,7 @@ export default function TroubleshooterLayout({
   return (
     <div className="flex flex-1 [&>*]:flex-1">
       <ErrorBoundary>
-        <Suspense fallback={<Loader />}>{children}</Suspense>
+        <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
       </ErrorBoundary>
     </div>
   );
diff --git a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
index d6a394a86b..de5d281ae2 100644
--- a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
+++ b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
@@ -1,8 +1,6 @@
-import { BanIcon } from "lucide-react";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Dialog, DialogTrigger, ConfirmationDialogContent, Button, showToast } from "@calcom/ui";
+import { Button, ConfirmationDialogContent, Dialog, DialogTrigger, showToast } from "@calcom/ui";
 
 import type { User } from "../UserListTable";
 
@@ -27,7 +25,7 @@ export function DeleteBulkUsers({ users, onRemove }: Props) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button StartIcon={BanIcon}>{t("Delete")}</Button>
+        <Button StartIcon="ban">{t("Delete")}</Button>
       </DialogTrigger>
       <ConfirmationDialogContent
         variety="danger"
diff --git a/packages/features/users/components/UserTable/BulkActions/TeamList.tsx b/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
index b4a8d22277..01d5d0e80b 100644
--- a/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
+++ b/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
@@ -1,18 +1,18 @@
 import type { Table } from "@tanstack/react-table";
-import { Users, Check } from "lucide-react";
 import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import {
+  Button,
   Command,
-  CommandInput,
-  CommandList,
-  CommandItem,
   CommandEmpty,
   CommandGroup,
-  Button,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Icon,
   Popover,
   PopoverContent,
   PopoverTrigger,
@@ -68,7 +68,7 @@ export function TeamListBulkAction({ table }: Props) {
     <>
       <Popover>
         <PopoverTrigger asChild>
-          <Button StartIcon={Users}>{t("add_to_team")}</Button>
+          <Button StartIcon="users">{t("add_to_team")}</Button>
         </PopoverTrigger>
         {/* We dont really use shadows much - but its needed here  */}
         <PopoverContent className="w-[200px] p-0 shadow-md" align="start" sideOffset={12}>
@@ -96,7 +96,7 @@ export function TeamListBulkAction({ table }: Props) {
                             "border-subtle ml-auto flex h-4 w-4 items-center justify-center rounded-sm border",
                             isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
                           )}>
-                          <Check className={classNames("h-4 w-4")} />
+                          <Icon name="check" className={classNames("h-4 w-4")} />
                         </div>
                       </CommandItem>
                     );
diff --git a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
index 68370c2dd5..075699ec33 100644
--- a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
@@ -2,7 +2,6 @@ import { classNames } from "@calcom/lib";
 import { useCopy } from "@calcom/lib/hooks/useCopy";
 import type { BadgeProps } from "@calcom/ui";
 import { Badge, Button, Label } from "@calcom/ui";
-import { ClipboardCheck, Clipboard } from "@calcom/ui/components/icon";
 
 type DisplayInfoType<T extends boolean> = {
   label: string;
@@ -49,7 +48,7 @@ export function DisplayInfo<T extends boolean>({
                     onClick={() => copyToClipboard(v)}
                     color="minimal"
                     className="text-subtle rounded-md"
-                    StartIcon={isCopied ? ClipboardCheck : Clipboard}
+                    StartIcon={isCopied ? "clipboard-check" : "clipboard"}
                   />
                 )}
               </span>
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
index ea8ef7f9aa..847f5c8659 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
@@ -5,9 +5,9 @@ import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Sheet, SheetContent, SheetFooter, Avatar, Skeleton, Loader, Label } from "@calcom/ui";
+import { Avatar, Label, Loader, Sheet, SheetContent, SheetFooter, Skeleton } from "@calcom/ui";
 
-import type { State, Action } from "../UserListTable";
+import type { Action, State } from "../UserListTable";
 import { DisplayInfo } from "./DisplayInfo";
 import { EditForm } from "./EditUserForm";
 import { SheetFooterControls } from "./SheetFooterControls";
diff --git a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
index 668a0ab6c0..fc4244d397 100644
--- a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
@@ -1,6 +1,5 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SheetClose, Button } from "@calcom/ui";
-import { Pencil } from "@calcom/ui/components/icon";
 
 import { useEditMode } from "./store";
 
@@ -47,7 +46,7 @@ function MoreInfoFooter() {
         className="w-full justify-center gap-2"
         variant="icon"
         key="EDIT_BUTTON"
-        StartIcon={Pencil}>
+        StartIcon="pencil">
         {t("edit")}
       </Button>
     </>
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index f9b4b46641..a2b3ed7901 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -1,6 +1,5 @@
 import { keepPreviousData } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
-import { Plus } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
 
@@ -333,7 +332,7 @@ export function UserListTable() {
             <Button
               type="button"
               color="primary"
-              StartIcon={Plus}
+              StartIcon="plus"
               size="sm"
               className="rounded-md"
               onClick={() =>
diff --git a/packages/features/users/components/UserTable/UserTableActions.tsx b/packages/features/users/components/UserTable/UserTableActions.tsx
index 4e2d672354..af2fcd67c3 100644
--- a/packages/features/users/components/UserTable/UserTableActions.tsx
+++ b/packages/features/users/components/UserTable/UserTableActions.tsx
@@ -1,4 +1,3 @@
-import { ExternalLink, MoreHorizontal, Edit2, UserX, Lock, SendIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 
 import { classNames } from "@calcom/lib";
@@ -63,7 +62,7 @@ export function TableActions({
             color="secondary"
             className={classNames(!permissionsForUser.canEdit ? "rounded-r-md" : "")}
             variant="icon"
-            StartIcon={ExternalLink}
+            StartIcon="external-link"
           />
         </Tooltip>
         {(permissionsForUser.canEdit || permissionsForUser.canRemove) && (
@@ -73,7 +72,7 @@ export function TableActions({
                 className="radix-state-open:rounded-r-md"
                 color="secondary"
                 variant="icon"
-                StartIcon={MoreHorizontal}
+                StartIcon="ellipsis"
               />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
@@ -90,7 +89,7 @@ export function TableActions({
                         },
                       })
                     }
-                    StartIcon={Edit2}>
+                    StartIcon="pencil">
                     {t("edit")}
                   </DropdownItem>
                 </DropdownMenuItem>
@@ -109,7 +108,7 @@ export function TableActions({
                           },
                         })
                       }
-                      StartIcon={Lock}>
+                      StartIcon="lock">
                       {t("impersonate")}
                     </DropdownItem>
                   </DropdownMenuItem>
@@ -130,7 +129,7 @@ export function TableActions({
                       })
                     }
                     color="destructive"
-                    StartIcon={UserX}>
+                    StartIcon="user-x">
                     {t("remove")}
                   </DropdownItem>
                 </DropdownMenuItem>
@@ -147,7 +146,7 @@ export function TableActions({
                         isOrg: true,
                       });
                     }}
-                    StartIcon={SendIcon}>
+                    StartIcon="send">
                     {t("resend_invitation")}
                   </DropdownItem>
                 </DropdownMenuItem>
@@ -159,11 +158,11 @@ export function TableActions({
       <div className="flex md:hidden">
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="minimal" StartIcon={MoreHorizontal} />
+            <Button type="button" variant="icon" color="minimal" StartIcon="ellipsis" />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem className="outline-none">
-              <DropdownItem type="button" StartIcon={ExternalLink}>
+              <DropdownItem type="button" StartIcon="external-link">
                 {t("view_public_page")}
               </DropdownItem>
             </DropdownMenuItem>
@@ -181,7 +180,7 @@ export function TableActions({
                         },
                       })
                     }
-                    StartIcon={Edit2}>
+                    StartIcon="pencil">
                     {t("edit")}
                   </DropdownItem>
                 </DropdownMenuItem>
@@ -201,7 +200,7 @@ export function TableActions({
                       },
                     })
                   }
-                  StartIcon={UserX}>
+                  StartIcon="user-x">
                   {t("remove")}
                 </DropdownItem>
               </DropdownMenuItem>
diff --git a/packages/features/users/components/VerifyEmailBanner.tsx b/packages/features/users/components/VerifyEmailBanner.tsx
index cdbf9125ff..b36bae49f2 100644
--- a/packages/features/users/components/VerifyEmailBanner.tsx
+++ b/packages/features/users/components/VerifyEmailBanner.tsx
@@ -2,7 +2,6 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
 import { TopBanner, showToast } from "@calcom/ui";
-import { Mail } from "@calcom/ui/components/icon";
 
 import { useFlagMap } from "../../flags/context/provider";
 
@@ -20,7 +19,7 @@ function VerifyEmailBanner({ data }: VerifyEmailBannerProps) {
   return (
     <>
       <TopBanner
-        Icon={Mail}
+        icon="mail"
         text={t("verify_email_banner_body", { appName: APP_NAME })}
         variant="warning"
         actions={
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index 4615ea573e..bdca407bfd 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -9,13 +9,12 @@ import {
   DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   DropdownMenuSeparator,
+  DropdownMenuTrigger,
   showToast,
   Switch,
   Tooltip,
 } from "@calcom/ui";
-import { Edit, MoreHorizontal, Trash, Zap } from "@calcom/ui/components/icon";
 
 type WebhookProps = {
   id: string;
@@ -93,7 +92,7 @@ export default function WebhookListItem(props: {
                 key={trigger}
                 className="mt-2.5 basis-1/5 ltr:mr-2 rtl:ml-2"
                 variant="gray"
-                startIcon={Zap}>
+                startIcon="zap">
                 {t(`${trigger.toLowerCase()}`)}
               </Badge>
             ))}
@@ -122,25 +121,25 @@ export default function WebhookListItem(props: {
           <Button
             className="hidden lg:flex"
             color="destructive"
-            StartIcon={Trash}
+            StartIcon="trash"
             variant="icon"
             onClick={onDeleteWebhook}
           />
 
           <Dropdown>
             <DropdownMenuTrigger asChild>
-              <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
+              <Button className="lg:hidden" StartIcon="ellipsis" variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Edit} color="secondary" onClick={props.onEditWebhook}>
+                <DropdownItem StartIcon="pencil" color="secondary" onClick={props.onEditWebhook}>
                   {t("edit")}
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
 
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Trash} color="destructive" onClick={onDeleteWebhook}>
+                <DropdownItem StartIcon="trash" color="destructive" onClick={onDeleteWebhook}>
                   {t("delete")}
                 </DropdownItem>
               </DropdownMenuItem>
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 11e84c252e..e8b448a969 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -4,8 +4,7 @@ import { ZodError } from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { ZTestTriggerInputSchema } from "@calcom/trpc/server/routers/viewer/webhook/testTrigger.schema";
-import { Badge, Button, showToast } from "@calcom/ui";
-import { Activity } from "@calcom/ui/components/icon";
+import { Badge, Button, Icon, showToast } from "@calcom/ui";
 
 export default function WebhookTestDisclosure() {
   const [subscriberUrl, webhookSecret]: [string, string] = useWatch({ name: ["subscriberUrl", "secret"] });
@@ -28,7 +27,7 @@ export default function WebhookTestDisclosure() {
           type="button"
           color="secondary"
           disabled={mutation.isPending || !subscriberUrl}
-          StartIcon={Activity}
+          StartIcon="activity"
           onClick={() => {
             try {
               ZTestTriggerInputSchema.parse({
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index 44ebd60b19..d6b71e7e50 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -16,7 +16,6 @@ import {
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
-import { Link as LinkIcon } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../settings/layouts/SettingsLayout";
 import { WebhookListItem } from "../components";
@@ -158,7 +157,7 @@ const WebhooksList = ({
           )}
           {!webhookGroups.length && (
             <EmptyScreen
-              Icon={LinkIcon}
+              Icon="link"
               headline={t("create_your_first_webhook")}
               description={t("create_your_first_webhook_description", { appName: APP_NAME })}
               className="rounded-b-lg rounded-t-none border-t-0"
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index f7c08da1d0..20f39f5626 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -27,7 +27,7 @@ import {
   Tooltip,
   VerticalDivider,
 } from "@calcom/ui";
-import { ArrowLeft, Info, MoreVertical, Plus, Trash } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { Shell as PlatformShell } from "../src/components/ui/shell";
 import { cn } from "../src/lib/utils";
@@ -105,7 +105,7 @@ const DeleteDialogButton = ({
     <Dialog>
       <DialogTrigger asChild>
         <Button
-          StartIcon={Trash}
+          StartIcon="trash"
           variant="icon"
           color="destructive"
           aria-label={t("delete")}
@@ -158,7 +158,7 @@ const DateOverride = ({
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
           <span className="inline-block align-middle">
-            <Info className="h-4 w-4" />
+            <Icon name="info" className="h-4 w-4" />
           </span>
         </Tooltip>
       </h3>
@@ -178,7 +178,10 @@ const DateOverride = ({
           onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
           userTimeFormat={userTimeFormat}
           Trigger={
-            <Button color="secondary" StartIcon={Plus} data-testid="add-override">
+            <Button
+              color="secondary"
+              StartIcon="plus"
+              data-testid="add-override">
               {t("add_an_override")}
             </Button>
           }
@@ -321,7 +324,11 @@ export function AvailabilitySettings({
                     openSidebar ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
                   )}>
                   <div className="flex flex-row items-center pt-5">
-                    <Button StartIcon={ArrowLeft} color="minimal" onClick={() => setOpenSidebar(false)} />
+                    <Button
+                      StartIcon="arrow-left"
+                      color="minimal"
+                      onClick={() => setOpenSidebar(false)}
+                    />
                     <p className="-ml-2">{t("availability_settings")}</p>
                     <DeleteDialogButton
                       buttonClassName="ml-16 inline"
@@ -434,7 +441,7 @@ export function AvailabilitySettings({
           </Button>
           <Button
             className="ml-3 sm:hidden"
-            StartIcon={MoreVertical}
+            StartIcon="ellipsis-vertical"
             variant="icon"
             color="secondary"
             onClick={() => setOpenSidebar(true)}
diff --git a/packages/platform/atoms/gcal-connect/GcalConnect.tsx b/packages/platform/atoms/gcal-connect/GcalConnect.tsx
index fc7a40d4b1..97be3e07aa 100644
--- a/packages/platform/atoms/gcal-connect/GcalConnect.tsx
+++ b/packages/platform/atoms/gcal-connect/GcalConnect.tsx
@@ -1,7 +1,6 @@
 import type { FC } from "react";
 
-import { Button } from "@calcom/ui";
-import { CalendarDays } from "@calcom/ui/components/icon";
+import { Button, Icon } from "@calcom/ui";
 
 import { useAtomsContext } from "../hooks/useAtomsContext";
 import { useGcal } from "../hooks/useGcal";
@@ -26,7 +25,7 @@ export const GcalConnect: FC<GcalConnectProps> = ({
 
   return (
     <Button
-      StartIcon={CalendarDays}
+      StartIcon="calendar-days"
       color="primary"
       disabled={!allowConnect}
       className={cn("", className)}
diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json
index 0eab2d9fe9..dba1be28ab 100644
--- a/packages/platform/atoms/package.json
+++ b/packages/platform/atoms/package.json
@@ -47,7 +47,7 @@
     "@tanstack/react-query": "^5.17.15",
     "class-variance-authority": "^0.4.0",
     "clsx": "^2.0.0",
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.364.0",
     "react-use": "^17.4.2",
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "^3.3.3",
diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx
index 763b73f183..e35cad9be8 100644
--- a/packages/platform/atoms/src/components/ui/dialog.tsx
+++ b/packages/platform/atoms/src/components/ui/dialog.tsx
@@ -1,7 +1,8 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
 import * as React from "react";
 
+import { Icon } from "@calcom/ui";
+
 import { cn } from "../../lib/utils";
 
 const Dialog = DialogPrimitive.Root;
@@ -42,7 +43,7 @@ const DialogContent = React.forwardRef<
       {...props}>
       {children}
       <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
+        <Icon name="x" className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
diff --git a/packages/platform/atoms/src/components/ui/toast.tsx b/packages/platform/atoms/src/components/ui/toast.tsx
index 343e047227..1d0f0f8f17 100644
--- a/packages/platform/atoms/src/components/ui/toast.tsx
+++ b/packages/platform/atoms/src/components/ui/toast.tsx
@@ -1,8 +1,9 @@
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
 import * as React from "react";
 
+import { Icon } from "@calcom/ui";
+
 import { cn } from "../../lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
@@ -72,7 +73,7 @@ const ToastClose = React.forwardRef<
     )}
     toast-close=""
     {...props}>
-    <X className="h-4 w-4" />
+    <Icon name="x" className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/packages/types/SVGComponent.d.ts b/packages/types/SVGComponent.d.ts
index 98f38b8b16..5e7911bd89 100644
--- a/packages/types/SVGComponent.d.ts
+++ b/packages/types/SVGComponent.d.ts
@@ -1 +1,3 @@
-export type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+import type { LucideProps } from "lucide-react";
+
+export type SVGComponent = (props: Omit<LucideProps, "ref">) => JSX.Element;
diff --git a/packages/ui/.eslintignore b/packages/ui/.eslintignore
new file mode 100644
index 0000000000..951519e128
--- /dev/null
+++ b/packages/ui/.eslintignore
@@ -0,0 +1 @@
+components/icon/dynamicIconImports.tsx
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 9804e63157..98ae1dc2f0 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -1,10 +1,8 @@
 import classNames from "classnames";
 import type { ReactNode } from "react";
 import { forwardRef } from "react";
-import type { IconType } from "react-icons";
 
-import type { LucideIcon } from "@calcom/ui/components/icon";
-import { CheckCircle2, Info, XCircle, AlertTriangle } from "@calcom/ui/components/icon";
+import { Icon, type IconName } from "../..";
 
 export interface AlertProps {
   title?: ReactNode;
@@ -16,7 +14,7 @@ export interface AlertProps {
   iconClassName?: string;
   // @TODO: Success and info shouldn't exist as per design?
   severity: "success" | "warning" | "error" | "info" | "neutral" | "green";
-  CustomIcon?: IconType | LucideIcon;
+  CustomIcon?: IconName;
   customIconColor?: string;
 }
 export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
@@ -39,7 +37,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
       <div className="relative flex md:flex-row">
         {CustomIcon ? (
           <div className="flex-shrink-0">
-            <CustomIcon
+            <Icon
+              name={CustomIcon}
               data-testid="custom-icon"
               aria-hidden="true"
               className={classNames(`h-5 w-5`, iconClassName, customIconColor ?? "text-default")}
@@ -48,36 +47,41 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
         ) : (
           <div className="flex-shrink-0">
             {severity === "error" && (
-              <XCircle
-                data-testid="x-circle"
+              <Icon
+                name="circle-x"
+                data-testid="circle-x"
                 className={classNames("h-5 w-5 text-red-900 dark:text-red-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "warning" && (
-              <AlertTriangle
+              <Icon
+                name="triangle-alert"
                 data-testid="alert-triangle"
                 className={classNames("text-attention h-5 w-5 dark:text-orange-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "info" && (
-              <Info
+              <Icon
+                name="info"
                 data-testid="info"
                 className={classNames("h-5 w-5 text-blue-900 dark:text-blue-200", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "neutral" && (
-              <Info
+              <Icon
+                name="info"
                 data-testid="neutral"
                 className={classNames("text-default h-5 w-5 fill-transparent", iconClassName)}
                 aria-hidden="true"
               />
             )}
             {severity === "success" && (
-              <CheckCircle2
-                data-testid="check-circle-2"
+              <Icon
+                name="circle-check"
+                data-testid="circle-check"
                 className={classNames("fill-muted text-default h-5 w-5", iconClassName)}
                 aria-hidden="true"
               />
diff --git a/packages/ui/components/alert/alert.test.tsx b/packages/ui/components/alert/alert.test.tsx
index 951c41f04b..fdc44b4e7c 100644
--- a/packages/ui/components/alert/alert.test.tsx
+++ b/packages/ui/components/alert/alert.test.tsx
@@ -14,28 +14,28 @@ describe("Tests for Alert component", () => {
     expect(screen.getByText("Click Me")).toBeInTheDocument();
   });
 
-  test("Should render corresponding icon: error", () => {
+  test("Should render corresponding icon: error", async () => {
     render(<Alert severity="error" />);
-    expect(screen.getByTestId("x-circle")).toBeInTheDocument();
+    expect(await screen.findByTestId("circle-x")).toBeInTheDocument();
   });
 
-  test("Should render corresponding icon: warning", () => {
+  test("Should render corresponding icon: warning", async () => {
     render(<Alert severity="warning" />);
-    expect(screen.getByTestId("alert-triangle")).toBeInTheDocument();
+    expect(await screen.findByTestId("alert-triangle")).toBeInTheDocument();
   });
 
-  test("Should render corresponding icon: info", () => {
+  test("Should render corresponding icon: info", async () => {
     render(<Alert severity="info" />);
-    expect(screen.getByTestId("info")).toBeInTheDocument();
+    expect(await screen.findByTestId("info")).toBeInTheDocument();
   });
 
-  test("Should render corresponding icon: neutral", () => {
+  test("Should render corresponding icon: neutral", async () => {
     render(<Alert severity="neutral" />);
-    expect(screen.getByTestId("neutral")).toBeInTheDocument();
+    expect(await screen.findByTestId("neutral")).toBeInTheDocument();
   });
 
-  test("Should render corresponding icon: success", () => {
+  test("Should render corresponding icon: success", async () => {
     render(<Alert severity="success" />);
-    expect(screen.getByTestId("check-circle-2")).toBeInTheDocument();
+    expect(await screen.findByTestId("circle-check")).toBeInTheDocument();
   });
 });
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 665d87bd43..6bbbc7ec1e 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -11,8 +11,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 
+import { Icon } from "../..";
 import { EmptyScreen } from "../empty-screen";
-import { ChevronLeft, ChevronRight, Search } from "../icon";
 import { AppCard } from "./AppCard";
 
 export function useShouldShowArrows() {
@@ -85,7 +85,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       {leftVisible && (
         <button onClick={handleLeft} className="absolute bottom-0 flex md:-top-1 md:left-1/2">
           <div className="bg-default flex h-12 w-5 items-center justify-end">
-            <ChevronLeft className="text-subtle h-4 w-4" />
+            <Icon name="chevron-left" className="text-subtle h-4 w-4" />
           </div>
           <div className="to-default flex h-12 w-5 bg-gradient-to-l from-transparent" />
         </button>
@@ -132,7 +132,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
         <button onClick={handleRight} className="absolute bottom-0 right-0 flex md:-top-1">
           <div className="to-default flex h-12 w-5 bg-gradient-to-r from-transparent" />
           <div className="bg-default flex h-12 w-5 items-center justify-end">
-            <ChevronRight className="text-subtle h-4 w-4" />
+            <Icon name="chevron-right" className="text-subtle h-4 w-4" />
           </div>
         </button>
       )}
@@ -192,7 +192,7 @@ export function AllApps({ apps, searchText, categories, userAdminTeams }: AllApp
         </div>
       ) : (
         <EmptyScreen
-          Icon={Search}
+          Icon="search"
           headline={t("no_results")}
           description={searchText ? searchText?.toString() : ""}
         />
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index c8ba5178e0..3356a70ca4 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -1,5 +1,4 @@
-import { usePathname } from "next/navigation";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
@@ -14,18 +13,17 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 import type { ButtonProps } from "@calcom/ui";
 import {
-  Dropdown,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  DropdownMenuLabel,
-  DropdownItem,
   Avatar,
   Badge,
+  Dropdown,
+  DropdownItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
 } from "@calcom/ui";
 
 import { Button } from "../button";
-import { Plus } from "../icon";
 import { showToast } from "../toast";
 
 interface AppCardProps {
@@ -81,7 +79,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
         </h3>
       </div>
       {/* TODO: add reviews <div className="flex text-sm text-default">
-            <span>{props.rating} stars</span> <StarIcon className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
+            <span>{props.rating} stars</span> <Icon name="star" className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
             <span className="pl-1 text-subtle">{props.reviews} reviews</span>
           </div> */}
       <p
@@ -214,7 +212,7 @@ const InstallAppButtonChild = ({
       <Button
         color="secondary"
         className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-        StartIcon={Plus}
+        StartIcon="plus"
         data-testid="install-app-button"
         {...props}>
         {paid.trial ? t("start_paid_trial") : t("subscribe")}
@@ -230,7 +228,7 @@ const InstallAppButtonChild = ({
       <Button
         color="secondary"
         className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-        StartIcon={Plus}
+        StartIcon="plus"
         data-testid="install-app-button"
         {...props}>
         {t("install")}
@@ -244,7 +242,7 @@ const InstallAppButtonChild = ({
         <Button
           color="secondary"
           className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-          StartIcon={Plus}
+          StartIcon="plus"
           data-testid="install-app-button"
           {...props}>
           {t("install")}
@@ -273,14 +271,13 @@ const InstallAppButtonChild = ({
                 type="button"
                 disabled={isInstalledTeamOrUser}
                 key={team.id}
-                StartIcon={(props: { className?: string }) => (
+                CustomStartIcon={
                   <Avatar
                     alt={team.logo || ""}
                     imageSrc={team.logo || `${WEBAPP_URL}/${team.logo}/avatar.png`} // if no image, use default avatar
                     size="sm"
-                    {...props}
                   />
-                )}
+                }
                 onClick={() => {
                   mutation.mutate(
                     team.isUser ? addAppMutationInput : { ...addAppMutationInput, teamId: team.id }
diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index 0db16e4070..3d6e4a8fb2 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { ArrowRight } from "../icon";
+import { Icon } from "../..";
 import { SkeletonText } from "../skeleton";
 import { Slider } from "./Slider";
 
@@ -52,7 +52,7 @@ export function AppStoreCategories({
               )}
               <p className="text-subtle pt-2 text-sm font-medium">
                 {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
-                <ArrowRight className="inline-block h-4 w-4" />
+                <Icon name="arrow-right" className="inline-block h-4 w-4" />
               </p>
             </div>
           </Link>
diff --git a/packages/ui/components/apps/Slider.tsx b/packages/ui/components/apps/Slider.tsx
index cf781f5447..a0d5cc63a3 100644
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@@ -7,7 +7,7 @@ import { useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { ArrowLeft, ArrowRight } from "../icon";
+import { Icon } from "../..";
 import { SkeletonText } from "../skeleton";
 
 const SliderButton: FC<ComponentProps<"button">> = (props) => {
@@ -63,10 +63,10 @@ export const Slider = <T extends string | unknown>({
           )}
           <div className="glide__arrows ml-auto flex items-center gap-x-1" data-glide-el="controls">
             <SliderButton data-glide-dir="<">
-              <ArrowLeft className="h-5 w-5" />
+              <Icon name="arrow-left" className="h-5 w-5" />
             </SliderButton>
             <SliderButton data-glide-dir=">">
-              <ArrowRight className="h-5 w-5" />
+              <Icon name="arrow-right" className="h-5 w-5" />
             </SliderButton>
           </div>
         </div>
diff --git a/packages/ui/components/arrow-button/ArrowButton.tsx b/packages/ui/components/arrow-button/ArrowButton.tsx
index 11515093ca..f7d16a604e 100644
--- a/packages/ui/components/arrow-button/ArrowButton.tsx
+++ b/packages/ui/components/arrow-button/ArrowButton.tsx
@@ -1,4 +1,4 @@
-import { ArrowUp, ArrowDown } from "@calcom/ui/components/icon";
+import { Icon } from "../..";
 
 export type ArrowButtonProps = {
   arrowDirection: "up" | "down";
@@ -10,15 +10,15 @@ export function ArrowButton(props: ArrowButtonProps) {
     <>
       {props.arrowDirection === "up" ? (
         <button
-          className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-0 -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex  lg:left-3"
+          className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-0 -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
           onClick={props.onClick}>
-          <ArrowUp className="h-5 w-5" />
+          <Icon name="arrow-up" className="h-5 w-5" />
         </button>
       ) : (
         <button
-          className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-0  -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex   lg:left-3"
+          className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-0 -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
           onClick={props.onClick}>
-          <ArrowDown className="h-5 w-5" />
+          <Icon name="arrow-down" className="h-5 w-5" />
         </button>
       )}
     </>
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index d8979afe86..c0d268f099 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -1,11 +1,10 @@
 import type { VariantProps } from "class-variance-authority";
 import { cva } from "class-variance-authority";
 import React from "react";
-import { GoPrimitiveDot } from "react-icons/go";
 
 import classNames from "@calcom/lib/classNames";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+
+import { Icon, type IconName } from "../..";
 
 export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
   variants: {
@@ -37,14 +36,15 @@ type InferredBadgeStyles = VariantProps<typeof badgeStyles>;
 
 type IconOrDot =
   | {
-      startIcon?: SVGComponent | LucideIcon;
-      withDot?: unknown;
+      startIcon?: IconName;
+      withDot?: never;
     }
-  | { startIcon?: unknown; withDot?: boolean };
+  | { startIcon?: never; withDot?: true };
 
 export type BadgeBaseProps = InferredBadgeStyles & {
   children: React.ReactNode;
   rounded?: boolean;
+  customStartIcon?: React.ReactNode;
 } & IconOrDot;
 
 export type BadgeProps =
@@ -58,9 +58,19 @@ export type BadgeProps =
   | (BadgeBaseProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "onClick"> & { onClick: () => void });
 
 export const Badge = function Badge(props: BadgeProps) {
-  const { variant, className, size, startIcon, withDot, children, rounded, ...passThroughProps } = props;
+  const {
+    customStartIcon,
+    variant,
+    className,
+    size,
+    startIcon,
+    withDot,
+    children,
+    rounded,
+    ...passThroughProps
+  } = props;
   const isButton = "onClick" in passThroughProps && passThroughProps.onClick !== undefined;
-  const StartIcon = startIcon ? (startIcon as SVGComponent) : undefined;
+  const StartIcon = startIcon;
   const classes = classNames(
     badgeStyles({ variant, size }),
     rounded && "h-5 w-5 rounded-full p-0",
@@ -69,8 +79,11 @@ export const Badge = function Badge(props: BadgeProps) {
 
   const Children = () => (
     <>
-      {withDot ? <GoPrimitiveDot data-testid="go-primitive-dot" className="h-3 w-3 stroke-[3px]" /> : null}
-      {StartIcon ? <StartIcon data-testid="start-icon" className="h-3 w-3 stroke-[3px]" /> : null}
+      {withDot ? <Icon name="dot" data-testid="go-primitive-dot" className="h-3 w-3 stroke-[3px]" /> : null}
+      {customStartIcon ||
+        (StartIcon ? (
+          <Icon name={StartIcon} data-testid="start-icon" className="h-3 w-3 stroke-[3px]" />
+        ) : null)}
       {children}
     </>
   );
diff --git a/packages/ui/components/badge/InfoBadge.tsx b/packages/ui/components/badge/InfoBadge.tsx
index b4ca794b98..c752820fac 100644
--- a/packages/ui/components/badge/InfoBadge.tsx
+++ b/packages/ui/components/badge/InfoBadge.tsx
@@ -1,4 +1,4 @@
-import { Info } from "../icon";
+import { Icon } from "../..";
 import { Tooltip } from "../tooltip/Tooltip";
 
 export function InfoBadge({ content }: { content: string }) {
@@ -6,7 +6,7 @@ export function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <Info className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
+          <Icon name="info" className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index 03268a037e..ae8abb2610 100644
--- a/packages/ui/components/badge/badge.stories.mdx
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -50,7 +50,7 @@ Status badge communicate status information. It is generally used within a conta
     <Badge withDot>Button Text</Badge>
   </Example>
   <Example title="With Icon">
-    <Badge startIcon={Plus}>Button Text</Badge>
+    <Badge startIcon="plus">Button Text</Badge>
   </Example>
 </Examples>
 
@@ -89,7 +89,7 @@ Alert badge is used in conjunction with an item, profile or label to indicate nu
           <Badge variant={severity} withDot>
             {label}
           </Badge>
-          <Badge variant={severity} startIcon={Plus}>
+          <Badge variant={severity} startIcon="plus">
             {label}
           </Badge>
         </VariantRow>
diff --git a/packages/ui/components/badge/badge.test.tsx b/packages/ui/components/badge/badge.test.tsx
index df08606d5f..2d299394a3 100644
--- a/packages/ui/components/badge/badge.test.tsx
+++ b/packages/ui/components/badge/badge.test.tsx
@@ -42,17 +42,16 @@ describe("Tests for Badge component", () => {
     expect(screen.getByText(children)).toBeInTheDocument();
   });
 
-  test("Should render WithDot if the prop is true and shouldn't render if is false", () => {
+  test("Should render WithDot if the prop is true and shouldn't render if is false", async () => {
     const { rerender } = render(<Badge withDot>{children}</Badge>);
-    expect(screen.getByTestId("go-primitive-dot")).toBeInTheDocument();
+    expect(await screen.findByTestId("go-primitive-dot")).toBeInTheDocument();
 
     rerender(<Badge>{children}</Badge>);
     expect(screen.queryByTestId("go-primitive-dot")).not.toBeInTheDocument();
   });
 
   test("Should render with a startIcon when startIcon prop is provided shouldn't render if is false", () => {
-    const startIcon = () => <svg data-testid="start-icon" />;
-    const { rerender } = render(<Badge startIcon={startIcon}>{children}</Badge>);
+    const { rerender } = render(<Badge customStartIcon={<svg data-testid="start-icon" />}>{children}</Badge>);
     expect(screen.getByTestId("start-icon")).toBeInTheDocument();
 
     rerender(<Badge>{children}</Badge>);
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 3fd55fed79..1a0495438b 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -5,10 +5,8 @@ import Link from "next/link";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
 
-import { Plus } from "../icon";
+import { Icon, type IconName } from "../..";
 import { Tooltip } from "../tooltip";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
@@ -18,9 +16,10 @@ export type ButtonBaseProps = {
   /** Action that happens when the button is clicked */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /**Left aligned icon*/
-  StartIcon?: SVGComponent | React.ElementType | LucideIcon;
+  CustomStartIcon?: React.ReactNode;
+  StartIcon?: IconName;
   /**Right aligned icon */
-  EndIcon?: SVGComponent | LucideIcon;
+  EndIcon?: IconName;
   shallow?: boolean;
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
@@ -129,6 +128,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     tooltipSide = "top",
     tooltipOffset = 4,
     StartIcon,
+    CustomStartIcon,
     EndIcon,
     shallow,
     // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
@@ -155,23 +155,28 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         : props.onClick,
     },
     <>
-      {StartIcon && (
-        <>
-          {variant === "fab" ? (
-            <>
-              <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:-ml-1 ltr:mr-2 rtl:-mr-1 rtl:ml-2 md:inline-flex" />
-              <Plus data-testid="plus" className="inline h-6 w-6 md:hidden" />
-            </>
-          ) : (
-            <StartIcon
-              className={classNames(
-                variant === "icon" && "h-4 w-4",
-                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:-ml-1 ltr:mr-2 rtl:-mr-1 rtl:ml-2"
-              )}
-            />
-          )}
-        </>
-      )}
+      {CustomStartIcon ||
+        (StartIcon && (
+          <>
+            {variant === "fab" ? (
+              <>
+                <Icon
+                  name={StartIcon}
+                  className="hidden h-4 w-4 stroke-[1.5px] ltr:-ml-1 ltr:mr-2 rtl:-mr-1 rtl:ml-2 md:inline-flex"
+                />
+                <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
+              </>
+            ) : (
+              <Icon
+                name={StartIcon}
+                className={classNames(
+                  variant === "icon" && "h-4 w-4",
+                  variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:-ml-1 ltr:mr-2 rtl:-mr-1 rtl:ml-2"
+                )}
+              />
+            )}
+          </>
+        ))}
       {variant === "fab" ? <span className="hidden md:inline">{props.children}</span> : props.children}
       {loading && (
         <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
@@ -196,11 +201,12 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         <>
           {variant === "fab" ? (
             <>
-              <EndIcon className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
-              <Plus data-testid="plus" className="inline h-6 w-6 md:hidden" />
+              <Icon name={EndIcon} className="-mr-1 me-2 ms-2 hidden h-5 w-5 md:inline" />
+              <Icon name="plus" data-testid="plus" className="inline h-6 w-6 md:hidden" />
             </>
           ) : (
-            <EndIcon
+            <Icon
+              name={EndIcon}
               className={classNames(
                 "inline-flex",
                 variant === "icon" && "h-4 w-4",
diff --git a/packages/ui/components/button/LinkIconButton.tsx b/packages/ui/components/button/LinkIconButton.tsx
index 728fffbbb7..abe590ef19 100644
--- a/packages/ui/components/button/LinkIconButton.tsx
+++ b/packages/ui/components/button/LinkIconButton.tsx
@@ -1,10 +1,9 @@
 import React from "react";
 
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+import { Icon, type IconName } from "@calcom/ui";
 
 interface LinkIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  Icon: SVGComponent | LucideIcon;
+  Icon: IconName;
 }
 
 export default function LinkIconButton(props: LinkIconButtonProps) {
@@ -14,7 +13,7 @@ export default function LinkIconButton(props: LinkIconButtonProps) {
         type="button"
         {...props}
         className="text-md hover:bg-emphasis hover:text-emphasis text-default flex items-center rounded-md px-2 py-1 text-sm font-medium">
-        <props.Icon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
+        <Icon name={props.Icon} className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
         {props.children}
       </button>
     </div>
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index 4ee81d5b30..5a9d500c8c 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -71,22 +71,22 @@ Button are clickable elements that initiates user actions. Labels in the button
     <Button>Button text</Button>
   </Example>
   <Example title="Icon left">
-    <Button StartIcon={Plus}>Button text</Button>
+    <Button StartIcon="plus">Button text</Button>
   </Example>
   <Example title="Icon right">
-    <Button EndIcon={Plus}>Button text</Button>
+    <Button EndIcon="plus">Button text</Button>
   </Example>
 </Examples>
 
 <Examples title="Icons">
   <Example title="Icon Normal">
-    <Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
+    <Button StartIcon="x" variant="icon" size="base" color="minimal"></Button>
   </Example>
   <Example title="Icon Small">
-    <Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
+    <Button StartIcon="x" variant="icon" size="sm" color="minimal"></Button>
   </Example>
   <Example title="Icon Loading">
-    <Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
+    <Button StartIcon="x" variant="icon" size="sm" color="minimal" loading></Button>
   </Example>
 </Examples>
 
@@ -113,7 +113,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button color="secondary">Button text</Button>
         <Button color="minimal">Button text</Button>
         <Button color="destructive">Button text</Button>
-        <Button color="destructive" variant="icon" StartIcon={X}></Button>
+        <Button color="destructive" variant="icon" StartIcon="x"></Button>
       </VariantRow>
       <VariantRow variant="Hover">
         <Button className="sb-pseudo--hover">Button text</Button>
@@ -126,7 +126,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button className="sb-pseudo--hover" color="destructive">
           Button text
         </Button>
-        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={X}></Button>
+        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon="x"></Button>
       </VariantRow>
       <VariantRow variant="Focus">
         <Button className="sb-pseudo--focus">Button text</Button>
@@ -139,7 +139,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button className="sb-pseudo--focus" color="destructive">
           Button text
         </Button>
-        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
+        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon="x"></Button>
       </VariantRow>
       <VariantRow variant="Loading">
         <Button loading>Button text</Button>
@@ -152,7 +152,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button loading color="destructive">
           Button text
         </Button>
-        <Button loading color="destructive" variant="icon" StartIcon={X}></Button>
+        <Button loading color="destructive" variant="icon" StartIcon="x"></Button>
       </VariantRow>
       <VariantRow variant="Disabled">
         <Button disabled>Button text</Button>
@@ -165,7 +165,7 @@ Button are clickable elements that initiates user actions. Labels in the button
         <Button disabled color="destructive">
           Button text
         </Button>
-        <Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
+        <Button disabled color="minimal" variant="icon" StartIcon="x"></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/button/button.test.tsx b/packages/ui/components/button/button.test.tsx
index 55c4524ea6..cd59e364ee 100644
--- a/packages/ui/components/button/button.test.tsx
+++ b/packages/ui/components/button/button.test.tsx
@@ -1,10 +1,8 @@
 /* eslint-disable playwright/missing-playwright-await */
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { useState } from "react";
 import { vi } from "vitest";
 
-import { Plus } from "@calcom/ui/components/icon";
-
 import { Button, buttonClasses } from "./Button";
 
 const observeMock = vi.fn();
@@ -138,43 +136,43 @@ describe("Tests for Button component", () => {
     expect(button.tagName).toBe("BUTTON");
   });
 
-  test("Should render StartIcon and Plus icon if is fab variant", () => {
+  test("Should render StartIcon and Plus icon if is fab variant", async () => {
     render(
-      <Button variant="fab" StartIcon={Plus} data-testid="start-icon">
+      <Button variant="fab" StartIcon="plus" data-testid="start-icon">
         Test Button
       </Button>
     );
-    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
-    expect(screen.getByTestId("plus")).toBeInTheDocument();
+    expect(await screen.findByTestId("start-icon")).toBeInTheDocument();
+    expect(await screen.findByTestId("plus")).toBeInTheDocument();
   });
 
-  test("Should render just StartIcon if is not fab variant", () => {
+  test("Should render just StartIcon if is not fab variant", async () => {
     render(
-      <Button StartIcon={Plus} data-testid="start-icon">
+      <Button StartIcon="plus" data-testid="start-icon">
         Test Button
       </Button>
     );
-    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    expect(await screen.findByTestId("start-icon")).toBeInTheDocument();
     expect(screen.queryByTestId("plus")).not.toBeInTheDocument();
   });
 
-  test("Should render EndIcon and Plus icon if is fab variant", () => {
+  test("Should render EndIcon and Plus icon if is fab variant", async () => {
     render(
-      <Button variant="fab" EndIcon={Plus} data-testid="end-icon">
+      <Button variant="fab" EndIcon="plus" data-testid="end-icon">
         Test Button
       </Button>
     );
-    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
-    expect(screen.getByTestId("plus")).toBeInTheDocument();
+    expect(await screen.findByTestId("end-icon")).toBeInTheDocument();
+    expect(await screen.findByTestId("plus")).toBeInTheDocument();
   });
 
-  test("Should render just EndIcon if is not fab variant", () => {
+  test("Should render just EndIcon if is not fab variant", async () => {
     render(
-      <Button EndIcon={Plus} data-testid="end-icon">
+      <Button EndIcon="plus" data-testid="end-icon">
         Test Button
       </Button>
     );
-    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+    expect(await screen.findByTestId("end-icon")).toBeInTheDocument();
     expect(screen.queryByTestId("plus")).not.toBeInTheDocument();
   });
 
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index e1005f51a7..61990db9d3 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -10,8 +10,8 @@ import {
   VariantRow,
 } from "@calcom/storybook/components";
 
+import { Icon } from "../..";
 import { Button } from "../button/Button";
-import { Trash, Navigation, Clipboard } from "../icon";
 import { ButtonGroup } from "./ButtonGroup";
 
 <Meta title="UI/Button Group" component={ButtonGroup} />
@@ -39,16 +39,16 @@ Button group enables multiple buttons to be combined into a single unit. It offe
   }>
   <Example title="Default">
     <ButtonGroup>
-      <Button StartIcon={Trash} variant="icon" color="secondary" />
-      <Button StartIcon={Navigation} variant="icon" color="secondary" />
-      <Button StartIcon={Clipboard} variant="icon" color="secondary" />
+      <Button StartIcon="trash" variant="icon" color="secondary" />
+      <Button StartIcon="navigation" variant="icon" color="secondary" />
+      <Button StartIcon="clipboard" variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
   <Example title="Combined">
     <ButtonGroup combined>
-      <Button StartIcon={Trash} variant="icon" color="secondary" />
-      <Button StartIcon={Navigation} variant="icon" color="secondary" />
-      <Button StartIcon={Clipboard} variant="icon" color="secondary" />
+      <Button StartIcon="trash" variant="icon" color="secondary" />
+      <Button StartIcon="navigation" variant="icon" color="secondary" />
+      <Button StartIcon="clipboard" variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
 </Examples>
@@ -58,31 +58,31 @@ Button group enables multiple buttons to be combined into a single unit. It offe
     <VariantsTable titles={["Default", "Secondary", "Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
-          <Button StartIcon={Trash} variant="icon" />
-          <Button StartIcon={Navigation} variant="icon" />
-          <Button StartIcon={Clipboard} variant="icon" />
+          <Button StartIcon="trash" variant="icon" />
+          <Button StartIcon="navigation" variant="icon" />
+          <Button StartIcon="clipboard" variant="icon" />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Trash} variant="icon" color="secondary" />
-          <Button StartIcon={Navigation} variant="icon" color="secondary" />
-          <Button StartIcon={Clipboard} variant="icon" color="secondary" />
+          <Button StartIcon="trash" variant="icon" color="secondary" />
+          <Button StartIcon="navigation" variant="icon" color="secondary" />
+          <Button StartIcon="clipboard" variant="icon" color="secondary" />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Trash} variant="icon" color="minimal" />
-          <Button StartIcon={Navigation} variant="icon" color="minimal" />
-          <Button StartIcon={Clipboard} variant="icon" color="minimal" />
+          <Button StartIcon="trash" variant="icon" color="minimal" />
+          <Button StartIcon="navigation" variant="icon" color="minimal" />
+          <Button StartIcon="clipboard" variant="icon" color="minimal" />
         </ButtonGroup>
       </VariantRow>
       <VariantRow variant="Combined">
         <ButtonGroup combined>
-          <Button StartIcon={Trash} variant="icon" />
-          <Button StartIcon={Navigation} variant="icon" />
-          <Button StartIcon={Clipboard} variant="icon" />
+          <Button StartIcon="trash" variant="icon" />
+          <Button StartIcon="navigation" variant="icon" />
+          <Button StartIcon="clipboard" variant="icon" />
         </ButtonGroup>
         <ButtonGroup combined>
-          <Button StartIcon={Trash} variant="icon" color="secondary" />
-          <Button StartIcon={Navigation} variant="icon" color="secondary" />
-          <Button StartIcon={Clipboard} variant="icon" color="secondary" />
+          <Button StartIcon="trash" variant="icon" color="secondary" />
+          <Button StartIcon="navigation" variant="icon" color="secondary" />
+          <Button StartIcon="clipboard" variant="icon" color="secondary" />
         </ButtonGroup>
       </VariantRow>
     </VariantsTable>
@@ -113,9 +113,9 @@ Button group enables multiple buttons to be combined into a single unit. It offe
       <VariantsTable titles={[`${color}`]} columnMinWidth={150}>
         <VariantRow variant="">
           <ButtonGroup combined={combined}>
-            <Button StartIcon={Trash} variant="icon" color={color} />
-            <Button StartIcon={Navigation} variant="icon" color={color} />
-            <Button StartIcon={Clipboard} variant="icon" color={color} />
+            <Button StartIcon="trash" variant="icon" color={color} />
+            <Button StartIcon="navigation" variant="icon" color={color} />
+            <Button StartIcon="clipboard" variant="icon" color={color} />
           </ButtonGroup>
         </VariantRow>
       </VariantsTable>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 2ad1d0c17f..5775a9304c 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -6,7 +6,6 @@ import type { ReactNode } from "react";
 import React from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { Button } from "../button";
 
@@ -210,7 +209,7 @@ export function Card({
             color="secondary"
             href={actionButton?.href}
             className="mt-10"
-            EndIcon={ArrowRight}
+            EndIcon="arrow-right"
             data-testId={actionButton["data-testId"]}>
             {actionButton?.child}
           </Button>
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index c638a5305f..03319e79a3 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -3,9 +3,8 @@ import Link from "next/link";
 import { classNames } from "@calcom/lib";
 
 import type { BadgeProps } from "../..";
-import { Badge } from "../..";
+import { Badge, Icon } from "../..";
 import { Divider } from "../divider";
-import { ArrowDown, ArrowUp, Trash2 } from "../icon";
 
 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
@@ -39,7 +38,7 @@ export default function FormCard({
             type="button"
             className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center   justify-center rounded-md border p-1 transition-all hover:border-transparent  hover:shadow group-hover:visible group-hover:scale-100 "
             onClick={() => moveUp?.fn()}>
-            <ArrowUp />
+            <Icon name="arrow-up" />
           </button>
         ) : null}
         {moveDown?.check() ? (
@@ -47,7 +46,7 @@ export default function FormCard({
             type="button"
             className="bg-default text-muted hover:text-emphasis invisible absolute left-0 -ml-[13px] -mt-2  flex h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveDown?.fn()}>
-            <ArrowDown />
+            <Icon name="arrow-down" />
           </button>
         ) : null}
       </div>
@@ -68,7 +67,7 @@ export default function FormCard({
                 deleteField?.fn();
               }}
               color="secondary">
-              <Trash2 className="text-default h-4 w-4" />
+              <Icon name="trash-2" className="text-default h-4 w-4" />
             </button>
           ) : null}
         </div>
diff --git a/packages/ui/components/createButton/CreateButton.tsx b/packages/ui/components/createButton/CreateButton.tsx
index d3bc218397..c348e8c048 100644
--- a/packages/ui/components/createButton/CreateButton.tsx
+++ b/packages/ui/components/createButton/CreateButton.tsx
@@ -13,7 +13,6 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@calcom/ui";
-import { Plus } from "@calcom/ui/components/icon";
 
 export interface Option {
   platform?: boolean;
@@ -86,7 +85,7 @@ export function CreateButton(props: CreateBtnProps) {
               : null
           }
           data-testid="create-button"
-          StartIcon={Plus}
+          StartIcon="plus"
           loading={isPending}
           variant={disableMobileButton ? "button" : "fab"}
           {...restProps}>
@@ -97,7 +96,7 @@ export function CreateButton(props: CreateBtnProps) {
           <DropdownMenuTrigger asChild>
             <Button
               variant={disableMobileButton ? "button" : "fab"}
-              StartIcon={Plus}
+              StartIcon="plus"
               data-testid="create-button-dropdown"
               loading={isPending}
               {...restProps}>
@@ -113,9 +112,7 @@ export function CreateButton(props: CreateBtnProps) {
                 <DropdownItem
                   type="button"
                   data-testid={`option${option.teamId ? "-team" : ""}-${idx}`}
-                  StartIcon={(props: { className?: string }) => (
-                    <Avatar alt={option.label || ""} imageSrc={option.image} size="sm" {...props} />
-                  )}
+                  CustomStartIcon={<Avatar alt={option.label || ""} imageSrc={option.image} size="sm" />}
                   onClick={() =>
                     !!CreateDialog
                       ? openModal(option)
diff --git a/packages/ui/components/data-table/DataTableFilter.tsx b/packages/ui/components/data-table/DataTableFilter.tsx
index 3ec728b20e..39d0b44957 100644
--- a/packages/ui/components/data-table/DataTableFilter.tsx
+++ b/packages/ui/components/data-table/DataTableFilter.tsx
@@ -1,21 +1,21 @@
 import type { Column } from "@tanstack/react-table";
 import type { LucideIcon } from "lucide-react";
-import { Check, Filter } from "lucide-react";
 
 import { classNames } from "@calcom/lib";
 
+import { Icon } from "../..";
 import { Badge } from "../badge";
 import { Button } from "../button";
 import {
   Command,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
+  CommandList,
   CommandSeparator,
 } from "../command";
-import { Popover, PopoverTrigger, PopoverContent } from "../popover";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 
 interface DataTableFilter<TData, TValue> {
   column?: Column<TData, TValue>;
@@ -34,7 +34,7 @@ export function DataTableFilter<TData, TValue>({ column, title, options }: DataT
     <Popover>
       <PopoverTrigger asChild>
         <Button color="secondary" size="sm" className="border-subtle h-8 rounded-md">
-          <Filter className="mr-2 h-4 w-4" />
+          <Icon name="filter" className="mr-2 h-4 w-4" />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -83,7 +83,7 @@ export function DataTableFilter<TData, TValue>({ column, title, options }: DataT
                         "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                         isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
                       )}>
-                      <Check className={classNames("h-4 w-4")} />
+                      <Icon name="check" className={classNames("h-4 w-4")} />
                     </div>
                     {option.icon && <option.icon className="text-muted mr-2 h-4 w-4" />}
                     <span>{option.label}</span>
diff --git a/packages/ui/components/data-table/DataTablePagination.tsx b/packages/ui/components/data-table/DataTablePagination.tsx
index 3d3cb7add0..8533ef8a01 100644
--- a/packages/ui/components/data-table/DataTablePagination.tsx
+++ b/packages/ui/components/data-table/DataTablePagination.tsx
@@ -1,5 +1,4 @@
 import type { Table } from "@tanstack/react-table";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
 
 import { Button } from "../button";
 
@@ -22,7 +21,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
           <Button
             color="secondary"
             variant="icon"
-            StartIcon={ChevronsLeft}
+            StartIcon="chevrons-left"
             className="hidden h-8 w-8 p-0 lg:flex"
             onClick={() => table.setPageIndex(0)}>
             <span className="sr-only">Go to first page</span>
@@ -33,13 +32,13 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             className="h-8 w-8 p-0"
             onClick={() => table.previousPage()}
             disabled={!table.getCanPreviousPage()}
-            StartIcon={ChevronLeft}>
+            StartIcon="chevron-left">
             <span className="sr-only">Go to previous page</span>
           </Button>
           <Button
             color="secondary"
             variant="icon"
-            StartIcon={ChevronRight}
+            StartIcon="chevron-right"
             className="h-8 w-8 p-0"
             disabled={!table.getCanNextPage()}
             onClick={() => table.nextPage()}>
@@ -49,7 +48,7 @@ export function DataTablePagination<TData>({ table }: DataTablePaginationProps<T
             color="secondary"
             variant="icon"
             className="hidden h-8 w-8 p-0 lg:flex"
-            StartIcon={ChevronsRight}
+            StartIcon="chevrons-right"
             onClick={() => table.setPageIndex(table.getPageCount())}>
             <span className="sr-only">Go to last page</span>
           </Button>
diff --git a/packages/ui/components/data-table/DataTableSelectionBar.tsx b/packages/ui/components/data-table/DataTableSelectionBar.tsx
index 04f738bc8d..ec2319ac2f 100644
--- a/packages/ui/components/data-table/DataTableSelectionBar.tsx
+++ b/packages/ui/components/data-table/DataTableSelectionBar.tsx
@@ -1,9 +1,8 @@
 import type { Table } from "@tanstack/react-table";
-import { motion, AnimatePresence } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { Fragment } from "react";
 
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-
+import type { IconName } from "../..";
 import { Button } from "../button";
 
 export type ActionItem<TData> =
@@ -11,7 +10,7 @@ export type ActionItem<TData> =
       type: "action";
       label: string;
       onClick: () => void;
-      icon?: SVGComponent;
+      icon?: IconName;
     }
   | {
       type: "render";
diff --git a/packages/ui/components/data-table/DataTableToolbar.tsx b/packages/ui/components/data-table/DataTableToolbar.tsx
index 861ec3f24e..ac05d8f75a 100644
--- a/packages/ui/components/data-table/DataTableToolbar.tsx
+++ b/packages/ui/components/data-table/DataTableToolbar.tsx
@@ -2,7 +2,6 @@
 
 import type { Table } from "@tanstack/react-table";
 import type { LucideIcon } from "lucide-react";
-import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 
 import { useDebounce } from "@calcom/lib/hooks/useDebounce";
@@ -72,7 +71,7 @@ export function DataTableToolbar<TData>({
       {isFiltered && (
         <Button
           color="minimal"
-          EndIcon={X}
+          EndIcon="x"
           onClick={() => table.resetColumnFilters()}
           className="h-8 px-2 lg:px-3">
           {t("clear")}
diff --git a/packages/ui/components/data-table/__storybook__/data.ts b/packages/ui/components/data-table/__storybook__/data.tsx
similarity index 95%
rename from packages/ui/components/data-table/__storybook__/data.ts
rename to packages/ui/components/data-table/__storybook__/data.tsx
index c5d0157963..fe5166485b 100644
--- a/packages/ui/components/data-table/__storybook__/data.ts
+++ b/packages/ui/components/data-table/__storybook__/data.tsx
@@ -1,5 +1,3 @@
-import { StopCircle, Users } from "lucide-react";
-
 export type DataTableUserStorybook = {
   id: string;
   username: string;
@@ -13,14 +11,14 @@ export const dataTableSelectionActions = [
     onClick: () => {
       console.log("Add To Team");
     },
-    icon: Users,
+    icon: "users",
   },
   {
     label: "Delete",
     onClick: () => {
       console.log("Delete");
     },
-    icon: StopCircle,
+    icon: "stop-circle",
   },
 ];
 
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 753cd2121d..f860dec77f 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { AlertCircle, Check } from "../icon";
+import { Icon } from "../..";
 import { DialogClose, DialogContent } from "./Dialog";
 
 type ConfirmBtnType =
@@ -49,17 +49,17 @@ export const ConfirmationContent = (props: PropsWithChildren<ConfirmationDialogC
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="bg-error mx-auto rounded-full p-2 text-center">
-                <AlertCircle className="h-5 w-5 text-red-600 dark:text-red-100" />
+                <Icon name="circle-alert" className="h-5 w-5 text-red-600 dark:text-red-100" />
               </div>
             )}
             {variety === "warning" && (
               <div className="bg-attention mx-auto rounded-full p-2 text-center">
-                <AlertCircle className="h-5 w-5 text-orange-600" />
+                <Icon name="circle-alert" className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="bg-success mx-auto rounded-full p-2 text-center">
-                <Check className="h-5 w-5 text-green-600" />
+                <Icon name="check" className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index 1d0b75f969..9df8d71055 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -1,16 +1,15 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { usePathname, useRouter } from "next/navigation";
-import { useMemo } from "react";
-import type { ReactNode, ForwardRefExoticComponent, ReactElement } from "react";
-import React, { useState } from "react";
+import type { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
+import React, { useMemo, useState } from "react";
 
-import { useIsPlatform, Dialog as PlatformDialogPrimitives } from "@calcom/atoms/monorepo";
+import { Dialog as PlatformDialogPrimitives, useIsPlatform } from "@calcom/atoms/monorepo";
 import classNames from "@calcom/lib/classNames";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
 
+import type { IconName } from "../..";
+import { Icon } from "../..";
 import type { ButtonProps } from "../../components/button";
 import { Button } from "../../components/button";
 
@@ -86,13 +85,13 @@ type DialogContentProps = React.ComponentProps<(typeof DialogPrimitive)["Content
   description?: string | JSX.Element | null;
   closeText?: string;
   actionDisabled?: boolean;
-  Icon?: SVGComponent | LucideIcon;
+  Icon?: IconName;
   enableOverflow?: boolean;
 };
 
 // enableOverflow:- use this prop whenever content inside DialogContent could overflow and require scrollbar
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, title, Icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
+  ({ children, title, Icon: icon, enableOverflow, type = "creation", ...props }, forwardedRef) => {
     const isPlatform = useIsPlatform();
     const [Portal, Overlay, Content] = useMemo(
       () =>
@@ -134,9 +133,9 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           )}
           {type === "confirmation" && (
             <div className="flex">
-              {Icon && (
+              {icon && (
                 <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
-                  <Icon className="text-emphasis h-4 w-4" />
+                  <Icon name={icon} className="text-emphasis h-4 w-4" />
                 </div>
               )}
               <div className="w-full">
diff --git a/packages/ui/components/editable-heading/EditableHeading.tsx b/packages/ui/components/editable-heading/EditableHeading.tsx
index 0ba1c33e81..a18fcf1165 100644
--- a/packages/ui/components/editable-heading/EditableHeading.tsx
+++ b/packages/ui/components/editable-heading/EditableHeading.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { Edit2 } from "@calcom/ui/components/icon";
+import { Icon } from "../..";
 
 export const EditableHeading = function EditableHeading({
   value,
@@ -23,7 +23,10 @@ export const EditableHeading = function EditableHeading({
         <label className="min-w-8 relative inline-block">
           <span className="whitespace-pre text-xl tracking-normal text-transparent">{value}&nbsp;</span>
           {!isEditing && isReady && (
-            <Edit2 className=" text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3" />
+            <Icon
+              name="pencil"
+              className=" text-subtle group-hover:text-subtle -mt-px ml-1 inline  h-3 w-3"
+            />
           )}
           <input
             {...passThroughProps}
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 8be60b691d..73f1850826 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
+import { Icon } from "../../..";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { ChevronDown } from "../../icon";
 
 interface IAddVariablesDropdown {
   addVariable: (variable: string) => void;
@@ -20,14 +20,14 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
             <>
               <div className="hidden sm:flex">
                 {t("add_variable")}
-                <ChevronDown className="ml-1 mt-[2px] h-4 w-4" />
+                <Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
               </div>
               <div className="block sm:hidden">+</div>
             </>
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <ChevronDown className="ml-1 mt-[2px] h-4 w-4" />
+              <Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
             </div>
           )}
         </div>
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index 7ef7a51558..225cb82501 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -25,9 +25,9 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { Icon } from "../../..";
 import { Button } from "../../button";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { Bold, ChevronDown, Italic, Link } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
@@ -424,7 +424,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   <span className="text text-default hidden sm:flex">
                     {blockTypeToBlockName[blockType as keyof BlockType]}
                   </span>
-                  <ChevronDown className="text-default ml-2 h-4 w-4" />
+                  <Icon name="chevron-down" className="text-default ml-2 h-4 w-4" />
                 </>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
@@ -458,7 +458,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               color="minimal"
               variant="icon"
               type="button"
-              StartIcon={Bold}
+              StartIcon="bold"
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
               }}
@@ -470,7 +470,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               color="minimal"
               variant="icon"
               type="button"
-              StartIcon={Italic}
+              StartIcon="italic"
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
               }}
@@ -483,7 +483,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                 color="minimal"
                 variant="icon"
                 type="button"
-                StartIcon={Link}
+                StartIcon="link"
                 onClick={insertLink}
                 className={isLink ? "bg-subtle" : ""}
               />
diff --git a/packages/ui/components/empty-screen/EmptyScreen.tsx b/packages/ui/components/empty-screen/EmptyScreen.tsx
index 20806fdc90..3537be1b02 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -1,14 +1,14 @@
-import type { LucideIcon as IconType } from "lucide-react";
 import type { ReactNode } from "react";
 import React from "react";
 
 import { classNames } from "@calcom/lib";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
 
+import type { IconName } from "../..";
+import { Icon } from "../..";
 import { Button } from "../../components/button";
 
 export function EmptyScreen({
-  Icon,
+  Icon: icon,
   avatar,
   headline,
   description,
@@ -19,7 +19,7 @@ export function EmptyScreen({
   dashedBorder = true,
   className,
 }: {
-  Icon?: SVGComponent | IconType;
+  Icon?: IconName;
   avatar?: React.ReactElement;
   headline: string | React.ReactElement;
   description?: string | React.ReactElement;
@@ -42,16 +42,16 @@ export function EmptyScreen({
         {!avatar ? null : (
           <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full">{avatar}</div>
         )}
-        {!Icon ? null : (
+        {!icon ? null : (
           <div className="bg-emphasis flex h-[72px] w-[72px] items-center justify-center rounded-full ">
-            <Icon className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
+            <Icon name={icon} className="text-default inline-block h-10 w-10 stroke-[1.3px]" />
           </div>
         )}
         <div className="flex max-w-[420px] flex-col items-center">
           <h2
             className={classNames(
               "text-semibold font-cal text-emphasis text-center text-xl",
-              Icon && "mt-6"
+              icon && "mt-6"
             )}>
             {headline}
           </h2>
diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index 3d2af7e172..2aa56972c0 100644
--- a/packages/ui/components/empty-screen/empty-screen.stories.mdx
+++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx
@@ -46,7 +46,7 @@ The CTA button can prompt the user to add the info/ apps needed for the page.
       <VariantsTable titles={[]} columnMinWidth={150}>
         <VariantRow variant="Default">
           <EmptyScreen
-            Icon={Calendar}
+            Icon="calendar"
             headline={headline}
             description={description}
             buttonText={buttonText}
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 5386c8c196..8dc84724ef 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -1,10 +1,10 @@
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { useId } from "@radix-ui/react-id";
-import { Check } from "lucide-react";
 import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
 import classNames from "@calcom/lib/classNames";
+import { Icon } from "@calcom/ui";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
@@ -32,7 +32,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}>
     <CheckboxPrimitive.Indicator className={classNames("flex items-center justify-center text-current")}>
-      <Check className="h-4 w-4" />
+      <Icon name="check" className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/packages/ui/components/form/color-picker/colorpicker.test.tsx b/packages/ui/components/form/color-picker/colorpicker.test.tsx
index 20a2411dab..2f68ff04ab 100644
--- a/packages/ui/components/form/color-picker/colorpicker.test.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { act } from "react-dom/test-utils";
 import { vi } from "vitest";
@@ -8,7 +8,10 @@ import { Button } from "../../button";
 import ColorPicker from "./colorpicker";
 
 vi.mock("@calcom/ui", async () => {
-  return { Button: ({ tooltip, ...rest }: ButtonProps) => <Button {...rest}>{tooltip}</Button> };
+  return {
+    Icon: () => <svg data-testid="dummy-icon" />,
+    Button: ({ tooltip, ...rest }: ButtonProps) => <Button {...rest}>{tooltip}</Button>,
+  };
 });
 
 describe("Tests for ColorPicker component", () => {
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index 561a6c9267..b14528f0cc 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -5,7 +5,6 @@ import { HexColorInput, HexColorPicker } from "react-colorful";
 import cx from "@calcom/lib/classNames";
 import { fallBackHex, isValidHexCode } from "@calcom/lib/getBrandColours";
 import { Button } from "@calcom/ui";
-import { RotateCcw } from "@calcom/ui/components/icon";
 
 export type ColorPickerProps = {
   defaultValue: string;
@@ -72,7 +71,7 @@ const ColorPicker = (props: ColorPickerProps) => {
             target="_blank"
             variant="icon"
             rel="noreferrer"
-            StartIcon={RotateCcw}
+            StartIcon="rotate-ccw"
             tooltip="Reset to default"
             onClick={() => {
               setColor(fallBackHex(resetDefaultValue, false));
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index 927df54eba..4481123bff 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -2,7 +2,7 @@
 import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
 import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
 
-import { ArrowRight, Calendar, ChevronLeft, ChevronRight } from "../../icon";
+import { Icon } from "../../..";
 import "./styles.css";
 
 type Props = {
@@ -19,14 +19,14 @@ const DateRangePicker = ({ disabled, startDate, endDate, onDatesChange }: Props)
         disabled={disabled || false}
         className="border-default rounded-sm text-sm"
         clearIcon={null}
-        calendarIcon={<Calendar className="text-subtle h-4 w-4" />}
-        rangeDivider={<ArrowRight className="text-muted h-4 w-4 ltr:mr-2 rtl:ml-2" />}
+        calendarIcon={<Icon name="calendar" className="text-subtle h-4 w-4" />}
+        rangeDivider={<Icon name="arrow-right" className="text-muted h-4 w-4 ltr:mr-2 rtl:ml-2" />}
         value={[startDate, endDate]}
         onChange={([startDate, endDate]: [Date, Date]) => {
           if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
         }}
-        nextLabel={<ChevronRight className="text-subtle h-4 w-4" />}
-        prevLabel={<ChevronLeft className="text-subtle h-4 w-4" />}
+        nextLabel={<Icon name="chevron-right" className="text-subtle h-4 w-4" />}
+        prevLabel={<Icon name="chevron-left" className="text-subtle h-4 w-4" />}
       />
     </>
   );
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index dfc32b8209..8994c31b7a 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -4,7 +4,7 @@ import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
 import classNames from "@calcom/lib/classNames";
 
-import { Calendar } from "../../icon";
+import { Icon } from "../../..";
 
 type Props = {
   date: Date;
@@ -23,7 +23,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
       )}
       calendarClassName="rounded-md dark:text-black"
       clearIcon={null}
-      calendarIcon={<Calendar className="text-subtle h-5 w-5 rounded-md" />}
+      calendarIcon={<Icon name="calendar" className="text-subtle h-5 w-5 rounded-md" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/packages/ui/components/form/dropdown/Dropdown.tsx b/packages/ui/components/form/dropdown/Dropdown.tsx
index 94169d71f9..cd09315c33 100644
--- a/packages/ui/components/form/dropdown/Dropdown.tsx
+++ b/packages/ui/components/form/dropdown/Dropdown.tsx
@@ -4,9 +4,7 @@ import type { ComponentProps } from "react";
 import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import { CheckCircle } from "@calcom/ui/components/icon";
-import type { LucideIcon } from "@calcom/ui/components/icon";
+import { Icon, type IconName } from "@calcom/ui";
 
 import type { ButtonColor } from "../../button/Button";
 
@@ -78,7 +76,7 @@ export const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuC
       <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef} className="">
         {children}
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckCircle />
+          <Icon name="circle-check" />
         </DropdownMenuPrimitive.ItemIndicator>
       </DropdownMenuPrimitive.CheckboxItem>
     );
@@ -95,7 +93,7 @@ export const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadi
       <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
         {children}
         <DropdownMenuPrimitive.ItemIndicator>
-          <CheckCircle />
+          <Icon name="circle-check" />
         </DropdownMenuPrimitive.ItemIndicator>
       </DropdownMenuPrimitive.RadioItem>
     );
@@ -106,8 +104,9 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 type DropdownItemProps = {
   children: React.ReactNode;
   color?: ButtonColor;
-  StartIcon?: SVGComponent | LucideIcon;
-  EndIcon?: SVGComponent | LucideIcon;
+  StartIcon?: IconName;
+  CustomStartIcon?: React.ReactNode;
+  EndIcon?: IconName;
   href?: string;
   disabled?: boolean;
   childrenClassName?: string;
@@ -132,7 +131,7 @@ export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) {
 }
 
 export const DropdownItem = (props: DropdownItemProps) => {
-  const { StartIcon, EndIcon, children, color, childrenClassName, ...rest } = props;
+  const { CustomStartIcon, StartIcon, EndIcon, children, color, childrenClassName, ...rest } = props;
 
   return (
     <ButtonOrLink
@@ -145,9 +144,9 @@ export const DropdownItem = (props: DropdownItemProps) => {
         props.className
       )}>
       <>
-        {StartIcon && <StartIcon className="h-4 w-4" />}
+        {CustomStartIcon || (StartIcon && <Icon name={StartIcon} className="h-4 w-4" />)}
         <div className={classNames("text-sm font-medium leading-5", childrenClassName)}>{children}</div>
-        {EndIcon && <EndIcon className="h-4 w-4" />}
+        {EndIcon && <Icon name={EndIcon} className="h-4 w-4" />}
       </>
     </ButtonOrLink>
   );
diff --git a/packages/ui/components/form/dropdown/dropdown.stories.mdx b/packages/ui/components/form/dropdown/dropdown.stories.mdx
index e4ae5d0100..9760c05587 100644
--- a/packages/ui/components/form/dropdown/dropdown.stories.mdx
+++ b/packages/ui/components/form/dropdown/dropdown.stories.mdx
@@ -1,5 +1,4 @@
 import { Canvas, Story, Meta } from "@storybook/addon-docs";
-import { Button } from "@calcom/ui";
 
 import {
   Examples,
@@ -9,8 +8,9 @@ import {
   VariantRow,
   VariantsTable,
 } from "@calcom/storybook/components";
+import { Button } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 
-import { Plus, Trash, Copy } from "@calcom/ui/components/icon";
 import {
   Dropdown,
   DropdownMenuTrigger,
@@ -115,7 +115,7 @@ The `Dropdown` component can be used to display a menu to the user.
   <Example title="Button Icon">
     <Dropdown>
       <DropdownMenuTrigger asChild>
-        <Button StartIcon={Plus} />
+        <Button StartIcon="plus" />
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem>
@@ -266,14 +266,14 @@ The `Dropdown` component can be used to display a menu to the user.
       </DropdownMenuTrigger>
       <DropdownMenuContent>
         <DropdownMenuItem>
-          <DropdownItem StartIcon={Trash}>First</DropdownItem>
+          <DropdownItem StartIcon="trash">First</DropdownItem>
         </DropdownMenuItem>
         <DropdownMenuItem>
-          <DropdownItem StartIcon={Plus}>Second</DropdownItem>
+          <DropdownItem StartIcon="plus">Second</DropdownItem>
         </DropdownMenuItem>
         <DropdownMenuSeparator />
         <DropdownMenuItem>
-          <DropdownItem StartIcon={Copy}>Third</DropdownItem>
+          <DropdownItem StartIcon="copy">Third</DropdownItem>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </Dropdown>
@@ -310,7 +310,7 @@ The `Dropdown` component can be used to display a menu to the user.
       asChild: false,
       align: "start",
       disabled: false,
-      sideOffset: 0
+      sideOffset: 0,
     }}
     argTypes={{
       sideOffset: {
@@ -320,8 +320,8 @@ The `Dropdown` component can be used to display a menu to the user.
       },
       asChild: {
         control: {
-          type: "boolean"
-        }
+          type: "boolean",
+        },
       },
       align: {
         control: {
@@ -331,9 +331,9 @@ The `Dropdown` component can be used to display a menu to the user.
       },
       disabled: {
         control: {
-          type: "boolean"
-        }
-      }
+          type: "boolean",
+        },
+      },
     }}>
     {({ dir, asChild, sideOffset, align, disabled }) => (
       <VariantsTable titles={["Default"]} columnMinWidth={150}>
@@ -344,13 +344,13 @@ The `Dropdown` component can be used to display a menu to the user.
             </DropdownMenuTrigger>
             <DropdownMenuContent align={align} sideOffset={sideOffset}>
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Trash}>First</DropdownItem>
+                <DropdownItem StartIcon="trash">First</DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Plus}>Second</DropdownItem>
+                <DropdownItem StartIcon="plus">Second</DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Copy}>Third</DropdownItem>
+                <DropdownItem StartIcon="copy">Third</DropdownItem>
               </DropdownMenuItem>
             </DropdownMenuContent>
           </Dropdown>
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
index 472323b23d..9b88a80873 100644
--- a/packages/ui/components/form/inputs/HintOrErrors.tsx
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -1,7 +1,7 @@
 import type { FieldValues } from "react-hook-form";
 import { useFormContext } from "react-hook-form";
 
-import { Check, Circle, X } from "../../icon";
+import { Icon } from "../../..";
 import { InputError } from "./InputError";
 
 type hintsOrErrorsProps = {
@@ -55,12 +55,27 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>({
                 className={error !== undefined ? (submitted ? "text-red-500" : "") : "text-green-600"}>
                 {error !== undefined ? (
                   submitted ? (
-                    <X size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                    <Icon
+                      name="x"
+                      size="12"
+                      strokeWidth="3"
+                      className="-ml-1 inline-block ltr:mr-2 rtl:ml-2"
+                    />
                   ) : (
-                    <Circle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                    <Icon
+                      name="circle"
+                      fill="currentColor"
+                      size="5"
+                      className="inline-block ltr:mr-2 rtl:ml-2"
+                    />
                   )
                 ) : (
-                  <Check size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                  <Icon
+                    name="check"
+                    size="12"
+                    strokeWidth="3"
+                    className="-ml-1 inline-block ltr:mr-2 rtl:ml-2"
+                  />
                 )}
                 {t(`${fieldName}_hint_${key}`)}
               </li>
@@ -88,9 +103,14 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>({
           return (
             <li key={key} className={!!dirty ? "text-green-600" : ""}>
               {!!dirty ? (
-                <Check size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                <Icon
+                  name="check"
+                  size="12"
+                  strokeWidth="3"
+                  className="-ml-1 inline-block ltr:mr-2 rtl:ml-2"
+                />
               ) : (
-                <Circle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                <Icon name="circle" fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
               )}
               {t(`${fieldName}_hint_${key}`)}
             </li>
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 2d5978c34d..fef01c209e 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -5,8 +5,7 @@ import { useFormContext } from "react-hook-form";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Alert, Input, InputField, Tooltip } from "../../..";
-import { Eye, EyeOff, Search } from "../../icon";
+import { Alert, Icon, Input, InputField, Tooltip } from "../../..";
 import { Label } from "./Label";
 import type { InputFieldProps } from "./types";
 
@@ -49,9 +48,9 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
             type="button"
             onClick={() => toggleIsPasswordVisible()}>
             {isPasswordVisible ? (
-              <EyeOff className="h-4 stroke-[2.5px]" />
+              <Icon name="eye-off" className="h-4 stroke-[2.5px]" />
             ) : (
-              <Eye className="h-4 stroke-[2.5px]" />
+              <Icon name="eye" className="h-4 stroke-[2.5px]" />
             )}
             <span className="sr-only">{textLabel}</span>
           </button>
@@ -189,7 +188,7 @@ export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(f
       dir="ltr"
       className="focus-within:ring-brand-default group relative mx-3 mb-1 mt-2.5 flex items-center rounded-md focus-within:outline-none focus-within:ring-2">
       <div className="addon-wrapper border-default [input:hover_+_&]:border-emphasis [input:hover_+_&]:border-l-default [&:has(+_input:hover)]:border-emphasis [&:has(+_input:hover)]:border-r-default flex h-7 items-center justify-center rounded-l-md border border-r-0">
-        <Search className="ms-3 h-4 w-4" data-testid="search-icon" />
+        <Icon name="search" className="ms-3 h-4 w-4" data-testid="search-icon" />
       </div>
       <Input
         ref={ref}
diff --git a/packages/ui/components/form/inputs/InputError.tsx b/packages/ui/components/form/inputs/InputError.tsx
index af06fda234..7e0975ce63 100644
--- a/packages/ui/components/form/inputs/InputError.tsx
+++ b/packages/ui/components/form/inputs/InputError.tsx
@@ -1,4 +1,4 @@
-import { Info } from "../../icon";
+import { Icon } from "../../..";
 
 type InputErrorProp = {
   message: string;
@@ -7,7 +7,7 @@ type InputErrorProp = {
 export const InputError = ({ message }: InputErrorProp) => (
   <div data-testid="field-error" className="text-gray mt-2 flex items-center gap-x-2 text-sm text-red-700">
     <div>
-      <Info className="h-3 w-3" />
+      <Icon name="info" className="h-3 w-3" />
     </div>
     <p>{message}</p>
   </div>
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index 724f40b693..ed4ff6e11e 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -3,8 +3,7 @@ import React, { forwardRef, useId, useState } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { Skeleton } from "../../..";
-import { X } from "../../icon";
+import { Icon, Skeleton } from "../../..";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 import type { InputFieldProps, InputProps } from "./types";
@@ -157,7 +156,8 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
             </Addon>
           )}
           {type === "search" && inputValue?.toString().length > 0 && (
-            <X
+            <Icon
+              name="x"
               className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
               onClick={(e) => {
                 setInputValue("");
diff --git a/packages/ui/components/form/inputs/input.test.tsx b/packages/ui/components/form/inputs/input.test.tsx
index dbfbd1c160..6e83decdc7 100644
--- a/packages/ui/components/form/inputs/input.test.tsx
+++ b/packages/ui/components/form/inputs/input.test.tsx
@@ -162,10 +162,10 @@ describe("Tests for NumberInput Component", () => {
 });
 
 describe("Tests for FilterSearchField Component", () => {
-  test("Should render correctly with Search icon and input", () => {
-    const { getByRole, getByTestId } = render(<FilterSearchField name="searchField" />);
+  test("Should render correctly with Search icon and input", async () => {
+    const { getByRole, findByTestId } = render(<FilterSearchField name="searchField" />);
     const searchInput = getByRole("textbox");
-    const searchIcon = getByTestId("search-icon");
+    const searchIcon = await findByTestId("search-icon");
 
     expect(searchInput).toBeInTheDocument();
     expect(searchIcon).toBeInTheDocument();
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index e9e9296488..e46ae36160 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -3,8 +3,8 @@ import { components as reactSelectComponents } from "react-select";
 
 import { classNames } from "@calcom/lib";
 
+import { Icon } from "../../..";
 import { UpgradeTeamsBadge, UpgradeOrgsBadge } from "../../badge";
-import { Check } from "../../icon";
 import type { SelectProps } from "./Select";
 
 export const InputComponent = <
@@ -55,7 +55,7 @@ export const OptionComponent = <
         ) : (
           <></>
         )}
-        {props.isSelected && <Check className="ml-2 h-4 w-4" />}
+        {props.isSelected && <Icon name="check" className="ml-2 h-4 w-4" />}
       </div>
     </reactSelectComponents.Option>
   );
diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx
index e2cc37c11f..ae9d9f640c 100644
--- a/packages/ui/components/form/select/select.stories.mdx
+++ b/packages/ui/components/form/select/select.stories.mdx
@@ -9,7 +9,6 @@ import {
   VariantsTable,
 } from "@calcom/storybook/components";
 
-import { Plus } from "../../icon";
 import { SelectField } from "./Select";
 
 <Meta title="UI/Form/Select Field" component={SelectField} />
@@ -80,7 +79,7 @@ const BadSelect = (props) => (
 );
 
 // Good: Custom component declared outside of the Select scope
-const Control = <IconLeading icon={Plus} />;
+const Control = <IconLeading icon="plus" />;
 
 const GoodSelect = (props) => <Select {...props} components={{ Control }} />;
 ```
diff --git a/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx b/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
index b0b065520c..e618fe6c3e 100644
--- a/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
+++ b/packages/ui/components/form/toggleGroup/toggleGroup.stories.mdx
@@ -9,7 +9,7 @@ import {
   VariantsTable,
   VariantRow,
 } from "@calcom/storybook/components";
-import { ArrowRight } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import { ToggleGroup } from "./ToggleGroup";
 
@@ -32,16 +32,16 @@ The `ToggleGroup` component is used to create a group of toggle items with optio
     <TooltipProvider>
       <ToggleGroup
         options={[
-          { value: "option1", label: "Option 1", tooltip: "Tooltip for Option 1", iconLeft: <ArrowRight /> },
-          { value: "option2", label: "Option 2", iconLeft: <ArrowRight /> },
-          { value: "option3", label: "Option 3", iconLeft: <ArrowRight /> },
+          { value: "option1", label: "Option 1", tooltip: "Tooltip for Option 1", iconLeft: <Icon name="arrow-right" /> },
+          { value: "option2", label: "Option 2", iconLeft: <Icon name="arrow-right" /> },
+          { value: "option3", label: "Option 3", iconLeft: <Icon name="arrow-right" /> },
           {
             value: "option4",
             label: "Option 4",
             tooltip: "Tooltip for Option 4",
-            iconLeft: <ArrowRight />,
+            iconLeft: <Icon name="arrow-right" />,
           },
-          { value: "option5", label: "Option 5", iconLeft: <ArrowRight />, disabled: true },
+          { value: "option5", label: "Option 5", iconLeft: <Icon name="arrow-right" />, disabled: true },
         ]}
       />
     </TooltipProvider>
diff --git a/packages/ui/components/icon/Icon.tsx b/packages/ui/components/icon/Icon.tsx
index 853141bbf3..3784370ef8 100644
--- a/packages/ui/components/icon/Icon.tsx
+++ b/packages/ui/components/icon/Icon.tsx
@@ -1,3 +1,25 @@
 // find all lucide icons at https://lucide.dev/
 // github https://github.com/lucide-icons/lucide
-export * from "lucide-react";
+import type { LucideProps } from "lucide-react";
+import dynamic from "next/dynamic";
+import { memo } from "react";
+
+import type { IconName } from "./dynamicIconImports";
+
+interface IconProps extends Omit<LucideProps, "ref"> {
+  name: IconName;
+}
+
+const IconDev = dynamic(() => import("./IconDev"));
+const IconProd = dynamic(() => import("./IconProd"));
+
+const Icon = memo((props: IconProps) => {
+  // Fast refresh doesn't play nice with dynamic imports
+  // This prevent slowdowns in development mode
+  if (process.env.NODE_ENV === "development") return <IconDev {...props} />;
+  return <IconProd {...props} />;
+});
+
+Icon.displayName = "Icon";
+
+export default Icon;
diff --git a/packages/ui/components/icon/IconDev.tsx b/packages/ui/components/icon/IconDev.tsx
new file mode 100644
index 0000000000..b6e0311623
--- /dev/null
+++ b/packages/ui/components/icon/IconDev.tsx
@@ -0,0 +1,22 @@
+// find all lucide icons at https://lucide.dev/
+// github https://github.com/lucide-icons/lucide
+import type { LucideProps } from "lucide-react";
+import { icons } from "lucide-react";
+
+import type { IconName } from "./dynamicIconImports";
+
+interface IconProps extends Omit<LucideProps, "ref"> {
+  name: IconName;
+}
+
+const clearAndUpper = (text: string) => text.replace(/-/, "").toUpperCase();
+const toPascalCase = (text: string) => text.replace(/(^\w|-\w)/g, clearAndUpper);
+
+const IconDev = ({ name, ...props }: IconProps) => {
+  const CamelCaseName = toPascalCase(name);
+  const LucideIcon = icons[CamelCaseName as keyof typeof icons];
+  if (!LucideIcon) return null;
+  return <LucideIcon {...props} />;
+};
+
+export default IconDev;
diff --git a/packages/ui/components/icon/IconProd.tsx b/packages/ui/components/icon/IconProd.tsx
new file mode 100644
index 0000000000..9c3f083509
--- /dev/null
+++ b/packages/ui/components/icon/IconProd.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+// find all lucide icons at https://lucide.dev/
+// github https://github.com/lucide-icons/lucide
+import type { LucideProps } from "lucide-react";
+import { memo } from "react";
+
+import { dynamicIconImports } from "./dynamicIconImports";
+
+export type IconName = keyof typeof dynamicIconImports;
+
+interface IconProps extends Omit<LucideProps, "ref"> {
+  name: IconName;
+}
+
+const fallback = <div className="bg-emphasis h-4 w-4 animate-pulse rounded-lg" />;
+
+const LazyIcon = memo(({ name, ...props }: IconProps) => {
+  const LucideIcon = dynamicIconImports[name];
+
+  // This should never happen, but just in case
+  if (!LucideIcon) return fallback;
+
+  // @ts-expect-error - LucideIcon is a lazy loaded component
+  return <LucideIcon {...props} />;
+});
+
+LazyIcon.displayName = "LazyIcon";
+
+export default LazyIcon;
diff --git a/packages/ui/components/icon/dynamicIconImports.tsx b/packages/ui/components/icon/dynamicIconImports.tsx
new file mode 100644
index 0000000000..7159c8b789
--- /dev/null
+++ b/packages/ui/components/icon/dynamicIconImports.tsx
@@ -0,0 +1,1461 @@
+// @ts-nocheck
+//  This file is not meant to be type checked, it will hog the TS server.
+// TODO: Make a PR to lucide so this comes out of the box optimized for Next.js
+// @see https://github.com/lucide-icons/lucide/pull/2030
+import dynamic from "next/dynamic";
+
+const loading = () => <div className="bg-emphasis h-4 w-4 animate-pulse rounded-lg" />;
+
+export type IconName = keyof typeof dynamicIconImports;
+
+export const dynamicIconImports = {
+  "a-arrow-down": dynamic(() => import("lucide-react/dist/esm/icons/a-arrow-down"), { loading }),
+  "a-arrow-up": dynamic(() => import("lucide-react/dist/esm/icons/a-arrow-up"), { loading }),
+  "a-large-small": dynamic(() => import("lucide-react/dist/esm/icons/a-large-small"), { loading }),
+  accessibility: dynamic(() => import("lucide-react/dist/esm/icons/accessibility"), { loading }),
+  activity: dynamic(() => import("lucide-react/dist/esm/icons/activity"), { loading }),
+  "air-vent": dynamic(() => import("lucide-react/dist/esm/icons/air-vent"), { loading }),
+  airplay: dynamic(() => import("lucide-react/dist/esm/icons/airplay"), { loading }),
+  "alarm-clock-check": dynamic(() => import("lucide-react/dist/esm/icons/alarm-clock-check"), { loading }),
+  "alarm-clock-minus": dynamic(() => import("lucide-react/dist/esm/icons/alarm-clock-minus"), { loading }),
+  "alarm-clock-off": dynamic(() => import("lucide-react/dist/esm/icons/alarm-clock-off"), { loading }),
+  "alarm-clock-plus": dynamic(() => import("lucide-react/dist/esm/icons/alarm-clock-plus"), { loading }),
+  "alarm-clock": dynamic(() => import("lucide-react/dist/esm/icons/alarm-clock"), { loading }),
+  "alarm-smoke": dynamic(() => import("lucide-react/dist/esm/icons/alarm-smoke"), { loading }),
+  album: dynamic(() => import("lucide-react/dist/esm/icons/album"), { loading }),
+  "align-center-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/align-center-horizontal"), { loading }),
+  "align-center-vertical": dynamic(() => import("lucide-react/dist/esm/icons/align-center-vertical"), { loading }),
+  "align-center": dynamic(() => import("lucide-react/dist/esm/icons/align-center"), { loading }),
+  "align-end-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/align-end-horizontal"), { loading }),
+  "align-end-vertical": dynamic(() => import("lucide-react/dist/esm/icons/align-end-vertical"), { loading }),
+  "align-horizontal-distribute-center": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-distribute-center"), { loading }),
+  "align-horizontal-distribute-end": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-distribute-end"), { loading }),
+  "align-horizontal-distribute-start": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-distribute-start"), { loading }),
+  "align-horizontal-justify-center": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-justify-center"), { loading }),
+  "align-horizontal-justify-end": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-justify-end"), { loading }),
+  "align-horizontal-justify-start": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-justify-start"), { loading }),
+  "align-horizontal-space-around": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-space-around"), { loading }),
+  "align-horizontal-space-between": () => dynamic(() => import("lucide-react/dist/esm/icons/align-horizontal-space-between"), { loading }),
+  "align-justify": dynamic(() => import("lucide-react/dist/esm/icons/align-justify"), { loading }),
+  "align-left": dynamic(() => import("lucide-react/dist/esm/icons/align-left"), { loading }),
+  "align-right": dynamic(() => import("lucide-react/dist/esm/icons/align-right"), { loading }),
+  "align-start-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/align-start-horizontal"), { loading }),
+  "align-start-vertical": dynamic(() => import("lucide-react/dist/esm/icons/align-start-vertical"), { loading }),
+  "align-vertical-distribute-center": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-distribute-center"), { loading }),
+  "align-vertical-distribute-end": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-distribute-end"), { loading }),
+  "align-vertical-distribute-start": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-distribute-start"), { loading }),
+  "align-vertical-justify-center": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-justify-center"), { loading }),
+  "align-vertical-justify-end": dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-justify-end"), { loading }),
+  "align-vertical-justify-start": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-justify-start"), { loading }),
+  "align-vertical-space-around": dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-space-around"), { loading }),
+  "align-vertical-space-between": () => dynamic(() => import("lucide-react/dist/esm/icons/align-vertical-space-between"), { loading }),
+  ambulance: dynamic(() => import("lucide-react/dist/esm/icons/ambulance"), { loading }),
+  ampersand: dynamic(() => import("lucide-react/dist/esm/icons/ampersand"), { loading }),
+  ampersands: dynamic(() => import("lucide-react/dist/esm/icons/ampersands"), { loading }),
+  anchor: dynamic(() => import("lucide-react/dist/esm/icons/anchor"), { loading }),
+  angry: dynamic(() => import("lucide-react/dist/esm/icons/angry"), { loading }),
+  annoyed: dynamic(() => import("lucide-react/dist/esm/icons/annoyed"), { loading }),
+  antenna: dynamic(() => import("lucide-react/dist/esm/icons/antenna"), { loading }),
+  anvil: dynamic(() => import("lucide-react/dist/esm/icons/anvil"), { loading }),
+  aperture: dynamic(() => import("lucide-react/dist/esm/icons/aperture"), { loading }),
+  "app-window-mac": dynamic(() => import("lucide-react/dist/esm/icons/app-window-mac"), { loading }),
+  "app-window": dynamic(() => import("lucide-react/dist/esm/icons/app-window"), { loading }),
+  apple: dynamic(() => import("lucide-react/dist/esm/icons/apple"), { loading }),
+  "archive-restore": dynamic(() => import("lucide-react/dist/esm/icons/archive-restore"), { loading }),
+  "archive-x": dynamic(() => import("lucide-react/dist/esm/icons/archive-x"), { loading }),
+  archive: dynamic(() => import("lucide-react/dist/esm/icons/archive"), { loading }),
+  "area-chart": dynamic(() => import("lucide-react/dist/esm/icons/area-chart"), { loading }),
+  armchair: dynamic(() => import("lucide-react/dist/esm/icons/armchair"), { loading }),
+  "arrow-big-down-dash": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-down-dash"), { loading }),
+  "arrow-big-down": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-down"), { loading }),
+  "arrow-big-left-dash": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-left-dash"), { loading }),
+  "arrow-big-left": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-left"), { loading }),
+  "arrow-big-right-dash": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-right-dash"), { loading }),
+  "arrow-big-right": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-right"), { loading }),
+  "arrow-big-up-dash": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-up-dash"), { loading }),
+  "arrow-big-up": dynamic(() => import("lucide-react/dist/esm/icons/arrow-big-up"), { loading }),
+  "arrow-down-0-1": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-0-1"), { loading }),
+  "arrow-down-1-0": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-1-0"), { loading }),
+  "arrow-down-a-z": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-a-z"), { loading }),
+  "arrow-down-from-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-from-line"), { loading }),
+  "arrow-down-left": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-left"), { loading }),
+  "arrow-down-narrow-wide": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-narrow-wide"), { loading }),
+  "arrow-down-right": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-right"), { loading }),
+  "arrow-down-to-dot": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-to-dot"), { loading }),
+  "arrow-down-to-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-to-line"), { loading }),
+  "arrow-down-up": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-up"), { loading }),
+  "arrow-down-wide-narrow": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-wide-narrow"), { loading }),
+  "arrow-down-z-a": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down-z-a"), { loading }),
+  "arrow-down": dynamic(() => import("lucide-react/dist/esm/icons/arrow-down"), { loading }),
+  "arrow-left-from-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-left-from-line"), { loading }),
+  "arrow-left-right": dynamic(() => import("lucide-react/dist/esm/icons/arrow-left-right"), { loading }),
+  "arrow-left-to-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-left-to-line"), { loading }),
+  "arrow-left": dynamic(() => import("lucide-react/dist/esm/icons/arrow-left"), { loading }),
+  "arrow-right-from-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-right-from-line"), { loading }),
+  "arrow-right-left": dynamic(() => import("lucide-react/dist/esm/icons/arrow-right-left"), { loading }),
+  "arrow-right-to-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-right-to-line"), { loading }),
+  "arrow-right": dynamic(() => import("lucide-react/dist/esm/icons/arrow-right"), { loading }),
+  "arrow-up-0-1": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-0-1"), { loading }),
+  "arrow-up-1-0": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-1-0"), { loading }),
+  "arrow-up-a-z": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-a-z"), { loading }),
+  "arrow-up-down": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-down"), { loading }),
+  "arrow-up-from-dot": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-from-dot"), { loading }),
+  "arrow-up-from-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-from-line"), { loading }),
+  "arrow-up-left": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-left"), { loading }),
+  "arrow-up-narrow-wide": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-narrow-wide"), { loading }),
+  "arrow-up-right": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-right"), { loading }),
+  "arrow-up-to-line": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-to-line"), { loading }),
+  "arrow-up-wide-narrow": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-wide-narrow"), { loading }),
+  "arrow-up-z-a": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up-z-a"), { loading }),
+  "arrow-up": dynamic(() => import("lucide-react/dist/esm/icons/arrow-up"), { loading }),
+  "arrows-up-from-line": dynamic(() => import("lucide-react/dist/esm/icons/arrows-up-from-line"), { loading }),
+  asterisk: dynamic(() => import("lucide-react/dist/esm/icons/asterisk"), { loading }),
+  "at-sign": dynamic(() => import("lucide-react/dist/esm/icons/at-sign"), { loading }),
+  atom: dynamic(() => import("lucide-react/dist/esm/icons/atom"), { loading }),
+  "audio-lines": dynamic(() => import("lucide-react/dist/esm/icons/audio-lines"), { loading }),
+  "audio-waveform": dynamic(() => import("lucide-react/dist/esm/icons/audio-waveform"), { loading }),
+  award: dynamic(() => import("lucide-react/dist/esm/icons/award"), { loading }),
+  axe: dynamic(() => import("lucide-react/dist/esm/icons/axe"), { loading }),
+  "axis-3d": dynamic(() => import("lucide-react/dist/esm/icons/axis-3d"), { loading }),
+  baby: dynamic(() => import("lucide-react/dist/esm/icons/baby"), { loading }),
+  backpack: dynamic(() => import("lucide-react/dist/esm/icons/backpack"), { loading }),
+  "badge-alert": dynamic(() => import("lucide-react/dist/esm/icons/badge-alert"), { loading }),
+  "badge-cent": dynamic(() => import("lucide-react/dist/esm/icons/badge-cent"), { loading }),
+  "badge-check": dynamic(() => import("lucide-react/dist/esm/icons/badge-check"), { loading }),
+  "badge-dollar-sign": dynamic(() => import("lucide-react/dist/esm/icons/badge-dollar-sign"), { loading }),
+  "badge-euro": dynamic(() => import("lucide-react/dist/esm/icons/badge-euro"), { loading }),
+  "badge-help": dynamic(() => import("lucide-react/dist/esm/icons/badge-help"), { loading }),
+  "badge-indian-rupee": dynamic(() => import("lucide-react/dist/esm/icons/badge-indian-rupee"), { loading }),
+  "badge-info": dynamic(() => import("lucide-react/dist/esm/icons/badge-info"), { loading }),
+  "badge-japanese-yen": dynamic(() => import("lucide-react/dist/esm/icons/badge-japanese-yen"), { loading }),
+  "badge-minus": dynamic(() => import("lucide-react/dist/esm/icons/badge-minus"), { loading }),
+  "badge-percent": dynamic(() => import("lucide-react/dist/esm/icons/badge-percent"), { loading }),
+  "badge-plus": dynamic(() => import("lucide-react/dist/esm/icons/badge-plus"), { loading }),
+  "badge-pound-sterling": dynamic(() => import("lucide-react/dist/esm/icons/badge-pound-sterling"), { loading }),
+  "badge-russian-ruble": dynamic(() => import("lucide-react/dist/esm/icons/badge-russian-ruble"), { loading }),
+  "badge-swiss-franc": dynamic(() => import("lucide-react/dist/esm/icons/badge-swiss-franc"), { loading }),
+  "badge-x": dynamic(() => import("lucide-react/dist/esm/icons/badge-x"), { loading }),
+  badge: dynamic(() => import("lucide-react/dist/esm/icons/badge"), { loading }),
+  "baggage-claim": dynamic(() => import("lucide-react/dist/esm/icons/baggage-claim"), { loading }),
+  ban: dynamic(() => import("lucide-react/dist/esm/icons/ban"), { loading }),
+  banana: dynamic(() => import("lucide-react/dist/esm/icons/banana"), { loading }),
+  banknote: dynamic(() => import("lucide-react/dist/esm/icons/banknote"), { loading }),
+  "bar-chart-2": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-2"), { loading }),
+  "bar-chart-3": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-3"), { loading }),
+  "bar-chart-4": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-4"), { loading }),
+  "bar-chart-big": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-big"), { loading }),
+  "bar-chart-horizontal-big": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-horizontal-big"), { loading }),
+  "bar-chart-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart-horizontal"), { loading }),
+  "bar-chart": dynamic(() => import("lucide-react/dist/esm/icons/bar-chart"), { loading }),
+  barcode: dynamic(() => import("lucide-react/dist/esm/icons/barcode"), { loading }),
+  baseline: dynamic(() => import("lucide-react/dist/esm/icons/baseline"), { loading }),
+  bath: dynamic(() => import("lucide-react/dist/esm/icons/bath"), { loading }),
+  "battery-charging": dynamic(() => import("lucide-react/dist/esm/icons/battery-charging"), { loading }),
+  "battery-full": dynamic(() => import("lucide-react/dist/esm/icons/battery-full"), { loading }),
+  "battery-low": dynamic(() => import("lucide-react/dist/esm/icons/battery-low"), { loading }),
+  "battery-medium": dynamic(() => import("lucide-react/dist/esm/icons/battery-medium"), { loading }),
+  "battery-warning": dynamic(() => import("lucide-react/dist/esm/icons/battery-warning"), { loading }),
+  battery: dynamic(() => import("lucide-react/dist/esm/icons/battery"), { loading }),
+  beaker: dynamic(() => import("lucide-react/dist/esm/icons/beaker"), { loading }),
+  "bean-off": dynamic(() => import("lucide-react/dist/esm/icons/bean-off"), { loading }),
+  bean: dynamic(() => import("lucide-react/dist/esm/icons/bean"), { loading }),
+  "bed-double": dynamic(() => import("lucide-react/dist/esm/icons/bed-double"), { loading }),
+  "bed-single": dynamic(() => import("lucide-react/dist/esm/icons/bed-single"), { loading }),
+  bed: dynamic(() => import("lucide-react/dist/esm/icons/bed"), { loading }),
+  beef: dynamic(() => import("lucide-react/dist/esm/icons/beef"), { loading }),
+  "beer-off": dynamic(() => import("lucide-react/dist/esm/icons/beer-off"), { loading }),
+  beer: dynamic(() => import("lucide-react/dist/esm/icons/beer"), { loading }),
+  "bell-dot": dynamic(() => import("lucide-react/dist/esm/icons/bell-dot"), { loading }),
+  "bell-electric": dynamic(() => import("lucide-react/dist/esm/icons/bell-electric"), { loading }),
+  "bell-minus": dynamic(() => import("lucide-react/dist/esm/icons/bell-minus"), { loading }),
+  "bell-off": dynamic(() => import("lucide-react/dist/esm/icons/bell-off"), { loading }),
+  "bell-plus": dynamic(() => import("lucide-react/dist/esm/icons/bell-plus"), { loading }),
+  "bell-ring": dynamic(() => import("lucide-react/dist/esm/icons/bell-ring"), { loading }),
+  bell: dynamic(() => import("lucide-react/dist/esm/icons/bell"), { loading }),
+  "between-horizontal-end": dynamic(() => import("lucide-react/dist/esm/icons/between-horizontal-end"), { loading }),
+  "between-horizontal-start": dynamic(() => import("lucide-react/dist/esm/icons/between-horizontal-start"), { loading }),
+  "between-vertical-end": dynamic(() => import("lucide-react/dist/esm/icons/between-vertical-end"), { loading }),
+  "between-vertical-start": dynamic(() => import("lucide-react/dist/esm/icons/between-vertical-start"), { loading }),
+  bike: dynamic(() => import("lucide-react/dist/esm/icons/bike"), { loading }),
+  binary: dynamic(() => import("lucide-react/dist/esm/icons/binary"), { loading }),
+  biohazard: dynamic(() => import("lucide-react/dist/esm/icons/biohazard"), { loading }),
+  bird: dynamic(() => import("lucide-react/dist/esm/icons/bird"), { loading }),
+  bitcoin: dynamic(() => import("lucide-react/dist/esm/icons/bitcoin"), { loading }),
+  blend: dynamic(() => import("lucide-react/dist/esm/icons/blend"), { loading }),
+  blinds: dynamic(() => import("lucide-react/dist/esm/icons/blinds"), { loading }),
+  blocks: dynamic(() => import("lucide-react/dist/esm/icons/blocks"), { loading }),
+  "bluetooth-connected": dynamic(() => import("lucide-react/dist/esm/icons/bluetooth-connected"), { loading }),
+  "bluetooth-off": dynamic(() => import("lucide-react/dist/esm/icons/bluetooth-off"), { loading }),
+  "bluetooth-searching": dynamic(() => import("lucide-react/dist/esm/icons/bluetooth-searching"), { loading }),
+  bluetooth: dynamic(() => import("lucide-react/dist/esm/icons/bluetooth"), { loading }),
+  bold: dynamic(() => import("lucide-react/dist/esm/icons/bold"), { loading }),
+  bolt: dynamic(() => import("lucide-react/dist/esm/icons/bolt"), { loading }),
+  bomb: dynamic(() => import("lucide-react/dist/esm/icons/bomb"), { loading }),
+  bone: dynamic(() => import("lucide-react/dist/esm/icons/bone"), { loading }),
+  "book-a": dynamic(() => import("lucide-react/dist/esm/icons/book-a"), { loading }),
+  "book-audio": dynamic(() => import("lucide-react/dist/esm/icons/book-audio"), { loading }),
+  "book-check": dynamic(() => import("lucide-react/dist/esm/icons/book-check"), { loading }),
+  "book-copy": dynamic(() => import("lucide-react/dist/esm/icons/book-copy"), { loading }),
+  "book-dashed": dynamic(() => import("lucide-react/dist/esm/icons/book-dashed"), { loading }),
+  "book-down": dynamic(() => import("lucide-react/dist/esm/icons/book-down"), { loading }),
+  "book-headphones": dynamic(() => import("lucide-react/dist/esm/icons/book-headphones"), { loading }),
+  "book-heart": dynamic(() => import("lucide-react/dist/esm/icons/book-heart"), { loading }),
+  "book-image": dynamic(() => import("lucide-react/dist/esm/icons/book-image"), { loading }),
+  "book-key": dynamic(() => import("lucide-react/dist/esm/icons/book-key"), { loading }),
+  "book-lock": dynamic(() => import("lucide-react/dist/esm/icons/book-lock"), { loading }),
+  "book-marked": dynamic(() => import("lucide-react/dist/esm/icons/book-marked"), { loading }),
+  "book-minus": dynamic(() => import("lucide-react/dist/esm/icons/book-minus"), { loading }),
+  "book-open-check": dynamic(() => import("lucide-react/dist/esm/icons/book-open-check"), { loading }),
+  "book-open-text": dynamic(() => import("lucide-react/dist/esm/icons/book-open-text"), { loading }),
+  "book-open": dynamic(() => import("lucide-react/dist/esm/icons/book-open"), { loading }),
+  "book-plus": dynamic(() => import("lucide-react/dist/esm/icons/book-plus"), { loading }),
+  "book-text": dynamic(() => import("lucide-react/dist/esm/icons/book-text"), { loading }),
+  "book-type": dynamic(() => import("lucide-react/dist/esm/icons/book-type"), { loading }),
+  "book-up-2": dynamic(() => import("lucide-react/dist/esm/icons/book-up-2"), { loading }),
+  "book-up": dynamic(() => import("lucide-react/dist/esm/icons/book-up"), { loading }),
+  "book-user": dynamic(() => import("lucide-react/dist/esm/icons/book-user"), { loading }),
+  "book-x": dynamic(() => import("lucide-react/dist/esm/icons/book-x"), { loading }),
+  book: dynamic(() => import("lucide-react/dist/esm/icons/book"), { loading }),
+  "bookmark-check": dynamic(() => import("lucide-react/dist/esm/icons/bookmark-check"), { loading }),
+  "bookmark-minus": dynamic(() => import("lucide-react/dist/esm/icons/bookmark-minus"), { loading }),
+  "bookmark-plus": dynamic(() => import("lucide-react/dist/esm/icons/bookmark-plus"), { loading }),
+  "bookmark-x": dynamic(() => import("lucide-react/dist/esm/icons/bookmark-x"), { loading }),
+  bookmark: dynamic(() => import("lucide-react/dist/esm/icons/bookmark"), { loading }),
+  "boom-box": dynamic(() => import("lucide-react/dist/esm/icons/boom-box"), { loading }),
+  "bot-message-square": dynamic(() => import("lucide-react/dist/esm/icons/bot-message-square"), { loading }),
+  bot: dynamic(() => import("lucide-react/dist/esm/icons/bot"), { loading }),
+  "box-select": dynamic(() => import("lucide-react/dist/esm/icons/box-select"), { loading }),
+  box: dynamic(() => import("lucide-react/dist/esm/icons/box"), { loading }),
+  boxes: dynamic(() => import("lucide-react/dist/esm/icons/boxes"), { loading }),
+  braces: dynamic(() => import("lucide-react/dist/esm/icons/braces"), { loading }),
+  brackets: dynamic(() => import("lucide-react/dist/esm/icons/brackets"), { loading }),
+  "brain-circuit": dynamic(() => import("lucide-react/dist/esm/icons/brain-circuit"), { loading }),
+  "brain-cog": dynamic(() => import("lucide-react/dist/esm/icons/brain-cog"), { loading }),
+  brain: dynamic(() => import("lucide-react/dist/esm/icons/brain"), { loading }),
+  "brick-wall": dynamic(() => import("lucide-react/dist/esm/icons/brick-wall"), { loading }),
+  "briefcase-business": dynamic(() => import("lucide-react/dist/esm/icons/briefcase-business"), { loading }),
+  "briefcase-medical": dynamic(() => import("lucide-react/dist/esm/icons/briefcase-medical"), { loading }),
+  briefcase: dynamic(() => import("lucide-react/dist/esm/icons/briefcase"), { loading }),
+  "bring-to-front": dynamic(() => import("lucide-react/dist/esm/icons/bring-to-front"), { loading }),
+  brush: dynamic(() => import("lucide-react/dist/esm/icons/brush"), { loading }),
+  "bug-off": dynamic(() => import("lucide-react/dist/esm/icons/bug-off"), { loading }),
+  "bug-play": dynamic(() => import("lucide-react/dist/esm/icons/bug-play"), { loading }),
+  bug: dynamic(() => import("lucide-react/dist/esm/icons/bug"), { loading }),
+  "building-2": dynamic(() => import("lucide-react/dist/esm/icons/building-2"), { loading }),
+  building: dynamic(() => import("lucide-react/dist/esm/icons/building"), { loading }),
+  "bus-front": dynamic(() => import("lucide-react/dist/esm/icons/bus-front"), { loading }),
+  bus: dynamic(() => import("lucide-react/dist/esm/icons/bus"), { loading }),
+  "cable-car": dynamic(() => import("lucide-react/dist/esm/icons/cable-car"), { loading }),
+  cable: dynamic(() => import("lucide-react/dist/esm/icons/cable"), { loading }),
+  "cake-slice": dynamic(() => import("lucide-react/dist/esm/icons/cake-slice"), { loading }),
+  cake: dynamic(() => import("lucide-react/dist/esm/icons/cake"), { loading }),
+  calculator: dynamic(() => import("lucide-react/dist/esm/icons/calculator"), { loading }),
+  "calendar-check-2": dynamic(() => import("lucide-react/dist/esm/icons/calendar-check-2"), { loading }),
+  "calendar-check": dynamic(() => import("lucide-react/dist/esm/icons/calendar-check"), { loading }),
+  "calendar-clock": dynamic(() => import("lucide-react/dist/esm/icons/calendar-clock"), { loading }),
+  "calendar-days": dynamic(() => import("lucide-react/dist/esm/icons/calendar-days"), { loading }),
+  "calendar-fold": dynamic(() => import("lucide-react/dist/esm/icons/calendar-fold"), { loading }),
+  "calendar-heart": dynamic(() => import("lucide-react/dist/esm/icons/calendar-heart"), { loading }),
+  "calendar-minus-2": dynamic(() => import("lucide-react/dist/esm/icons/calendar-minus-2"), { loading }),
+  "calendar-minus": dynamic(() => import("lucide-react/dist/esm/icons/calendar-minus"), { loading }),
+  "calendar-off": dynamic(() => import("lucide-react/dist/esm/icons/calendar-off"), { loading }),
+  "calendar-plus-2": dynamic(() => import("lucide-react/dist/esm/icons/calendar-plus-2"), { loading }),
+  "calendar-plus": dynamic(() => import("lucide-react/dist/esm/icons/calendar-plus"), { loading }),
+  "calendar-range": dynamic(() => import("lucide-react/dist/esm/icons/calendar-range"), { loading }),
+  "calendar-search": dynamic(() => import("lucide-react/dist/esm/icons/calendar-search"), { loading }),
+  "calendar-x-2": dynamic(() => import("lucide-react/dist/esm/icons/calendar-x-2"), { loading }),
+  "calendar-x": dynamic(() => import("lucide-react/dist/esm/icons/calendar-x"), { loading }),
+  calendar: dynamic(() => import("lucide-react/dist/esm/icons/calendar"), { loading }),
+  "camera-off": dynamic(() => import("lucide-react/dist/esm/icons/camera-off"), { loading }),
+  camera: dynamic(() => import("lucide-react/dist/esm/icons/camera"), { loading }),
+  "candlestick-chart": dynamic(() => import("lucide-react/dist/esm/icons/candlestick-chart"), { loading }),
+  "candy-cane": dynamic(() => import("lucide-react/dist/esm/icons/candy-cane"), { loading }),
+  "candy-off": dynamic(() => import("lucide-react/dist/esm/icons/candy-off"), { loading }),
+  candy: dynamic(() => import("lucide-react/dist/esm/icons/candy"), { loading }),
+  cannabis: dynamic(() => import("lucide-react/dist/esm/icons/cannabis"), { loading }),
+  "captions-off": dynamic(() => import("lucide-react/dist/esm/icons/captions-off"), { loading }),
+  captions: dynamic(() => import("lucide-react/dist/esm/icons/captions"), { loading }),
+  "car-front": dynamic(() => import("lucide-react/dist/esm/icons/car-front"), { loading }),
+  "car-taxi-front": dynamic(() => import("lucide-react/dist/esm/icons/car-taxi-front"), { loading }),
+  car: dynamic(() => import("lucide-react/dist/esm/icons/car"), { loading }),
+  caravan: dynamic(() => import("lucide-react/dist/esm/icons/caravan"), { loading }),
+  carrot: dynamic(() => import("lucide-react/dist/esm/icons/carrot"), { loading }),
+  "case-lower": dynamic(() => import("lucide-react/dist/esm/icons/case-lower"), { loading }),
+  "case-sensitive": dynamic(() => import("lucide-react/dist/esm/icons/case-sensitive"), { loading }),
+  "case-upper": dynamic(() => import("lucide-react/dist/esm/icons/case-upper"), { loading }),
+  "cassette-tape": dynamic(() => import("lucide-react/dist/esm/icons/cassette-tape"), { loading }),
+  cast: dynamic(() => import("lucide-react/dist/esm/icons/cast"), { loading }),
+  castle: dynamic(() => import("lucide-react/dist/esm/icons/castle"), { loading }),
+  cat: dynamic(() => import("lucide-react/dist/esm/icons/cat"), { loading }),
+  cctv: dynamic(() => import("lucide-react/dist/esm/icons/cctv"), { loading }),
+  "check-check": dynamic(() => import("lucide-react/dist/esm/icons/check-check"), { loading }),
+  check: dynamic(() => import("lucide-react/dist/esm/icons/check"), { loading }),
+  "chef-hat": dynamic(() => import("lucide-react/dist/esm/icons/chef-hat"), { loading }),
+  cherry: dynamic(() => import("lucide-react/dist/esm/icons/cherry"), { loading }),
+  "chevron-down": dynamic(() => import("lucide-react/dist/esm/icons/chevron-down"), { loading }),
+  "chevron-first": dynamic(() => import("lucide-react/dist/esm/icons/chevron-first"), { loading }),
+  "chevron-last": dynamic(() => import("lucide-react/dist/esm/icons/chevron-last"), { loading }),
+  "chevron-left": dynamic(() => import("lucide-react/dist/esm/icons/chevron-left"), { loading }),
+  "chevron-right": dynamic(() => import("lucide-react/dist/esm/icons/chevron-right"), { loading }),
+  "chevron-up": dynamic(() => import("lucide-react/dist/esm/icons/chevron-up"), { loading }),
+  "chevrons-down-up": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-down-up"), { loading }),
+  "chevrons-down": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-down"), { loading }),
+  "chevrons-left-right": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-left-right"), { loading }),
+  "chevrons-left": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-left"), { loading }),
+  "chevrons-right-left": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-right-left"), { loading }),
+  "chevrons-right": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-right"), { loading }),
+  "chevrons-up-down": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-up-down"), { loading }),
+  "chevrons-up": dynamic(() => import("lucide-react/dist/esm/icons/chevrons-up"), { loading }),
+  chrome: dynamic(() => import("lucide-react/dist/esm/icons/chrome"), { loading }),
+  church: dynamic(() => import("lucide-react/dist/esm/icons/church"), { loading }),
+  "cigarette-off": dynamic(() => import("lucide-react/dist/esm/icons/cigarette-off"), { loading }),
+  cigarette: dynamic(() => import("lucide-react/dist/esm/icons/cigarette"), { loading }),
+  "circle-alert": dynamic(() => import("lucide-react/dist/esm/icons/circle-alert"), { loading }),
+  "circle-arrow-down": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-down"), { loading }),
+  "circle-arrow-left": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-left"), { loading }),
+  "circle-arrow-out-down-left": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-out-down-left"), { loading }),
+  "circle-arrow-out-down-right": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-out-down-right"), { loading }),
+  "circle-arrow-out-up-left": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-out-up-left"), { loading }),
+  "circle-arrow-out-up-right": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-out-up-right"), { loading }),
+  "circle-arrow-right": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-right"), { loading }),
+  "circle-arrow-up": dynamic(() => import("lucide-react/dist/esm/icons/circle-arrow-up"), { loading }),
+  "circle-check-big": dynamic(() => import("lucide-react/dist/esm/icons/circle-check-big"), { loading }),
+  "circle-check": dynamic(() => import("lucide-react/dist/esm/icons/circle-check"), { loading }),
+  "circle-chevron-down": dynamic(() => import("lucide-react/dist/esm/icons/circle-chevron-down"), { loading }),
+  "circle-chevron-left": dynamic(() => import("lucide-react/dist/esm/icons/circle-chevron-left"), { loading }),
+  "circle-chevron-right": dynamic(() => import("lucide-react/dist/esm/icons/circle-chevron-right"), { loading }),
+  "circle-chevron-up": dynamic(() => import("lucide-react/dist/esm/icons/circle-chevron-up"), { loading }),
+  "circle-dashed": dynamic(() => import("lucide-react/dist/esm/icons/circle-dashed"), { loading }),
+  "circle-divide": dynamic(() => import("lucide-react/dist/esm/icons/circle-divide"), { loading }),
+  "circle-dollar-sign": dynamic(() => import("lucide-react/dist/esm/icons/circle-dollar-sign"), { loading }),
+  "circle-dot-dashed": dynamic(() => import("lucide-react/dist/esm/icons/circle-dot-dashed"), { loading }),
+  "circle-dot": dynamic(() => import("lucide-react/dist/esm/icons/circle-dot"), { loading }),
+  "circle-ellipsis": dynamic(() => import("lucide-react/dist/esm/icons/circle-ellipsis"), { loading }),
+  "circle-equal": dynamic(() => import("lucide-react/dist/esm/icons/circle-equal"), { loading }),
+  "circle-fading-plus": dynamic(() => import("lucide-react/dist/esm/icons/circle-fading-plus"), { loading }),
+  "circle-gauge": dynamic(() => import("lucide-react/dist/esm/icons/circle-gauge"), { loading }),
+  "circle-help": dynamic(() => import("lucide-react/dist/esm/icons/circle-help"), { loading }),
+  "circle-minus": dynamic(() => import("lucide-react/dist/esm/icons/circle-minus"), { loading }),
+  "circle-off": dynamic(() => import("lucide-react/dist/esm/icons/circle-off"), { loading }),
+  "circle-parking-off": dynamic(() => import("lucide-react/dist/esm/icons/circle-parking-off"), { loading }),
+  "circle-parking": dynamic(() => import("lucide-react/dist/esm/icons/circle-parking"), { loading }),
+  "circle-pause": dynamic(() => import("lucide-react/dist/esm/icons/circle-pause"), { loading }),
+  "circle-percent": dynamic(() => import("lucide-react/dist/esm/icons/circle-percent"), { loading }),
+  "circle-play": dynamic(() => import("lucide-react/dist/esm/icons/circle-play"), { loading }),
+  "circle-plus": dynamic(() => import("lucide-react/dist/esm/icons/circle-plus"), { loading }),
+  "circle-power": dynamic(() => import("lucide-react/dist/esm/icons/circle-power"), { loading }),
+  "circle-slash-2": dynamic(() => import("lucide-react/dist/esm/icons/circle-slash-2"), { loading }),
+  "circle-slash": dynamic(() => import("lucide-react/dist/esm/icons/circle-slash"), { loading }),
+  "circle-stop": dynamic(() => import("lucide-react/dist/esm/icons/circle-stop"), { loading }),
+  "circle-user-round": dynamic(() => import("lucide-react/dist/esm/icons/circle-user-round"), { loading }),
+  "circle-user": dynamic(() => import("lucide-react/dist/esm/icons/circle-user"), { loading }),
+  "circle-x": dynamic(() => import("lucide-react/dist/esm/icons/circle-x"), { loading }),
+  circle: dynamic(() => import("lucide-react/dist/esm/icons/circle"), { loading }),
+  "circuit-board": dynamic(() => import("lucide-react/dist/esm/icons/circuit-board"), { loading }),
+  citrus: dynamic(() => import("lucide-react/dist/esm/icons/citrus"), { loading }),
+  clapperboard: dynamic(() => import("lucide-react/dist/esm/icons/clapperboard"), { loading }),
+  "clipboard-check": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-check"), { loading }),
+  "clipboard-copy": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-copy"), { loading }),
+  "clipboard-list": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-list"), { loading }),
+  "clipboard-minus": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-minus"), { loading }),
+  "clipboard-paste": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-paste"), { loading }),
+  "clipboard-pen-line": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-pen-line"), { loading }),
+  "clipboard-pen": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-pen"), { loading }),
+  "clipboard-plus": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-plus"), { loading }),
+  "clipboard-type": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-type"), { loading }),
+  "clipboard-x": dynamic(() => import("lucide-react/dist/esm/icons/clipboard-x"), { loading }),
+  clipboard: dynamic(() => import("lucide-react/dist/esm/icons/clipboard"), { loading }),
+  "clock-1": dynamic(() => import("lucide-react/dist/esm/icons/clock-1"), { loading }),
+  "clock-10": dynamic(() => import("lucide-react/dist/esm/icons/clock-10"), { loading }),
+  "clock-11": dynamic(() => import("lucide-react/dist/esm/icons/clock-11"), { loading }),
+  "clock-12": dynamic(() => import("lucide-react/dist/esm/icons/clock-12"), { loading }),
+  "clock-2": dynamic(() => import("lucide-react/dist/esm/icons/clock-2"), { loading }),
+  "clock-3": dynamic(() => import("lucide-react/dist/esm/icons/clock-3"), { loading }),
+  "clock-4": dynamic(() => import("lucide-react/dist/esm/icons/clock-4"), { loading }),
+  "clock-5": dynamic(() => import("lucide-react/dist/esm/icons/clock-5"), { loading }),
+  "clock-6": dynamic(() => import("lucide-react/dist/esm/icons/clock-6"), { loading }),
+  "clock-7": dynamic(() => import("lucide-react/dist/esm/icons/clock-7"), { loading }),
+  "clock-8": dynamic(() => import("lucide-react/dist/esm/icons/clock-8"), { loading }),
+  "clock-9": dynamic(() => import("lucide-react/dist/esm/icons/clock-9"), { loading }),
+  clock: dynamic(() => import("lucide-react/dist/esm/icons/clock"), { loading }),
+  "cloud-cog": dynamic(() => import("lucide-react/dist/esm/icons/cloud-cog"), { loading }),
+  "cloud-download": dynamic(() => import("lucide-react/dist/esm/icons/cloud-download"), { loading }),
+  "cloud-drizzle": dynamic(() => import("lucide-react/dist/esm/icons/cloud-drizzle"), { loading }),
+  "cloud-fog": dynamic(() => import("lucide-react/dist/esm/icons/cloud-fog"), { loading }),
+  "cloud-hail": dynamic(() => import("lucide-react/dist/esm/icons/cloud-hail"), { loading }),
+  "cloud-lightning": dynamic(() => import("lucide-react/dist/esm/icons/cloud-lightning"), { loading }),
+  "cloud-moon-rain": dynamic(() => import("lucide-react/dist/esm/icons/cloud-moon-rain"), { loading }),
+  "cloud-moon": dynamic(() => import("lucide-react/dist/esm/icons/cloud-moon"), { loading }),
+  "cloud-off": dynamic(() => import("lucide-react/dist/esm/icons/cloud-off"), { loading }),
+  "cloud-rain-wind": dynamic(() => import("lucide-react/dist/esm/icons/cloud-rain-wind"), { loading }),
+  "cloud-rain": dynamic(() => import("lucide-react/dist/esm/icons/cloud-rain"), { loading }),
+  "cloud-snow": dynamic(() => import("lucide-react/dist/esm/icons/cloud-snow"), { loading }),
+  "cloud-sun-rain": dynamic(() => import("lucide-react/dist/esm/icons/cloud-sun-rain"), { loading }),
+  "cloud-sun": dynamic(() => import("lucide-react/dist/esm/icons/cloud-sun"), { loading }),
+  "cloud-upload": dynamic(() => import("lucide-react/dist/esm/icons/cloud-upload"), { loading }),
+  cloud: dynamic(() => import("lucide-react/dist/esm/icons/cloud"), { loading }),
+  cloudy: dynamic(() => import("lucide-react/dist/esm/icons/cloudy"), { loading }),
+  clover: dynamic(() => import("lucide-react/dist/esm/icons/clover"), { loading }),
+  club: dynamic(() => import("lucide-react/dist/esm/icons/club"), { loading }),
+  "code-xml": dynamic(() => import("lucide-react/dist/esm/icons/code-xml"), { loading }),
+  code: dynamic(() => import("lucide-react/dist/esm/icons/code"), { loading }),
+  codepen: dynamic(() => import("lucide-react/dist/esm/icons/codepen"), { loading }),
+  codesandbox: dynamic(() => import("lucide-react/dist/esm/icons/codesandbox"), { loading }),
+  coffee: dynamic(() => import("lucide-react/dist/esm/icons/coffee"), { loading }),
+  cog: dynamic(() => import("lucide-react/dist/esm/icons/cog"), { loading }),
+  coins: dynamic(() => import("lucide-react/dist/esm/icons/coins"), { loading }),
+  "columns-2": dynamic(() => import("lucide-react/dist/esm/icons/columns-2"), { loading }),
+  "columns-3": dynamic(() => import("lucide-react/dist/esm/icons/columns-3"), { loading }),
+  "columns-4": dynamic(() => import("lucide-react/dist/esm/icons/columns-4"), { loading }),
+  combine: dynamic(() => import("lucide-react/dist/esm/icons/combine"), { loading }),
+  command: dynamic(() => import("lucide-react/dist/esm/icons/command"), { loading }),
+  compass: dynamic(() => import("lucide-react/dist/esm/icons/compass"), { loading }),
+  component: dynamic(() => import("lucide-react/dist/esm/icons/component"), { loading }),
+  computer: dynamic(() => import("lucide-react/dist/esm/icons/computer"), { loading }),
+  "concierge-bell": dynamic(() => import("lucide-react/dist/esm/icons/concierge-bell"), { loading }),
+  cone: dynamic(() => import("lucide-react/dist/esm/icons/cone"), { loading }),
+  construction: dynamic(() => import("lucide-react/dist/esm/icons/construction"), { loading }),
+  "contact-round": dynamic(() => import("lucide-react/dist/esm/icons/contact-round"), { loading }),
+  contact: dynamic(() => import("lucide-react/dist/esm/icons/contact"), { loading }),
+  container: dynamic(() => import("lucide-react/dist/esm/icons/container"), { loading }),
+  contrast: dynamic(() => import("lucide-react/dist/esm/icons/contrast"), { loading }),
+  cookie: dynamic(() => import("lucide-react/dist/esm/icons/cookie"), { loading }),
+  "cooking-pot": dynamic(() => import("lucide-react/dist/esm/icons/cooking-pot"), { loading }),
+  "copy-check": dynamic(() => import("lucide-react/dist/esm/icons/copy-check"), { loading }),
+  "copy-minus": dynamic(() => import("lucide-react/dist/esm/icons/copy-minus"), { loading }),
+  "copy-plus": dynamic(() => import("lucide-react/dist/esm/icons/copy-plus"), { loading }),
+  "copy-slash": dynamic(() => import("lucide-react/dist/esm/icons/copy-slash"), { loading }),
+  "copy-x": dynamic(() => import("lucide-react/dist/esm/icons/copy-x"), { loading }),
+  copy: dynamic(() => import("lucide-react/dist/esm/icons/copy"), { loading }),
+  copyleft: dynamic(() => import("lucide-react/dist/esm/icons/copyleft"), { loading }),
+  copyright: dynamic(() => import("lucide-react/dist/esm/icons/copyright"), { loading }),
+  "corner-down-left": dynamic(() => import("lucide-react/dist/esm/icons/corner-down-left"), { loading }),
+  "corner-down-right": dynamic(() => import("lucide-react/dist/esm/icons/corner-down-right"), { loading }),
+  "corner-left-down": dynamic(() => import("lucide-react/dist/esm/icons/corner-left-down"), { loading }),
+  "corner-left-up": dynamic(() => import("lucide-react/dist/esm/icons/corner-left-up"), { loading }),
+  "corner-right-down": dynamic(() => import("lucide-react/dist/esm/icons/corner-right-down"), { loading }),
+  "corner-right-up": dynamic(() => import("lucide-react/dist/esm/icons/corner-right-up"), { loading }),
+  "corner-up-left": dynamic(() => import("lucide-react/dist/esm/icons/corner-up-left"), { loading }),
+  "corner-up-right": dynamic(() => import("lucide-react/dist/esm/icons/corner-up-right"), { loading }),
+  cpu: dynamic(() => import("lucide-react/dist/esm/icons/cpu"), { loading }),
+  "creative-commons": dynamic(() => import("lucide-react/dist/esm/icons/creative-commons"), { loading }),
+  "credit-card": dynamic(() => import("lucide-react/dist/esm/icons/credit-card"), { loading }),
+  croissant: dynamic(() => import("lucide-react/dist/esm/icons/croissant"), { loading }),
+  crop: dynamic(() => import("lucide-react/dist/esm/icons/crop"), { loading }),
+  cross: dynamic(() => import("lucide-react/dist/esm/icons/cross"), { loading }),
+  crosshair: dynamic(() => import("lucide-react/dist/esm/icons/crosshair"), { loading }),
+  crown: dynamic(() => import("lucide-react/dist/esm/icons/crown"), { loading }),
+  cuboid: dynamic(() => import("lucide-react/dist/esm/icons/cuboid"), { loading }),
+  "cup-soda": dynamic(() => import("lucide-react/dist/esm/icons/cup-soda"), { loading }),
+  currency: dynamic(() => import("lucide-react/dist/esm/icons/currency"), { loading }),
+  cylinder: dynamic(() => import("lucide-react/dist/esm/icons/cylinder"), { loading }),
+  "database-backup": dynamic(() => import("lucide-react/dist/esm/icons/database-backup"), { loading }),
+  "database-zap": dynamic(() => import("lucide-react/dist/esm/icons/database-zap"), { loading }),
+  database: dynamic(() => import("lucide-react/dist/esm/icons/database"), { loading }),
+  delete: dynamic(() => import("lucide-react/dist/esm/icons/delete"), { loading }),
+  dessert: dynamic(() => import("lucide-react/dist/esm/icons/dessert"), { loading }),
+  diameter: dynamic(() => import("lucide-react/dist/esm/icons/diameter"), { loading }),
+  "diamond-percent": dynamic(() => import("lucide-react/dist/esm/icons/diamond-percent"), { loading }),
+  diamond: dynamic(() => import("lucide-react/dist/esm/icons/diamond"), { loading }),
+  "dice-1": dynamic(() => import("lucide-react/dist/esm/icons/dice-1"), { loading }),
+  "dice-2": dynamic(() => import("lucide-react/dist/esm/icons/dice-2"), { loading }),
+  "dice-3": dynamic(() => import("lucide-react/dist/esm/icons/dice-3"), { loading }),
+  "dice-4": dynamic(() => import("lucide-react/dist/esm/icons/dice-4"), { loading }),
+  "dice-5": dynamic(() => import("lucide-react/dist/esm/icons/dice-5"), { loading }),
+  "dice-6": dynamic(() => import("lucide-react/dist/esm/icons/dice-6"), { loading }),
+  dices: dynamic(() => import("lucide-react/dist/esm/icons/dices"), { loading }),
+  diff: dynamic(() => import("lucide-react/dist/esm/icons/diff"), { loading }),
+  "disc-2": dynamic(() => import("lucide-react/dist/esm/icons/disc-2"), { loading }),
+  "disc-3": dynamic(() => import("lucide-react/dist/esm/icons/disc-3"), { loading }),
+  "disc-album": dynamic(() => import("lucide-react/dist/esm/icons/disc-album"), { loading }),
+  disc: dynamic(() => import("lucide-react/dist/esm/icons/disc"), { loading }),
+  divide: dynamic(() => import("lucide-react/dist/esm/icons/divide"), { loading }),
+  "dna-off": dynamic(() => import("lucide-react/dist/esm/icons/dna-off"), { loading }),
+  dna: dynamic(() => import("lucide-react/dist/esm/icons/dna"), { loading }),
+  dock: dynamic(() => import("lucide-react/dist/esm/icons/dock"), { loading }),
+  dog: dynamic(() => import("lucide-react/dist/esm/icons/dog"), { loading }),
+  "dollar-sign": dynamic(() => import("lucide-react/dist/esm/icons/dollar-sign"), { loading }),
+  donut: dynamic(() => import("lucide-react/dist/esm/icons/donut"), { loading }),
+  "door-closed": dynamic(() => import("lucide-react/dist/esm/icons/door-closed"), { loading }),
+  "door-open": dynamic(() => import("lucide-react/dist/esm/icons/door-open"), { loading }),
+  dot: dynamic(() => import("lucide-react/dist/esm/icons/dot"), { loading }),
+  download: dynamic(() => import("lucide-react/dist/esm/icons/download"), { loading }),
+  "drafting-compass": dynamic(() => import("lucide-react/dist/esm/icons/drafting-compass"), { loading }),
+  drama: dynamic(() => import("lucide-react/dist/esm/icons/drama"), { loading }),
+  dribbble: dynamic(() => import("lucide-react/dist/esm/icons/dribbble"), { loading }),
+  drill: dynamic(() => import("lucide-react/dist/esm/icons/drill"), { loading }),
+  droplet: dynamic(() => import("lucide-react/dist/esm/icons/droplet"), { loading }),
+  droplets: dynamic(() => import("lucide-react/dist/esm/icons/droplets"), { loading }),
+  drum: dynamic(() => import("lucide-react/dist/esm/icons/drum"), { loading }),
+  drumstick: dynamic(() => import("lucide-react/dist/esm/icons/drumstick"), { loading }),
+  dumbbell: dynamic(() => import("lucide-react/dist/esm/icons/dumbbell"), { loading }),
+  "ear-off": dynamic(() => import("lucide-react/dist/esm/icons/ear-off"), { loading }),
+  ear: dynamic(() => import("lucide-react/dist/esm/icons/ear"), { loading }),
+  "earth-lock": dynamic(() => import("lucide-react/dist/esm/icons/earth-lock"), { loading }),
+  earth: dynamic(() => import("lucide-react/dist/esm/icons/earth"), { loading }),
+  eclipse: dynamic(() => import("lucide-react/dist/esm/icons/eclipse"), { loading }),
+  "egg-fried": dynamic(() => import("lucide-react/dist/esm/icons/egg-fried"), { loading }),
+  "egg-off": dynamic(() => import("lucide-react/dist/esm/icons/egg-off"), { loading }),
+  egg: dynamic(() => import("lucide-react/dist/esm/icons/egg"), { loading }),
+  "ellipsis-vertical": dynamic(() => import("lucide-react/dist/esm/icons/ellipsis-vertical"), { loading }),
+  ellipsis: dynamic(() => import("lucide-react/dist/esm/icons/ellipsis"), { loading }),
+  "equal-not": dynamic(() => import("lucide-react/dist/esm/icons/equal-not"), { loading }),
+  equal: dynamic(() => import("lucide-react/dist/esm/icons/equal"), { loading }),
+  eraser: dynamic(() => import("lucide-react/dist/esm/icons/eraser"), { loading }),
+  euro: dynamic(() => import("lucide-react/dist/esm/icons/euro"), { loading }),
+  expand: dynamic(() => import("lucide-react/dist/esm/icons/expand"), { loading }),
+  "external-link": dynamic(() => import("lucide-react/dist/esm/icons/external-link"), { loading }),
+  "eye-off": dynamic(() => import("lucide-react/dist/esm/icons/eye-off"), { loading }),
+  eye: dynamic(() => import("lucide-react/dist/esm/icons/eye"), { loading }),
+  facebook: dynamic(() => import("lucide-react/dist/esm/icons/facebook"), { loading }),
+  factory: dynamic(() => import("lucide-react/dist/esm/icons/factory"), { loading }),
+  fan: dynamic(() => import("lucide-react/dist/esm/icons/fan"), { loading }),
+  "fast-forward": dynamic(() => import("lucide-react/dist/esm/icons/fast-forward"), { loading }),
+  feather: dynamic(() => import("lucide-react/dist/esm/icons/feather"), { loading }),
+  fence: dynamic(() => import("lucide-react/dist/esm/icons/fence"), { loading }),
+  "ferris-wheel": dynamic(() => import("lucide-react/dist/esm/icons/ferris-wheel"), { loading }),
+  figma: dynamic(() => import("lucide-react/dist/esm/icons/figma"), { loading }),
+  "file-archive": dynamic(() => import("lucide-react/dist/esm/icons/file-archive"), { loading }),
+  "file-audio-2": dynamic(() => import("lucide-react/dist/esm/icons/file-audio-2"), { loading }),
+  "file-audio": dynamic(() => import("lucide-react/dist/esm/icons/file-audio"), { loading }),
+  "file-axis-3d": dynamic(() => import("lucide-react/dist/esm/icons/file-axis-3d"), { loading }),
+  "file-badge-2": dynamic(() => import("lucide-react/dist/esm/icons/file-badge-2"), { loading }),
+  "file-badge": dynamic(() => import("lucide-react/dist/esm/icons/file-badge"), { loading }),
+  "file-bar-chart-2": dynamic(() => import("lucide-react/dist/esm/icons/file-bar-chart-2"), { loading }),
+  "file-bar-chart": dynamic(() => import("lucide-react/dist/esm/icons/file-bar-chart"), { loading }),
+  "file-box": dynamic(() => import("lucide-react/dist/esm/icons/file-box"), { loading }),
+  "file-check-2": dynamic(() => import("lucide-react/dist/esm/icons/file-check-2"), { loading }),
+  "file-check": dynamic(() => import("lucide-react/dist/esm/icons/file-check"), { loading }),
+  "file-clock": dynamic(() => import("lucide-react/dist/esm/icons/file-clock"), { loading }),
+  "file-code-2": dynamic(() => import("lucide-react/dist/esm/icons/file-code-2"), { loading }),
+  "file-code": dynamic(() => import("lucide-react/dist/esm/icons/file-code"), { loading }),
+  "file-cog": dynamic(() => import("lucide-react/dist/esm/icons/file-cog"), { loading }),
+  "file-diff": dynamic(() => import("lucide-react/dist/esm/icons/file-diff"), { loading }),
+  "file-digit": dynamic(() => import("lucide-react/dist/esm/icons/file-digit"), { loading }),
+  "file-down": dynamic(() => import("lucide-react/dist/esm/icons/file-down"), { loading }),
+  "file-heart": dynamic(() => import("lucide-react/dist/esm/icons/file-heart"), { loading }),
+  "file-image": dynamic(() => import("lucide-react/dist/esm/icons/file-image"), { loading }),
+  "file-input": dynamic(() => import("lucide-react/dist/esm/icons/file-input"), { loading }),
+  "file-json-2": dynamic(() => import("lucide-react/dist/esm/icons/file-json-2"), { loading }),
+  "file-json": dynamic(() => import("lucide-react/dist/esm/icons/file-json"), { loading }),
+  "file-key-2": dynamic(() => import("lucide-react/dist/esm/icons/file-key-2"), { loading }),
+  "file-key": dynamic(() => import("lucide-react/dist/esm/icons/file-key"), { loading }),
+  "file-line-chart": dynamic(() => import("lucide-react/dist/esm/icons/file-line-chart"), { loading }),
+  "file-lock-2": dynamic(() => import("lucide-react/dist/esm/icons/file-lock-2"), { loading }),
+  "file-lock": dynamic(() => import("lucide-react/dist/esm/icons/file-lock"), { loading }),
+  "file-minus-2": dynamic(() => import("lucide-react/dist/esm/icons/file-minus-2"), { loading }),
+  "file-minus": dynamic(() => import("lucide-react/dist/esm/icons/file-minus"), { loading }),
+  "file-music": dynamic(() => import("lucide-react/dist/esm/icons/file-music"), { loading }),
+  "file-output": dynamic(() => import("lucide-react/dist/esm/icons/file-output"), { loading }),
+  "file-pen-line": dynamic(() => import("lucide-react/dist/esm/icons/file-pen-line"), { loading }),
+  "file-pen": dynamic(() => import("lucide-react/dist/esm/icons/file-pen"), { loading }),
+  "file-pie-chart": dynamic(() => import("lucide-react/dist/esm/icons/file-pie-chart"), { loading }),
+  "file-plus-2": dynamic(() => import("lucide-react/dist/esm/icons/file-plus-2"), { loading }),
+  "file-plus": dynamic(() => import("lucide-react/dist/esm/icons/file-plus"), { loading }),
+  "file-question": dynamic(() => import("lucide-react/dist/esm/icons/file-question"), { loading }),
+  "file-scan": dynamic(() => import("lucide-react/dist/esm/icons/file-scan"), { loading }),
+  "file-search-2": dynamic(() => import("lucide-react/dist/esm/icons/file-search-2"), { loading }),
+  "file-search": dynamic(() => import("lucide-react/dist/esm/icons/file-search"), { loading }),
+  "file-sliders": dynamic(() => import("lucide-react/dist/esm/icons/file-sliders"), { loading }),
+  "file-spreadsheet": dynamic(() => import("lucide-react/dist/esm/icons/file-spreadsheet"), { loading }),
+  "file-stack": dynamic(() => import("lucide-react/dist/esm/icons/file-stack"), { loading }),
+  "file-symlink": dynamic(() => import("lucide-react/dist/esm/icons/file-symlink"), { loading }),
+  "file-terminal": dynamic(() => import("lucide-react/dist/esm/icons/file-terminal"), { loading }),
+  "file-text": dynamic(() => import("lucide-react/dist/esm/icons/file-text"), { loading }),
+  "file-type-2": dynamic(() => import("lucide-react/dist/esm/icons/file-type-2"), { loading }),
+  "file-type": dynamic(() => import("lucide-react/dist/esm/icons/file-type"), { loading }),
+  "file-up": dynamic(() => import("lucide-react/dist/esm/icons/file-up"), { loading }),
+  "file-video-2": dynamic(() => import("lucide-react/dist/esm/icons/file-video-2"), { loading }),
+  "file-video": dynamic(() => import("lucide-react/dist/esm/icons/file-video"), { loading }),
+  "file-volume-2": dynamic(() => import("lucide-react/dist/esm/icons/file-volume-2"), { loading }),
+  "file-volume": dynamic(() => import("lucide-react/dist/esm/icons/file-volume"), { loading }),
+  "file-warning": dynamic(() => import("lucide-react/dist/esm/icons/file-warning"), { loading }),
+  "file-x-2": dynamic(() => import("lucide-react/dist/esm/icons/file-x-2"), { loading }),
+  "file-x": dynamic(() => import("lucide-react/dist/esm/icons/file-x"), { loading }),
+  file: dynamic(() => import("lucide-react/dist/esm/icons/file"), { loading }),
+  files: dynamic(() => import("lucide-react/dist/esm/icons/files"), { loading }),
+  film: dynamic(() => import("lucide-react/dist/esm/icons/film"), { loading }),
+  "filter-x": dynamic(() => import("lucide-react/dist/esm/icons/filter-x"), { loading }),
+  filter: dynamic(() => import("lucide-react/dist/esm/icons/filter"), { loading }),
+  fingerprint: dynamic(() => import("lucide-react/dist/esm/icons/fingerprint"), { loading }),
+  "fire-extinguisher": dynamic(() => import("lucide-react/dist/esm/icons/fire-extinguisher"), { loading }),
+  "fish-off": dynamic(() => import("lucide-react/dist/esm/icons/fish-off"), { loading }),
+  "fish-symbol": dynamic(() => import("lucide-react/dist/esm/icons/fish-symbol"), { loading }),
+  fish: dynamic(() => import("lucide-react/dist/esm/icons/fish"), { loading }),
+  "flag-off": dynamic(() => import("lucide-react/dist/esm/icons/flag-off"), { loading }),
+  "flag-triangle-left": dynamic(() => import("lucide-react/dist/esm/icons/flag-triangle-left"), { loading }),
+  "flag-triangle-right": dynamic(() => import("lucide-react/dist/esm/icons/flag-triangle-right"), { loading }),
+  flag: dynamic(() => import("lucide-react/dist/esm/icons/flag"), { loading }),
+  "flame-kindling": dynamic(() => import("lucide-react/dist/esm/icons/flame-kindling"), { loading }),
+  flame: dynamic(() => import("lucide-react/dist/esm/icons/flame"), { loading }),
+  "flashlight-off": dynamic(() => import("lucide-react/dist/esm/icons/flashlight-off"), { loading }),
+  flashlight: dynamic(() => import("lucide-react/dist/esm/icons/flashlight"), { loading }),
+  "flask-conical-off": dynamic(() => import("lucide-react/dist/esm/icons/flask-conical-off"), { loading }),
+  "flask-conical": dynamic(() => import("lucide-react/dist/esm/icons/flask-conical"), { loading }),
+  "flask-round": dynamic(() => import("lucide-react/dist/esm/icons/flask-round"), { loading }),
+  "flip-horizontal-2": dynamic(() => import("lucide-react/dist/esm/icons/flip-horizontal-2"), { loading }),
+  "flip-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/flip-horizontal"), { loading }),
+  "flip-vertical-2": dynamic(() => import("lucide-react/dist/esm/icons/flip-vertical-2"), { loading }),
+  "flip-vertical": dynamic(() => import("lucide-react/dist/esm/icons/flip-vertical"), { loading }),
+  "flower-2": dynamic(() => import("lucide-react/dist/esm/icons/flower-2"), { loading }),
+  flower: dynamic(() => import("lucide-react/dist/esm/icons/flower"), { loading }),
+  focus: dynamic(() => import("lucide-react/dist/esm/icons/focus"), { loading }),
+  "fold-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/fold-horizontal"), { loading }),
+  "fold-vertical": dynamic(() => import("lucide-react/dist/esm/icons/fold-vertical"), { loading }),
+  "folder-archive": dynamic(() => import("lucide-react/dist/esm/icons/folder-archive"), { loading }),
+  "folder-check": dynamic(() => import("lucide-react/dist/esm/icons/folder-check"), { loading }),
+  "folder-clock": dynamic(() => import("lucide-react/dist/esm/icons/folder-clock"), { loading }),
+  "folder-closed": dynamic(() => import("lucide-react/dist/esm/icons/folder-closed"), { loading }),
+  "folder-cog": dynamic(() => import("lucide-react/dist/esm/icons/folder-cog"), { loading }),
+  "folder-dot": dynamic(() => import("lucide-react/dist/esm/icons/folder-dot"), { loading }),
+  "folder-down": dynamic(() => import("lucide-react/dist/esm/icons/folder-down"), { loading }),
+  "folder-git-2": dynamic(() => import("lucide-react/dist/esm/icons/folder-git-2"), { loading }),
+  "folder-git": dynamic(() => import("lucide-react/dist/esm/icons/folder-git"), { loading }),
+  "folder-heart": dynamic(() => import("lucide-react/dist/esm/icons/folder-heart"), { loading }),
+  "folder-input": dynamic(() => import("lucide-react/dist/esm/icons/folder-input"), { loading }),
+  "folder-kanban": dynamic(() => import("lucide-react/dist/esm/icons/folder-kanban"), { loading }),
+  "folder-key": dynamic(() => import("lucide-react/dist/esm/icons/folder-key"), { loading }),
+  "folder-lock": dynamic(() => import("lucide-react/dist/esm/icons/folder-lock"), { loading }),
+  "folder-minus": dynamic(() => import("lucide-react/dist/esm/icons/folder-minus"), { loading }),
+  "folder-open-dot": dynamic(() => import("lucide-react/dist/esm/icons/folder-open-dot"), { loading }),
+  "folder-open": dynamic(() => import("lucide-react/dist/esm/icons/folder-open"), { loading }),
+  "folder-output": dynamic(() => import("lucide-react/dist/esm/icons/folder-output"), { loading }),
+  "folder-pen": dynamic(() => import("lucide-react/dist/esm/icons/folder-pen"), { loading }),
+  "folder-plus": dynamic(() => import("lucide-react/dist/esm/icons/folder-plus"), { loading }),
+  "folder-root": dynamic(() => import("lucide-react/dist/esm/icons/folder-root"), { loading }),
+  "folder-search-2": dynamic(() => import("lucide-react/dist/esm/icons/folder-search-2"), { loading }),
+  "folder-search": dynamic(() => import("lucide-react/dist/esm/icons/folder-search"), { loading }),
+  "folder-symlink": dynamic(() => import("lucide-react/dist/esm/icons/folder-symlink"), { loading }),
+  "folder-sync": dynamic(() => import("lucide-react/dist/esm/icons/folder-sync"), { loading }),
+  "folder-tree": dynamic(() => import("lucide-react/dist/esm/icons/folder-tree"), { loading }),
+  "folder-up": dynamic(() => import("lucide-react/dist/esm/icons/folder-up"), { loading }),
+  "folder-x": dynamic(() => import("lucide-react/dist/esm/icons/folder-x"), { loading }),
+  folder: dynamic(() => import("lucide-react/dist/esm/icons/folder"), { loading }),
+  folders: dynamic(() => import("lucide-react/dist/esm/icons/folders"), { loading }),
+  footprints: dynamic(() => import("lucide-react/dist/esm/icons/footprints"), { loading }),
+  forklift: dynamic(() => import("lucide-react/dist/esm/icons/forklift"), { loading }),
+  forward: dynamic(() => import("lucide-react/dist/esm/icons/forward"), { loading }),
+  frame: dynamic(() => import("lucide-react/dist/esm/icons/frame"), { loading }),
+  framer: dynamic(() => import("lucide-react/dist/esm/icons/framer"), { loading }),
+  frown: dynamic(() => import("lucide-react/dist/esm/icons/frown"), { loading }),
+  fuel: dynamic(() => import("lucide-react/dist/esm/icons/fuel"), { loading }),
+  fullscreen: dynamic(() => import("lucide-react/dist/esm/icons/fullscreen"), { loading }),
+  "gallery-horizontal-end": dynamic(() => import("lucide-react/dist/esm/icons/gallery-horizontal-end"), { loading }),
+  "gallery-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/gallery-horizontal"), { loading }),
+  "gallery-thumbnails": dynamic(() => import("lucide-react/dist/esm/icons/gallery-thumbnails"), { loading }),
+  "gallery-vertical-end": dynamic(() => import("lucide-react/dist/esm/icons/gallery-vertical-end"), { loading }),
+  "gallery-vertical": dynamic(() => import("lucide-react/dist/esm/icons/gallery-vertical"), { loading }),
+  "gamepad-2": dynamic(() => import("lucide-react/dist/esm/icons/gamepad-2"), { loading }),
+  gamepad: dynamic(() => import("lucide-react/dist/esm/icons/gamepad"), { loading }),
+  "gantt-chart": dynamic(() => import("lucide-react/dist/esm/icons/gantt-chart"), { loading }),
+  gauge: dynamic(() => import("lucide-react/dist/esm/icons/gauge"), { loading }),
+  gavel: dynamic(() => import("lucide-react/dist/esm/icons/gavel"), { loading }),
+  gem: dynamic(() => import("lucide-react/dist/esm/icons/gem"), { loading }),
+  ghost: dynamic(() => import("lucide-react/dist/esm/icons/ghost"), { loading }),
+  gift: dynamic(() => import("lucide-react/dist/esm/icons/gift"), { loading }),
+  "git-branch-plus": dynamic(() => import("lucide-react/dist/esm/icons/git-branch-plus"), { loading }),
+  "git-branch": dynamic(() => import("lucide-react/dist/esm/icons/git-branch"), { loading }),
+  "git-commit-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/git-commit-horizontal"), { loading }),
+  "git-commit-vertical": dynamic(() => import("lucide-react/dist/esm/icons/git-commit-vertical"), { loading }),
+  "git-compare-arrows": dynamic(() => import("lucide-react/dist/esm/icons/git-compare-arrows"), { loading }),
+  "git-compare": dynamic(() => import("lucide-react/dist/esm/icons/git-compare"), { loading }),
+  "git-fork": dynamic(() => import("lucide-react/dist/esm/icons/git-fork"), { loading }),
+  "git-graph": dynamic(() => import("lucide-react/dist/esm/icons/git-graph"), { loading }),
+  "git-merge": dynamic(() => import("lucide-react/dist/esm/icons/git-merge"), { loading }),
+  "git-pull-request-arrow": dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request-arrow"), { loading }),
+  "git-pull-request-closed": dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request-closed"), { loading }),
+  "git-pull-request-create-arrow": () => dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request-create-arrow"), { loading }),
+  "git-pull-request-create": dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request-create"), { loading }),
+  "git-pull-request-draft": dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request-draft"), { loading }),
+  "git-pull-request": dynamic(() => import("lucide-react/dist/esm/icons/git-pull-request"), { loading }),
+  github: dynamic(() => import("lucide-react/dist/esm/icons/github"), { loading }),
+  gitlab: dynamic(() => import("lucide-react/dist/esm/icons/gitlab"), { loading }),
+  "glass-water": dynamic(() => import("lucide-react/dist/esm/icons/glass-water"), { loading }),
+  glasses: dynamic(() => import("lucide-react/dist/esm/icons/glasses"), { loading }),
+  "globe-lock": dynamic(() => import("lucide-react/dist/esm/icons/globe-lock"), { loading }),
+  globe: dynamic(() => import("lucide-react/dist/esm/icons/globe"), { loading }),
+  goal: dynamic(() => import("lucide-react/dist/esm/icons/goal"), { loading }),
+  grab: dynamic(() => import("lucide-react/dist/esm/icons/grab"), { loading }),
+  "graduation-cap": dynamic(() => import("lucide-react/dist/esm/icons/graduation-cap"), { loading }),
+  grape: dynamic(() => import("lucide-react/dist/esm/icons/grape"), { loading }),
+  "grid-2x2": dynamic(() => import("lucide-react/dist/esm/icons/grid-2x2"), { loading }),
+  "grid-3x3": dynamic(() => import("lucide-react/dist/esm/icons/grid-3x3"), { loading }),
+  "grip-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/grip-horizontal"), { loading }),
+  "grip-vertical": dynamic(() => import("lucide-react/dist/esm/icons/grip-vertical"), { loading }),
+  grip: dynamic(() => import("lucide-react/dist/esm/icons/grip"), { loading }),
+  group: dynamic(() => import("lucide-react/dist/esm/icons/group"), { loading }),
+  guitar: dynamic(() => import("lucide-react/dist/esm/icons/guitar"), { loading }),
+  ham: dynamic(() => import("lucide-react/dist/esm/icons/ham"), { loading }),
+  hammer: dynamic(() => import("lucide-react/dist/esm/icons/hammer"), { loading }),
+  "hand-coins": dynamic(() => import("lucide-react/dist/esm/icons/hand-coins"), { loading }),
+  "hand-heart": dynamic(() => import("lucide-react/dist/esm/icons/hand-heart"), { loading }),
+  "hand-helping": dynamic(() => import("lucide-react/dist/esm/icons/hand-helping"), { loading }),
+  "hand-metal": dynamic(() => import("lucide-react/dist/esm/icons/hand-metal"), { loading }),
+  "hand-platter": dynamic(() => import("lucide-react/dist/esm/icons/hand-platter"), { loading }),
+  hand: dynamic(() => import("lucide-react/dist/esm/icons/hand"), { loading }),
+  handshake: dynamic(() => import("lucide-react/dist/esm/icons/handshake"), { loading }),
+  "hard-drive-download": dynamic(() => import("lucide-react/dist/esm/icons/hard-drive-download"), { loading }),
+  "hard-drive-upload": dynamic(() => import("lucide-react/dist/esm/icons/hard-drive-upload"), { loading }),
+  "hard-drive": dynamic(() => import("lucide-react/dist/esm/icons/hard-drive"), { loading }),
+  "hard-hat": dynamic(() => import("lucide-react/dist/esm/icons/hard-hat"), { loading }),
+  hash: dynamic(() => import("lucide-react/dist/esm/icons/hash"), { loading }),
+  haze: dynamic(() => import("lucide-react/dist/esm/icons/haze"), { loading }),
+  "hdmi-port": dynamic(() => import("lucide-react/dist/esm/icons/hdmi-port"), { loading }),
+  "heading-1": dynamic(() => import("lucide-react/dist/esm/icons/heading-1"), { loading }),
+  "heading-2": dynamic(() => import("lucide-react/dist/esm/icons/heading-2"), { loading }),
+  "heading-3": dynamic(() => import("lucide-react/dist/esm/icons/heading-3"), { loading }),
+  "heading-4": dynamic(() => import("lucide-react/dist/esm/icons/heading-4"), { loading }),
+  "heading-5": dynamic(() => import("lucide-react/dist/esm/icons/heading-5"), { loading }),
+  "heading-6": dynamic(() => import("lucide-react/dist/esm/icons/heading-6"), { loading }),
+  heading: dynamic(() => import("lucide-react/dist/esm/icons/heading"), { loading }),
+  headphones: dynamic(() => import("lucide-react/dist/esm/icons/headphones"), { loading }),
+  headset: dynamic(() => import("lucide-react/dist/esm/icons/headset"), { loading }),
+  "heart-crack": dynamic(() => import("lucide-react/dist/esm/icons/heart-crack"), { loading }),
+  "heart-handshake": dynamic(() => import("lucide-react/dist/esm/icons/heart-handshake"), { loading }),
+  "heart-off": dynamic(() => import("lucide-react/dist/esm/icons/heart-off"), { loading }),
+  "heart-pulse": dynamic(() => import("lucide-react/dist/esm/icons/heart-pulse"), { loading }),
+  heart: dynamic(() => import("lucide-react/dist/esm/icons/heart"), { loading }),
+  heater: dynamic(() => import("lucide-react/dist/esm/icons/heater"), { loading }),
+  hexagon: dynamic(() => import("lucide-react/dist/esm/icons/hexagon"), { loading }),
+  highlighter: dynamic(() => import("lucide-react/dist/esm/icons/highlighter"), { loading }),
+  history: dynamic(() => import("lucide-react/dist/esm/icons/history"), { loading }),
+  home: dynamic(() => import("lucide-react/dist/esm/icons/home"), { loading }),
+  "hop-off": dynamic(() => import("lucide-react/dist/esm/icons/hop-off"), { loading }),
+  hop: dynamic(() => import("lucide-react/dist/esm/icons/hop"), { loading }),
+  hospital: dynamic(() => import("lucide-react/dist/esm/icons/hospital"), { loading }),
+  hotel: dynamic(() => import("lucide-react/dist/esm/icons/hotel"), { loading }),
+  hourglass: dynamic(() => import("lucide-react/dist/esm/icons/hourglass"), { loading }),
+  "ice-cream-bowl": dynamic(() => import("lucide-react/dist/esm/icons/ice-cream-bowl"), { loading }),
+  "ice-cream-cone": dynamic(() => import("lucide-react/dist/esm/icons/ice-cream-cone"), { loading }),
+  "image-down": dynamic(() => import("lucide-react/dist/esm/icons/image-down"), { loading }),
+  "image-minus": dynamic(() => import("lucide-react/dist/esm/icons/image-minus"), { loading }),
+  "image-off": dynamic(() => import("lucide-react/dist/esm/icons/image-off"), { loading }),
+  "image-plus": dynamic(() => import("lucide-react/dist/esm/icons/image-plus"), { loading }),
+  "image-up": dynamic(() => import("lucide-react/dist/esm/icons/image-up"), { loading }),
+  image: dynamic(() => import("lucide-react/dist/esm/icons/image"), { loading }),
+  images: dynamic(() => import("lucide-react/dist/esm/icons/images"), { loading }),
+  import: dynamic(() => import("lucide-react/dist/esm/icons/import"), { loading }),
+  inbox: dynamic(() => import("lucide-react/dist/esm/icons/inbox"), { loading }),
+  "indent-decrease": dynamic(() => import("lucide-react/dist/esm/icons/indent-decrease"), { loading }),
+  "indent-increase": dynamic(() => import("lucide-react/dist/esm/icons/indent-increase"), { loading }),
+  "indian-rupee": dynamic(() => import("lucide-react/dist/esm/icons/indian-rupee"), { loading }),
+  infinity: dynamic(() => import("lucide-react/dist/esm/icons/infinity"), { loading }),
+  info: dynamic(() => import("lucide-react/dist/esm/icons/info"), { loading }),
+  "inspection-panel": dynamic(() => import("lucide-react/dist/esm/icons/inspection-panel"), { loading }),
+  instagram: dynamic(() => import("lucide-react/dist/esm/icons/instagram"), { loading }),
+  italic: dynamic(() => import("lucide-react/dist/esm/icons/italic"), { loading }),
+  "iteration-ccw": dynamic(() => import("lucide-react/dist/esm/icons/iteration-ccw"), { loading }),
+  "iteration-cw": dynamic(() => import("lucide-react/dist/esm/icons/iteration-cw"), { loading }),
+  "japanese-yen": dynamic(() => import("lucide-react/dist/esm/icons/japanese-yen"), { loading }),
+  joystick: dynamic(() => import("lucide-react/dist/esm/icons/joystick"), { loading }),
+  kanban: dynamic(() => import("lucide-react/dist/esm/icons/kanban"), { loading }),
+  "key-round": dynamic(() => import("lucide-react/dist/esm/icons/key-round"), { loading }),
+  "key-square": dynamic(() => import("lucide-react/dist/esm/icons/key-square"), { loading }),
+  key: dynamic(() => import("lucide-react/dist/esm/icons/key"), { loading }),
+  "keyboard-music": dynamic(() => import("lucide-react/dist/esm/icons/keyboard-music"), { loading }),
+  keyboard: dynamic(() => import("lucide-react/dist/esm/icons/keyboard"), { loading }),
+  "lamp-ceiling": dynamic(() => import("lucide-react/dist/esm/icons/lamp-ceiling"), { loading }),
+  "lamp-desk": dynamic(() => import("lucide-react/dist/esm/icons/lamp-desk"), { loading }),
+  "lamp-floor": dynamic(() => import("lucide-react/dist/esm/icons/lamp-floor"), { loading }),
+  "lamp-wall-down": dynamic(() => import("lucide-react/dist/esm/icons/lamp-wall-down"), { loading }),
+  "lamp-wall-up": dynamic(() => import("lucide-react/dist/esm/icons/lamp-wall-up"), { loading }),
+  lamp: dynamic(() => import("lucide-react/dist/esm/icons/lamp"), { loading }),
+  "land-plot": dynamic(() => import("lucide-react/dist/esm/icons/land-plot"), { loading }),
+  landmark: dynamic(() => import("lucide-react/dist/esm/icons/landmark"), { loading }),
+  languages: dynamic(() => import("lucide-react/dist/esm/icons/languages"), { loading }),
+  "laptop-minimal": dynamic(() => import("lucide-react/dist/esm/icons/laptop-minimal"), { loading }),
+  laptop: dynamic(() => import("lucide-react/dist/esm/icons/laptop"), { loading }),
+  "lasso-select": dynamic(() => import("lucide-react/dist/esm/icons/lasso-select"), { loading }),
+  lasso: dynamic(() => import("lucide-react/dist/esm/icons/lasso"), { loading }),
+  laugh: dynamic(() => import("lucide-react/dist/esm/icons/laugh"), { loading }),
+  "layers-2": dynamic(() => import("lucide-react/dist/esm/icons/layers-2"), { loading }),
+  "layers-3": dynamic(() => import("lucide-react/dist/esm/icons/layers-3"), { loading }),
+  layers: dynamic(() => import("lucide-react/dist/esm/icons/layers"), { loading }),
+  "layout-dashboard": dynamic(() => import("lucide-react/dist/esm/icons/layout-dashboard"), { loading }),
+  "layout-grid": dynamic(() => import("lucide-react/dist/esm/icons/layout-grid"), { loading }),
+  "layout-list": dynamic(() => import("lucide-react/dist/esm/icons/layout-list"), { loading }),
+  "layout-panel-left": dynamic(() => import("lucide-react/dist/esm/icons/layout-panel-left"), { loading }),
+  "layout-panel-top": dynamic(() => import("lucide-react/dist/esm/icons/layout-panel-top"), { loading }),
+  "layout-template": dynamic(() => import("lucide-react/dist/esm/icons/layout-template"), { loading }),
+  leaf: dynamic(() => import("lucide-react/dist/esm/icons/leaf"), { loading }),
+  "leafy-green": dynamic(() => import("lucide-react/dist/esm/icons/leafy-green"), { loading }),
+  "library-big": dynamic(() => import("lucide-react/dist/esm/icons/library-big"), { loading }),
+  library: dynamic(() => import("lucide-react/dist/esm/icons/library"), { loading }),
+  "life-buoy": dynamic(() => import("lucide-react/dist/esm/icons/life-buoy"), { loading }),
+  ligature: dynamic(() => import("lucide-react/dist/esm/icons/ligature"), { loading }),
+  "lightbulb-off": dynamic(() => import("lucide-react/dist/esm/icons/lightbulb-off"), { loading }),
+  lightbulb: dynamic(() => import("lucide-react/dist/esm/icons/lightbulb"), { loading }),
+  "line-chart": dynamic(() => import("lucide-react/dist/esm/icons/line-chart"), { loading }),
+  "link-2-off": dynamic(() => import("lucide-react/dist/esm/icons/link-2-off"), { loading }),
+  "link-2": dynamic(() => import("lucide-react/dist/esm/icons/link-2"), { loading }),
+  link: dynamic(() => import("lucide-react/dist/esm/icons/link"), { loading }),
+  linkedin: dynamic(() => import("lucide-react/dist/esm/icons/linkedin"), { loading }),
+  "list-checks": dynamic(() => import("lucide-react/dist/esm/icons/list-checks"), { loading }),
+  "list-collapse": dynamic(() => import("lucide-react/dist/esm/icons/list-collapse"), { loading }),
+  "list-end": dynamic(() => import("lucide-react/dist/esm/icons/list-end"), { loading }),
+  "list-filter": dynamic(() => import("lucide-react/dist/esm/icons/list-filter"), { loading }),
+  "list-minus": dynamic(() => import("lucide-react/dist/esm/icons/list-minus"), { loading }),
+  "list-music": dynamic(() => import("lucide-react/dist/esm/icons/list-music"), { loading }),
+  "list-ordered": dynamic(() => import("lucide-react/dist/esm/icons/list-ordered"), { loading }),
+  "list-plus": dynamic(() => import("lucide-react/dist/esm/icons/list-plus"), { loading }),
+  "list-restart": dynamic(() => import("lucide-react/dist/esm/icons/list-restart"), { loading }),
+  "list-start": dynamic(() => import("lucide-react/dist/esm/icons/list-start"), { loading }),
+  "list-todo": dynamic(() => import("lucide-react/dist/esm/icons/list-todo"), { loading }),
+  "list-tree": dynamic(() => import("lucide-react/dist/esm/icons/list-tree"), { loading }),
+  "list-video": dynamic(() => import("lucide-react/dist/esm/icons/list-video"), { loading }),
+  "list-x": dynamic(() => import("lucide-react/dist/esm/icons/list-x"), { loading }),
+  list: dynamic(() => import("lucide-react/dist/esm/icons/list"), { loading }),
+  "loader-circle": dynamic(() => import("lucide-react/dist/esm/icons/loader-circle"), { loading }),
+  loader: dynamic(() => import("lucide-react/dist/esm/icons/loader"), { loading }),
+  "locate-fixed": dynamic(() => import("lucide-react/dist/esm/icons/locate-fixed"), { loading }),
+  "locate-off": dynamic(() => import("lucide-react/dist/esm/icons/locate-off"), { loading }),
+  locate: dynamic(() => import("lucide-react/dist/esm/icons/locate"), { loading }),
+  "lock-keyhole-open": dynamic(() => import("lucide-react/dist/esm/icons/lock-keyhole-open"), { loading }),
+  "lock-keyhole": dynamic(() => import("lucide-react/dist/esm/icons/lock-keyhole"), { loading }),
+  "lock-open": dynamic(() => import("lucide-react/dist/esm/icons/lock-open"), { loading }),
+  lock: dynamic(() => import("lucide-react/dist/esm/icons/lock"), { loading }),
+  "log-in": dynamic(() => import("lucide-react/dist/esm/icons/log-in"), { loading }),
+  "log-out": dynamic(() => import("lucide-react/dist/esm/icons/log-out"), { loading }),
+  lollipop: dynamic(() => import("lucide-react/dist/esm/icons/lollipop"), { loading }),
+  luggage: dynamic(() => import("lucide-react/dist/esm/icons/luggage"), { loading }),
+  magnet: dynamic(() => import("lucide-react/dist/esm/icons/magnet"), { loading }),
+  "mail-check": dynamic(() => import("lucide-react/dist/esm/icons/mail-check"), { loading }),
+  "mail-minus": dynamic(() => import("lucide-react/dist/esm/icons/mail-minus"), { loading }),
+  "mail-open": dynamic(() => import("lucide-react/dist/esm/icons/mail-open"), { loading }),
+  "mail-plus": dynamic(() => import("lucide-react/dist/esm/icons/mail-plus"), { loading }),
+  "mail-question": dynamic(() => import("lucide-react/dist/esm/icons/mail-question"), { loading }),
+  "mail-search": dynamic(() => import("lucide-react/dist/esm/icons/mail-search"), { loading }),
+  "mail-warning": dynamic(() => import("lucide-react/dist/esm/icons/mail-warning"), { loading }),
+  "mail-x": dynamic(() => import("lucide-react/dist/esm/icons/mail-x"), { loading }),
+  mail: dynamic(() => import("lucide-react/dist/esm/icons/mail"), { loading }),
+  mailbox: dynamic(() => import("lucide-react/dist/esm/icons/mailbox"), { loading }),
+  mails: dynamic(() => import("lucide-react/dist/esm/icons/mails"), { loading }),
+  "map-pin-off": dynamic(() => import("lucide-react/dist/esm/icons/map-pin-off"), { loading }),
+  "map-pin": dynamic(() => import("lucide-react/dist/esm/icons/map-pin"), { loading }),
+  "map-pinned": dynamic(() => import("lucide-react/dist/esm/icons/map-pinned"), { loading }),
+  map: dynamic(() => import("lucide-react/dist/esm/icons/map"), { loading }),
+  martini: dynamic(() => import("lucide-react/dist/esm/icons/martini"), { loading }),
+  "maximize-2": dynamic(() => import("lucide-react/dist/esm/icons/maximize-2"), { loading }),
+  maximize: dynamic(() => import("lucide-react/dist/esm/icons/maximize"), { loading }),
+  medal: dynamic(() => import("lucide-react/dist/esm/icons/medal"), { loading }),
+  "megaphone-off": dynamic(() => import("lucide-react/dist/esm/icons/megaphone-off"), { loading }),
+  megaphone: dynamic(() => import("lucide-react/dist/esm/icons/megaphone"), { loading }),
+  meh: dynamic(() => import("lucide-react/dist/esm/icons/meh"), { loading }),
+  "memory-stick": dynamic(() => import("lucide-react/dist/esm/icons/memory-stick"), { loading }),
+  menu: dynamic(() => import("lucide-react/dist/esm/icons/menu"), { loading }),
+  merge: dynamic(() => import("lucide-react/dist/esm/icons/merge"), { loading }),
+  "message-circle-code": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-code"), { loading }),
+  "message-circle-dashed": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-dashed"), { loading }),
+  "message-circle-heart": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-heart"), { loading }),
+  "message-circle-more": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-more"), { loading }),
+  "message-circle-off": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-off"), { loading }),
+  "message-circle-plus": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-plus"), { loading }),
+  "message-circle-question": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-question"), { loading }),
+  "message-circle-reply": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-reply"), { loading }),
+  "message-circle-warning": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-warning"), { loading }),
+  "message-circle-x": dynamic(() => import("lucide-react/dist/esm/icons/message-circle-x"), { loading }),
+  "message-circle": dynamic(() => import("lucide-react/dist/esm/icons/message-circle"), { loading }),
+  "message-square-code": dynamic(() => import("lucide-react/dist/esm/icons/message-square-code"), { loading }),
+  "message-square-dashed": dynamic(() => import("lucide-react/dist/esm/icons/message-square-dashed"), { loading }),
+  "message-square-diff": dynamic(() => import("lucide-react/dist/esm/icons/message-square-diff"), { loading }),
+  "message-square-dot": dynamic(() => import("lucide-react/dist/esm/icons/message-square-dot"), { loading }),
+  "message-square-heart": dynamic(() => import("lucide-react/dist/esm/icons/message-square-heart"), { loading }),
+  "message-square-more": dynamic(() => import("lucide-react/dist/esm/icons/message-square-more"), { loading }),
+  "message-square-off": dynamic(() => import("lucide-react/dist/esm/icons/message-square-off"), { loading }),
+  "message-square-plus": dynamic(() => import("lucide-react/dist/esm/icons/message-square-plus"), { loading }),
+  "message-square-quote": dynamic(() => import("lucide-react/dist/esm/icons/message-square-quote"), { loading }),
+  "message-square-reply": dynamic(() => import("lucide-react/dist/esm/icons/message-square-reply"), { loading }),
+  "message-square-share": dynamic(() => import("lucide-react/dist/esm/icons/message-square-share"), { loading }),
+  "message-square-text": dynamic(() => import("lucide-react/dist/esm/icons/message-square-text"), { loading }),
+  "message-square-warning": dynamic(() => import("lucide-react/dist/esm/icons/message-square-warning"), { loading }),
+  "message-square-x": dynamic(() => import("lucide-react/dist/esm/icons/message-square-x"), { loading }),
+  "message-square": dynamic(() => import("lucide-react/dist/esm/icons/message-square"), { loading }),
+  "messages-square": dynamic(() => import("lucide-react/dist/esm/icons/messages-square"), { loading }),
+  "mic-off": dynamic(() => import("lucide-react/dist/esm/icons/mic-off"), { loading }),
+  "mic-vocal": dynamic(() => import("lucide-react/dist/esm/icons/mic-vocal"), { loading }),
+  mic: dynamic(() => import("lucide-react/dist/esm/icons/mic"), { loading }),
+  microscope: dynamic(() => import("lucide-react/dist/esm/icons/microscope"), { loading }),
+  microwave: dynamic(() => import("lucide-react/dist/esm/icons/microwave"), { loading }),
+  milestone: dynamic(() => import("lucide-react/dist/esm/icons/milestone"), { loading }),
+  "milk-off": dynamic(() => import("lucide-react/dist/esm/icons/milk-off"), { loading }),
+  milk: dynamic(() => import("lucide-react/dist/esm/icons/milk"), { loading }),
+  "minimize-2": dynamic(() => import("lucide-react/dist/esm/icons/minimize-2"), { loading }),
+  minimize: dynamic(() => import("lucide-react/dist/esm/icons/minimize"), { loading }),
+  minus: dynamic(() => import("lucide-react/dist/esm/icons/minus"), { loading }),
+  "monitor-check": dynamic(() => import("lucide-react/dist/esm/icons/monitor-check"), { loading }),
+  "monitor-dot": dynamic(() => import("lucide-react/dist/esm/icons/monitor-dot"), { loading }),
+  "monitor-down": dynamic(() => import("lucide-react/dist/esm/icons/monitor-down"), { loading }),
+  "monitor-off": dynamic(() => import("lucide-react/dist/esm/icons/monitor-off"), { loading }),
+  "monitor-pause": dynamic(() => import("lucide-react/dist/esm/icons/monitor-pause"), { loading }),
+  "monitor-play": dynamic(() => import("lucide-react/dist/esm/icons/monitor-play"), { loading }),
+  "monitor-smartphone": dynamic(() => import("lucide-react/dist/esm/icons/monitor-smartphone"), { loading }),
+  "monitor-speaker": dynamic(() => import("lucide-react/dist/esm/icons/monitor-speaker"), { loading }),
+  "monitor-stop": dynamic(() => import("lucide-react/dist/esm/icons/monitor-stop"), { loading }),
+  "monitor-up": dynamic(() => import("lucide-react/dist/esm/icons/monitor-up"), { loading }),
+  "monitor-x": dynamic(() => import("lucide-react/dist/esm/icons/monitor-x"), { loading }),
+  monitor: dynamic(() => import("lucide-react/dist/esm/icons/monitor"), { loading }),
+  "moon-star": dynamic(() => import("lucide-react/dist/esm/icons/moon-star"), { loading }),
+  moon: dynamic(() => import("lucide-react/dist/esm/icons/moon"), { loading }),
+  "mountain-snow": dynamic(() => import("lucide-react/dist/esm/icons/mountain-snow"), { loading }),
+  mountain: dynamic(() => import("lucide-react/dist/esm/icons/mountain"), { loading }),
+  "mouse-off": dynamic(() => import("lucide-react/dist/esm/icons/mouse-off"), { loading }),
+  "mouse-pointer-2": dynamic(() => import("lucide-react/dist/esm/icons/mouse-pointer-2"), { loading }),
+  "mouse-pointer-click": dynamic(() => import("lucide-react/dist/esm/icons/mouse-pointer-click"), { loading }),
+  "mouse-pointer": dynamic(() => import("lucide-react/dist/esm/icons/mouse-pointer"), { loading }),
+  mouse: dynamic(() => import("lucide-react/dist/esm/icons/mouse"), { loading }),
+  "move-3d": dynamic(() => import("lucide-react/dist/esm/icons/move-3d"), { loading }),
+  "move-diagonal-2": dynamic(() => import("lucide-react/dist/esm/icons/move-diagonal-2"), { loading }),
+  "move-diagonal": dynamic(() => import("lucide-react/dist/esm/icons/move-diagonal"), { loading }),
+  "move-down-left": dynamic(() => import("lucide-react/dist/esm/icons/move-down-left"), { loading }),
+  "move-down-right": dynamic(() => import("lucide-react/dist/esm/icons/move-down-right"), { loading }),
+  "move-down": dynamic(() => import("lucide-react/dist/esm/icons/move-down"), { loading }),
+  "move-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/move-horizontal"), { loading }),
+  "move-left": dynamic(() => import("lucide-react/dist/esm/icons/move-left"), { loading }),
+  "move-right": dynamic(() => import("lucide-react/dist/esm/icons/move-right"), { loading }),
+  "move-up-left": dynamic(() => import("lucide-react/dist/esm/icons/move-up-left"), { loading }),
+  "move-up-right": dynamic(() => import("lucide-react/dist/esm/icons/move-up-right"), { loading }),
+  "move-up": dynamic(() => import("lucide-react/dist/esm/icons/move-up"), { loading }),
+  "move-vertical": dynamic(() => import("lucide-react/dist/esm/icons/move-vertical"), { loading }),
+  move: dynamic(() => import("lucide-react/dist/esm/icons/move"), { loading }),
+  "music-2": dynamic(() => import("lucide-react/dist/esm/icons/music-2"), { loading }),
+  "music-3": dynamic(() => import("lucide-react/dist/esm/icons/music-3"), { loading }),
+  "music-4": dynamic(() => import("lucide-react/dist/esm/icons/music-4"), { loading }),
+  music: dynamic(() => import("lucide-react/dist/esm/icons/music"), { loading }),
+  "navigation-2-off": dynamic(() => import("lucide-react/dist/esm/icons/navigation-2-off"), { loading }),
+  "navigation-2": dynamic(() => import("lucide-react/dist/esm/icons/navigation-2"), { loading }),
+  "navigation-off": dynamic(() => import("lucide-react/dist/esm/icons/navigation-off"), { loading }),
+  navigation: dynamic(() => import("lucide-react/dist/esm/icons/navigation"), { loading }),
+  network: dynamic(() => import("lucide-react/dist/esm/icons/network"), { loading }),
+  newspaper: dynamic(() => import("lucide-react/dist/esm/icons/newspaper"), { loading }),
+  nfc: dynamic(() => import("lucide-react/dist/esm/icons/nfc"), { loading }),
+  "notebook-pen": dynamic(() => import("lucide-react/dist/esm/icons/notebook-pen"), { loading }),
+  "notebook-tabs": dynamic(() => import("lucide-react/dist/esm/icons/notebook-tabs"), { loading }),
+  "notebook-text": dynamic(() => import("lucide-react/dist/esm/icons/notebook-text"), { loading }),
+  notebook: dynamic(() => import("lucide-react/dist/esm/icons/notebook"), { loading }),
+  "notepad-text-dashed": dynamic(() => import("lucide-react/dist/esm/icons/notepad-text-dashed"), { loading }),
+  "notepad-text": dynamic(() => import("lucide-react/dist/esm/icons/notepad-text"), { loading }),
+  "nut-off": dynamic(() => import("lucide-react/dist/esm/icons/nut-off"), { loading }),
+  nut: dynamic(() => import("lucide-react/dist/esm/icons/nut"), { loading }),
+  "octagon-alert": dynamic(() => import("lucide-react/dist/esm/icons/octagon-alert"), { loading }),
+  "octagon-pause": dynamic(() => import("lucide-react/dist/esm/icons/octagon-pause"), { loading }),
+  "octagon-x": dynamic(() => import("lucide-react/dist/esm/icons/octagon-x"), { loading }),
+  octagon: dynamic(() => import("lucide-react/dist/esm/icons/octagon"), { loading }),
+  option: dynamic(() => import("lucide-react/dist/esm/icons/option"), { loading }),
+  orbit: dynamic(() => import("lucide-react/dist/esm/icons/orbit"), { loading }),
+  "package-2": dynamic(() => import("lucide-react/dist/esm/icons/package-2"), { loading }),
+  "package-check": dynamic(() => import("lucide-react/dist/esm/icons/package-check"), { loading }),
+  "package-minus": dynamic(() => import("lucide-react/dist/esm/icons/package-minus"), { loading }),
+  "package-open": dynamic(() => import("lucide-react/dist/esm/icons/package-open"), { loading }),
+  "package-plus": dynamic(() => import("lucide-react/dist/esm/icons/package-plus"), { loading }),
+  "package-search": dynamic(() => import("lucide-react/dist/esm/icons/package-search"), { loading }),
+  "package-x": dynamic(() => import("lucide-react/dist/esm/icons/package-x"), { loading }),
+  package: dynamic(() => import("lucide-react/dist/esm/icons/package"), { loading }),
+  "paint-bucket": dynamic(() => import("lucide-react/dist/esm/icons/paint-bucket"), { loading }),
+  "paint-roller": dynamic(() => import("lucide-react/dist/esm/icons/paint-roller"), { loading }),
+  "paintbrush-2": dynamic(() => import("lucide-react/dist/esm/icons/paintbrush-2"), { loading }),
+  paintbrush: dynamic(() => import("lucide-react/dist/esm/icons/paintbrush"), { loading }),
+  palette: dynamic(() => import("lucide-react/dist/esm/icons/palette"), { loading }),
+  "panel-bottom-close": dynamic(() => import("lucide-react/dist/esm/icons/panel-bottom-close"), { loading }),
+  "panel-bottom-dashed": dynamic(() => import("lucide-react/dist/esm/icons/panel-bottom-dashed"), { loading }),
+  "panel-bottom-open": dynamic(() => import("lucide-react/dist/esm/icons/panel-bottom-open"), { loading }),
+  "panel-bottom": dynamic(() => import("lucide-react/dist/esm/icons/panel-bottom"), { loading }),
+  "panel-left-close": dynamic(() => import("lucide-react/dist/esm/icons/panel-left-close"), { loading }),
+  "panel-left-dashed": dynamic(() => import("lucide-react/dist/esm/icons/panel-left-dashed"), { loading }),
+  "panel-left-open": dynamic(() => import("lucide-react/dist/esm/icons/panel-left-open"), { loading }),
+  "panel-left": dynamic(() => import("lucide-react/dist/esm/icons/panel-left"), { loading }),
+  "panel-right-close": dynamic(() => import("lucide-react/dist/esm/icons/panel-right-close"), { loading }),
+  "panel-right-dashed": dynamic(() => import("lucide-react/dist/esm/icons/panel-right-dashed"), { loading }),
+  "panel-right-open": dynamic(() => import("lucide-react/dist/esm/icons/panel-right-open"), { loading }),
+  "panel-right": dynamic(() => import("lucide-react/dist/esm/icons/panel-right"), { loading }),
+  "panel-top-close": dynamic(() => import("lucide-react/dist/esm/icons/panel-top-close"), { loading }),
+  "panel-top-dashed": dynamic(() => import("lucide-react/dist/esm/icons/panel-top-dashed"), { loading }),
+  "panel-top-open": dynamic(() => import("lucide-react/dist/esm/icons/panel-top-open"), { loading }),
+  "panel-top": dynamic(() => import("lucide-react/dist/esm/icons/panel-top"), { loading }),
+  "panels-left-bottom": dynamic(() => import("lucide-react/dist/esm/icons/panels-left-bottom"), { loading }),
+  "panels-right-bottom": dynamic(() => import("lucide-react/dist/esm/icons/panels-right-bottom"), { loading }),
+  "panels-top-left": dynamic(() => import("lucide-react/dist/esm/icons/panels-top-left"), { loading }),
+  paperclip: dynamic(() => import("lucide-react/dist/esm/icons/paperclip"), { loading }),
+  parentheses: dynamic(() => import("lucide-react/dist/esm/icons/parentheses"), { loading }),
+  "parking-meter": dynamic(() => import("lucide-react/dist/esm/icons/parking-meter"), { loading }),
+  "party-popper": dynamic(() => import("lucide-react/dist/esm/icons/party-popper"), { loading }),
+  pause: dynamic(() => import("lucide-react/dist/esm/icons/pause"), { loading }),
+  "paw-print": dynamic(() => import("lucide-react/dist/esm/icons/paw-print"), { loading }),
+  "pc-case": dynamic(() => import("lucide-react/dist/esm/icons/pc-case"), { loading }),
+  "pen-line": dynamic(() => import("lucide-react/dist/esm/icons/pen-line"), { loading }),
+  "pen-tool": dynamic(() => import("lucide-react/dist/esm/icons/pen-tool"), { loading }),
+  pen: dynamic(() => import("lucide-react/dist/esm/icons/pen"), { loading }),
+  "pencil-line": dynamic(() => import("lucide-react/dist/esm/icons/pencil-line"), { loading }),
+  "pencil-ruler": dynamic(() => import("lucide-react/dist/esm/icons/pencil-ruler"), { loading }),
+  pencil: dynamic(() => import("lucide-react/dist/esm/icons/pencil"), { loading }),
+  pentagon: dynamic(() => import("lucide-react/dist/esm/icons/pentagon"), { loading }),
+  percent: dynamic(() => import("lucide-react/dist/esm/icons/percent"), { loading }),
+  "person-standing": dynamic(() => import("lucide-react/dist/esm/icons/person-standing"), { loading }),
+  "phone-call": dynamic(() => import("lucide-react/dist/esm/icons/phone-call"), { loading }),
+  "phone-forwarded": dynamic(() => import("lucide-react/dist/esm/icons/phone-forwarded"), { loading }),
+  "phone-incoming": dynamic(() => import("lucide-react/dist/esm/icons/phone-incoming"), { loading }),
+  "phone-missed": dynamic(() => import("lucide-react/dist/esm/icons/phone-missed"), { loading }),
+  "phone-off": dynamic(() => import("lucide-react/dist/esm/icons/phone-off"), { loading }),
+  "phone-outgoing": dynamic(() => import("lucide-react/dist/esm/icons/phone-outgoing"), { loading }),
+  phone: dynamic(() => import("lucide-react/dist/esm/icons/phone"), { loading }),
+  pi: dynamic(() => import("lucide-react/dist/esm/icons/pi"), { loading }),
+  piano: dynamic(() => import("lucide-react/dist/esm/icons/piano"), { loading }),
+  pickaxe: dynamic(() => import("lucide-react/dist/esm/icons/pickaxe"), { loading }),
+  "picture-in-picture-2": dynamic(() => import("lucide-react/dist/esm/icons/picture-in-picture-2"), { loading }),
+  "picture-in-picture": dynamic(() => import("lucide-react/dist/esm/icons/picture-in-picture"), { loading }),
+  "pie-chart": dynamic(() => import("lucide-react/dist/esm/icons/pie-chart"), { loading }),
+  "piggy-bank": dynamic(() => import("lucide-react/dist/esm/icons/piggy-bank"), { loading }),
+  pilcrow: dynamic(() => import("lucide-react/dist/esm/icons/pilcrow"), { loading }),
+  pill: dynamic(() => import("lucide-react/dist/esm/icons/pill"), { loading }),
+  "pin-off": dynamic(() => import("lucide-react/dist/esm/icons/pin-off"), { loading }),
+  pin: dynamic(() => import("lucide-react/dist/esm/icons/pin"), { loading }),
+  pipette: dynamic(() => import("lucide-react/dist/esm/icons/pipette"), { loading }),
+  pizza: dynamic(() => import("lucide-react/dist/esm/icons/pizza"), { loading }),
+  "plane-landing": dynamic(() => import("lucide-react/dist/esm/icons/plane-landing"), { loading }),
+  "plane-takeoff": dynamic(() => import("lucide-react/dist/esm/icons/plane-takeoff"), { loading }),
+  plane: dynamic(() => import("lucide-react/dist/esm/icons/plane"), { loading }),
+  play: dynamic(() => import("lucide-react/dist/esm/icons/play"), { loading }),
+  "plug-2": dynamic(() => import("lucide-react/dist/esm/icons/plug-2"), { loading }),
+  "plug-zap-2": dynamic(() => import("lucide-react/dist/esm/icons/plug-zap-2"), { loading }),
+  "plug-zap": dynamic(() => import("lucide-react/dist/esm/icons/plug-zap"), { loading }),
+  plug: dynamic(() => import("lucide-react/dist/esm/icons/plug"), { loading }),
+  plus: dynamic(() => import("lucide-react/dist/esm/icons/plus"), { loading }),
+  "pocket-knife": dynamic(() => import("lucide-react/dist/esm/icons/pocket-knife"), { loading }),
+  pocket: dynamic(() => import("lucide-react/dist/esm/icons/pocket"), { loading }),
+  podcast: dynamic(() => import("lucide-react/dist/esm/icons/podcast"), { loading }),
+  "pointer-off": dynamic(() => import("lucide-react/dist/esm/icons/pointer-off"), { loading }),
+  pointer: dynamic(() => import("lucide-react/dist/esm/icons/pointer"), { loading }),
+  popcorn: dynamic(() => import("lucide-react/dist/esm/icons/popcorn"), { loading }),
+  popsicle: dynamic(() => import("lucide-react/dist/esm/icons/popsicle"), { loading }),
+  "pound-sterling": dynamic(() => import("lucide-react/dist/esm/icons/pound-sterling"), { loading }),
+  "power-off": dynamic(() => import("lucide-react/dist/esm/icons/power-off"), { loading }),
+  power: dynamic(() => import("lucide-react/dist/esm/icons/power"), { loading }),
+  presentation: dynamic(() => import("lucide-react/dist/esm/icons/presentation"), { loading }),
+  printer: dynamic(() => import("lucide-react/dist/esm/icons/printer"), { loading }),
+  projector: dynamic(() => import("lucide-react/dist/esm/icons/projector"), { loading }),
+  proportions: dynamic(() => import("lucide-react/dist/esm/icons/proportions"), { loading }),
+  puzzle: dynamic(() => import("lucide-react/dist/esm/icons/puzzle"), { loading }),
+  pyramid: dynamic(() => import("lucide-react/dist/esm/icons/pyramid"), { loading }),
+  "qr-code": dynamic(() => import("lucide-react/dist/esm/icons/qr-code"), { loading }),
+  quote: dynamic(() => import("lucide-react/dist/esm/icons/quote"), { loading }),
+  rabbit: dynamic(() => import("lucide-react/dist/esm/icons/rabbit"), { loading }),
+  radar: dynamic(() => import("lucide-react/dist/esm/icons/radar"), { loading }),
+  radiation: dynamic(() => import("lucide-react/dist/esm/icons/radiation"), { loading }),
+  radical: dynamic(() => import("lucide-react/dist/esm/icons/radical"), { loading }),
+  "radio-receiver": dynamic(() => import("lucide-react/dist/esm/icons/radio-receiver"), { loading }),
+  "radio-tower": dynamic(() => import("lucide-react/dist/esm/icons/radio-tower"), { loading }),
+  radio: dynamic(() => import("lucide-react/dist/esm/icons/radio"), { loading }),
+  radius: dynamic(() => import("lucide-react/dist/esm/icons/radius"), { loading }),
+  "rail-symbol": dynamic(() => import("lucide-react/dist/esm/icons/rail-symbol"), { loading }),
+  rainbow: dynamic(() => import("lucide-react/dist/esm/icons/rainbow"), { loading }),
+  rat: dynamic(() => import("lucide-react/dist/esm/icons/rat"), { loading }),
+  ratio: dynamic(() => import("lucide-react/dist/esm/icons/ratio"), { loading }),
+  "receipt-cent": dynamic(() => import("lucide-react/dist/esm/icons/receipt-cent"), { loading }),
+  "receipt-euro": dynamic(() => import("lucide-react/dist/esm/icons/receipt-euro"), { loading }),
+  "receipt-indian-rupee": dynamic(() => import("lucide-react/dist/esm/icons/receipt-indian-rupee"), { loading }),
+  "receipt-japanese-yen": dynamic(() => import("lucide-react/dist/esm/icons/receipt-japanese-yen"), { loading }),
+  "receipt-pound-sterling": dynamic(() => import("lucide-react/dist/esm/icons/receipt-pound-sterling"), { loading }),
+  "receipt-russian-ruble": dynamic(() => import("lucide-react/dist/esm/icons/receipt-russian-ruble"), { loading }),
+  "receipt-swiss-franc": dynamic(() => import("lucide-react/dist/esm/icons/receipt-swiss-franc"), { loading }),
+  "receipt-text": dynamic(() => import("lucide-react/dist/esm/icons/receipt-text"), { loading }),
+  receipt: dynamic(() => import("lucide-react/dist/esm/icons/receipt"), { loading }),
+  "rectangle-ellipsis": dynamic(() => import("lucide-react/dist/esm/icons/rectangle-ellipsis"), { loading }),
+  "rectangle-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/rectangle-horizontal"), { loading }),
+  "rectangle-vertical": dynamic(() => import("lucide-react/dist/esm/icons/rectangle-vertical"), { loading }),
+  recycle: dynamic(() => import("lucide-react/dist/esm/icons/recycle"), { loading }),
+  "redo-2": dynamic(() => import("lucide-react/dist/esm/icons/redo-2"), { loading }),
+  "redo-dot": dynamic(() => import("lucide-react/dist/esm/icons/redo-dot"), { loading }),
+  redo: dynamic(() => import("lucide-react/dist/esm/icons/redo"), { loading }),
+  "refresh-ccw-dot": dynamic(() => import("lucide-react/dist/esm/icons/refresh-ccw-dot"), { loading }),
+  "refresh-ccw": dynamic(() => import("lucide-react/dist/esm/icons/refresh-ccw"), { loading }),
+  "refresh-cw-off": dynamic(() => import("lucide-react/dist/esm/icons/refresh-cw-off"), { loading }),
+  "refresh-cw": dynamic(() => import("lucide-react/dist/esm/icons/refresh-cw"), { loading }),
+  refrigerator: dynamic(() => import("lucide-react/dist/esm/icons/refrigerator"), { loading }),
+  regex: dynamic(() => import("lucide-react/dist/esm/icons/regex"), { loading }),
+  "remove-formatting": dynamic(() => import("lucide-react/dist/esm/icons/remove-formatting"), { loading }),
+  "repeat-1": dynamic(() => import("lucide-react/dist/esm/icons/repeat-1"), { loading }),
+  "repeat-2": dynamic(() => import("lucide-react/dist/esm/icons/repeat-2"), { loading }),
+  repeat: dynamic(() => import("lucide-react/dist/esm/icons/repeat"), { loading }),
+  "replace-all": dynamic(() => import("lucide-react/dist/esm/icons/replace-all"), { loading }),
+  replace: dynamic(() => import("lucide-react/dist/esm/icons/replace"), { loading }),
+  "reply-all": dynamic(() => import("lucide-react/dist/esm/icons/reply-all"), { loading }),
+  reply: dynamic(() => import("lucide-react/dist/esm/icons/reply"), { loading }),
+  rewind: dynamic(() => import("lucide-react/dist/esm/icons/rewind"), { loading }),
+  ribbon: dynamic(() => import("lucide-react/dist/esm/icons/ribbon"), { loading }),
+  rocket: dynamic(() => import("lucide-react/dist/esm/icons/rocket"), { loading }),
+  "rocking-chair": dynamic(() => import("lucide-react/dist/esm/icons/rocking-chair"), { loading }),
+  "roller-coaster": dynamic(() => import("lucide-react/dist/esm/icons/roller-coaster"), { loading }),
+  "rotate-3d": dynamic(() => import("lucide-react/dist/esm/icons/rotate-3d"), { loading }),
+  "rotate-ccw-square": dynamic(() => import("lucide-react/dist/esm/icons/rotate-ccw-square"), { loading }),
+  "rotate-ccw": dynamic(() => import("lucide-react/dist/esm/icons/rotate-ccw"), { loading }),
+  "rotate-cw-square": dynamic(() => import("lucide-react/dist/esm/icons/rotate-cw-square"), { loading }),
+  "rotate-cw": dynamic(() => import("lucide-react/dist/esm/icons/rotate-cw"), { loading }),
+  "route-off": dynamic(() => import("lucide-react/dist/esm/icons/route-off"), { loading }),
+  route: dynamic(() => import("lucide-react/dist/esm/icons/route"), { loading }),
+  router: dynamic(() => import("lucide-react/dist/esm/icons/router"), { loading }),
+  "rows-2": dynamic(() => import("lucide-react/dist/esm/icons/rows-2"), { loading }),
+  "rows-3": dynamic(() => import("lucide-react/dist/esm/icons/rows-3"), { loading }),
+  "rows-4": dynamic(() => import("lucide-react/dist/esm/icons/rows-4"), { loading }),
+  rss: dynamic(() => import("lucide-react/dist/esm/icons/rss"), { loading }),
+  ruler: dynamic(() => import("lucide-react/dist/esm/icons/ruler"), { loading }),
+  "russian-ruble": dynamic(() => import("lucide-react/dist/esm/icons/russian-ruble"), { loading }),
+  sailboat: dynamic(() => import("lucide-react/dist/esm/icons/sailboat"), { loading }),
+  salad: dynamic(() => import("lucide-react/dist/esm/icons/salad"), { loading }),
+  sandwich: dynamic(() => import("lucide-react/dist/esm/icons/sandwich"), { loading }),
+  "satellite-dish": dynamic(() => import("lucide-react/dist/esm/icons/satellite-dish"), { loading }),
+  satellite: dynamic(() => import("lucide-react/dist/esm/icons/satellite"), { loading }),
+  "save-all": dynamic(() => import("lucide-react/dist/esm/icons/save-all"), { loading }),
+  save: dynamic(() => import("lucide-react/dist/esm/icons/save"), { loading }),
+  "scale-3d": dynamic(() => import("lucide-react/dist/esm/icons/scale-3d"), { loading }),
+  scale: dynamic(() => import("lucide-react/dist/esm/icons/scale"), { loading }),
+  scaling: dynamic(() => import("lucide-react/dist/esm/icons/scaling"), { loading }),
+  "scan-barcode": dynamic(() => import("lucide-react/dist/esm/icons/scan-barcode"), { loading }),
+  "scan-eye": dynamic(() => import("lucide-react/dist/esm/icons/scan-eye"), { loading }),
+  "scan-face": dynamic(() => import("lucide-react/dist/esm/icons/scan-face"), { loading }),
+  "scan-line": dynamic(() => import("lucide-react/dist/esm/icons/scan-line"), { loading }),
+  "scan-search": dynamic(() => import("lucide-react/dist/esm/icons/scan-search"), { loading }),
+  "scan-text": dynamic(() => import("lucide-react/dist/esm/icons/scan-text"), { loading }),
+  scan: dynamic(() => import("lucide-react/dist/esm/icons/scan"), { loading }),
+  "scatter-chart": dynamic(() => import("lucide-react/dist/esm/icons/scatter-chart"), { loading }),
+  school: dynamic(() => import("lucide-react/dist/esm/icons/school"), { loading }),
+  "scissors-line-dashed": dynamic(() => import("lucide-react/dist/esm/icons/scissors-line-dashed"), { loading }),
+  scissors: dynamic(() => import("lucide-react/dist/esm/icons/scissors"), { loading }),
+  "screen-share-off": dynamic(() => import("lucide-react/dist/esm/icons/screen-share-off"), { loading }),
+  "screen-share": dynamic(() => import("lucide-react/dist/esm/icons/screen-share"), { loading }),
+  "scroll-text": dynamic(() => import("lucide-react/dist/esm/icons/scroll-text"), { loading }),
+  scroll: dynamic(() => import("lucide-react/dist/esm/icons/scroll"), { loading }),
+  "search-check": dynamic(() => import("lucide-react/dist/esm/icons/search-check"), { loading }),
+  "search-code": dynamic(() => import("lucide-react/dist/esm/icons/search-code"), { loading }),
+  "search-slash": dynamic(() => import("lucide-react/dist/esm/icons/search-slash"), { loading }),
+  "search-x": dynamic(() => import("lucide-react/dist/esm/icons/search-x"), { loading }),
+  search: dynamic(() => import("lucide-react/dist/esm/icons/search"), { loading }),
+  "send-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/send-horizontal"), { loading }),
+  "send-to-back": dynamic(() => import("lucide-react/dist/esm/icons/send-to-back"), { loading }),
+  send: dynamic(() => import("lucide-react/dist/esm/icons/send"), { loading }),
+  "separator-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/separator-horizontal"), { loading }),
+  "separator-vertical": dynamic(() => import("lucide-react/dist/esm/icons/separator-vertical"), { loading }),
+  "server-cog": dynamic(() => import("lucide-react/dist/esm/icons/server-cog"), { loading }),
+  "server-crash": dynamic(() => import("lucide-react/dist/esm/icons/server-crash"), { loading }),
+  "server-off": dynamic(() => import("lucide-react/dist/esm/icons/server-off"), { loading }),
+  server: dynamic(() => import("lucide-react/dist/esm/icons/server"), { loading }),
+  "settings-2": dynamic(() => import("lucide-react/dist/esm/icons/settings-2"), { loading }),
+  settings: dynamic(() => import("lucide-react/dist/esm/icons/settings"), { loading }),
+  shapes: dynamic(() => import("lucide-react/dist/esm/icons/shapes"), { loading }),
+  "share-2": dynamic(() => import("lucide-react/dist/esm/icons/share-2"), { loading }),
+  share: dynamic(() => import("lucide-react/dist/esm/icons/share"), { loading }),
+  sheet: dynamic(() => import("lucide-react/dist/esm/icons/sheet"), { loading }),
+  shell: dynamic(() => import("lucide-react/dist/esm/icons/shell"), { loading }),
+  "shield-alert": dynamic(() => import("lucide-react/dist/esm/icons/shield-alert"), { loading }),
+  "shield-ban": dynamic(() => import("lucide-react/dist/esm/icons/shield-ban"), { loading }),
+  "shield-check": dynamic(() => import("lucide-react/dist/esm/icons/shield-check"), { loading }),
+  "shield-ellipsis": dynamic(() => import("lucide-react/dist/esm/icons/shield-ellipsis"), { loading }),
+  "shield-half": dynamic(() => import("lucide-react/dist/esm/icons/shield-half"), { loading }),
+  "shield-minus": dynamic(() => import("lucide-react/dist/esm/icons/shield-minus"), { loading }),
+  "shield-off": dynamic(() => import("lucide-react/dist/esm/icons/shield-off"), { loading }),
+  "shield-plus": dynamic(() => import("lucide-react/dist/esm/icons/shield-plus"), { loading }),
+  "shield-question": dynamic(() => import("lucide-react/dist/esm/icons/shield-question"), { loading }),
+  "shield-x": dynamic(() => import("lucide-react/dist/esm/icons/shield-x"), { loading }),
+  shield: dynamic(() => import("lucide-react/dist/esm/icons/shield"), { loading }),
+  "ship-wheel": dynamic(() => import("lucide-react/dist/esm/icons/ship-wheel"), { loading }),
+  ship: dynamic(() => import("lucide-react/dist/esm/icons/ship"), { loading }),
+  shirt: dynamic(() => import("lucide-react/dist/esm/icons/shirt"), { loading }),
+  "shopping-bag": dynamic(() => import("lucide-react/dist/esm/icons/shopping-bag"), { loading }),
+  "shopping-basket": dynamic(() => import("lucide-react/dist/esm/icons/shopping-basket"), { loading }),
+  "shopping-cart": dynamic(() => import("lucide-react/dist/esm/icons/shopping-cart"), { loading }),
+  shovel: dynamic(() => import("lucide-react/dist/esm/icons/shovel"), { loading }),
+  "shower-head": dynamic(() => import("lucide-react/dist/esm/icons/shower-head"), { loading }),
+  shrink: dynamic(() => import("lucide-react/dist/esm/icons/shrink"), { loading }),
+  shrub: dynamic(() => import("lucide-react/dist/esm/icons/shrub"), { loading }),
+  shuffle: dynamic(() => import("lucide-react/dist/esm/icons/shuffle"), { loading }),
+  sigma: dynamic(() => import("lucide-react/dist/esm/icons/sigma"), { loading }),
+  "signal-high": dynamic(() => import("lucide-react/dist/esm/icons/signal-high"), { loading }),
+  "signal-low": dynamic(() => import("lucide-react/dist/esm/icons/signal-low"), { loading }),
+  "signal-medium": dynamic(() => import("lucide-react/dist/esm/icons/signal-medium"), { loading }),
+  "signal-zero": dynamic(() => import("lucide-react/dist/esm/icons/signal-zero"), { loading }),
+  signal: dynamic(() => import("lucide-react/dist/esm/icons/signal"), { loading }),
+  "signpost-big": dynamic(() => import("lucide-react/dist/esm/icons/signpost-big"), { loading }),
+  signpost: dynamic(() => import("lucide-react/dist/esm/icons/signpost"), { loading }),
+  siren: dynamic(() => import("lucide-react/dist/esm/icons/siren"), { loading }),
+  "skip-back": dynamic(() => import("lucide-react/dist/esm/icons/skip-back"), { loading }),
+  "skip-forward": dynamic(() => import("lucide-react/dist/esm/icons/skip-forward"), { loading }),
+  skull: dynamic(() => import("lucide-react/dist/esm/icons/skull"), { loading }),
+  slack: dynamic(() => import("lucide-react/dist/esm/icons/slack"), { loading }),
+  slash: dynamic(() => import("lucide-react/dist/esm/icons/slash"), { loading }),
+  slice: dynamic(() => import("lucide-react/dist/esm/icons/slice"), { loading }),
+  "sliders-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/sliders-horizontal"), { loading }),
+  "sliders-vertical": dynamic(() => import("lucide-react/dist/esm/icons/sliders-vertical"), { loading }),
+  "smartphone-charging": dynamic(() => import("lucide-react/dist/esm/icons/smartphone-charging"), { loading }),
+  "smartphone-nfc": dynamic(() => import("lucide-react/dist/esm/icons/smartphone-nfc"), { loading }),
+  smartphone: dynamic(() => import("lucide-react/dist/esm/icons/smartphone"), { loading }),
+  "smile-plus": dynamic(() => import("lucide-react/dist/esm/icons/smile-plus"), { loading }),
+  smile: dynamic(() => import("lucide-react/dist/esm/icons/smile"), { loading }),
+  snail: dynamic(() => import("lucide-react/dist/esm/icons/snail"), { loading }),
+  snowflake: dynamic(() => import("lucide-react/dist/esm/icons/snowflake"), { loading }),
+  sofa: dynamic(() => import("lucide-react/dist/esm/icons/sofa"), { loading }),
+  soup: dynamic(() => import("lucide-react/dist/esm/icons/soup"), { loading }),
+  space: dynamic(() => import("lucide-react/dist/esm/icons/space"), { loading }),
+  spade: dynamic(() => import("lucide-react/dist/esm/icons/spade"), { loading }),
+  sparkle: dynamic(() => import("lucide-react/dist/esm/icons/sparkle"), { loading }),
+  sparkles: dynamic(() => import("lucide-react/dist/esm/icons/sparkles"), { loading }),
+  speaker: dynamic(() => import("lucide-react/dist/esm/icons/speaker"), { loading }),
+  speech: dynamic(() => import("lucide-react/dist/esm/icons/speech"), { loading }),
+  "spell-check-2": dynamic(() => import("lucide-react/dist/esm/icons/spell-check-2"), { loading }),
+  "spell-check": dynamic(() => import("lucide-react/dist/esm/icons/spell-check"), { loading }),
+  spline: dynamic(() => import("lucide-react/dist/esm/icons/spline"), { loading }),
+  split: dynamic(() => import("lucide-react/dist/esm/icons/split"), { loading }),
+  "spray-can": dynamic(() => import("lucide-react/dist/esm/icons/spray-can"), { loading }),
+  sprout: dynamic(() => import("lucide-react/dist/esm/icons/sprout"), { loading }),
+  "square-activity": dynamic(() => import("lucide-react/dist/esm/icons/square-activity"), { loading }),
+  "square-arrow-down-left": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-down-left"), { loading }),
+  "square-arrow-down-right": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-down-right"), { loading }),
+  "square-arrow-down": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-down"), { loading }),
+  "square-arrow-left": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-left"), { loading }),
+  "square-arrow-out-down-left": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-out-down-left"), { loading }),
+  "square-arrow-out-down-right": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-out-down-right"), { loading }),
+  "square-arrow-out-up-left": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-out-up-left"), { loading }),
+  "square-arrow-out-up-right": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-out-up-right"), { loading }),
+  "square-arrow-right": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-right"), { loading }),
+  "square-arrow-up-left": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-up-left"), { loading }),
+  "square-arrow-up-right": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-up-right"), { loading }),
+  "square-arrow-up": dynamic(() => import("lucide-react/dist/esm/icons/square-arrow-up"), { loading }),
+  "square-asterisk": dynamic(() => import("lucide-react/dist/esm/icons/square-asterisk"), { loading }),
+  "square-bottom-dashed-scissors": () => dynamic(() => import("lucide-react/dist/esm/icons/square-bottom-dashed-scissors"), { loading }),
+  "square-check-big": dynamic(() => import("lucide-react/dist/esm/icons/square-check-big"), { loading }),
+  "square-check": dynamic(() => import("lucide-react/dist/esm/icons/square-check"), { loading }),
+  "square-chevron-down": dynamic(() => import("lucide-react/dist/esm/icons/square-chevron-down"), { loading }),
+  "square-chevron-left": dynamic(() => import("lucide-react/dist/esm/icons/square-chevron-left"), { loading }),
+  "square-chevron-right": dynamic(() => import("lucide-react/dist/esm/icons/square-chevron-right"), { loading }),
+  "square-chevron-up": dynamic(() => import("lucide-react/dist/esm/icons/square-chevron-up"), { loading }),
+  "square-code": dynamic(() => import("lucide-react/dist/esm/icons/square-code"), { loading }),
+  "square-dashed-bottom-code": dynamic(() => import("lucide-react/dist/esm/icons/square-dashed-bottom-code"), { loading }),
+  "square-dashed-bottom": dynamic(() => import("lucide-react/dist/esm/icons/square-dashed-bottom"), { loading }),
+  "square-dashed-kanban": dynamic(() => import("lucide-react/dist/esm/icons/square-dashed-kanban"), { loading }),
+  "square-dashed-mouse-pointer": dynamic(() => import("lucide-react/dist/esm/icons/square-dashed-mouse-pointer")
+  ),
+  "square-divide": dynamic(() => import("lucide-react/dist/esm/icons/square-divide"), { loading }),
+  "square-dot": dynamic(() => import("lucide-react/dist/esm/icons/square-dot"), { loading }),
+  "square-equal": dynamic(() => import("lucide-react/dist/esm/icons/square-equal"), { loading }),
+  "square-function": dynamic(() => import("lucide-react/dist/esm/icons/square-function"), { loading }),
+  "square-gantt-chart": dynamic(() => import("lucide-react/dist/esm/icons/square-gantt-chart"), { loading }),
+  "square-kanban": dynamic(() => import("lucide-react/dist/esm/icons/square-kanban"), { loading }),
+  "square-library": dynamic(() => import("lucide-react/dist/esm/icons/square-library"), { loading }),
+  "square-m": dynamic(() => import("lucide-react/dist/esm/icons/square-m"), { loading }),
+  "square-menu": dynamic(() => import("lucide-react/dist/esm/icons/square-menu"), { loading }),
+  "square-minus": dynamic(() => import("lucide-react/dist/esm/icons/square-minus"), { loading }),
+  "square-mouse-pointer": dynamic(() => import("lucide-react/dist/esm/icons/square-mouse-pointer"), { loading }),
+  "square-parking-off": dynamic(() => import("lucide-react/dist/esm/icons/square-parking-off"), { loading }),
+  "square-parking": dynamic(() => import("lucide-react/dist/esm/icons/square-parking"), { loading }),
+  "square-pen": dynamic(() => import("lucide-react/dist/esm/icons/square-pen"), { loading }),
+  "square-percent": dynamic(() => import("lucide-react/dist/esm/icons/square-percent"), { loading }),
+  "square-pi": dynamic(() => import("lucide-react/dist/esm/icons/square-pi"), { loading }),
+  "square-pilcrow": dynamic(() => import("lucide-react/dist/esm/icons/square-pilcrow"), { loading }),
+  "square-play": dynamic(() => import("lucide-react/dist/esm/icons/square-play"), { loading }),
+  "square-plus": dynamic(() => import("lucide-react/dist/esm/icons/square-plus"), { loading }),
+  "square-power": dynamic(() => import("lucide-react/dist/esm/icons/square-power"), { loading }),
+  "square-radical": dynamic(() => import("lucide-react/dist/esm/icons/square-radical"), { loading }),
+  "square-scissors": dynamic(() => import("lucide-react/dist/esm/icons/square-scissors"), { loading }),
+  "square-sigma": dynamic(() => import("lucide-react/dist/esm/icons/square-sigma"), { loading }),
+  "square-slash": dynamic(() => import("lucide-react/dist/esm/icons/square-slash"), { loading }),
+  "square-split-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/square-split-horizontal"), { loading }),
+  "square-split-vertical": dynamic(() => import("lucide-react/dist/esm/icons/square-split-vertical"), { loading }),
+  "square-stack": dynamic(() => import("lucide-react/dist/esm/icons/square-stack"), { loading }),
+  "square-terminal": dynamic(() => import("lucide-react/dist/esm/icons/square-terminal"), { loading }),
+  "square-user-round": dynamic(() => import("lucide-react/dist/esm/icons/square-user-round"), { loading }),
+  "square-user": dynamic(() => import("lucide-react/dist/esm/icons/square-user"), { loading }),
+  "square-x": dynamic(() => import("lucide-react/dist/esm/icons/square-x"), { loading }),
+  square: dynamic(() => import("lucide-react/dist/esm/icons/square"), { loading }),
+  squircle: dynamic(() => import("lucide-react/dist/esm/icons/squircle"), { loading }),
+  squirrel: dynamic(() => import("lucide-react/dist/esm/icons/squirrel"), { loading }),
+  stamp: dynamic(() => import("lucide-react/dist/esm/icons/stamp"), { loading }),
+  "star-half": dynamic(() => import("lucide-react/dist/esm/icons/star-half"), { loading }),
+  "star-off": dynamic(() => import("lucide-react/dist/esm/icons/star-off"), { loading }),
+  star: dynamic(() => import("lucide-react/dist/esm/icons/star"), { loading }),
+  "step-back": dynamic(() => import("lucide-react/dist/esm/icons/step-back"), { loading }),
+  "step-forward": dynamic(() => import("lucide-react/dist/esm/icons/step-forward"), { loading }),
+  stethoscope: dynamic(() => import("lucide-react/dist/esm/icons/stethoscope"), { loading }),
+  sticker: dynamic(() => import("lucide-react/dist/esm/icons/sticker"), { loading }),
+  "sticky-note": dynamic(() => import("lucide-react/dist/esm/icons/sticky-note"), { loading }),
+  store: dynamic(() => import("lucide-react/dist/esm/icons/store"), { loading }),
+  "stretch-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/stretch-horizontal"), { loading }),
+  "stretch-vertical": dynamic(() => import("lucide-react/dist/esm/icons/stretch-vertical"), { loading }),
+  strikethrough: dynamic(() => import("lucide-react/dist/esm/icons/strikethrough"), { loading }),
+  subscript: dynamic(() => import("lucide-react/dist/esm/icons/subscript"), { loading }),
+  "sun-dim": dynamic(() => import("lucide-react/dist/esm/icons/sun-dim"), { loading }),
+  "sun-medium": dynamic(() => import("lucide-react/dist/esm/icons/sun-medium"), { loading }),
+  "sun-moon": dynamic(() => import("lucide-react/dist/esm/icons/sun-moon"), { loading }),
+  "sun-snow": dynamic(() => import("lucide-react/dist/esm/icons/sun-snow"), { loading }),
+  sun: dynamic(() => import("lucide-react/dist/esm/icons/sun"), { loading }),
+  sunrise: dynamic(() => import("lucide-react/dist/esm/icons/sunrise"), { loading }),
+  sunset: dynamic(() => import("lucide-react/dist/esm/icons/sunset"), { loading }),
+  superscript: dynamic(() => import("lucide-react/dist/esm/icons/superscript"), { loading }),
+  "swatch-book": dynamic(() => import("lucide-react/dist/esm/icons/swatch-book"), { loading }),
+  "swiss-franc": dynamic(() => import("lucide-react/dist/esm/icons/swiss-franc"), { loading }),
+  "switch-camera": dynamic(() => import("lucide-react/dist/esm/icons/switch-camera"), { loading }),
+  sword: dynamic(() => import("lucide-react/dist/esm/icons/sword"), { loading }),
+  swords: dynamic(() => import("lucide-react/dist/esm/icons/swords"), { loading }),
+  syringe: dynamic(() => import("lucide-react/dist/esm/icons/syringe"), { loading }),
+  "table-2": dynamic(() => import("lucide-react/dist/esm/icons/table-2"), { loading }),
+  "table-cells-merge": dynamic(() => import("lucide-react/dist/esm/icons/table-cells-merge"), { loading }),
+  "table-cells-split": dynamic(() => import("lucide-react/dist/esm/icons/table-cells-split"), { loading }),
+  "table-columns-split": dynamic(() => import("lucide-react/dist/esm/icons/table-columns-split"), { loading }),
+  "table-properties": dynamic(() => import("lucide-react/dist/esm/icons/table-properties"), { loading }),
+  "table-rows-split": dynamic(() => import("lucide-react/dist/esm/icons/table-rows-split"), { loading }),
+  table: dynamic(() => import("lucide-react/dist/esm/icons/table"), { loading }),
+  "tablet-smartphone": dynamic(() => import("lucide-react/dist/esm/icons/tablet-smartphone"), { loading }),
+  tablet: dynamic(() => import("lucide-react/dist/esm/icons/tablet"), { loading }),
+  tablets: dynamic(() => import("lucide-react/dist/esm/icons/tablets"), { loading }),
+  tag: dynamic(() => import("lucide-react/dist/esm/icons/tag"), { loading }),
+  tags: dynamic(() => import("lucide-react/dist/esm/icons/tags"), { loading }),
+  "tally-1": dynamic(() => import("lucide-react/dist/esm/icons/tally-1"), { loading }),
+  "tally-2": dynamic(() => import("lucide-react/dist/esm/icons/tally-2"), { loading }),
+  "tally-3": dynamic(() => import("lucide-react/dist/esm/icons/tally-3"), { loading }),
+  "tally-4": dynamic(() => import("lucide-react/dist/esm/icons/tally-4"), { loading }),
+  "tally-5": dynamic(() => import("lucide-react/dist/esm/icons/tally-5"), { loading }),
+  tangent: dynamic(() => import("lucide-react/dist/esm/icons/tangent"), { loading }),
+  target: dynamic(() => import("lucide-react/dist/esm/icons/target"), { loading }),
+  telescope: dynamic(() => import("lucide-react/dist/esm/icons/telescope"), { loading }),
+  "tent-tree": dynamic(() => import("lucide-react/dist/esm/icons/tent-tree"), { loading }),
+  tent: dynamic(() => import("lucide-react/dist/esm/icons/tent"), { loading }),
+  terminal: dynamic(() => import("lucide-react/dist/esm/icons/terminal"), { loading }),
+  "test-tube-diagonal": dynamic(() => import("lucide-react/dist/esm/icons/test-tube-diagonal"), { loading }),
+  "test-tube": dynamic(() => import("lucide-react/dist/esm/icons/test-tube"), { loading }),
+  "test-tubes": dynamic(() => import("lucide-react/dist/esm/icons/test-tubes"), { loading }),
+  "text-cursor-input": dynamic(() => import("lucide-react/dist/esm/icons/text-cursor-input"), { loading }),
+  "text-cursor": dynamic(() => import("lucide-react/dist/esm/icons/text-cursor"), { loading }),
+  "text-quote": dynamic(() => import("lucide-react/dist/esm/icons/text-quote"), { loading }),
+  "text-search": dynamic(() => import("lucide-react/dist/esm/icons/text-search"), { loading }),
+  "text-select": dynamic(() => import("lucide-react/dist/esm/icons/text-select"), { loading }),
+  text: dynamic(() => import("lucide-react/dist/esm/icons/text"), { loading }),
+  theater: dynamic(() => import("lucide-react/dist/esm/icons/theater"), { loading }),
+  "thermometer-snowflake": dynamic(() => import("lucide-react/dist/esm/icons/thermometer-snowflake"), { loading }),
+  "thermometer-sun": dynamic(() => import("lucide-react/dist/esm/icons/thermometer-sun"), { loading }),
+  thermometer: dynamic(() => import("lucide-react/dist/esm/icons/thermometer"), { loading }),
+  "thumbs-down": dynamic(() => import("lucide-react/dist/esm/icons/thumbs-down"), { loading }),
+  "thumbs-up": dynamic(() => import("lucide-react/dist/esm/icons/thumbs-up"), { loading }),
+  "ticket-check": dynamic(() => import("lucide-react/dist/esm/icons/ticket-check"), { loading }),
+  "ticket-minus": dynamic(() => import("lucide-react/dist/esm/icons/ticket-minus"), { loading }),
+  "ticket-percent": dynamic(() => import("lucide-react/dist/esm/icons/ticket-percent"), { loading }),
+  "ticket-plus": dynamic(() => import("lucide-react/dist/esm/icons/ticket-plus"), { loading }),
+  "ticket-slash": dynamic(() => import("lucide-react/dist/esm/icons/ticket-slash"), { loading }),
+  "ticket-x": dynamic(() => import("lucide-react/dist/esm/icons/ticket-x"), { loading }),
+  ticket: dynamic(() => import("lucide-react/dist/esm/icons/ticket"), { loading }),
+  "timer-off": dynamic(() => import("lucide-react/dist/esm/icons/timer-off"), { loading }),
+  "timer-reset": dynamic(() => import("lucide-react/dist/esm/icons/timer-reset"), { loading }),
+  timer: dynamic(() => import("lucide-react/dist/esm/icons/timer"), { loading }),
+  "toggle-left": dynamic(() => import("lucide-react/dist/esm/icons/toggle-left"), { loading }),
+  "toggle-right": dynamic(() => import("lucide-react/dist/esm/icons/toggle-right"), { loading }),
+  tornado: dynamic(() => import("lucide-react/dist/esm/icons/tornado"), { loading }),
+  torus: dynamic(() => import("lucide-react/dist/esm/icons/torus"), { loading }),
+  "touchpad-off": dynamic(() => import("lucide-react/dist/esm/icons/touchpad-off"), { loading }),
+  touchpad: dynamic(() => import("lucide-react/dist/esm/icons/touchpad"), { loading }),
+  "tower-control": dynamic(() => import("lucide-react/dist/esm/icons/tower-control"), { loading }),
+  "toy-brick": dynamic(() => import("lucide-react/dist/esm/icons/toy-brick"), { loading }),
+  tractor: dynamic(() => import("lucide-react/dist/esm/icons/tractor"), { loading }),
+  "traffic-cone": dynamic(() => import("lucide-react/dist/esm/icons/traffic-cone"), { loading }),
+  "train-front-tunnel": dynamic(() => import("lucide-react/dist/esm/icons/train-front-tunnel"), { loading }),
+  "train-front": dynamic(() => import("lucide-react/dist/esm/icons/train-front"), { loading }),
+  "train-track": dynamic(() => import("lucide-react/dist/esm/icons/train-track"), { loading }),
+  "tram-front": dynamic(() => import("lucide-react/dist/esm/icons/tram-front"), { loading }),
+  "trash-2": dynamic(() => import("lucide-react/dist/esm/icons/trash-2"), { loading }),
+  trash: dynamic(() => import("lucide-react/dist/esm/icons/trash"), { loading }),
+  "tree-deciduous": dynamic(() => import("lucide-react/dist/esm/icons/tree-deciduous"), { loading }),
+  "tree-palm": dynamic(() => import("lucide-react/dist/esm/icons/tree-palm"), { loading }),
+  "tree-pine": dynamic(() => import("lucide-react/dist/esm/icons/tree-pine"), { loading }),
+  trees: dynamic(() => import("lucide-react/dist/esm/icons/trees"), { loading }),
+  trello: dynamic(() => import("lucide-react/dist/esm/icons/trello"), { loading }),
+  "trending-down": dynamic(() => import("lucide-react/dist/esm/icons/trending-down"), { loading }),
+  "trending-up": dynamic(() => import("lucide-react/dist/esm/icons/trending-up"), { loading }),
+  "triangle-alert": dynamic(() => import("lucide-react/dist/esm/icons/triangle-alert"), { loading }),
+  "triangle-right": dynamic(() => import("lucide-react/dist/esm/icons/triangle-right"), { loading }),
+  triangle: dynamic(() => import("lucide-react/dist/esm/icons/triangle"), { loading }),
+  trophy: dynamic(() => import("lucide-react/dist/esm/icons/trophy"), { loading }),
+  truck: dynamic(() => import("lucide-react/dist/esm/icons/truck"), { loading }),
+  turtle: dynamic(() => import("lucide-react/dist/esm/icons/turtle"), { loading }),
+  "tv-2": dynamic(() => import("lucide-react/dist/esm/icons/tv-2"), { loading }),
+  tv: dynamic(() => import("lucide-react/dist/esm/icons/tv"), { loading }),
+  twitch: dynamic(() => import("lucide-react/dist/esm/icons/twitch"), { loading }),
+  twitter: dynamic(() => import("lucide-react/dist/esm/icons/twitter"), { loading }),
+  type: dynamic(() => import("lucide-react/dist/esm/icons/type"), { loading }),
+  "umbrella-off": dynamic(() => import("lucide-react/dist/esm/icons/umbrella-off"), { loading }),
+  umbrella: dynamic(() => import("lucide-react/dist/esm/icons/umbrella"), { loading }),
+  underline: dynamic(() => import("lucide-react/dist/esm/icons/underline"), { loading }),
+  "undo-2": dynamic(() => import("lucide-react/dist/esm/icons/undo-2"), { loading }),
+  "undo-dot": dynamic(() => import("lucide-react/dist/esm/icons/undo-dot"), { loading }),
+  undo: dynamic(() => import("lucide-react/dist/esm/icons/undo"), { loading }),
+  "unfold-horizontal": dynamic(() => import("lucide-react/dist/esm/icons/unfold-horizontal"), { loading }),
+  "unfold-vertical": dynamic(() => import("lucide-react/dist/esm/icons/unfold-vertical"), { loading }),
+  ungroup: dynamic(() => import("lucide-react/dist/esm/icons/ungroup"), { loading }),
+  university: dynamic(() => import("lucide-react/dist/esm/icons/university"), { loading }),
+  "unlink-2": dynamic(() => import("lucide-react/dist/esm/icons/unlink-2"), { loading }),
+  unlink: dynamic(() => import("lucide-react/dist/esm/icons/unlink"), { loading }),
+  unplug: dynamic(() => import("lucide-react/dist/esm/icons/unplug"), { loading }),
+  upload: dynamic(() => import("lucide-react/dist/esm/icons/upload"), { loading }),
+  usb: dynamic(() => import("lucide-react/dist/esm/icons/usb"), { loading }),
+  "user-check": dynamic(() => import("lucide-react/dist/esm/icons/user-check"), { loading }),
+  "user-cog": dynamic(() => import("lucide-react/dist/esm/icons/user-cog"), { loading }),
+  "user-minus": dynamic(() => import("lucide-react/dist/esm/icons/user-minus"), { loading }),
+  "user-plus": dynamic(() => import("lucide-react/dist/esm/icons/user-plus"), { loading }),
+  "user-round-check": dynamic(() => import("lucide-react/dist/esm/icons/user-round-check"), { loading }),
+  "user-round-cog": dynamic(() => import("lucide-react/dist/esm/icons/user-round-cog"), { loading }),
+  "user-round-minus": dynamic(() => import("lucide-react/dist/esm/icons/user-round-minus"), { loading }),
+  "user-round-plus": dynamic(() => import("lucide-react/dist/esm/icons/user-round-plus"), { loading }),
+  "user-round-search": dynamic(() => import("lucide-react/dist/esm/icons/user-round-search"), { loading }),
+  "user-round-x": dynamic(() => import("lucide-react/dist/esm/icons/user-round-x"), { loading }),
+  "user-round": dynamic(() => import("lucide-react/dist/esm/icons/user-round"), { loading }),
+  "user-search": dynamic(() => import("lucide-react/dist/esm/icons/user-search"), { loading }),
+  "user-x": dynamic(() => import("lucide-react/dist/esm/icons/user-x"), { loading }),
+  user: dynamic(() => import("lucide-react/dist/esm/icons/user"), { loading }),
+  "users-round": dynamic(() => import("lucide-react/dist/esm/icons/users-round"), { loading }),
+  users: dynamic(() => import("lucide-react/dist/esm/icons/users"), { loading }),
+  "utensils-crossed": dynamic(() => import("lucide-react/dist/esm/icons/utensils-crossed"), { loading }),
+  utensils: dynamic(() => import("lucide-react/dist/esm/icons/utensils"), { loading }),
+  "utility-pole": dynamic(() => import("lucide-react/dist/esm/icons/utility-pole"), { loading }),
+  variable: dynamic(() => import("lucide-react/dist/esm/icons/variable"), { loading }),
+  vault: dynamic(() => import("lucide-react/dist/esm/icons/vault"), { loading }),
+  vegan: dynamic(() => import("lucide-react/dist/esm/icons/vegan"), { loading }),
+  "venetian-mask": dynamic(() => import("lucide-react/dist/esm/icons/venetian-mask"), { loading }),
+  "vibrate-off": dynamic(() => import("lucide-react/dist/esm/icons/vibrate-off"), { loading }),
+  vibrate: dynamic(() => import("lucide-react/dist/esm/icons/vibrate"), { loading }),
+  "video-off": dynamic(() => import("lucide-react/dist/esm/icons/video-off"), { loading }),
+  video: dynamic(() => import("lucide-react/dist/esm/icons/video"), { loading }),
+  videotape: dynamic(() => import("lucide-react/dist/esm/icons/videotape"), { loading }),
+  view: dynamic(() => import("lucide-react/dist/esm/icons/view"), { loading }),
+  voicemail: dynamic(() => import("lucide-react/dist/esm/icons/voicemail"), { loading }),
+  "volume-1": dynamic(() => import("lucide-react/dist/esm/icons/volume-1"), { loading }),
+  "volume-2": dynamic(() => import("lucide-react/dist/esm/icons/volume-2"), { loading }),
+  "volume-x": dynamic(() => import("lucide-react/dist/esm/icons/volume-x"), { loading }),
+  volume: dynamic(() => import("lucide-react/dist/esm/icons/volume"), { loading }),
+  vote: dynamic(() => import("lucide-react/dist/esm/icons/vote"), { loading }),
+  "wallet-cards": dynamic(() => import("lucide-react/dist/esm/icons/wallet-cards"), { loading }),
+  "wallet-minimal": dynamic(() => import("lucide-react/dist/esm/icons/wallet-minimal"), { loading }),
+  wallet: dynamic(() => import("lucide-react/dist/esm/icons/wallet"), { loading }),
+  wallpaper: dynamic(() => import("lucide-react/dist/esm/icons/wallpaper"), { loading }),
+  "wand-sparkles": dynamic(() => import("lucide-react/dist/esm/icons/wand-sparkles"), { loading }),
+  wand: dynamic(() => import("lucide-react/dist/esm/icons/wand"), { loading }),
+  warehouse: dynamic(() => import("lucide-react/dist/esm/icons/warehouse"), { loading }),
+  "washing-machine": dynamic(() => import("lucide-react/dist/esm/icons/washing-machine"), { loading }),
+  watch: dynamic(() => import("lucide-react/dist/esm/icons/watch"), { loading }),
+  waves: dynamic(() => import("lucide-react/dist/esm/icons/waves"), { loading }),
+  waypoints: dynamic(() => import("lucide-react/dist/esm/icons/waypoints"), { loading }),
+  webcam: dynamic(() => import("lucide-react/dist/esm/icons/webcam"), { loading }),
+  "webhook-off": dynamic(() => import("lucide-react/dist/esm/icons/webhook-off"), { loading }),
+  webhook: dynamic(() => import("lucide-react/dist/esm/icons/webhook"), { loading }),
+  weight: dynamic(() => import("lucide-react/dist/esm/icons/weight"), { loading }),
+  "wheat-off": dynamic(() => import("lucide-react/dist/esm/icons/wheat-off"), { loading }),
+  wheat: dynamic(() => import("lucide-react/dist/esm/icons/wheat"), { loading }),
+  "whole-word": dynamic(() => import("lucide-react/dist/esm/icons/whole-word"), { loading }),
+  "wifi-off": dynamic(() => import("lucide-react/dist/esm/icons/wifi-off"), { loading }),
+  wifi: dynamic(() => import("lucide-react/dist/esm/icons/wifi"), { loading }),
+  wind: dynamic(() => import("lucide-react/dist/esm/icons/wind"), { loading }),
+  "wine-off": dynamic(() => import("lucide-react/dist/esm/icons/wine-off"), { loading }),
+  wine: dynamic(() => import("lucide-react/dist/esm/icons/wine"), { loading }),
+  workflow: dynamic(() => import("lucide-react/dist/esm/icons/workflow"), { loading }),
+  worm: dynamic(() => import("lucide-react/dist/esm/icons/worm"), { loading }),
+  "wrap-text": dynamic(() => import("lucide-react/dist/esm/icons/wrap-text"), { loading }),
+  wrench: dynamic(() => import("lucide-react/dist/esm/icons/wrench"), { loading }),
+  x: dynamic(() => import("lucide-react/dist/esm/icons/x"), { loading }),
+  youtube: dynamic(() => import("lucide-react/dist/esm/icons/youtube"), { loading }),
+  "zap-off": dynamic(() => import("lucide-react/dist/esm/icons/zap-off"), { loading }),
+  zap: dynamic(() => import("lucide-react/dist/esm/icons/zap"), { loading }),
+  "zoom-in": dynamic(() => import("lucide-react/dist/esm/icons/zoom-in"), { loading }),
+  "zoom-out": dynamic(() => import("lucide-react/dist/esm/icons/zoom-out"), { loading }),
+};
diff --git a/packages/ui/components/icon/index.ts b/packages/ui/components/icon/index.ts
deleted file mode 100644
index 998237c44e..0000000000
--- a/packages/ui/components/icon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Icon";
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index 59035a34b5..f00b33689a 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -3,9 +3,8 @@ import Link from "next/link";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
 
+import { Icon, type IconName } from "../../..";
 import { Avatar } from "../../avatar";
 import { SkeletonText } from "../../skeleton";
 
@@ -17,7 +16,7 @@ export type HorizontalTabItemProps = {
   href: string;
   linkShallow?: boolean;
   linkScroll?: boolean;
-  icon?: SVGComponent | LucideIcon;
+  icon?: IconName;
   avatar?: string;
 };
 
@@ -49,9 +48,8 @@ const HorizontalTabItem = function ({
       data-testid={`horizontal-tab-${name}`}
       aria-current={isCurrent ? "page" : undefined}>
       {props.icon && (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        //@ts-ignore
-        <props.icon
+        <Icon
+          name={props.icon}
           className={classNames(
             isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
             "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index c33301a364..e51dccb526 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -4,16 +4,14 @@ import { Fragment } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useUrlMatchesCurrentUrl } from "@calcom/lib/hooks/useUrlMatchesCurrentUrl";
-import type { SVGComponent } from "@calcom/types/SVGComponent";
-import type { LucideIcon } from "@calcom/ui/components/icon";
 
-import { ChevronRight, ExternalLink } from "../../icon";
+import { Icon, type IconName } from "../../..";
 import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
   name: string;
   info?: string;
-  icon?: SVGComponent | LucideIcon;
+  icon?: IconName;
   disabled?: boolean;
   children?: VerticalTabItemProps[];
   textClassNames?: string;
@@ -63,7 +61,8 @@ const VerticalTabItem = ({
             data-testid={`vertical-tab-${name}`}
             aria-current={isCurrent ? "page" : undefined}>
             {props.icon && (
-              <props.icon
+              <Icon
+                name={props.icon}
                 className={classNames(
                   "mr-2 h-[16px] w-[16px] stroke-[2px] ltr:mr-2 rtl:ml-2 md:mt-0",
                   props.iconClassName
@@ -76,7 +75,7 @@ const VerticalTabItem = ({
                 <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 mt-px truncate">
                   {t(name)}
                 </Skeleton>
-                {props.isExternalLink ? <ExternalLink data-testid="external-link" /> : null}
+                {props.isExternalLink ? <Icon name="external-link" data-testid="external-link" /> : null}
               </span>
               {info && (
                 <Skeleton
@@ -90,7 +89,8 @@ const VerticalTabItem = ({
             </div>
             {!disableChevron && isCurrent && (
               <div className="ml-auto self-center">
-                <ChevronRight
+                <Icon
+                  name="chevron-right"
                   width={20}
                   height={20}
                   className="text-default h-auto w-[20px] stroke-[1.5px]"
diff --git a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
index 701cd54c8e..2bec7cc859 100644
--- a/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
+++ b/packages/ui/components/navigation/tabs/__stories__/horizontalTabs.stories.mdx
@@ -8,7 +8,7 @@ import {
   Examples,
   Example,
 } from "@calcom/storybook/components";
-import { Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import HorizontalTabs from "../HorizontalTabs";
 
diff --git a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
index bfc8ea9c5a..09595cb8b1 100644
--- a/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
+++ b/packages/ui/components/navigation/tabs/__stories__/verticalTabs.stories.mdx
@@ -8,7 +8,7 @@ import {
   VariantsTable,
   VariantRow,
 } from "@calcom/storybook/components";
-import { Plus } from "@calcom/ui/components/icon";
+import { Icon } from "@calcom/ui";
 
 import VerticalTabs from "../VerticalTabs";
 
diff --git a/packages/ui/components/navigation/tabs/navigation.test.tsx b/packages/ui/components/navigation/tabs/navigation.test.tsx
index 7c701bb373..a186ced9cd 100644
--- a/packages/ui/components/navigation/tabs/navigation.test.tsx
+++ b/packages/ui/components/navigation/tabs/navigation.test.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable playwright/missing-playwright-await */
 import { fireEvent, render, screen } from "@testing-library/react";
-import { PlusIcon } from "lucide-react";
 import { vi } from "vitest";
 
 import HorizontalTabs from "./HorizontalTabs";
@@ -82,7 +81,7 @@ describe("Tests for navigation folder", () => {
         href: "/tab1",
         disableChevron: true,
         disabled: true,
-        icon: PlusIcon,
+        icon: "plus" as const,
       },
       { name: "Tab 2", href: "/tab2", isExternalLink: true },
       { name: "Tab 3", href: "/tab3", info: "info" },
@@ -104,12 +103,12 @@ describe("Tests for navigation folder", () => {
       });
     });
 
-    test("Should render correctly if props are passed", () => {
+    test("Should render correctly if props are passed", async () => {
       render(<VerticalTabs tabs={mockTabs} />);
 
-      const iconElement = screen.getAllByTestId("icon-component");
-      const externalLink = screen.getAllByTestId("external-link");
-      const chevronRight = screen.getAllByTestId("chevron-right");
+      const iconElement = await screen.findAllByTestId("icon-component");
+      const externalLink = await screen.findAllByTestId("external-link");
+      const chevronRight = await screen.findAllByTestId("chevron-right");
 
       mockTabs.forEach((tab) => {
         const tabName = screen.getByText(tab.name);
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index b0d43a5ef2..82d122f050 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { classNames } from "@calcom/lib";
 import { Tooltip } from "@calcom/ui";
 
-import { ChevronDown } from "../icon";
+import { Icon } from "../..";
 
 export const AnimatedPopover = ({
   text,
@@ -72,7 +72,8 @@ export const AnimatedPopover = ({
                   )}
                 </div>
               </Tooltip>
-              <ChevronDown
+              <Icon
+                name="chevron-down"
                 className={classNames("ml-2 w-4 transition-transform duration-150", open && "rotate-180")}
               />
             </div>
diff --git a/packages/ui/components/popover/MeetingTimeInTimezones.tsx b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
index 312140eb91..5c429d0874 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -4,11 +4,11 @@ import {
   formatTime,
   isNextDayInTimezone,
   isPreviousDayInTimezone,
-  sortByTimezone,
   isSupportedTimeZone,
+  sortByTimezone,
 } from "@calcom/lib/date-fns";
 
-import { Globe } from "../icon";
+import { Icon } from "../..";
 
 type Attendee = {
   id: number;
@@ -67,7 +67,7 @@ const MeetingTimeInTimezones = ({
       <Popover.Trigger
         onClick={preventBubbling}
         className="popover-button text-emphasis hover:bg-emphasis focus:bg-emphasis invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors group-hover:visible">
-        <Globe className="h-3.5 w-3.5" />
+        <Icon name="globe" className="h-3.5 w-3.5" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
diff --git a/packages/ui/components/sheet/sheet.tsx b/packages/ui/components/sheet/sheet.tsx
index 4e51112030..ff6f0f953e 100644
--- a/packages/ui/components/sheet/sheet.tsx
+++ b/packages/ui/components/sheet/sheet.tsx
@@ -1,9 +1,9 @@
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { X } from "lucide-react";
 import * as React from "react";
 
 import classNames from "@calcom/lib/classNames";
+import { Icon } from "@calcom/ui";
 
 const Sheet = SheetPrimitive.Root;
 
@@ -157,7 +157,7 @@ const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Con
           </div>
         )}
         <SheetPrimitive.Close className="focus:ring-emphasis data-[state=open]:bg-deafult absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-          <X className="h-4 w-4" />
+          <Icon name="x" className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>
       </SheetPrimitive.Content>
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index 3ae64c781d..517ad10542 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -1,22 +1,21 @@
-import type { LucideIcon as IconType } from "lucide-react";
 import type { FC } from "react";
 import React from "react";
 
+import type { IconName } from "../..";
 import type { ButtonBaseProps } from "../button";
 import { Button } from "../button";
 import {
   Dropdown,
+  DropdownItem,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownItem,
   DropdownMenuPortal,
   DropdownMenuTrigger,
 } from "../form/dropdown";
-import { ChevronDown, MoreHorizontal } from "../icon";
 
 export type ActionType = {
   id: string;
-  icon?: IconType;
+  icon?: IconName;
   iconClassName?: string;
   label: string;
   disabled?: boolean;
@@ -47,7 +46,7 @@ export const DropdownActions = ({
     <Dropdown>
       {!actionTrigger ? (
         <DropdownMenuTrigger asChild>
-          <Button type="button" color="secondary" variant="icon" StartIcon={MoreHorizontal} />
+          <Button type="button" color="secondary" variant="icon" StartIcon="ellipsis" />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
@@ -87,7 +86,7 @@ export const TableActions: FC<Props> = ({ actions }) => {
               href={action.href}
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
-              {...(action?.actions ? { EndIcon: ChevronDown } : null)}
+              {...(action?.actions ? { EndIcon: "chevron-down" } : null)}
               disabled={action.disabled}
               data-bookingid={action.bookingId}
               color={action.color || "secondary"}>
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index c3cab8dc83..979fa83b9e 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import type { ToastOptions, Toast } from "react-hot-toast";
 import toast from "react-hot-toast";
 
-import { Check, Info } from "../icon";
+import { Icon } from "../..";
 
 type IToast = {
   message: string;
@@ -19,7 +19,7 @@ export const SuccessToast = ({ message, toastVisible, onClose, toastId }: IToast
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
-      <Check className="h-4 w-4" />
+      <Icon name="check" className="h-4 w-4" />
     </span>
     <p data-testid="toast-success" className="text-left">
       {message}
@@ -35,7 +35,7 @@ export const ErrorToast = ({ message, toastVisible, onClose, toastId }: IToast)
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
-      <Info className="h-4 w-4" />
+      <Icon name="info" className="h-4 w-4" />
     </span>
     <p data-testid="toast-error" className="text-left">
       {message}
@@ -51,7 +51,7 @@ export const WarningToast = ({ message, toastVisible, onClose, toastId }: IToast
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
-      <Info className="h-4 w-4" />
+      <Icon name="info" className="h-4 w-4" />
     </span>
     <p data-testid="toast-warning" className="text-left">
       {message}
@@ -67,7 +67,7 @@ export const DefaultToast = ({ message, toastVisible, onClose, toastId }: IToast
     )}
     onClick={() => onClose(toastId)}>
     <span className="mt-0.5">
-      <Check className="h-4 w-4" />
+      <Icon name="check" className="h-4 w-4" />
     </span>
     <p data-testid="toast-default" className="text-left">
       {message}
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index 2675b0748c..90e478cae8 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -1,12 +1,13 @@
 import classNames from "classnames";
-import type { ComponentType, ReactNode } from "react";
+import type { LucideProps } from "lucide-react";
+import type { ReactNode } from "react";
 
 import { TOP_BANNER_HEIGHT } from "@calcom/lib/constants";
-import type { LucideIcon, LucideProps } from "@calcom/ui/components/icon";
-import { AlertTriangle, Info } from "@calcom/ui/components/icon";
+
+import { Icon, type IconName } from "../..";
 
 export type TopBannerProps = {
-  Icon?: ComponentType<LucideProps> & LucideIcon;
+  icon?: IconName;
   text: string;
   variant?: keyof typeof variantClassName;
   actions?: ReactNode;
@@ -24,14 +25,14 @@ const defaultIconProps = {
 } as LucideProps;
 
 export function TopBanner(props: TopBannerProps) {
-  const { Icon, variant = "default", text, actions } = props;
+  const { icon, variant = "default", text, actions } = props;
 
   const renderDefaultIconByVariant = () => {
     switch (variant) {
       case "error":
-        return <AlertTriangle {...defaultIconProps} data-testid="variant-error" />;
+        return <Icon {...defaultIconProps} name="triangle-alert" data-testid="variant-error" />;
       case "warning":
-        return <Info {...defaultIconProps} data-testid="variant-warning" />;
+        return <Icon {...defaultIconProps} name="info" data-testid="variant-warning" />;
       default:
         return null;
     }
@@ -48,7 +49,7 @@ export function TopBanner(props: TopBannerProps) {
       )}>
       <div className="flex flex-1 flex-col items-start justify-center gap-2 px-1 py-0.5 lg:flex-row lg:items-center">
         <p className="text-emphasis flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 lg:flex-row lg:items-center">
-          {Icon ? <Icon data-testid="variant-default" {...defaultIconProps} /> : defaultIcon}
+          {icon ? <Icon {...defaultIconProps} name={icon} data-testid="variant-default" /> : defaultIcon}
           {text}
         </p>
         {actions && <div className="text-sm font-medium">{actions}</div>}
diff --git a/packages/ui/components/top-banner/topBanner.test.tsx b/packages/ui/components/top-banner/topBanner.test.tsx
index 64f92e84c7..b4b6cc4dda 100644
--- a/packages/ui/components/top-banner/topBanner.test.tsx
+++ b/packages/ui/components/top-banner/topBanner.test.tsx
@@ -1,7 +1,5 @@
 import { render, screen } from "@testing-library/react";
 
-import { ArrowDown } from "@calcom/ui/components/icon";
-
 import { TopBanner } from "./TopBanner";
 
 describe("Tests for TopBanner component", () => {
@@ -22,24 +20,24 @@ describe("Tests for TopBanner component", () => {
     expect(ctaElt).toBeInTheDocument();
   });
 
-  test("Should render the default variant", () => {
-    render(<TopBanner text="the banner test" Icon={ArrowDown} />);
+  test("Should render the default variant", async () => {
+    render(<TopBanner text="the banner test" icon="arrow-down" />);
 
-    const variant = screen.getByTestId("variant-default");
+    const variant = await screen.findByTestId("variant-default");
     expect(variant).toBeInTheDocument();
   });
 
-  test("Should render the alert variant", () => {
+  test("Should render the alert variant", async () => {
     render(<TopBanner text="the banner test" variant="error" />);
 
-    const variant = screen.getByTestId("variant-error");
+    const variant = await screen.findByTestId("variant-error");
     expect(variant).toBeInTheDocument();
   });
 
-  test("Should render the warning variant", () => {
+  test("Should render the warning variant", async () => {
     render(<TopBanner text="the banner test" variant="warning" />);
 
-    const variant = screen.getByTestId("variant-warning");
+    const variant = await screen.findByTestId("variant-warning");
     expect(variant).toBeInTheDocument();
   });
 });
diff --git a/packages/ui/form/AddressInput.tsx b/packages/ui/form/AddressInput.tsx
index 75ee6acf33..087a8c05a2 100644
--- a/packages/ui/form/AddressInput.tsx
+++ b/packages/ui/form/AddressInput.tsx
@@ -1,7 +1,7 @@
 import cx from "@calcom/lib/classNames";
 
+import { Icon } from "..";
 import { Input } from "../components/form";
-import { MapPin } from "../components/icon";
 
 export type AddressInputProps = {
   value: string;
@@ -15,7 +15,11 @@ export type AddressInputProps = {
 function AddressInput({ value, onChange, ...rest }: AddressInputProps) {
   return (
     <div className="relative flex items-center">
-      <MapPin className="text-muted absolute left-0.5 ml-3 h-4 w-4 -translate-y-1/2" style={{ top: "44%" }} />
+      <Icon
+        name="map-pin"
+        className="text-muted absolute left-0.5 ml-3 h-4 w-4 -translate-y-1/2"
+        style={{ top: "44%" }}
+      />
       <Input
         {...rest}
         value={value}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index fdd8e33adc..b7ba7fa86c 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -195,3 +195,5 @@ export {
 export { Popover, PopoverContent, PopoverTrigger } from "./components/popover";
 
 export { StorybookTrpcProvider } from "./components/mocks/trpc";
+export { default as Icon } from "./components/icon/Icon";
+export type { IconName } from "./components/icon/dynamicIconImports";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2112f4b918..7d4089f4ae 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -32,7 +32,6 @@
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-portal": "^1.0.0",
     "@radix-ui/react-select": "^0.1.1",
-    "@react-icons/all-files": "^4.1.0",
     "@storybook/blocks": "^7.6.3",
     "@storybook/react": "^7.6.3",
     "@tanstack/react-query": "^5.17.15",
@@ -42,14 +41,13 @@
     "cmdk": "^0.2.0",
     "cmk": "^0.1.1",
     "downshift": "^6.1.9",
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.364.0",
     "next": "^13.5.4",
     "next-seo": "^6.0.0",
     "react": "^18.2.0",
     "react-colorful": "^5.6.0",
     "react-feather": "^2.0.10",
     "react-hook-form": "^7.43.3",
-    "react-icons": "^4.4.0",
     "react-select": "^5.7.0",
     "react-virtual": "^2.10.4"
   },
diff --git a/yarn.lock b/yarn.lock
index 27aa49b818..d9de978e1c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4038,7 +4038,7 @@ __metadata:
     "@vitejs/plugin-react": ^2.2.0
     class-variance-authority: ^0.4.0
     clsx: ^2.0.0
-    lucide-react: ^0.363.0
+    lucide-react: ^0.364.0
     react-use: ^17.4.2
     rollup-plugin-node-builtins: ^2.1.2
     tailwind-merge: ^1.13.2
@@ -4219,7 +4219,7 @@ __metadata:
     swr: ^1.2.2
     tailwindcss: ^3.3.3
     typescript: ^4.9.4
-    zod: ^3.22.2
+    zod: ^3.22.4
   languageName: unknown
   linkType: soft
 
@@ -4941,6 +4941,7 @@ __metadata:
     axios: ^1.6.7
     axios-retry: ^4.0.0
     lodash: ^4.17.21
+    openapi-typescript: ^6.7.5
     release-it: ^17.1.1
     rollup: ^4.12.0
     rollup-plugin-bundle-size: ^1.0.3
@@ -5156,7 +5157,6 @@ __metadata:
     "@radix-ui/react-popover": ^1.0.2
     "@radix-ui/react-portal": ^1.0.0
     "@radix-ui/react-select": ^0.1.1
-    "@react-icons/all-files": ^4.1.0
     "@storybook/blocks": ^7.6.3
     "@storybook/react": ^7.6.3
     "@tanstack/react-query": ^5.17.15
@@ -5168,14 +5168,13 @@ __metadata:
     cmdk: ^0.2.0
     cmk: ^0.1.1
     downshift: ^6.1.9
-    lucide-react: ^0.363.0
+    lucide-react: ^0.364.0
     next: ^13.5.4
     next-seo: ^6.0.0
     react: ^18.2.0
     react-colorful: ^5.6.0
     react-feather: ^2.0.10
     react-hook-form: ^7.43.3
-    react-icons: ^4.4.0
     react-select: ^5.7.0
     react-virtual: ^2.10.4
     typescript: ^4.9.4
@@ -5446,9 +5445,9 @@ __metadata:
     i18n-unused: ^0.13.0
     iframe-resizer-react: ^1.1.0
     keen-slider: ^6.8.0
-    lucide-react: ^0.363.0
+    lucide-react: ^0.364.0
     micro: ^10.0.1
-    next: ^14.1
+    next: ^14.1.3
     next-auth: ^4.22.1
     next-axiom: ^0.17.0
     next-i18next: ^13.2.2
@@ -5461,7 +5460,7 @@ __metadata:
     react-datocms: ^3.1.0
     react-device-detect: ^2.2.2
     react-dom: ^18.2.0
-    react-fast-marquee: ^1.3.5
+    react-fast-marquee: ^1.6.4
     react-github-btn: ^1.4.0
     react-hook-form: ^7.43.3
     react-hot-toast: ^2.3.0
@@ -12549,15 +12548,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-icons/all-files@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "@react-icons/all-files@npm:4.1.0"
-  peerDependencies:
-    react: "*"
-  checksum: c34c644650a144e4f2157c20b3106200ac1f76b3132dcda1a40f061e000a34c78df188266395afae571d5c85bf48365824db7b1bf8b7ae6229fdc148c941ab85
-  languageName: node
-  linkType: hard
-
 "@redis/bloom@npm:1.2.0":
   version: 1.2.0
   resolution: "@redis/bloom@npm:1.2.0"
@@ -20073,7 +20063,6 @@ __metadata:
     jest-diff: ^29.5.0
     jsdom: ^22.0.0
     lint-staged: ^12.5.0
-    lucide-react: ^0.363.0
     mailhog: ^4.16.0
     next-router-mock: ^0.9.12
     node-ical: ^0.16.1
@@ -32846,12 +32835,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lucide-react@npm:^0.363.0":
-  version: 0.363.0
-  resolution: "lucide-react@npm:0.363.0"
+"lucide-react@npm:^0.364.0":
+  version: 0.364.0
+  resolution: "lucide-react@npm:0.364.0"
   peerDependencies:
     react: ^16.5.1 || ^17.0.0 || ^18.0.0
-  checksum: abe8fad469a2f14181eca6f3682403c5d53a4a354f333b0f7d3b575471d451c6f3fd36f59d96745a5a823e4cc55eeb2dcda70774a6fe438834ea3fb6fa5b75af
+  checksum: 954f6274df46ffa172130d9e60eb630a377435c7dbf0ddb5ceebf284602dde3b99755dcd5c0757e697ee734a32c808a3cd2c25ad88fec1d8f627a2317f00e3e6
   languageName: node
   linkType: hard
 
@@ -35245,7 +35234,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.1":
+"next@npm:^14.1.3":
   version: 14.1.4
   resolution: "next@npm:14.1.4"
   dependencies:
@@ -36334,6 +36323,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"openapi-typescript@npm:^6.7.5":
+  version: 6.7.5
+  resolution: "openapi-typescript@npm:6.7.5"
+  dependencies:
+    ansi-colors: ^4.1.3
+    fast-glob: ^3.3.2
+    js-yaml: ^4.1.0
+    supports-color: ^9.4.0
+    undici: ^5.28.2
+    yargs-parser: ^21.1.1
+  bin:
+    openapi-typescript: bin/cli.js
+  checksum: f404cf8e5cdc59a6773cfd9adfd3545159a2d59d7393f97d003d9f8be6a28e0a71cfbb502da66bdd7c38ec2ad92b5b570202aa243bda908fafe31ea130c9f976
+  languageName: node
+  linkType: hard
+
 "opener@npm:^1.5.2":
   version: 1.5.2
   resolution: "opener@npm:1.5.2"
@@ -39142,7 +39147,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-fast-marquee@npm:^1.3.5":
+"react-fast-marquee@npm:^1.6.4":
   version: 1.6.4
   resolution: "react-fast-marquee@npm:1.6.4"
   peerDependencies:
@@ -39227,15 +39232,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-icons@npm:^4.4.0":
-  version: 4.4.0
-  resolution: "react-icons@npm:4.4.0"
-  peerDependencies:
-    react: "*"
-  checksum: dd93a1dcc8ac8a3cf46a2b33e80b586fa967331fa5fcb90d061abf276155a8363a331643e203d67cb9bab4261d00a757da854bcce1fce2c6e4258bf3e33f711b
-  languageName: node
-  linkType: hard
-
 "react-immutable-proptypes@npm:2.2.0":
   version: 2.2.0
   resolution: "react-immutable-proptypes@npm:2.2.0"
@@ -43432,6 +43428,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:^9.4.0":
+  version: 9.4.0
+  resolution: "supports-color@npm:9.4.0"
+  checksum: cb8ff8daeaf1db642156f69a9aa545b6c01dd9c4def4f90a49f46cbf24be0c245d392fcf37acd119cd1819b99dad2cc9b7e3260813f64bcfd7f5b18b5a1eefb8
+  languageName: node
+  linkType: hard
+
 "supports-hyperlinks@npm:^2.0.0, supports-hyperlinks@npm:^2.2.0":
   version: 2.3.0
   resolution: "supports-hyperlinks@npm:2.3.0"
@@ -45395,6 +45398,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"undici@npm:^5.28.2":
+  version: 5.28.4
+  resolution: "undici@npm:5.28.4"
+  dependencies:
+    "@fastify/busboy": ^2.0.0
+  checksum: a8193132d84540e4dc1895ecc8dbaa176e8a49d26084d6fbe48a292e28397cd19ec5d13bc13e604484e76f94f6e334b2bdc740d5f06a6e50c44072818d0c19f9
+  languageName: node
+  linkType: hard
+
 "unicode-canonical-property-names-ecmascript@npm:^2.0.0":
   version: 2.0.0
   resolution: "unicode-canonical-property-names-ecmascript@npm:2.0.0"