From 91f381bce93679ce53bd03e4f519a26e139fd767 Mon Sep 17 00:00:00 2001
From: Abdallah Alsamman <sammanabdallah@gmail.com>
Date: Wed, 12 Apr 2023 18:26:31 +0300
Subject: [PATCH] Replace react icons with lucidedev (#8146)

* migrate from react-icons to lucide-react

* replace react-icon with lucide-dev: Webhook Icon

* add lucide transformer

* Fix LinkIcon import

* Update yarn.lock to include monorepo deps

* Migrated icons in ChargeCardDialog

* Port Storybook to new icons as well

* Adjust Info & Globe icons size to match react-icons size

---------

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/components/AddToHomescreen.tsx       |  4 +-
 apps/web/components/AppListCard.tsx           |  4 +-
 apps/web/components/Embed.tsx                 | 12 +--
 apps/web/components/SettingsShell.tsx         | 14 +--
 .../apps/AdditionalCalendarSelector.tsx       |  6 +-
 apps/web/components/apps/App.tsx              | 27 ++----
 .../components/apps/CalendarListContainer.tsx | 10 +-
 .../components/apps/layouts/AppsLayout.tsx    |  4 +-
 .../apps/layouts/InstalledAppsLayout.tsx      | 14 +--
 .../availability/SkeletonLoader.tsx           |  4 +-
 .../booking/AvailableEventLocations.tsx       |  4 +-
 .../components/booking/BookingDescription.tsx |  6 +-
 .../booking/BookingDescriptionPayment.tsx     |  4 +-
 .../components/booking/BookingListItem.tsx    | 29 ++----
 apps/web/components/booking/CancelBooking.tsx |  4 +-
 .../components/booking/TimezoneDropdown.tsx   |  4 +-
 .../booking/pages/AvailabilityPage.tsx        |  8 +-
 .../components/booking/pages/BookingPage.tsx  | 14 +--
 .../components/dialog/ChargeCardDialog.tsx    |  6 +-
 .../components/dialog/EditLocationDialog.tsx  |  4 +-
 .../components/dialog/RescheduleDialog.tsx    |  4 +-
 .../components/eventtype/AvailabilityTab.tsx  |  8 +-
 .../components/eventtype/EventAdvancedTab.tsx |  6 +-
 .../web/components/eventtype/EventAppsTab.tsx |  4 +-
 .../components/eventtype/EventLimitsTab.tsx   |  6 +-
 .../components/eventtype/EventSetupTab.tsx    | 10 +-
 .../eventtype/EventTeamWebhooksTab.tsx        |  6 +-
 .../eventtype/EventTypeSingleLayout.tsx       | 62 ++++++-------
 .../components/eventtype/SkeletonLoader.tsx   |  6 +-
 .../security/TwoFactorModalHeader.tsx         |  4 +-
 .../components/settings/CalendarSwitch.tsx    |  4 +-
 apps/web/components/setup/AdminUser.tsx       |  4 +-
 .../components/setup/EnterpriseLicense.tsx    |  8 +-
 apps/web/components/setup/StepDone.tsx        |  4 +-
 apps/web/components/ui/EditableHeading.tsx    |  4 +-
 apps/web/components/ui/InfoBadge.tsx          |  4 +-
 .../UsernameAvailability/PremiumTextfield.tsx |  8 +-
 .../UsernameTextfield.tsx                     |  6 +-
 apps/web/components/ui/form/CheckedSelect.tsx |  4 +-
 apps/web/components/ui/form/DatePicker.tsx    |  4 +-
 apps/web/next.config.js                       |  4 +-
 apps/web/pages/404.tsx                        | 24 ++---
 apps/web/pages/500.tsx                        |  4 +-
 apps/web/pages/[user].tsx                     |  6 +-
 apps/web/pages/apps/categories/index.tsx      |  6 +-
 apps/web/pages/apps/index.tsx                 |  4 +-
 apps/web/pages/apps/installed/[category].tsx  | 40 ++++----
 apps/web/pages/auth/error.tsx                 |  4 +-
 apps/web/pages/auth/login.tsx                 |  4 +-
 apps/web/pages/auth/logout.tsx                |  4 +-
 apps/web/pages/availability/[schedule].tsx    |  8 +-
 apps/web/pages/availability/index.tsx         |  4 +-
 apps/web/pages/booking/[uid].tsx              | 12 +--
 apps/web/pages/bookings/[status].tsx          |  4 +-
 apps/web/pages/event-types/index.tsx          | 62 ++++++-------
 apps/web/pages/insights/index.tsx             |  8 +-
 apps/web/pages/settings/billing/index.tsx     |  4 +-
 .../web/pages/settings/developer/api-keys.tsx |  6 +-
 .../pages/settings/my-account/appearance.tsx  |  2 +-
 .../pages/settings/my-account/calendars.tsx   |  8 +-
 .../settings/my-account/conferencing.tsx      | 10 +-
 .../web/pages/settings/my-account/profile.tsx |  8 +-
 apps/web/pages/team/[slug].tsx                |  4 +-
 apps/web/pages/teams/index.tsx                |  4 +-
 apps/web/pages/video/[uid].tsx                |  4 +-
 apps/web/pages/video/meeting-ended/[uid].tsx  |  8 +-
 .../pages/video/meeting-not-started/[uid].tsx |  8 +-
 apps/web/pages/video/no-meeting-found.tsx     |  6 +-
 package.json                                  |  1 +
 .../_components/OmniInstallAppButton.tsx      |  4 +-
 packages/app-store/_utils/getAppCategories.ts | 16 ++--
 .../app-store/closecom/pages/setup/index.tsx  |  4 +-
 packages/app-store/components.tsx             |  8 +-
 .../components/ExistingGoogleCal.tsx          |  8 +-
 .../rainbow/components/RainbowKit.tsx         |  8 +-
 .../routing-forms/components/FormActions.tsx  |  4 +-
 .../routing-forms/components/SingleForm.tsx   | 26 +++---
 .../react-awesome-query-builder/widgets.tsx   |  6 +-
 .../pages/form-edit/[...appPages].tsx         |  6 +-
 .../pages/forms/[...appPages].tsx             | 70 +++++++-------
 .../app-store/sendgrid/pages/setup/index.tsx  |  4 +-
 .../components/EventTypeAppCardInterface.tsx  |  6 +-
 .../pages/how-to-use/[...appPages].tsx        |  8 +-
 .../app-store/zapier/pages/setup/index.tsx    |  4 +-
 packages/features/apps/AdminAppsList.tsx      |  6 +-
 .../components/AppSetDefaultLinkDialog.tsx    |  4 +-
 .../apps/components/DisconnectIntegration.tsx |  8 +-
 .../components/DisconnectIntegrationModal.tsx |  4 +-
 packages/features/auth/SAMLLogin.tsx          |  4 +-
 .../bookings/components/PeopleFilter.tsx      |  4 +-
 .../bookings/components/TeamFilter.tsx        |  6 +-
 packages/features/calendars/DatePicker.tsx    |  4 +-
 .../components/heading/SchedulerHeading.tsx   |  6 +-
 .../api-keys/components/ApiKeyDialogForm.tsx  |  4 +-
 .../ee/api-keys/components/ApiKeyListItem.tsx |  8 +-
 .../ee/common/components/LicenseRequired.tsx  |  7 +-
 .../common/components/v2/LicenseRequired.tsx  |  4 +-
 .../ee/payments/components/PaymentPage.tsx    |  4 +-
 .../ee/sso/components/ConnectionInfo.tsx      |  8 +-
 .../ee/support/components/HelpMenuItem.tsx    |  6 +-
 .../ee/teams/components/AddNewTeamMembers.tsx |  8 +-
 .../teams/components/CreateANewTeamForm.tsx   |  4 +-
 .../ee/teams/components/MemberListItem.tsx    | 22 ++---
 .../teams/components/TeamInviteListItem.tsx   | 12 +--
 .../features/ee/teams/components/TeamList.tsx | 10 +-
 .../ee/teams/components/TeamListItem.tsx      | 44 ++++-----
 .../ee/teams/components/TeamsListing.tsx      | 14 +--
 .../ee/teams/pages/team-billing-view.tsx      |  4 +-
 .../ee/teams/pages/team-members-view.tsx      |  4 +-
 .../ee/teams/pages/team-profile-view.tsx      | 10 +-
 .../ee/video/ViewRecordingsDialog.tsx         |  4 +-
 .../components/UpgradeRecordingBanner.tsx     |  4 +-
 .../ee/workflows/components/EmptyScreen.tsx   | 20 ++--
 .../components/EventWorkflowsTab.tsx          |  6 +-
 .../components/SkeletonLoaderList.tsx         |  6 +-
 .../components/TimeTimeUnitInput.tsx          |  6 +-
 .../components/WorkflowDetailsPage.tsx        |  6 +-
 .../workflows/components/WorkflowListPage.tsx | 21 ++---
 .../components/WorkflowStepContainer.tsx      | 10 +-
 .../ee/workflows/lib/getActionIcon.tsx        | 27 ++----
 .../components/CheckedTeamSelect.tsx          |  4 +-
 .../components/EventTypeDescription.tsx       | 26 ++----
 .../components/MultiDropdownSelect.tsx        |  4 +-
 .../flags/pages/flag-listing-view.tsx         |  4 +-
 packages/features/form-builder/Components.tsx |  8 +-
 .../features/form-builder/FormBuilder.tsx     | 21 ++---
 .../features/insights/filters/FilterType.tsx  |  4 +-
 packages/features/insights/filters/index.tsx  |  4 +-
 packages/features/kbar/Kbar.tsx               | 14 +--
 .../schedules/components/DateOverrideList.tsx |  6 +-
 .../components/NewScheduleButton.tsx          |  4 +-
 .../schedules/components/Schedule.tsx         |  8 +-
 .../schedules/components/ScheduleListItem.tsx | 10 +-
 .../settings/layouts/SettingsLayout.tsx       | 46 +++++-----
 packages/features/shell/Shell.tsx             | 92 +++++++++----------
 .../webhooks/components/WebhookListItem.tsx   | 12 +--
 .../components/WebhookTestDisclosure.tsx      |  4 +-
 .../features/webhooks/pages/webhooks-view.tsx |  6 +-
 packages/ui/components/alert/Alert.tsx        |  4 +-
 packages/ui/components/apps/AllApps.tsx       |  8 +-
 packages/ui/components/apps/AppCard.tsx       |  6 +-
 packages/ui/components/apps/Categories.tsx    |  4 +-
 packages/ui/components/apps/Slider.tsx        |  6 +-
 packages/ui/components/avatar/Avatar.tsx      |  4 +-
 .../ui/components/badge/badge.stories.mdx     | 12 +--
 packages/ui/components/button/Button.tsx      |  6 +-
 .../ui/components/button/button.stories.mdx   | 22 ++---
 .../buttonGroup/buttongroup.stories.mdx       | 44 ++++-----
 packages/ui/components/card/Card.tsx          |  4 +-
 packages/ui/components/card/FormCard.tsx      |  8 +-
 .../components/createButton/CreateButton.tsx  |  6 +-
 .../dialog/ConfirmationDialogContent.tsx      |  8 +-
 .../editor/plugins/AddVariablesDropdown.tsx   |  6 +-
 .../editor/plugins/ToolbarPlugin.tsx          | 10 +-
 .../components/empty-screen/EmptyScreen.tsx   |  2 +-
 .../empty-screen/empty-screen.stories.mdx     |  4 +-
 .../date-range-picker/DateRangePicker.tsx     | 10 +-
 .../components/form/datepicker/DatePicker.tsx |  4 +-
 .../components/form/inputs/HintOrErrors.tsx   | 14 +--
 packages/ui/components/form/inputs/Input.tsx  |  8 +-
 .../ui/components/form/select/components.tsx  |  4 +-
 .../components/form/select/select.stories.mdx |  4 +-
 .../form/selectimproved/components/Item.tsx   | 10 +-
 .../selectimproved/components/SearchInput.tsx |  4 +-
 .../form/selectimproved/components/Select.tsx |  8 +-
 .../selectimproved/selectimproved.stories.mdx |  1 -
 packages/ui/components/icon/Icon.tsx          |  6 +-
 .../ui/components/layout/spacing.stories.mdx  |  1 -
 .../navigation/tabs/VerticalTabItem.tsx       |  6 +-
 .../ui/components/popover/AnimatedPopover.tsx |  4 +-
 .../popover/MeetingTimeInTimezones.tsx        |  4 +-
 packages/ui/components/table/TableActions.tsx |  8 +-
 packages/ui/components/toast/showToast.tsx    | 10 +-
 .../ui/components/top-banner/TopBanner.tsx    |  6 +-
 packages/ui/form/AddressInput.tsx             |  4 +-
 yarn.lock                                     | 10 ++
 176 files changed, 830 insertions(+), 867 deletions(-)

diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index 6da459d589..1872c9c935 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 { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 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>
-                <FiX className="text-inverted h-6 w-6" aria-hidden="true" />
+                <X className="text-inverted h-6 w-6" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/apps/web/components/AppListCard.tsx b/apps/web/components/AppListCard.tsx
index b1d9eebb48..5d73bc6d2a 100644
--- a/apps/web/components/AppListCard.tsx
+++ b/apps/web/components/AppListCard.tsx
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
 
@@ -77,7 +77,7 @@ export default function AppListCard(props: AppListCardProps) {
           <ListItemText component="p">{description}</ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <FiAlertCircle className="h-8 w-8 text-red-500 sm:h-4 sm:w-4" />
+              <AlertCircle 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/Embed.tsx b/apps/web/components/Embed.tsx
index c8dea57ce6..72add48117 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -22,7 +22,7 @@ import {
   TextField,
   ColorPicker,
 } from "@calcom/ui";
-import { FiCode, FiTrello, FiSun, FiArrowLeft } from "@calcom/ui/components/icon";
+import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -493,7 +493,7 @@ const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -546,7 +546,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: FiCode,
+    icon: Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -586,7 +586,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: FiTrello,
+    icon: Trello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -622,7 +622,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <FiSun className="text-subtle ml-2 h-4 w-4" />
+      <Sun className="text-subtle ml-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -830,7 +830,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
-              <FiArrowLeft className="mr-4 w-4" />
+              <ArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
diff --git a/apps/web/components/SettingsShell.tsx b/apps/web/components/SettingsShell.tsx
index 7d02a0111c..0dfb97d090 100644
--- a/apps/web/components/SettingsShell.tsx
+++ b/apps/web/components/SettingsShell.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { ErrorBoundary } from "@calcom/ui";
-import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
+import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
 
 import NavTabs from "./NavTabs";
 
@@ -11,32 +11,32 @@ const tabs = [
   {
     name: "profile",
     href: "/settings/my-account/profile",
-    icon: FiUser,
+    icon: User,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: FiUsers,
+    icon: Users,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: FiKey,
+    icon: Key,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: FiTerminal,
+    icon: Terminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: FiCreditCard,
+    icon: CreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: FiLock,
+    icon: Lock,
     adminRequired: true,
   },
 ];
diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
index 31794ced78..762d4cde93 100644
--- a/apps/web/components/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -9,7 +9,7 @@ import {
   DropdownMenuItem,
   DropdownItem,
 } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -40,7 +40,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={FiPlus} color="secondary" {...(isLoading && { loading: isLoading })}>
+              <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>
@@ -48,7 +48,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               {options.map((data) => (
                 <DropdownMenuItem key={data.slug} className="focus:outline-none">
                   {data.slug === "add-new" ? (
-                    <DropdownItem StartIcon={FiPlus} 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/App.tsx b/apps/web/components/apps/App.tsx
index fef4db9ff2..ccc379a3ea 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -14,16 +14,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App as AppType } from "@calcom/types/App";
 import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
-import {
-  FiBookOpen,
-  FiCheck,
-  FiExternalLink,
-  FiFile,
-  FiFlag,
-  FiMail,
-  FiPlus,
-  FiShield,
-} from "@calcom/ui/components/icon";
+import { BookOpen, Check, ExternalLink, File, Flag, Mail, Plus, Shield } from "@calcom/ui/components/icon";
 
 /* These app slugs all require Google Cal to be installed */
 
@@ -153,7 +144,7 @@ const Component = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={FiCheck} color="secondary" disabled>
+              <Button StartIcon={Check} color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -175,7 +166,7 @@ const Component = ({
                     }
                     return (
                       <Button
-                        StartIcon={FiPlus}
+                        StartIcon={Plus}
                         {...props}
                         // @TODO: Overriding color and size prevent us from
                         // having to duplicate InstallAppButton for now.
@@ -275,7 +266,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis text-sm font-normal no-underline hover:underline"
                 href={docs}>
-                <FiBookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
+                <BookOpen className="text-subtle mr-1 -mt-1 inline h-4 w-4" />
                 {t("documentation")}
               </a>
             </li>
@@ -287,7 +278,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={website}>
-                <FiExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <ExternalLink className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -299,7 +290,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={"mailto:" + email}>
-                <FiMail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Mail className="text-subtle mr-1 -mt-px inline h-4 w-4" />
 
                 {email}
               </a>
@@ -312,7 +303,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={tos}>
-                <FiFile className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <File className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -324,7 +315,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-emphasis font-normal no-underline hover:underline"
                 href={privacy}>
-                <FiShield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
+                <Shield className="text-subtle mr-1 -mt-px inline h-4 w-4" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -335,7 +326,7 @@ const Component = ({
           {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}`}>
-          <FiFlag className="inline h-3 w-3" /> {t("report_app")}
+          <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 03488e1a0f..8b1bb84dd9 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -17,7 +17,7 @@ import {
   Switch,
   ShellSubHeading,
 } from "@calcom/ui";
-import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
+import { ArrowLeft, Calendar, Plus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -100,7 +100,7 @@ function CalendarSwitch(props: {
       />
       {!!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">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
       )}
@@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <div className="bg-muted border-subtle flex justify-between rounded-md border p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                         <div className="bg-default border-subtle relative rounded-md border p-1.5">
-                          <FiCalendar className="text-default h-8 w-8" strokeWidth="1" />
-                          <FiPlus
+                          <Calendar className="text-default h-8 w-8" strokeWidth="1" />
+                          <Plus
                             className="text-emphasis absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2"
                             strokeWidth="4"
                           />
@@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={FiCalendar}
+                Icon={Calendar}
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}
diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index 737aa990a7..36fe812814 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -6,7 +6,7 @@ import React from "react";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -27,7 +27,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={FiAlertCircle}
+              Icon={AlertCircle}
               headline={t("no_apps")}
               description={session.data?.user.role === "ADMIN" ? "You can enable apps in the settings" : ""}
               buttonText={session.data?.user.role === "ADMIN" ? t("apps_settings") : ""}
diff --git a/apps/web/components/apps/layouts/InstalledAppsLayout.tsx b/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
index 42481f299d..1c00655b61 100644
--- a/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
+++ b/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
@@ -6,38 +6,38 @@ import type { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
-import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
+import { BarChart, Calendar, CreditCard, Grid, Share2, Video } from "@calcom/ui/components/icon";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
     name: "calendar",
     href: "/apps/installed/calendar",
-    icon: FiCalendar,
+    icon: Calendar,
   },
   {
     name: "conferencing",
     href: "/apps/installed/conferencing",
-    icon: FiVideo,
+    icon: Video,
   },
   {
     name: "payment",
     href: "/apps/installed/payment",
-    icon: FiCreditCard,
+    icon: CreditCard,
   },
   {
     name: "automation",
     href: "/apps/installed/automation",
-    icon: FiShare2,
+    icon: Share2,
   },
   {
     name: "analytics",
     href: "/apps/installed/analytics",
-    icon: FiBarChart,
+    icon: BarChart,
   },
   {
     name: "other",
     href: "/apps/installed/other",
-    icon: FiGrid,
+    icon: Grid,
   },
 ];
 
diff --git a/apps/web/components/availability/SkeletonLoader.tsx b/apps/web/components/availability/SkeletonLoader.tsx
index 7e613ade56..4e39a92116 100644
--- a/apps/web/components/availability/SkeletonLoader.tsx
+++ b/apps/web/components/availability/SkeletonLoader.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { Button, SkeletonText } from "@calcom/ui";
-import { FiMoreHorizontal } from "@calcom/ui/components/icon";
+import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -31,7 +31,7 @@ function SkeletonItem() {
           type="button"
           variant="icon"
           color="secondary"
-          StartIcon={FiMoreHorizontal}
+          StartIcon={MoreHorizontal}
           disabled
         />
       </div>
diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 0474a3d952..3210e92281 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -4,7 +4,7 @@ import { getEventLocationType, locationKeyToString } from "@calcom/app-store/loc
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Tooltip } from "@calcom/ui";
-import { FiLink } from "@calcom/ui/components/icon";
+import { Link } from "@calcom/ui/components/icon";
 
 import type { Props } from "./pages/AvailabilityPage";
 
@@ -41,7 +41,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
     return (
       <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
         {eventLocationType.iconUrl === "/link.svg" ? (
-          <FiLink className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
+          <Link className="text-default min-h-4 min-w-4 ml-[2px] opacity-70 ltr:mr-[10px] rtl:ml-[10px] " />
         ) : (
           <img
             src={eventLocationType.iconUrl}
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 8e4aa8b6c9..4b421f3119 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -6,7 +6,7 @@ import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
-import { FiCheckSquare, FiClock } from "@calcom/ui/components/icon";
+import { CheckSquare, Clock } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -103,7 +103,7 @@ const BookingDescription: FC<Props> = (props) => {
         {requiresConfirmation && (
           <div className={classNames("items-top flex", isBookingPage && "text-default text-sm font-medium")}>
             <div>
-              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+              <CheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
             {requiresConfirmationText}
           </div>
@@ -117,7 +117,7 @@ const BookingDescription: FC<Props> = (props) => {
             isBookingPage && "text-default",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
-          <FiClock
+          <Clock
             className={classNames(
               "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
               isBookingPage && "mt-[2px]"
diff --git a/apps/web/components/booking/BookingDescriptionPayment.tsx b/apps/web/components/booking/BookingDescriptionPayment.tsx
index 9904c2b6c3..9fe9478c15 100644
--- a/apps/web/components/booking/BookingDescriptionPayment.tsx
+++ b/apps/web/components/booking/BookingDescriptionPayment.tsx
@@ -2,7 +2,7 @@ import type { TFunction } from "next-i18next";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
 import getPaymentAppData from "@calcom/lib/getPaymentAppData";
-import { FiCreditCard } from "@calcom/ui/components/icon";
+import { CreditCard } from "@calcom/ui/components/icon";
 
 const BookingDescriptionPayment = (props: {
   eventType: Parameters<typeof getPaymentAppData>[0];
@@ -13,7 +13,7 @@ const BookingDescriptionPayment = (props: {
 
   return (
     <p className="text-bookinglight -ml-2 px-2 text-sm ">
-      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+      <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
       {paymentAppData.paymentOption === "HOLD" ? (
         <>
           {props.t("no_show_fee_amount", {
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index 3d98abb1fe..c8773abb61 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -28,16 +28,7 @@ import {
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
-import {
-  FiCheck,
-  FiClock,
-  FiMapPin,
-  FiRefreshCcw,
-  FiSend,
-  FiSlash,
-  FiX,
-  FiCreditCard,
-} from "@calcom/ui/components/icon";
+import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -125,7 +116,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: FiSlash,
+      icon: Slash,
       disabled: mutation.isLoading,
     },
     // For bookings with payment, only confirm if the booking is paid for
@@ -137,7 +128,7 @@ function BookingListItem(booking: BookingItemProps) {
             onClick: () => {
               bookingConfirm(true);
             },
-            icon: FiCheck,
+            icon: Check,
             disabled: mutation.isLoading,
           },
         ]
@@ -165,7 +156,7 @@ function BookingListItem(booking: BookingItemProps) {
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }${booking.seatsReferences.length ? `&seatReferenceUid=${getSeatReferenceUid()}` : ""}
       `,
-      icon: FiX,
+      icon: X,
     },
     {
       id: "edit_booking",
@@ -173,7 +164,7 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: FiClock,
+          icon: Clock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}${
             booking.seatsReferences.length ? `?seatReferenceUid=${getSeatReferenceUid()}` : ""
@@ -181,7 +172,7 @@ function BookingListItem(booking: BookingItemProps) {
         },
         {
           id: "reschedule_request",
-          icon: FiSend,
+          icon: Send,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -194,7 +185,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: FiMapPin,
+          icon: MapPin,
         },
       ],
     },
@@ -208,7 +199,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setChargeCardDialogIsOpen(true);
       },
-      icon: FiCreditCard,
+      icon: CreditCard,
     },
   ];
 
@@ -222,7 +213,7 @@ function BookingListItem(booking: BookingItemProps) {
 
   const RequestSentMessage = () => {
     return (
-      <Badge startIcon={FiSend} 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>
     );
@@ -518,7 +509,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 );
               })}>
               <div className="text-default">
-                <FiRefreshCcw
+                <RefreshCcw
                   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 e9a402d433..eff581bde9 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -6,7 +6,7 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
 import { Button, TextArea } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 type Props = {
   booking: {
@@ -48,7 +48,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">
-            <FiX className="h-6 w-6 text-red-600" />
+            <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/booking/TimezoneDropdown.tsx b/apps/web/components/booking/TimezoneDropdown.tsx
index 3cc09ef1a2..8766c3530d 100644
--- a/apps/web/components/booking/TimezoneDropdown.tsx
+++ b/apps/web/components/booking/TimezoneDropdown.tsx
@@ -1,4 +1,4 @@
-import { FiGlobe } from "@calcom/ui/components/icon";
+import { Globe } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -18,7 +18,7 @@ export function TimezoneDropdown({
   return (
     <>
       <div className="dark:focus-within:bg-darkgray-200 dark:bg-darkgray-100 dark:hover:bg-darkgray-200 !mt-3 flex w-full max-w-[20rem] items-center rounded-[4px] px-1 text-sm font-medium focus-within:bg-gray-200 hover:bg-gray-100 lg:max-w-[12rem] [&_p]:focus-within:text-gray-900 dark:[&_p]:focus-within:text-white [&_svg]:focus-within:text-gray-900 dark:[&_svg]:focus-within:text-white">
-        <FiGlobe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
+        <Globe className="dark:text-darkgray-600 flex h-4 w-4 text-gray-600 ltr:mr-2 rtl:ml-2" />
         <TimeOptions onSelectTimeZone={handleSelectTimeZone} />
       </div>
     </>
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index f0f5170a39..40bb48330e 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -25,7 +25,7 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc";
 import { HeadSeo, useCalcomTheme } from "@calcom/ui";
-import { FiCreditCard, FiUser, FiRefreshCcw } from "@calcom/ui/components/icon";
+import { CreditCard, User, RefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 
@@ -210,7 +210,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                             " text-default",
                             "ltr:mr-[10px] rtl:ml-[10px]"
                           )}>
-                          <FiUser
+                          <User
                             className={classNames(
                               "min-h-4 min-w-4 ml-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]",
                               "mt-[2px]"
@@ -221,7 +221,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="flex items-start text-sm font-medium">
-                          <FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+                          <RefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
                           <div>
                             <p className="mb-1 -ml-2 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -246,7 +246,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {paymentAppData.price > 0 && (
                         <p className="-ml-2 px-2 text-sm font-medium">
-                          <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                          <CreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                           {paymentAppData.paymentOption === "HOLD" ? (
                             <>
                               {t("no_show_fee_amount", {
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 3a04588e09..81bca90535 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -42,7 +42,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
 import { Button, Form, Tooltip, useCalcomTheme } from "@calcom/ui";
-import { FiAlertTriangle, FiCalendar, FiRefreshCw, FiUser } from "@calcom/ui/components/icon";
+import { AlertTriangle, Calendar, RefreshCw, User } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -537,8 +537,8 @@ const BookingPage = ({
                 <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                   <BookingDescriptionPayment eventType={eventType} t={t} />
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
-                    <div className="text-default items-start text-sm font-medium">
-                      <FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <div className="dark:text-inverted text-default items-start text-sm font-medium">
+                      <RefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                       <p className="-ml-2 inline-block items-center px-2">
                         {getEveryFreqFor({
                           t,
@@ -549,7 +549,7 @@ const BookingPage = ({
                     </div>
                   )}
                   <div className="text-bookinghighlight flex items-start text-sm">
-                    <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <Calendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                     <div className="text-sm font-medium">
                       {isClientTimezoneAvailable &&
                         (rescheduleUid || !eventType.recurringEvent?.freq) &&
@@ -580,7 +580,7 @@ const BookingPage = ({
                         {t("former_time")}
                       </p>
                       <p className="line-through ">
-                        <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                        <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {isClientTimezoneAvailable &&
                           typeof booking.startTime === "string" &&
                           parseDate(dayjs(booking.startTime), i18n, timeFormat)}
@@ -589,7 +589,7 @@ const BookingPage = ({
                   )}
                   {!!eventType.seatsPerTimeSlot && (
                     <div className="text-bookinghighlight flex items-start text-sm">
-                      <FiUser
+                      <User
                         className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
                           currentSlotBooking &&
                           currentSlotBooking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
@@ -672,7 +672,7 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-blue-400 bg-blue-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <FiAlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
+          <AlertTriangle className="h-5 w-5 text-blue-400" aria-hidden="true" />
         </div>
         <div className="ms-3">
           <p className="text-sm text-blue-700">
diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 331b887ab8..e2c6a06c89 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -14,7 +14,7 @@ import {
   DialogHeader,
   showToast,
 } from "@calcom/ui";
-import { FiCreditCard, FiAlertTriangle } from "@calcom/ui/components/icon";
+import { CreditCard, AlertTriangle } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -45,7 +45,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <FiCreditCard className="m-auto h-6 w-6" />
+            <CreditCard className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("charge_card")} />
@@ -65,7 +65,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
 
             {chargeError && (
               <div className="mt-4 flex text-red-500">
-                <FiAlertTriangle className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <AlertTriangle 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 f3ff204fd7..158e416051 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -19,7 +19,7 @@ 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 { FiMapPin } from "@calcom/ui/components/icon";
+import { MapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -218,7 +218,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">
-            <FiMapPin className="text-emphasis h-6 w-6" />
+            <MapPin 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 bdb6e9368c..a765bab23f 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -13,7 +13,7 @@ import {
   showToast,
   TextArea,
 } from "@calcom/ui";
-import { FiClock } from "@calcom/ui/components/icon";
+import { Clock } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -44,7 +44,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <FiClock className="m-auto h-6 w-6" />
+            <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/AvailabilityTab.tsx b/apps/web/components/eventtype/AvailabilityTab.tsx
index b337f42594..1dbab062b1 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -12,7 +12,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Badge, Button, Select, SettingsToggle, SkeletonText, EmptyScreen } from "@calcom/ui";
-import { FiExternalLink, FiGlobe, FiClock } from "@calcom/ui/components/icon";
+import { ExternalLink, Globe, Clock } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -157,7 +157,7 @@ const EventTypeScheduleDetails = () => {
       <hr className="border-subtle" />
       <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
         <span className="text-default flex items-center justify-center text-sm sm:justify-start">
-          <FiGlobe className="ltr:mr-2 rtl:ml-2" />
+          <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 && (
@@ -165,7 +165,7 @@ const EventTypeScheduleDetails = () => {
             href={`/availability/${schedule.id}`}
             disabled={isLoading}
             color="minimal"
-            EndIcon={FiExternalLink}
+            EndIcon={ExternalLink}
             target="_blank"
             rel="noopener noreferrer">
             {t("edit_availability")}
@@ -183,7 +183,7 @@ const EventTypeSchedule = () => {
   if (!schedules?.schedules.length && !isLoading)
     return (
       <EmptyScreen
-        Icon={FiClock}
+        Icon={Clock}
         headline={t("new_schedule_heading")}
         description={t("new_schedule_description")}
         buttonRaw={<NewScheduleButton fromEventType />}
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index d94780d658..1e74f0bdf3 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -17,7 +17,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Prisma } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Checkbox, Label, SettingsToggle, showToast, TextField, Tooltip, Alert } from "@calcom/ui";
-import { FiEdit, FiCopy } from "@calcom/ui/components/icon";
+import { Edit, Copy } from "@calcom/ui/components/icon";
 
 import RequiresConfirmationController from "./RequiresConfirmationController";
 
@@ -134,7 +134,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           addOnSuffix={
             <Button
               type="button"
-              StartIcon={FiEdit}
+              StartIcon={Edit}
               variant="icon"
               color="minimal"
               className="hover:stroke-3 hover:text-emphasis min-w-fit px-0 hover:bg-transparent"
@@ -250,7 +250,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   }}
                   className="hover:stroke-3 hover:text-emphasis hover:bg-transparent"
                   type="button">
-                  <FiCopy />
+                  <Copy />
                 </Button>
               </Tooltip>
             }
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index c279585322..2c7064c3c9 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -8,7 +8,7 @@ import type { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen } from "@calcom/ui";
-import { FiGrid } from "@calcom/ui/components/icon";
+import { Grid } from "@calcom/ui/components/icon";
 
 export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
@@ -61,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         <div className="before:border-0">
           {!isLoading && !installedApps?.length ? (
             <EmptyScreen
-              Icon={FiGrid}
+              Icon={Grid}
               headline={t("empty_installed_apps_headline")}
               description={t("empty_installed_apps_description")}
               buttonRaw={
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index f861ce34ce..4b085c91d7 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -24,7 +24,7 @@ import {
   SettingsToggle,
   TextField,
 } from "@calcom/ui";
-import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Plus, Trash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
   HTMLInputElement,
@@ -439,7 +439,7 @@ const IntervalLimitItem = ({
         onChange={onIntervalSelect}
       />
       {hasDeleteButton && (
-        <Button variant="icon" StartIcon={FiTrash} color="destructive" onClick={() => onDelete(limitKey)} />
+        <Button variant="icon" StartIcon={Trash} color="destructive" onClick={() => onDelete(limitKey)} />
       )}
     </div>
   );
@@ -537,7 +537,7 @@ const IntervalLimitsManager = <K extends "durationLimits" | "bookingLimits">({
                   );
                 })}
             {currentIntervalLimits && Object.keys(currentIntervalLimits).length <= 3 && (
-              <Button color="minimal" StartIcon={FiPlus} 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 94025115e8..b7c7996dd3 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -27,7 +27,7 @@ import {
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
-import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
+import { Edit2, Check, X, Plus } from "@calcom/ui/components/icon";
 
 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
 import type { SingleValueLocationOption, LocationOption } from "@components/ui/form/LocationSelect";
@@ -253,10 +253,10 @@ export const EventSetupTab = (
                         }}
                         aria-label={t("edit")}
                         className="hover:text-emphasis text-subtle mr-1 p-1">
-                        <FiEdit2 className="h-4 w-4" />
+                        <Edit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <FiX className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
+                        <X className="border-l-1 hover:text-emphasis text-subtle h-6 w-6 pl-1 " />
                       </button>
                     </div>
                   </div>
@@ -268,7 +268,7 @@ export const EventSetupTab = (
                 location.type === MeetLocationType && destinationCalendar?.integration !== "google_calendar"
             ) && (
               <div className="text-default flex text-sm">
-                <FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <Check className="mt-0.5 mr-1.5 h-2 w-2.5" />
                 <Trans i18nKey="event_type_requres_google_cal">
                   <p>
                     The “Add to calendar” for this event type needs to be a Google Calendar for Meet to work.
@@ -286,7 +286,7 @@ export const EventSetupTab = (
               <li>
                 <Button
                   data-testid="add-location"
-                  StartIcon={FiPlus}
+                  StartIcon={Plus}
                   color="minimal"
                   onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
diff --git a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
index 4a293c4745..c9f1c518d6 100644
--- a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
+++ b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
@@ -1,6 +1,6 @@
+import { Webhook as TbWebhook } from "lucide-react";
 import type { EventTypeSetupProps } from "pages/event-types/[type]";
 import { useState } from "react";
-import { TbWebhook } from "react-icons/tb";
 
 import { WebhookForm } from "@calcom/features/webhooks/components";
 import type { WebhookFormSubmitData } from "@calcom/features/webhooks/components/WebhookForm";
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 export const EventTeamWebhooksTab = ({
   eventType,
@@ -85,7 +85,7 @@ export const EventTeamWebhooksTab = ({
       <Button
         color="secondary"
         data-testid="new_webhook"
-        StartIcon={FiPlus}
+        StartIcon={Plus}
         onClick={() => setCreateModalOpen(true)}>
         {t("new_webhook")}
       </Button>
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 9c2146a02e..e9c8fefc53 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -1,9 +1,9 @@
+import { Webhook as TbWebhook } from "lucide-react";
 import type { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import type { EventTypeSetupProps, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
-import { TbWebhook } from "react-icons/tb";
 
 import Shell from "@calcom/features/shell/Shell";
 import { classNames } from "@calcom/lib";
@@ -32,19 +32,19 @@ import {
   VerticalTabs,
 } from "@calcom/ui";
 import {
-  FiLink,
-  FiCalendar,
-  FiClock,
-  FiSliders,
-  FiRepeat,
-  FiGrid,
-  FiZap,
-  FiUsers,
-  FiExternalLink,
-  FiCode,
-  FiTrash,
-  FiMoreHorizontal,
-  FiLoader,
+  Link as LinkIcon,
+  Calendar,
+  Clock,
+  Sliders,
+  Repeat,
+  Grid,
+  Zap,
+  Users,
+  ExternalLink,
+  Code,
+  Trash,
+  MoreHorizontal,
+  Loader,
 } from "@calcom/ui/components/icon";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
@@ -77,44 +77,44 @@ function getNavigation(props: {
     {
       name: "event_setup_tab_title",
       href: `/event-types/${eventType.id}?tabName=setup`,
-      icon: FiLink,
+      icon: LinkIcon,
       info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
     },
     {
       name: "availability",
       href: `/event-types/${eventType.id}?tabName=availability`,
-      icon: FiCalendar,
+      icon: Calendar,
       info: `default_schedule_name`, // TODO: Get this from props
     },
     {
       name: "event_limit_tab_title",
       href: `/event-types/${eventType.id}?tabName=limits`,
-      icon: FiClock,
+      icon: Clock,
       info: `event_limit_tab_description`,
     },
     {
       name: "event_advanced_tab_title",
       href: `/event-types/${eventType.id}?tabName=advanced`,
-      icon: FiSliders,
+      icon: Sliders,
       info: `event_advanced_tab_description`,
     },
     {
       name: "recurring",
       href: `/event-types/${eventType.id}?tabName=recurring`,
-      icon: FiRepeat,
+      icon: Repeat,
       info: `recurring_event_tab_description`,
     },
     {
       name: "apps",
       href: `/event-types/${eventType.id}?tabName=apps`,
-      icon: FiGrid,
+      icon: Grid,
       //TODO: Handle proper translation with count handling
       info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
     },
     {
       name: "workflows",
       href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: FiZap,
+      icon: Zap,
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
   ];
@@ -171,7 +171,7 @@ function EventTypeSingleLayout({
       navigation.splice(2, 0, {
         name: "assignment",
         href: `/event-types/${eventType.id}?tabName=team`,
-        icon: FiUsers,
+        icon: Users,
         info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
       });
       navigation.push({
@@ -225,14 +225,14 @@ function EventTypeSingleLayout({
                 variant="icon"
                 href={permalink}
                 rel="noreferrer"
-                StartIcon={FiExternalLink}
+                StartIcon={ExternalLink}
               />
             </Tooltip>
 
             <Button
               color="secondary"
               variant="icon"
-              StartIcon={FiLink}
+              StartIcon={LinkIcon}
               tooltip={t("copy_link")}
               onClick={() => {
                 navigator.clipboard.writeText(permalink);
@@ -241,7 +241,7 @@ function EventTypeSingleLayout({
             />
             <EmbedButton
               embedUrl={encodeURIComponent(embedLink)}
-              StartIcon={FiCode}
+              StartIcon={Code}
               color="secondary"
               variant="icon"
               tooltip={t("embed")}
@@ -249,7 +249,7 @@ function EventTypeSingleLayout({
             <Button
               color="destructive"
               variant="icon"
-              StartIcon={FiTrash}
+              StartIcon={Trash}
               tooltip={t("delete")}
               disabled={!hasPermsToDelete}
               onClick={() => setDeleteDialogOpen(true)}
@@ -260,14 +260,14 @@ function EventTypeSingleLayout({
 
           <Dropdown>
             <DropdownMenuTrigger asChild>
-              <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+              <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent style={{ minWidth: "200px" }}>
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   target="_blank"
                   type="button"
-                  StartIcon={FiExternalLink}
+                  StartIcon={ExternalLink}
                   href={permalink}
                   rel="noreferrer">
                   {t("preview")}
@@ -276,7 +276,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-muted">
                 <DropdownItem
                   type="button"
-                  StartIcon={FiLink}
+                  StartIcon={LinkIcon}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -288,7 +288,7 @@ function EventTypeSingleLayout({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={FiTrash}
+                  StartIcon={Trash}
                   disabled={!hasPermsToDelete}
                   onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
@@ -323,7 +323,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <Suspense fallback={<FiLoader />}>
+      <Suspense fallback={<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/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index 8271801d49..8f866014c5 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 { FiClock, FiUser } from "@calcom/ui/components/icon";
+import { Clock, User } from "@calcom/ui/components/icon";
 
 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">
-              <FiClock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <Clock className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <FiUser className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
+              <User className="text-subtle mt-0.5 mr-1.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 4a0dc65ff7..f0b4ed73d9 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -1,10 +1,10 @@
-import { FiShield } from "@calcom/ui/components/icon";
+import { Shield } from "@calcom/ui/components/icon";
 
 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">
-        <FiShield className="text-inverted h-6 w-6" />
+        <Shield className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 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/CalendarSwitch.tsx b/apps/web/components/settings/CalendarSwitch.tsx
index 61025a3f57..ea5190cbe3 100644
--- a/apps/web/components/settings/CalendarSwitch.tsx
+++ b/apps/web/components/settings/CalendarSwitch.tsx
@@ -3,7 +3,7 @@ import { useMutation } from "@tanstack/react-query";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, showToast, Switch } from "@calcom/ui";
-import { FiArrowLeft } from "@calcom/ui/components/icon";
+import { ArrowLeft } from "@calcom/ui/components/icon";
 
 export function CalendarSwitch(props: {
   type: string;
@@ -76,7 +76,7 @@ export function CalendarSwitch(props: {
       {props.defaultSelected && (
         <Badge variant="gray">
           <div className="flex">
-            <FiArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
+            <ArrowLeft className="text-default mr-1" /> {t("adding_events_to")}
           </div>
         </Badge>
       )}
diff --git a/apps/web/components/setup/AdminUser.tsx b/apps/web/components/setup/AdminUser.tsx
index fcf3748b9a..c13434b157 100644
--- a/apps/web/components/setup/AdminUser.tsx
+++ b/apps/web/components/setup/AdminUser.tsx
@@ -9,7 +9,7 @@ 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 { FiUserCheck } from "@calcom/ui/components/icon";
+import { UserCheck } from "@calcom/ui/components/icon";
 
 export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser> & { userCount: number }) => {
   const { t } = useLocale();
@@ -24,7 +24,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
           props.onSuccess();
         }}>
         <EmptyScreen
-          Icon={FiUserCheck}
+          Icon={UserCheck}
           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 718c5c02e5..5be4a528b1 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -10,7 +10,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 { FiCheck, FiExternalLink, FiLoader } from "@calcom/ui/components/icon";
+import { Check, ExternalLink, Loader } from "@calcom/ui/components/icon";
 
 type EnterpriseLicenseFormValues = {
   licenseKey: string;
@@ -91,7 +91,7 @@ const EnterpriseLicense = (
         <div>
           <Button
             className="w-full justify-center text-lg"
-            EndIcon={FiExternalLink}
+            EndIcon={ExternalLink}
             href="https://console.cal.com"
             target="_blank">
             {t("purchase_license")}
@@ -121,9 +121,9 @@ const EnterpriseLicense = (
                 )}
                 addOnSuffix={
                   checkLicenseLoading ? (
-                    <FiLoader className="h-5 w-5 animate-spin" />
+                    <Loader className="h-5 w-5 animate-spin" />
                   ) : errors.licenseKey === undefined && isDirty ? (
-                    <FiCheck className="h-5 w-5 text-green-700" />
+                    <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 2a5a433092..b101a17bef 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import type { Dispatch, SetStateAction } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiCheck } from "@calcom/ui/components/icon";
+import { Check } from "@calcom/ui/components/icon";
 
 const StepDone = (props: {
   currentStep: number;
@@ -24,7 +24,7 @@ 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">
-          <FiCheck className="text-inverted dark:bg-default dark:text-default inline-block h-10 w-10" />
+          <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="mt-6 mb-1 text-lg font-medium dark:text-gray-300">{t("all_done")}</h2>
diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx
index 1ff6c355ee..56e31609c9 100644
--- a/apps/web/components/ui/EditableHeading.tsx
+++ b/apps/web/components/ui/EditableHeading.tsx
@@ -2,7 +2,7 @@ import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { FiEdit2 } from "@calcom/ui/components/icon";
+import { Edit2 } from "@calcom/ui/components/icon";
 
 const EditableHeading = function EditableHeading({
   value,
@@ -21,7 +21,7 @@ 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 && (
-            <FiEdit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
+            <Edit2 className=" text-subtle group-hover:text-subtle ml-1 -mt-px inline  h-3 w-3" />
           )}
           <input
             {...passThroughProps}
diff --git a/apps/web/components/ui/InfoBadge.tsx b/apps/web/components/ui/InfoBadge.tsx
index 878f64d8f8..fd7fb07f18 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/apps/web/components/ui/InfoBadge.tsx
@@ -1,12 +1,12 @@
 import { Tooltip } from "@calcom/ui";
-import { FiInfo } from "@calcom/ui/components/icon";
+import { Info } from "@calcom/ui/components/icon";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <FiInfo className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
+          <Info className="text-subtle relative top-px left-1 right-1 mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 66c4d37b8d..d5fe0f0746 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -15,7 +15,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, Input, Label } from "@calcom/ui";
-import { FiCheck, FiEdit2, FiExternalLink } from "@calcom/ui/components/icon";
+import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -235,7 +235,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 usernameIsAvailable ? "" : ""
               )}>
               {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
             </span>
           </div>
         </div>
@@ -251,7 +251,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
 
       <Dialog open={openDialogSaveUsername}>
         <DialogContent
-          Icon={FiEdit2}
+          Icon={Edit2}
           title={t("confirm_username_change_dialog_title")}
           description={
             <>
@@ -288,7 +288,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 data-testid="go-to-billing"
                 href={paymentLink}>
                 <>
-                  {t("go_to_stripe_billing")} <FiExternalLink className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <ExternalLink 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 b50e61569a..793a06e047 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -9,7 +9,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 } from "@calcom/ui";
-import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
+import { Check, Edit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-6 flex flex-row">
               <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
+                {usernameIsAvailable ? <Check className="w-6" /> : <></>}
               </span>
             </div>
           )}
@@ -154,7 +154,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         </div>
       )}
       <Dialog open={openDialogSaveUsername}>
-        <DialogContent type="confirmation" Icon={FiEdit2} title={t("confirm_username_change_dialog_title")}>
+        <DialogContent type="confirmation" Icon={Edit2} 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 rounded-sm py-3 text-sm">
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index 40e89d78b2..1297ce2ed0 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 { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -49,7 +49,7 @@ export const CheckedSelect = ({
             alt={option.label}
           />
           {option.label}
-          <FiX
+          <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 0adce37730..d0e2f0839c 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 { FiCalendar } from "@calcom/ui/components/icon";
+import { Calendar } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -23,7 +23,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
         className
       )}
       clearIcon={null}
-      calendarIcon={<FiCalendar className="text-subtle h-5 w-5" />}
+      calendarIcon={<Calendar className="text-subtle h-5 w-5" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index e6b73eb8e3..6dcc8610f9 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -92,11 +92,11 @@ const nextConfig = {
     "@calcom/prisma",
     "@calcom/trpc",
     "@calcom/ui",
+    "lucide-react",
   ],
   modularizeImports: {
     "@calcom/ui/components/icon": {
-      transform: "@react-icons/all-files/fi/{{member}}",
-      skipDefaultConversion: true,
+      transform: "lucide-react/dist/esm/icons/{{ kebabCase member }}",
       preventFullImport: true,
     },
     "@calcom/features/insights/components": {
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 09c425b8ce..2ab4d5c8c1 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -6,7 +6,7 @@ import { useEffect, useState } from "react";
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
-import { FiBookOpen, FiCheck, FiChevronRight, FiFileText } from "@calcom/ui/components/icon";
+import { BookOpen, Check, ChevronRight, FileText } from "@calcom/ui/components/icon";
 
 import { ssgInit } from "@server/lib/ssg";
 
@@ -20,13 +20,13 @@ export default function Custom404() {
     {
       title: t("documentation"),
       description: t("documentation_description"),
-      icon: FiFileText,
+      icon: FileText,
       href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
-      icon: FiBookOpen,
+      icon: BookOpen,
       href: `${WEBSITE_URL}/blog`,
     },
   ];
@@ -112,7 +112,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="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                          <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -127,7 +127,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -140,7 +140,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">
-                          <FiFileText className="text-default h-6 w-6" aria-hidden="true" />
+                          <FileText className="text-default h-6 w-6" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -153,7 +153,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -198,7 +198,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -257,7 +257,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">
-                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            <Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
@@ -272,7 +272,7 @@ export default function Custom404() {
                           <p className="text-subtle text-base">{t("claim_username_and_schedule_events")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
@@ -300,7 +300,7 @@ export default function Custom404() {
                           <p className="text-subtle text-base">{link.description}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                          <ChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
                         </div>
                       </Link>
                     </li>
@@ -346,7 +346,7 @@ export default function Custom404() {
                         <p className="text-subtle text-base">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <FiChevronRight className="text-muted h-5 w-5" aria-hidden="true" />
+                        <ChevronRight 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 e93459e4d0..7ee1cb6c50 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, showToast } from "@calcom/ui";
-import { FiCopy } from "@calcom/ui/components/icon";
+import { Copy } from "@calcom/ui/components/icon";
 
 export default function Error500() {
   const { t } = useLocale();
@@ -34,7 +34,7 @@ export default function Error500() {
               <Button
                 color="secondary"
                 className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon={FiCopy}
+                StartIcon={Copy}
                 onClick={() => {
                   navigator.clipboard.writeText(router.query.error as string);
                   showToast("Link copied!", "success");
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index d3c765cd28..01e59cc574 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -29,7 +29,7 @@ import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Avatar, AvatarGroup, HeadSeo } from "@calcom/ui";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { EmbedProps } from "@lib/withEmbedSsr";
@@ -60,7 +60,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
         <li
           key={index}
           className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-          <FiArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+          <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             className="flex justify-between px-6 py-4"
@@ -161,7 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
                   className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
-                  <FiArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
+                  <ArrowRight 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/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index 0c3297cb7c..70cc450374 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -5,7 +5,7 @@ import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SkeletonText } from "@calcom/ui";
-import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowLeft, ArrowRight } from "@calcom/ui/components/icon";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
@@ -16,7 +16,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
         <Link
           href="/apps"
           className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
-          <FiArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" />
           {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
       </div>
@@ -32,7 +32,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
                 <h3 className="font-medium capitalize">{category.name}</h3>
                 <p className="text-subtle text-sm">
                   {t("number_apps", { count: category.count })}{" "}
-                  <FiArrowRight className="inline-block h-4 w-4" />
+                  <ArrowRight 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 e8936f1e58..97e6e12e0d 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -10,7 +10,7 @@ import type { AppCategories } from "@calcom/prisma/client";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import type { HorizontalTabItemProps } from "@calcom/ui";
 import { AllApps, AppStoreCategories, HorizontalTabs, TextField, PopularAppsSlider } from "@calcom/ui";
-import { FiSearch } from "@calcom/ui/components/icon";
+import { Search } from "@calcom/ui/components/icon";
 
 import AppsLayout from "@components/apps/layouts/AppsLayout";
 
@@ -37,7 +37,7 @@ function AppsSearch({
   return (
     <TextField
       className="bg-subtle !border-muted !pl-0 focus:!ring-offset-0"
-      addOnLeading={<FiSearch className="text-subtle h-4 w-4" />}
+      addOnLeading={<Search className="text-subtle h-4 w-4" />}
       addOnClassname="!border-muted"
       containerClassName={classNames("focus:!ring-offset-0", className)}
       type="search"
diff --git a/apps/web/pages/apps/installed/[category].tsx b/apps/web/pages/apps/installed/[category].tsx
index f236b08664..075c8618e7 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -30,15 +30,15 @@ import {
   showToast,
 } from "@calcom/ui";
 import {
-  FiBarChart,
-  FiCalendar,
-  FiCreditCard,
-  FiGrid,
-  FiMoreHorizontal,
-  FiPlus,
-  FiShare2,
-  FiTrash,
-  FiVideo,
+  BarChart,
+  Calendar,
+  CreditCard,
+  Grid,
+  MoreHorizontal,
+  Plus,
+  Share2,
+  Trash,
+  Video,
 } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -71,7 +71,7 @@ function ConnectOrDisconnectIntegrationMenuItem(props: {
           color="destructive"
           onClick={() => handleDisconnect(credentialId)}
           disabled={isGlobal}
-          StartIcon={FiTrash}>
+          StartIcon={Trash}>
           {t("remove_app")}
         </DropdownItem>
       </DropdownMenuItem>
@@ -159,7 +159,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                   <div className="flex  justify-end">
                     <Dropdown modal={false}>
                       <DropdownMenuTrigger asChild>
-                        <Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+                        <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         {!appIsDefault && variant === "conferencing" && (
@@ -167,7 +167,7 @@ const IntegrationsList = ({ data, handleDisconnect, variant }: IntegrationsListP
                             <DropdownItem
                               type="button"
                               color="secondary"
-                              StartIcon={FiVideo}
+                              StartIcon={Video}
                               onClick={() => {
                                 const locationType = getEventLocationTypeFromApp(
                                   item?.locationOption?.value ?? ""
@@ -225,13 +225,13 @@ const IntegrationsContainer = ({
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
   const emptyIcon = {
-    calendar: FiCalendar,
-    conferencing: FiVideo,
-    automation: FiShare2,
-    analytics: FiBarChart,
-    payment: FiCreditCard,
-    web3: FiBarChart,
-    other: FiGrid,
+    calendar: Calendar,
+    conferencing: Video,
+    automation: Share2,
+    analytics: BarChart,
+    payment: CreditCard,
+    web3: BarChart,
+    other: Grid,
   };
 
   return (
@@ -270,7 +270,7 @@ const IntegrationsContainer = ({
                     variant ? `/apps/categories/${variant === "conferencing" ? "video" : variant}` : "/apps"
                   }
                   color="secondary"
-                  StartIcon={FiPlus}>
+                  StartIcon={Plus}>
                   {t("add")}
                 </Button>
               }
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index 1af0845256..a73972a979 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -5,7 +5,7 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, SkeletonText } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 import AuthContainer from "@components/ui/AuthContainer";
 
@@ -29,7 +29,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">
-          <FiX className="h-6 w-6 text-red-600" />
+          <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 f841ec974c..2f3359af42 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -19,7 +19,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
-import { FiArrowLeft } from "@calcom/ui/components/icon";
+import { ArrowLeft } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { WithNonceProps } from "@lib/withNonce";
@@ -91,7 +91,7 @@ export default function Login({
         setTwoFactorRequired(false);
         methods.setValue("totpCode", "");
       }}
-      StartIcon={FiArrowLeft}
+      StartIcon={ArrowLeft}
       color="minimal">
       {t("go_back")}
     </Button>
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index e5bc05af14..28323c447f 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -6,7 +6,7 @@ import { useEffect } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { FiCheck } from "@calcom/ui/components/icon";
+import { Check } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -32,7 +32,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">
-          <FiCheck className="h-6 w-6 text-green-600" />
+          <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/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 5a2dfcab31..6751a678f2 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -27,7 +27,7 @@ import {
   ConfirmationDialogContent,
   VerticalDivider,
 } from "@calcom/ui";
-import { FiInfo, FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Info, Plus, Trash } from "@calcom/ui/components/icon";
 
 import { HttpError } from "@lib/core/http/error";
 
@@ -57,7 +57,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
           <span className="inline-block">
-            <FiInfo />
+            <Info className="h-4 w-4" />
           </span>
         </Tooltip>
       </h3>
@@ -75,7 +75,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
           onChange={(ranges) => append({ ranges })}
           Trigger={
-            <Button color="secondary" StartIcon={FiPlus} data-testid="add-override">
+            <Button color="secondary" StartIcon={Plus} data-testid="add-override">
               Add an override
             </Button>
           }
@@ -202,7 +202,7 @@ export default function Availability() {
           <Dialog>
             <DialogTrigger asChild>
               <Button
-                StartIcon={FiTrash}
+                StartIcon={Trash}
                 variant="icon"
                 color="destructive"
                 aria-label={t("delete")}
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 7e4a81b870..b487c7e3ce 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { EmptyScreen, showToast } from "@calcom/ui";
-import { FiClock } from "@calcom/ui/components/icon";
+import { Clock } from "@calcom/ui/components/icon";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
@@ -75,7 +75,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
       {schedules.length === 0 ? (
         <div className="flex justify-center">
           <EmptyScreen
-            Icon={FiClock}
+            Icon={Clock}
             headline={t("new_schedule_heading")}
             description={t("new_schedule_description")}
             buttonRaw={<NewScheduleButton />}
diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index 79e3148ea0..3d1ad20734 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -49,7 +49,7 @@ import type { Prisma } from "@calcom/prisma/client";
 import { bookingMetadataSchema } from "@calcom/prisma/zod-utils";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
 import { Button, EmailInput, HeadSeo, Badge, useCalcomTheme } from "@calcom/ui";
-import { FiX, FiExternalLink, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
+import { X, ExternalLink, ChevronLeft, Check, Calendar } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -306,7 +306,7 @@ export default function Success(props: SuccessProps) {
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
             className="hover:bg-subtle text-subtle dark:hover:text-inverted hover:text-default mt-2 inline-flex px-1 py-2 text-sm dark:hover:bg-transparent">
-            <FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
+            <ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
           </Link>
         </div>
       )}
@@ -347,10 +347,10 @@ export default function Success(props: SuccessProps) {
                     <img src={giphyImage} alt="Gif from Giphy" />
                   )}
                   {!giphyImage && !needsConfirmation && !isCancelled && (
-                    <FiCheck className="h-5 w-5 text-green-600" />
+                    <Check className="h-5 w-5 text-green-600" />
                   )}
-                  {needsConfirmation && !isCancelled && <FiCalendar className="text-emphasis h-5 w-5" />}
-                  {isCancelled && <FiX className="h-5 w-5 text-red-600" />}
+                  {needsConfirmation && !isCancelled && <Calendar className="text-emphasis h-5 w-5" />}
+                  {isCancelled && <X className="h-5 w-5 text-red-600" />}
                 </div>
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
@@ -458,7 +458,7 @@ export default function Success(props: SuccessProps) {
                               className="text-default flex items-center gap-2 underline"
                               rel="noreferrer">
                               {providerName || "Link"}
-                              <FiExternalLink className="text-default inline h-4 w-4" />
+                              <ExternalLink className="text-default inline h-4 w-4" />
                             </a>
                           ) : (
                             locationToDisplay
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 3d082d227d..3ab9c41d26 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -12,7 +12,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, EmptyScreen } from "@calcom/ui";
-import { FiCalendar } from "@calcom/ui/components/icon";
+import { Calendar } from "@calcom/ui/components/icon";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
@@ -180,7 +180,7 @@ export default function Bookings() {
         {query.status === "success" && isEmpty && (
           <div className="flex items-center justify-center pt-2 xl:pt-0">
             <EmptyScreen
-              Icon={FiCalendar}
+              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/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 091ed93a44..0c2eb02ceb 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -39,19 +39,19 @@ import {
   HeadSeo,
 } from "@calcom/ui";
 import {
-  FiArrowDown,
-  FiArrowUp,
-  FiClipboard,
-  FiCode,
-  FiCopy,
-  FiEdit,
-  FiEdit2,
-  FiExternalLink,
-  FiLink,
-  FiMoreHorizontal,
-  FiTrash,
-  FiUpload,
-  FiUsers,
+  ArrowDown,
+  ArrowUp,
+  Clipboard,
+  Code,
+  Copy,
+  Edit,
+  Edit2,
+  ExternalLink,
+  Link as LinkIcon,
+  MoreHorizontal,
+  Trash,
+  Upload,
+  Users,
 } from "@calcom/ui/components/icon";
 
 import { withQuery } from "@lib/QueryCell";
@@ -325,7 +325,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <button
                       className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-[5px] -mt-4 mb-4 -ml-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-[36px]"
                       onClick={() => moveEventType(index, -1)}>
-                      <FiArrowUp className="h-5 w-5" />
+                      <ArrowUp className="h-5 w-5" />
                     </button>
                   )}
 
@@ -333,7 +333,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <button
                       className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-[5px] mt-8 -ml-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-[36px]"
                       onClick={() => moveEventType(index, 1)}>
-                      <FiArrowDown className="h-5 w-5" />
+                      <ArrowDown className="h-5 w-5" />
                     </button>
                   )}
                   <MemoizedItem type={type} group={group} readOnly={readOnly} />
@@ -373,7 +373,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               target="_blank"
                               variant="icon"
                               href={calLink}
-                              StartIcon={FiExternalLink}
+                              StartIcon={ExternalLink}
                             />
                           </Tooltip>
 
@@ -381,7 +381,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             <Button
                               color="secondary"
                               variant="icon"
-                              StartIcon={FiLink}
+                              StartIcon={LinkIcon}
                               onClick={() => {
                                 showToast(t("link_copied"), "success");
                                 navigator.clipboard.writeText(calLink);
@@ -394,7 +394,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 type="button"
                                 variant="icon"
                                 color="secondary"
-                                StartIcon={FiMoreHorizontal}
+                                StartIcon={MoreHorizontal}
                                 className="ltr:radix-state-open:rounded-r-md rtl:radix-state-open:rounded-l-md"
                               />
                             </DropdownMenuTrigger>
@@ -403,7 +403,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <DropdownItem
                                   type="button"
                                   data-testid={"event-type-edit-" + type.id}
-                                  StartIcon={FiEdit2}
+                                  StartIcon={Edit2}
                                   onClick={() => router.push("/event-types/" + type.id)}>
                                   {t("edit")}
                                 </DropdownItem>
@@ -412,7 +412,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <DropdownItem
                                   type="button"
                                   data-testid={"event-type-duplicate-" + type.id}
-                                  StartIcon={FiCopy}
+                                  StartIcon={Copy}
                                   onClick={() => openDuplicateModal(type, group)}>
                                   {t("duplicate")}
                                 </DropdownItem>
@@ -421,7 +421,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <EmbedButton
                                   as={DropdownItem}
                                   type="button"
-                                  StartIcon={FiCode}
+                                  StartIcon={Code}
                                   className="w-full rounded-none"
                                   embedUrl={encodeURIComponent(embedLink)}>
                                   {t("embed")}
@@ -437,7 +437,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                       setDeleteDialogOpen(true);
                                       setDeleteDialogTypeId(type.id);
                                     }}
-                                    StartIcon={FiTrash}
+                                    StartIcon={Trash}
                                     className="w-full rounded-none">
                                     {t("delete")}
                                   </DropdownItem>
@@ -453,7 +453,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 <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={FiMoreHorizontal} />
+                      <Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
@@ -461,7 +461,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           <DropdownItem
                             href={calLink}
                             target="_blank"
-                            StartIcon={FiExternalLink}
+                            StartIcon={ExternalLink}
                             className="w-full rounded-none">
                             {t("preview")}
                           </DropdownItem>
@@ -473,7 +473,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               navigator.clipboard.writeText(calLink);
                               showToast(t("link_copied"), "success");
                             }}
-                            StartIcon={FiClipboard}
+                            StartIcon={Clipboard}
                             className="w-full rounded-none text-left">
                             {t("copy_link")}
                           </DropdownItem>
@@ -492,7 +492,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                   .then(() => showToast(t("link_shared"), "success"))
                                   .catch(() => showToast(t("failed"), "error"));
                               }}
-                              StartIcon={FiUpload}
+                              StartIcon={Upload}
                               className="w-full rounded-none">
                               {t("share")}
                             </DropdownItem>
@@ -501,7 +501,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         <DropdownMenuItem className="outline-none">
                           <DropdownItem
                             onClick={() => router.push("/event-types/" + type.id)}
-                            StartIcon={FiEdit}
+                            StartIcon={Edit}
                             className="w-full rounded-none">
                             {t("edit")}
                           </DropdownItem>
@@ -509,7 +509,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         <DropdownMenuItem className="outline-none">
                           <DropdownItem
                             onClick={() => openDuplicateModal(type, group)}
-                            StartIcon={FiCopy}
+                            StartIcon={Copy}
                             data-testid={"event-type-duplicate-" + type.id}>
                             {t("duplicate")}
                           </DropdownItem>
@@ -522,7 +522,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               setDeleteDialogOpen(true);
                               setDeleteDialogTypeId(type.id);
                             }}
-                            StartIcon={FiTrash}
+                            StartIcon={Trash}
                             className="w-full rounded-none">
                             {t("delete")}
                           </DropdownItem>
@@ -589,7 +589,7 @@ const EventTypeListHeading = ({
           <span className="text-subtle ms-2 me-2 relative -top-px text-xs">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
-                <FiUsers className="mr-1 -mt-px inline h-3 w-3" />
+                <Users className="mr-1 -mt-px inline h-3 w-3" />
                 {membershipCount}
               </Badge>
             </Link>
@@ -617,7 +617,7 @@ const CreateFirstEventTypeView = () => {
 
   return (
     <EmptyScreen
-      Icon={FiLink}
+      Icon={LinkIcon}
       headline={t("new_event_type_heading")}
       description={t("new_event_type_description")}
     />
diff --git a/apps/web/pages/insights/index.tsx b/apps/web/pages/insights/index.tsx
index ae331738da..b6b50541c1 100644
--- a/apps/web/pages/insights/index.tsx
+++ b/apps/web/pages/insights/index.tsx
@@ -15,7 +15,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 { FiRefreshCcw, FiUserPlus, FiUsers } from "@calcom/ui/components/icon";
+import { RefreshCcw, UserPlus, Users } from "@calcom/ui/components/icon";
 
 const Heading = () => {
   const { t } = useLocale();
@@ -35,17 +35,17 @@ export default function InsightsPage() {
   const { data: user } = trpc.viewer.me.useQuery();
   const features = [
     {
-      icon: <FiUsers className="h-5 w-5" />,
+      icon: <Users className="h-5 w-5" />,
       title: t("view_bookings_across"),
       description: t("view_bookings_across_description"),
     },
     {
-      icon: <FiRefreshCcw className="h-5 w-5" />,
+      icon: <RefreshCcw className="h-5 w-5" />,
       title: t("identify_booking_trends"),
       description: t("identify_booking_trends_description"),
     },
     {
-      icon: <FiUserPlus className="h-5 w-5" />,
+      icon: <UserPlus 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/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index dfb4057495..a8423cd36b 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -6,7 +6,7 @@ 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 { FiExternalLink } from "@calcom/ui/components/icon";
+import { ExternalLink } from "@calcom/ui/components/icon";
 
 interface CtaRowProps {
   title: string;
@@ -48,7 +48,7 @@ const BillingView = () => {
         <CtaRow
           title={t("billing_manage_details_title")}
           description={t("billing_manage_details_description")}>
-          <Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
             {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 2ac5b09a8b..e36c04ce22 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -16,7 +16,7 @@ import {
   Meta,
   AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";
-import { FiLink, FiPlus } from "@calcom/ui/components/icon";
+import { Link as LinkIcon, Plus } from "@calcom/ui/components/icon";
 
 const ApiKeysView = () => {
   const { t } = useLocale();
@@ -32,7 +32,7 @@ const ApiKeysView = () => {
     return (
       <Button
         color="secondary"
-        StartIcon={FiPlus}
+        StartIcon={Plus}
         onClick={() => {
           setApiKeyToEdit(undefined);
           setApiKeyModal(true);
@@ -72,7 +72,7 @@ const ApiKeysView = () => {
               </>
             ) : (
               <EmptyScreen
-                Icon={FiLink}
+                Icon={LinkIcon}
                 headline={t("create_first_api_key")}
                 description={t("create_first_api_key_description", { appName: APP_NAME })}
                 buttonRaw={<NewApiKeyButton />}
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index 012ae2c4ea..32315d3fa6 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -181,7 +181,7 @@ const AppearanceView = () => {
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
-        EndIcon={FiExternalLink}
+        EndIcon={ExternalLink}
         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 db8310990f..7590778134 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -24,7 +24,7 @@ import {
   SkeletonText,
   showToast,
 } from "@calcom/ui";
-import { FiPlus, FiCalendar } from "@calcom/ui/components/icon";
+import { Plus, Calendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -50,7 +50,7 @@ const AddCalendarButton = () => {
 
   return (
     <>
-      <Button color="secondary" StartIcon={FiPlus} href="/apps/categories/calendar">
+      <Button color="secondary" StartIcon={Plus} href="/apps/categories/calendar">
         {t("add_calendar")}
       </Button>
     </>
@@ -87,7 +87,7 @@ const CalendarsView = () => {
             <div>
               <div className="bg-muted border-subtle mt-4 flex space-x-4 rounded-md p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
                 <div className=" bg-default border-subtle flex h-9 w-9 items-center justify-center rounded-md border-2 p-[6px]">
-                  <FiCalendar className="text-default h-6 w-6" />
+                  <Calendar className="text-default h-6 w-6" />
                 </div>
 
                 <div className="flex w-full flex-col space-y-3">
@@ -198,7 +198,7 @@ const CalendarsView = () => {
             </div>
           ) : (
             <EmptyScreen
-              Icon={FiCalendar}
+              Icon={Calendar}
               headline={t("no_calendar_installed")}
               description={t("no_calendar_installed_description")}
               buttonText={t("add_a_calendar")}
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index bc9dd2c836..1914445a13 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -24,7 +24,7 @@ import {
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
-import { FiAlertCircle, FiMoreHorizontal, FiTrash, FiVideo } from "@calcom/ui/components/icon";
+import { AlertCircle, MoreHorizontal, Trash, Video } from "@calcom/ui/components/icon";
 
 import AppListCard from "@components/AppListCard";
 
@@ -111,7 +111,7 @@ const ConferencingLayout = () => {
                     <div>
                       <Dropdown>
                         <DropdownMenuTrigger asChild>
-                          <Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+                          <Button StartIcon={MoreHorizontal} variant="icon" color="secondary" />
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                           {!appIsDefault && (
@@ -119,7 +119,7 @@ const ConferencingLayout = () => {
                               <DropdownItem
                                 type="button"
                                 color="secondary"
-                                StartIcon={FiVideo}
+                                StartIcon={Video}
                                 onClick={() => {
                                   const locationType = getEventLocationTypeFromApp(
                                     app?.locationOption?.value ?? ""
@@ -141,7 +141,7 @@ const ConferencingLayout = () => {
                               type="button"
                               color="destructive"
                               disabled={app.isGlobal}
-                              StartIcon={FiTrash}
+                              StartIcon={Trash}
                               onClick={() => {
                                 setDeleteCredentialId(app.credentialIds[0]);
                                 setDeleteAppModal(true);
@@ -163,7 +163,7 @@ const ConferencingLayout = () => {
           title={t("Remove app")}
           description={t("are_you_sure_you_want_to_remove_this_app")}
           type="confirmation"
-          Icon={FiAlertCircle}>
+          Icon={AlertCircle}>
           <DialogFooter>
             <Button color="primary" onClick={() => deleteAppMutation.mutate({ id: deleteCredentialId })}>
               {t("yes_remove_app")}
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 75baa18d68..9f23d0ba94 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -38,7 +38,7 @@ import {
   TextField,
   Editor,
 } from "@calcom/ui";
-import { FiAlertTriangle, FiTrash2 } from "@calcom/ui/components/icon";
+import { AlertTriangle, Trash2 } from "@calcom/ui/components/icon";
 
 import TwoFactor from "@components/auth/TwoFactor";
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -232,7 +232,7 @@ const ProfileView = () => {
       {/* Delete account Dialog */}
       <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
         <DialogTrigger asChild>
-          <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={FiTrash2}>
+          <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Trash2}>
             {t("delete_account")}
           </Button>
         </DialogTrigger>
@@ -240,7 +240,7 @@ const ProfileView = () => {
           title={t("delete_account_modal_title")}
           description={t("confirm_delete_account_modal", { appName: APP_NAME })}
           type="creation"
-          Icon={FiAlertTriangle}>
+          Icon={AlertTriangle}>
           <>
             <p className="text-default mb-7">
               {t("delete_account_confirmation_message", { appName: APP_NAME })}
@@ -283,7 +283,7 @@ const ProfileView = () => {
           title={t("confirm_password")}
           description={t("confirm_password_change_email")}
           type="creation"
-          Icon={FiAlertTriangle}>
+          Icon={AlertTriangle}>
           <>
             <PasswordField
               data-testid="password"
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 65b1d38dfa..dd9043634f 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -15,7 +15,7 @@ import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
 import { Avatar, AvatarGroup, Button, EmptyScreen, HeadSeo } from "@calcom/ui";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -137,7 +137,7 @@ function TeamPage({ team, isUnpublished }: TeamPageProps) {
                 <aside className="dark:text-inverted mt-8 flex justify-center text-center">
                   <Button
                     color="minimal"
-                    EndIcon={FiArrowRight}
+                    EndIcon={ArrowRight}
                     className="dark:hover:bg-darkgray-200"
                     href={`/team/${team.slug}?members=1`}
                     shallow={true}>
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 3c5697d296..9c54896c91 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -5,7 +5,7 @@ import Shell from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 function Teams() {
   const { t } = useLocale();
@@ -16,7 +16,7 @@ function Teams() {
       CTA={
         <Button
           variant="fab"
-          StartIcon={FiPlus}
+          StartIcon={Plus}
           type="button"
           href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
           {t("new")}
diff --git a/apps/web/pages/video/[uid].tsx b/apps/web/pages/video/[uid].tsx
index b68e3aa2ac..422df6e54f 100644
--- a/apps/web/pages/video/[uid].tsx
+++ b/apps/web/pages/video/[uid].tsx
@@ -12,7 +12,7 @@ import { formatToLocalizedDate, formatToLocalizedTime } from "@calcom/lib/date-f
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { FiChevronRight } from "@calcom/ui/components/icon";
+import { ChevronRight } from "@calcom/ui/components/icon";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -222,7 +222,7 @@ 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)}>
-            <FiChevronRight
+            <ChevronRight
               aria-hidden
               className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
             />
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index a02c443f56..1991e8a957 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -5,7 +5,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import { Button, HeadSeo } from "@calcom/ui";
-import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
+import { ArrowRight, Calendar, X } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -29,7 +29,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                    <FiX className="h-6 w-6 text-red-600" />
+                    <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">
@@ -41,14 +41,14 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                       {props.booking.title}
                     </h2>
                     <p className="text-subtle text-center">
-                      <FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                      <Calendar className="mr-1 -mt-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={FiArrowRight}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
                       {t("go_back")}
                     </Button>
                   </div>
diff --git a/apps/web/pages/video/meeting-not-started/[uid].tsx b/apps/web/pages/video/meeting-not-started/[uid].tsx
index 9ebbb664ee..45228bd592 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -6,7 +6,7 @@ import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Button, HeadSeo, EmptyScreen } from "@calcom/ui";
-import { FiArrowRight, FiCalendar, FiClock } from "@calcom/ui/components/icon";
+import { ArrowRight, Calendar, Clock } from "@calcom/ui/components/icon";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
@@ -15,19 +15,19 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
       <HeadSeo title={t("this_meeting_has_not_started_yet")} description={props.booking.title} />
       <main className="mx-auto my-24 max-w-3xl">
         <EmptyScreen
-          Icon={FiClock}
+          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">
-                <FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                <Calendar className="mr-1 -mt-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={FiArrowRight}>
+            <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
               {t("go_back")}
             </Button>
           }
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index d65fbdd7dd..3b990a36b2 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -1,6 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, EmptyScreen, HeadSeo } from "@calcom/ui";
-import { FiX, FiArrowRight } from "@calcom/ui/components/icon";
+import { X, ArrowRight } from "@calcom/ui/components/icon";
 
 export default function NoMeetingFound() {
   const { t } = useLocale();
@@ -10,11 +10,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={FiX}
+          Icon={X}
           headline={t("no_meeting_found")}
           description={t("no_meeting_found_description")}
           buttonRaw={
-            <Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
+            <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRight}>
               {t("go_back_home")}
             </Button>
           }
diff --git a/package.json b/package.json
index 6284c3bd83..cba8b795df 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
   "dependencies": {
     "city-timezones": "^1.2.1",
     "eslint": "^8.34.0",
+    "lucide-react": "^0.130.0",
     "turbo": "^1.8.3"
   },
   "resolutions": {
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
index 6efa4e81b9..120c2b66ec 100644
--- a/packages/app-store/_components/OmniInstallAppButton.tsx
+++ b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -3,7 +3,7 @@ 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 { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 import useAddAppMutation from "../_utils/useAddAppMutation";
 import { InstallAppButton } from "../components";
@@ -63,7 +63,7 @@ export default function OmniInstallAppButton({
             loading={mutation.isLoading}
             color="secondary"
             className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-            StartIcon={FiPlus}
+            StartIcon={Plus}
             {...props}>
             {t("install")}
           </Button>
diff --git a/packages/app-store/_utils/getAppCategories.ts b/packages/app-store/_utils/getAppCategories.ts
index 6264cf72f5..5dfdb2a9b9 100644
--- a/packages/app-store/_utils/getAppCategories.ts
+++ b/packages/app-store/_utils/getAppCategories.ts
@@ -1,5 +1,5 @@
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { FiCalendar, FiVideo, FiCreditCard, FiShare2, FiBarChart, FiGrid } from "@calcom/ui/components/icon";
+import { Calendar, Video, CreditCard, Share2, BarChart, Grid } from "@calcom/ui/components/icon";
 
 function getHref(baseURL: string, category: string, useQueryParam: boolean) {
   const baseUrlParsed = new URL(baseURL, WEBAPP_URL);
@@ -12,37 +12,37 @@ const getAppCategories = (baseURL: string, useQueryParam: boolean) => {
     {
       name: "calendar",
       href: getHref(baseURL, "calendar", useQueryParam),
-      icon: FiCalendar,
+      icon: Calendar,
     },
     {
       name: "conferencing",
       href: getHref(baseURL, "conferencing", useQueryParam),
-      icon: FiVideo,
+      icon: Video,
     },
     {
       name: "payment",
       href: getHref(baseURL, "payment", useQueryParam),
-      icon: FiCreditCard,
+      icon: CreditCard,
     },
     {
       name: "automation",
       href: getHref(baseURL, "automation", useQueryParam),
-      icon: FiShare2,
+      icon: Share2,
     },
     {
       name: "analytics",
       href: getHref(baseURL, "analytics", useQueryParam),
-      icon: FiBarChart,
+      icon: BarChart,
     },
     {
       name: "web3",
       href: getHref(baseURL, "web3", useQueryParam),
-      icon: FiBarChart,
+      icon: BarChart,
     },
     {
       name: "other",
       href: getHref(baseURL, "other", useQueryParam),
-      icon: FiGrid,
+      icon: Grid,
     },
   ];
 };
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index 803079e2c1..d1006cf378 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -7,7 +7,7 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Form, showToast, TextField } from "@calcom/ui";
-import { FiCheck, FiX } from "@calcom/ui/components/icon";
+import { Check, X } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -107,7 +107,7 @@ export default function CloseComSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
+                    StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
                     className={
                       testPassed !== undefined
                         ? testPassed
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index eb18af52c9..3dc14e2395 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -10,7 +10,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 { FiAlertCircle, FiArrowRight, FiCheck } from "@calcom/ui/components/icon";
+import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
 
 import { InstallAppButtonMap } from "./apps.browser.generated";
 import type { InstallAppButtonProps } from "./types";
@@ -99,7 +99,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="flex items-start">
                 <div>
-                  <FiCheck className="mt-1 mr-2 font-semibold" />
+                  <Check className="mt-1 mr-2 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -122,7 +122,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="text-info flex items-start">
                 <div>
-                  <FiAlertCircle className="mt-1 mr-2 font-semibold" />
+                  <AlertCircle className="mt-1 mr-2 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -138,7 +138,7 @@ export const AppDependencyComponent = ({
                           <span className="mr-1">
                             {t("connect_app", { dependencyName: dependency.name })}
                           </span>
-                          <FiArrowRight />
+                          <ArrowRight />
                         </Link>
                       </>
                     </div>
diff --git a/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx b/packages/app-store/googlecalendar/components/ExistingGoogleCal.tsx
index c43eb2fe7f..e5df408800 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 { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { FiAlertCircle, FiArrowRight, FiCheck } from "@calcom/ui/components/icon";
+import { AlertCircle, ArrowRight, Check } from "@calcom/ui/components/icon";
 
 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>
-            <FiCheck className="mt-1 mr-2 font-semibold" />
+            <Check className="mt-1 mr-2 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>
-            <FiAlertCircle className="mt-1 mr-2 font-semibold" />
+            <AlertCircle className="mt-1 mr-2 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={`${CAL_URL}/apps/google-calendar`}
                     className="text-info flex items-center underline">
                     <span className="mr-1">{t("connect_google_calendar")}</span>
-                    <FiArrowRight />
+                    <ArrowRight />
                   </Link>
                 </>
               </div>
diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx
index 1ee0062da0..272062a72c 100644
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@@ -15,7 +15,7 @@ import { configureChains, createClient, useAccount, useSignMessage, WagmiConfig
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { showToast, SkeletonText } from "@calcom/ui";
-import { FiAlertTriangle, FiLoader } from "@calcom/ui/components/icon";
+import { AlertTriangle, Loader } from "@calcom/ui/components/icon";
 
 import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
 
@@ -132,7 +132,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
                   <>
                     {!balanceData.data.hasBalance && (
                       <div className="mt-2 flex flex-row items-center">
-                        <FiAlertTriangle className="h-5 w-5 text-red-600" />
+                        <AlertTriangle className="h-5 w-5 text-red-600" />
                         <p className="ml-2 text-red-600">
                           <Trans i18nKey="rainbow_insufficient_balance" t={t}>
                             Your connected wallet doesn&apos;t contain enough {contractData.data.symbol}.
@@ -143,7 +143,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
 
                     {balanceData.data.hasBalance && isSignatureLoading && (
                       <div className="mt-2 flex flex-row items-center">
-                        <FiLoader className="h-5 w-5 text-green-600" />
+                        <Loader className="h-5 w-5 text-green-600" />
                         <p className="ml-2 text-green-600">{t("rainbow_sign_message_request")}</p>
                       </div>
                     )}
@@ -152,7 +152,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
 
                 {isSignatureError && (
                   <div className="mt-2 flex flex-row items-center">
-                    <FiAlertTriangle className="h-5 w-5 text-red-600" />
+                    <AlertTriangle className="h-5 w-5 text-red-600" />
                     <p className="ml-2 text-red-600">
                       <Trans i18nKey="rainbow_signature_error" t={t}>
                         {t("rainbow_signature_error")}
diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index abb7f43b81..e733ac620f 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -29,7 +29,7 @@ import {
   TextField,
   SettingsToggle,
 } from "@calcom/ui";
-import { FiMoreHorizontal } from "@calcom/ui/components/icon";
+import { MoreHorizontal } from "@calcom/ui/components/icon";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
@@ -162,7 +162,7 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
             variant="icon"
             color="secondary"
             className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
-            StartIcon={FiMoreHorizontal}
+            StartIcon={MoreHorizontal}
           />
         </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 2e4447d775..560fc20b5e 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -34,7 +34,7 @@ import {
   Tooltip,
   VerticalDivider,
 } from "@calcom/ui";
-import { FiExternalLink, FiLink, FiDownload, FiCode, FiTrash } from "@calcom/ui/components/icon";
+import { ExternalLink, Link as LinkIcon, Download, Code, Trash } from "@calcom/ui/components/icon";
 
 import { RoutingPages } from "../lib/RoutingPages";
 import { getSerializableForm } from "../lib/getSerializableForm";
@@ -78,7 +78,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={FiExternalLink}
+            StartIcon={ExternalLink}
           />
         </Tooltip>
         <FormAction
@@ -87,7 +87,7 @@ const Actions = ({
           color="secondary"
           variant="icon"
           type="button"
-          StartIcon={FiLink}
+          StartIcon={LinkIcon}
           tooltip={t("copy_link_to_form")}
         />
 
@@ -99,7 +99,7 @@ const Actions = ({
             color="secondary"
             variant="icon"
             type="button"
-            StartIcon={FiDownload}
+            StartIcon={Download}
           />
         </Tooltip>
         <FormAction
@@ -107,7 +107,7 @@ const Actions = ({
           action="embed"
           color="secondary"
           variant="icon"
-          StartIcon={FiCode}
+          StartIcon={Code}
           tooltip={t("embed")}
         />
         <DropdownMenuSeparator />
@@ -116,7 +116,7 @@ const Actions = ({
           action="_delete"
           // className="mr-3"
           variant="icon"
-          StartIcon={FiTrash}
+          StartIcon={Trash}
           color="secondary"
           type="button"
           tooltip={t("delete")}
@@ -129,7 +129,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={FiLink}>
+              StartIcon={LinkIcon}>
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           </FormActionsDropdown>
@@ -145,7 +145,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={FiExternalLink}>
+            StartIcon={ExternalLink}>
             {t("preview")}
           </FormAction>
           <FormAction
@@ -154,7 +154,7 @@ const Actions = ({
             routingForm={form}
             color="minimal"
             type="button"
-            StartIcon={FiLink}>
+            StartIcon={LinkIcon}>
             {t("copy_link_to_form")}
           </FormAction>
           <FormAction
@@ -163,7 +163,7 @@ const Actions = ({
             className="w-full"
             color="minimal"
             type="button"
-            StartIcon={FiDownload}>
+            StartIcon={Download}>
             {t("download_responses")}
           </FormAction>
           <FormAction
@@ -172,7 +172,7 @@ const Actions = ({
             color="minimal"
             type="button"
             className="w-full"
-            StartIcon={FiCode}>
+            StartIcon={Code}>
             {t("embed")}
           </FormAction>
           {typeformApp ? (
@@ -182,7 +182,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={FiLink}>
+              StartIcon={LinkIcon}>
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           ) : null}
@@ -193,7 +193,7 @@ const Actions = ({
             className="w-full"
             type="button"
             color="destructive"
-            StartIcon={FiTrash}>
+            StartIcon={Trash}>
             {t("delete")}
           </FormAction>
         </FormActionsDropdown>
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 a20af667fe..4833745f13 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
@@ -8,7 +8,7 @@ import type {
 } from "react-awesome-query-builder";
 
 import { Button as CalButton, SelectWithValidation as Select, TextField, TextArea } from "@calcom/ui";
-import { FiTrash, FiPlus } from "@calcom/ui/components/icon";
+import { Trash, Plus } from "@calcom/ui/components/icon";
 
 export type CommonProps<
   TVal extends
@@ -206,7 +206,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   if (type === "delRule" || type == "delGroup") {
     return (
       <button className="ml-5">
-        <FiTrash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
+        <Trash className="text-subtle m-0 h-4 w-4" onClick={onClick} />
       </button>
     );
   }
@@ -220,7 +220,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   }
   return (
     <CalButton
-      StartIcon={FiPlus}
+      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 e1c6a567c7..99415bcfbc 100644
--- a/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/form-edit/[...appPages].tsx
@@ -16,7 +16,7 @@ import {
   TextAreaField,
   TextField,
 } from "@calcom/ui";
-import { FiPlus, FiFileText } from "@calcom/ui/components/icon";
+import { Plus, FileText } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -295,7 +295,7 @@ const FormEdit = ({
             <Button
               data-testid="add-field"
               type="button"
-              StartIcon={FiPlus}
+              StartIcon={Plus}
               color="secondary"
               onClick={addField}>
               Add Field
@@ -307,7 +307,7 @@ const FormEdit = ({
   ) : (
     <div className="w-full">
       <EmptyScreen
-        Icon={FiFileText}
+        Icon={FileText}
         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 e6d14e3f62..12f048088a 100644
--- a/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/forms/[...appPages].tsx
@@ -12,22 +12,22 @@ import { trpc } from "@calcom/trpc/react";
 import type { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
 import { Badge, ButtonGroup, EmptyScreen, List, ListLinkItem, Tooltip, Button } from "@calcom/ui";
 import {
-  FiPlus,
-  FiGitMerge,
-  FiExternalLink,
-  FiLink,
-  FiEdit,
-  FiDownload,
-  FiCode,
-  FiCopy,
-  FiTrash,
-  FiMenu,
-  FiMessageCircle,
-  FiFileText,
-  FiShuffle,
-  FiBarChart,
-  FiCheckCircle,
-  FiMail,
+  Plus,
+  GitMerge,
+  ExternalLink,
+  Link as LinkIcon,
+  Edit,
+  Download,
+  Code,
+  Copy,
+  Trash,
+  Menu,
+  MessageCircle,
+  FileText,
+  Shuffle,
+  BarChart,
+  CheckCircle,
+  Mail,
 } from "@calcom/ui/components/icon";
 
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -50,32 +50,32 @@ export default function RoutingForms({
 
   const features = [
     {
-      icon: <FiFileText className="h-5 w-5 text-orange-500" />,
+      icon: <FileText className="h-5 w-5 text-orange-500" />,
       title: t("create_your_first_form"),
       description: t("create_your_first_form_description"),
     },
     {
-      icon: <FiShuffle className="h-5 w-5 text-lime-500" />,
+      icon: <Shuffle className="h-5 w-5 text-lime-500" />,
       title: t("create_your_first_route"),
       description: t("route_to_the_right_person"),
     },
     {
-      icon: <FiBarChart className="h-5 w-5 text-blue-500" />,
+      icon: <BarChart className="h-5 w-5 text-blue-500" />,
       title: t("reporting"),
       description: t("reporting_feature"),
     },
     {
-      icon: <FiCheckCircle className="h-5 w-5 text-teal-500" />,
+      icon: <CheckCircle className="h-5 w-5 text-teal-500" />,
       title: t("test_routing_form"),
       description: t("test_preview_description"),
     },
     {
-      icon: <FiMail className="h-5 w-5 text-yellow-500" />,
+      icon: <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: <FiDownload className="h-5 w-5 text-violet-500" />,
+      icon: <Download className="h-5 w-5 text-violet-500" />,
       title: t("download_responses"),
       description: t("download_responses_description"),
     },
@@ -87,7 +87,7 @@ export default function RoutingForms({
         variant="fab"
         routingForm={null}
         data-testid="new-routing-form"
-        StartIcon={FiPlus}
+        StartIcon={Plus}
         action="create">
         {t("new")}
       </FormAction>
@@ -121,7 +121,7 @@ export default function RoutingForms({
             <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
               {!forms?.length ? (
                 <EmptyScreen
-                  Icon={FiGitMerge}
+                  Icon={GitMerge}
                   headline={t("create_your_first_form")}
                   description={t("create_your_first_form_description")}
                   buttonRaw={<NewFormButton />}
@@ -156,7 +156,7 @@ export default function RoutingForms({
                                     action="preview"
                                     routingForm={form}
                                     target="_blank"
-                                    StartIcon={FiExternalLink}
+                                    StartIcon={ExternalLink}
                                     color="secondary"
                                     variant="icon"
                                     disabled={disabled}
@@ -167,7 +167,7 @@ export default function RoutingForms({
                                   action="copyLink"
                                   color="secondary"
                                   variant="icon"
-                                  StartIcon={FiLink}
+                                  StartIcon={LinkIcon}
                                   disabled={disabled}
                                   tooltip={t("copy_link_to_form")}
                                 />
@@ -176,7 +176,7 @@ export default function RoutingForms({
                                   action="embed"
                                   color="secondary"
                                   variant="icon"
-                                  StartIcon={FiCode}
+                                  StartIcon={Code}
                                   disabled={disabled}
                                   tooltip={t("embed")}
                                 />
@@ -186,14 +186,14 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="minimal"
                                     className="!flex"
-                                    StartIcon={FiEdit}>
+                                    StartIcon={Edit}>
                                     {t("edit")}
                                   </FormAction>
                                   <FormAction
                                     action="download"
                                     routingForm={form}
                                     color="minimal"
-                                    StartIcon={FiDownload}>
+                                    StartIcon={Download}>
                                     {t("download_responses")}
                                   </FormAction>
                                   <FormAction
@@ -201,7 +201,7 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="minimal"
                                     className="w-full"
-                                    StartIcon={FiCopy}>
+                                    StartIcon={Copy}>
                                     {t("duplicate")}
                                   </FormAction>
                                   {typeformApp?.isInstalled ? (
@@ -211,7 +211,7 @@ export default function RoutingForms({
                                       action="copyRedirectUrl"
                                       color="minimal"
                                       type="button"
-                                      StartIcon={FiLink}>
+                                      StartIcon={LinkIcon}>
                                       {t("Copy Typeform Redirect Url")}
                                     </FormAction>
                                   ) : null}
@@ -220,7 +220,7 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="destructive"
                                     className="w-full"
-                                    StartIcon={FiTrash}>
+                                    StartIcon={Trash}>
                                     {t("delete")}
                                   </FormAction>
                                 </FormActionsDropdown>
@@ -228,13 +228,13 @@ export default function RoutingForms({
                             </>
                           }>
                           <div className="flex flex-wrap gap-1">
-                            <Badge variant="gray" startIcon={FiMenu}>
+                            <Badge variant="gray" startIcon={Menu}>
                               {fields.length} {fields.length === 1 ? "field" : "fields"}
                             </Badge>
-                            <Badge variant="gray" startIcon={FiGitMerge}>
+                            <Badge variant="gray" startIcon={GitMerge}>
                               {form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
                             </Badge>
-                            <Badge variant="gray" startIcon={FiMessageCircle}>
+                            <Badge variant="gray" startIcon={MessageCircle}>
                               {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
                             </Badge>
                           </div>
diff --git a/packages/app-store/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index 0721438ba5..bd59a3aa7b 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -7,7 +7,7 @@ import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Form, showToast, TextField } from "@calcom/ui";
-import { FiCheck, FiX } from "@calcom/ui/components/icon";
+import { Check, X } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -102,7 +102,7 @@ export default function SendgridSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
+                    StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
                     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 74770964e7..c9e524f889 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
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
 import AppCard from "@calcom/app-store/_components/AppCard";
 import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
-import { FiSunrise, FiSunset } from "@calcom/ui/components/icon";
+import { Sunrise, Sunset } from "@calcom/ui/components/icon";
 
 import type { appDataSchema } from "../zod";
 
@@ -28,8 +28,8 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       switchChecked={enabled}>
       <div className="mt-2 text-sm">
         <div className="flex">
-          <span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <FiSunrise /> : <FiSunset />}</span>I am an AppCard
-          for Event with Title: {eventType.title}
+          <span className="ltr:mr-2 rtl:ml-2">{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 8e28a33eb9..6adf2a7543 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { FiExternalLink } from "@calcom/ui/components/icon";
+import { ExternalLink } from "@calcom/ui/components/icon";
 
 export default function HowToUse() {
   const { t } = useLocale();
@@ -31,7 +31,7 @@ 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">
-                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <ExternalLink 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 +42,7 @@ 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">
-                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <ExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Redirect to your typeform
                 </Link>
               </li>
@@ -52,7 +52,7 @@ 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">
-                  <FiExternalLink className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
+                  <ExternalLink 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/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index 1c35de1a72..aac35987f5 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -6,7 +6,7 @@ import { Toaster } from "react-hot-toast";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast, Tooltip } from "@calcom/ui";
-import { FiClipboard } from "@calcom/ui/components/icon";
+import { Clipboard } from "@calcom/ui/components/icon";
 
 export interface IZapierSetupProps {
   inviteLink: string;
@@ -76,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-                        <FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+                        <Clipboard className="h-5 w-5 text-gray-100 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 8f04731c55..845faa9543 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -30,7 +30,7 @@ import {
   TextField,
   Switch,
 } from "@calcom/ui";
-import { FiAlertCircle, FiEdit } from "@calcom/ui/components/icon";
+import { AlertCircle, Edit } from "@calcom/ui/components/icon";
 
 import AppListCard from "../../../apps/web/components/AppListCard";
 
@@ -92,7 +92,7 @@ const IntegrationContainer = ({
           <div className="flex items-center justify-self-end">
             {app.keys && (
               <Button color="secondary" className="mr-2" onClick={() => showKeyModal()}>
-                <FiEdit />
+                <Edit />
               </Button>
             )}
 
@@ -295,7 +295,7 @@ const AdminAppsListContainer = () => {
   if (!apps) {
     return (
       <EmptyScreen
-        Icon={FiAlertCircle}
+        Icon={AlertCircle}
         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 0f89c2e270..66ebf5cde1 100644
--- a/packages/features/apps/components/AppSetDefaultLinkDialog.tsx
+++ b/packages/features/apps/components/AppSetDefaultLinkDialog.tsx
@@ -17,7 +17,7 @@ import {
   Button,
   DialogClose,
 } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 type LocationTypeSetLinkDialogFormProps = {
   link?: string;
@@ -57,7 +57,7 @@ export function AppSetDefaultLinkDialog({
         title={t("default_app_link_title")}
         description={t("default_app_link_description")}
         type="creation"
-        Icon={FiAlertCircle}>
+        Icon={AlertCircle}>
         <Form
           form={form}
           handleSubmit={(values) => {
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index 5e6682437c..65f210775b 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -2,9 +2,9 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import type { ButtonProps } from "@calcom/ui";
 import {
   Button,
-  ButtonProps,
   Dialog,
   DialogContent,
   DialogTrigger,
@@ -12,7 +12,7 @@ import {
   DialogFooter,
   DialogClose,
 } from "@calcom/ui";
-import { FiTrash, FiAlertCircle } from "@calcom/ui/components/icon";
+import { Trash, AlertCircle } from "@calcom/ui/components/icon";
 
 export default function DisconnectIntegration({
   credentialId,
@@ -54,7 +54,7 @@ export default function DisconnectIntegration({
         <DialogTrigger asChild>
           <Button
             color={buttonProps?.color || "destructive"}
-            StartIcon={trashIcon ? FiTrash : undefined}
+            StartIcon={trashIcon ? Trash : undefined}
             size="base"
             variant={trashIcon && !label ? "icon" : "button"}
             disabled={isGlobal}
@@ -66,7 +66,7 @@ export default function DisconnectIntegration({
           title={t("remove_app")}
           description={t("are_you_sure_you_want_to_remove_this_app")}
           type="confirmation"
-          Icon={FiAlertCircle}>
+          Icon={AlertCircle}>
           <DialogFooter>
             <DialogClose onClick={() => setModalOpen(false)} />
             <DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
diff --git a/packages/features/apps/components/DisconnectIntegrationModal.tsx b/packages/features/apps/components/DisconnectIntegrationModal.tsx
index cc5f788a8f..46109c0a5e 100644
--- a/packages/features/apps/components/DisconnectIntegrationModal.tsx
+++ b/packages/features/apps/components/DisconnectIntegrationModal.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogContent, showToast, DialogFooter, DialogClose } from "@calcom/ui";
-import { FiAlertCircle } from "@calcom/ui/components/icon";
+import { AlertCircle } from "@calcom/ui/components/icon";
 
 interface DisconnectIntegrationModalProps {
   credentialId: number | null;
@@ -36,7 +36,7 @@ export default function DisconnectIntegrationModal({
         title={t("remove_app")}
         description={t("are_you_sure_you_want_to_remove_this_app")}
         type="confirmation"
-        Icon={FiAlertCircle}>
+        Icon={AlertCircle}>
         <DialogFooter>
           <DialogClose onClick={handleModelClose} />
           <DialogClose
diff --git a/packages/features/auth/SAMLLogin.tsx b/packages/features/auth/SAMLLogin.tsx
index 0bc70fb3ce..0defc7e4ca 100644
--- a/packages/features/auth/SAMLLogin.tsx
+++ b/packages/features/auth/SAMLLogin.tsx
@@ -7,7 +7,7 @@ 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 { FiLock } from "@calcom/ui/components/icon";
+import { Lock } from "@calcom/ui/components/icon";
 
 interface Props {
   samlTenantID: string;
@@ -34,7 +34,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
 
   return (
     <Button
-      StartIcon={FiLock}
+      StartIcon={Lock}
       color="secondary"
       data-testid="saml"
       className="flex w-full justify-center"
diff --git a/packages/features/bookings/components/PeopleFilter.tsx b/packages/features/bookings/components/PeopleFilter.tsx
index 60198e26e0..6869905998 100644
--- a/packages/features/bookings/components/PeopleFilter.tsx
+++ b/packages/features/bookings/components/PeopleFilter.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar } from "@calcom/ui";
-import { FiUser } from "@calcom/ui/components/icon";
+import { User } from "@calcom/ui/components/icon";
 
 import { useFilterQuery } from "../lib/useFilterQuery";
 
@@ -22,7 +22,7 @@ export const PeopleFilter = () => {
     <AnimatedPopover text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : dropdownTitle}>
       <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
         <div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <FiUser className="h-5 w-5" />
+          <User className="h-5 w-5" />
         </div>
         <label htmlFor="allUsers" className="text-default mr-auto self-center truncate text-sm font-medium">
           {t("all_users_filter_label")}
diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx
index 40ad4673ae..e36f2351f3 100644
--- a/packages/features/bookings/components/TeamFilter.tsx
+++ b/packages/features/bookings/components/TeamFilter.tsx
@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar } from "@calcom/ui";
-import { FiLayers, FiUser } from "@calcom/ui/components/icon";
+import { Layers, User } from "@calcom/ui/components/icon";
 
 import { useFilterQuery } from "../lib/useFilterQuery";
 
@@ -24,7 +24,7 @@ export const TeamsMemberFilter = () => {
     <AnimatedPopover text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : dropdownTitle}>
       <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
         <div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <FiLayers className="h-5 w-5" />
+          <Layers className="h-5 w-5" />
         </div>
         <label
           htmlFor="allBookings"
@@ -45,7 +45,7 @@ export const TeamsMemberFilter = () => {
       </div>
       <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] hover:cursor-pointer">
         <div className="text-default flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <FiUser className="h-5 w-5" />
+          <User className="h-5 w-5" />
         </div>
         <label
           htmlFor="yourBookings"
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 056f768803..7e2e5dcb26 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -8,7 +8,7 @@ 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 { FiArrowRight } 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 */
@@ -82,7 +82,7 @@ const NoAvailabilityOverlay = ({
   return (
     <div className=" bg-muted border-subtle absolute top-40 left-1/2 -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={FiArrowRight}>
+      <Button onClick={nextMonthButton} color="primary" EndIcon={ArrowRight}>
         {t("view_next_month")}
       </Button>
     </div>
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index a61ab5c7ec..309da3f8ff 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -1,6 +1,6 @@
 import dayjs from "@calcom/dayjs";
 import { Button, ButtonGroup } from "@calcom/ui";
-import { FiChevronLeft, FiChevronRight } from "@calcom/ui/components/icon";
+import { ChevronLeft, ChevronRight } from "@calcom/ui/components/icon";
 
 import { useCalendarStore } from "../../state/store";
 
@@ -30,7 +30,7 @@ export function SchedulerHeading() {
         <ButtonGroup combined>
           {/* TODO: i18n label with correct view */}
           <Button
-            StartIcon={FiChevronLeft}
+            StartIcon={ChevronLeft}
             variant="icon"
             color="secondary"
             aria-label="Previous Week"
@@ -39,7 +39,7 @@ export function SchedulerHeading() {
             }}
           />
           <Button
-            StartIcon={FiChevronRight}
+            StartIcon={ChevronRight}
             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 aac59a1060..ad501e3aa4 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -7,7 +7,7 @@ import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
-import { FiClipboard } from "@calcom/ui/components/icon";
+import { Clipboard } from "@calcom/ui/components/icon";
 
 export default function ApiKeyDialogForm({
   defaultValues,
@@ -74,7 +74,7 @@ export default function ApiKeyDialogForm({
                   }}
                   type="button"
                   className="rounded-l-none py-[19px] text-base ">
-                  <FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+                  <Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
                   {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 3970a5cf49..accfb029ba 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -12,7 +12,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@calcom/ui";
-import { FiMoreHorizontal, FiEdit2, FiTrash } from "@calcom/ui/components/icon";
+import { MoreHorizontal, Edit2, Trash } from "@calcom/ui/components/icon";
 
 export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
 
@@ -59,12 +59,12 @@ const ApiKeyListItem = ({
       <div>
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
+            <Button type="button" variant="icon" color="secondary" StartIcon={MoreHorizontal} />
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <DropdownItem type="button" onClick={onEditClick} StartIcon={FiEdit2}>
+              <DropdownItem type="button" onClick={onEditClick} StartIcon={Edit2}>
                 {t("edit") as string}
               </DropdownItem>
             </DropdownMenuItem>
@@ -76,7 +76,7 @@ const ApiKeyListItem = ({
                     id: apiKey.id,
                   })
                 }
-                StartIcon={FiTrash}>
+                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 bc3664a9d9..e4e36a76cd 100644
--- a/packages/features/ee/common/components/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/LicenseRequired.tsx
@@ -5,12 +5,13 @@
  */
 import DOMPurify from "dompurify";
 import { useSession } from "next-auth/react";
-import React, { AriaRole, ComponentType, Fragment } from "react";
+import type { AriaRole, ComponentType } from "react";
+import React, { Fragment } from "react";
 
 import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertTriangle } from "@calcom/ui/components/icon";
+import { AlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -36,7 +37,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
         children
       ) : (
         <EmptyScreen
-          Icon={FiAlertTriangle}
+          Icon={AlertTriangle}
           headline={t("enterprise_license")}
           description={
             <div
diff --git a/packages/features/ee/common/components/v2/LicenseRequired.tsx b/packages/features/ee/common/components/v2/LicenseRequired.tsx
index 43452e7344..103330b9f2 100644
--- a/packages/features/ee/common/components/v2/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/v2/LicenseRequired.tsx
@@ -6,7 +6,7 @@ import React, { Fragment } from "react";
 import { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui";
-import { FiAlertTriangle } from "@calcom/ui/components/icon";
+import { AlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -27,7 +27,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
         children
       ) : (
         <EmptyScreen
-          Icon={FiAlertTriangle}
+          Icon={AlertTriangle}
           headline={t("enterprise_license")}
           description={
             <div
diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 10a249a238..f37e690f8a 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -16,7 +16,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
 import { localStorage } from "@calcom/lib/webstorage";
-import { FiCreditCard } from "@calcom/ui/components/icon";
+import { CreditCard } from "@calcom/ui/components/icon";
 
 import type { PaymentPageProps } from "../pages/payment";
 import PaymentComponent from "./Payment";
@@ -81,7 +81,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">
-                    <FiCreditCard className="h-8 w-8 text-green-600" />
+                    <CreditCard 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 ae72e539c6..43f32f0fdf 100644
--- a/packages/features/ee/sso/components/ConnectionInfo.tsx
+++ b/packages/features/ee/sso/components/ConnectionInfo.tsx
@@ -11,7 +11,7 @@ import {
   DialogTrigger,
   Label,
 } from "@calcom/ui";
-import { FiClipboard } from "@calcom/ui/components/icon";
+import { Clipboard } from "@calcom/ui/components/icon";
 
 export default function ConnectionInfo({
   teamId,
@@ -99,7 +99,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+              <Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -121,7 +121,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+              <Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -157,7 +157,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <FiClipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+              <Clipboard className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index 64b563cd90..7bcdf66e4c 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -5,7 +5,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, showToast, TextArea } from "@calcom/ui";
-import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
+import { ExternalLink, AlertTriangle } from "@calcom/ui/components/icon";
 
 import { useFreshChat } from "../lib/freshchat/FreshChatProvider";
 import { isFreshChatEnabled } from "../lib/freshchat/FreshChatScript";
@@ -55,7 +55,7 @@ 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")}
-          <FiExternalLink
+          <ExternalLink
             className={classNames(
               "group-hover:text-subtle text-muted",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -174,7 +174,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">
-              <FiAlertTriangle className="h-5 w-5" />
+              <AlertTriangle 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 c9502db78f..3277bcf3cb 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Avatar, Badge, Button, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
-import { FiPlus, FiArrowRight, FiTrash2 } from "@calcom/ui/components/icon";
+import { Plus, ArrowRight, Trash2 } from "@calcom/ui/components/icon";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
@@ -80,7 +80,7 @@ export const AddNewTeamMembersForm = ({
         <Button
           color="secondary"
           data-testid="new-member-button"
-          StartIcon={FiPlus}
+          StartIcon={Plus}
           onClick={() => setMemberInviteModal(true)}
           className="mt-6 w-full justify-center">
           {t("add_team_member")}
@@ -102,7 +102,7 @@ export const AddNewTeamMembersForm = ({
       />
       <hr className="border-subtle my-6" />
       <Button
-        EndIcon={FiArrowRight}
+        EndIcon={ArrowRight}
         className="mt-6 w-full justify-center"
         disabled={publishTeamMutation.isLoading}
         onClick={() => {
@@ -179,7 +179,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
       {member.role !== "OWNER" && (
         <Button
           data-testid="remove-member-button"
-          StartIcon={FiTrash2}
+          StartIcon={Trash2}
           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 bf6be200aa..7346aa7bb0 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -9,7 +9,7 @@ import slugify from "@calcom/lib/slugify";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Avatar, Button, Form, ImageUploader, TextField, Alert } from "@calcom/ui";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import type { NewTeamFormValues } from "../lib/types";
 
@@ -151,7 +151,7 @@ export const CreateANewTeamForm = () => {
           <Button
             disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isLoading}
             color="primary"
-            EndIcon={FiArrowRight}
+            EndIcon={ArrowRight}
             type="submit"
             className="w-full justify-center">
             {t("continue")}
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 3501164f47..0b429dd90f 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -26,7 +26,7 @@ import {
   showToast,
   Tooltip,
 } from "@calcom/ui";
-import { FiExternalLink, FiMoreHorizontal, FiEdit2, FiLock, FiTrash } from "@calcom/ui/components/icon";
+import { ExternalLink, MoreHorizontal, Edit2, Lock, Trash } from "@calcom/ui/components/icon";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamPill, { TeamRole } from "./TeamPill";
@@ -149,7 +149,7 @@ export default function MemberListItem(props: Props) {
                   onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
                   color="secondary"
                   variant="icon"
-                  StartIcon={FiClock}
+                  StartIcon={Clock}
                 />
               </Tooltip> */}
               <Tooltip content={t("view_public_page")}>
@@ -159,7 +159,7 @@ export default function MemberListItem(props: Props) {
                   color="secondary"
                   className={classNames(!editMode ? "rounded-r-md" : "")}
                   variant="icon"
-                  StartIcon={FiExternalLink}
+                  StartIcon={ExternalLink}
                 />
               </Tooltip>
               {editMode && (
@@ -169,7 +169,7 @@ export default function MemberListItem(props: Props) {
                       className="radix-state-open:rounded-r-md"
                       color="secondary"
                       variant="icon"
-                      StartIcon={FiMoreHorizontal}
+                      StartIcon={MoreHorizontal}
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
@@ -177,7 +177,7 @@ export default function MemberListItem(props: Props) {
                       <DropdownItem
                         type="button"
                         onClick={() => setShowChangeMemberRoleModal(true)}
-                        StartIcon={FiEdit2}>
+                        StartIcon={Edit2}>
                         {t("edit")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -187,7 +187,7 @@ export default function MemberListItem(props: Props) {
                           <DropdownItem
                             type="button"
                             onClick={() => setShowImpersonateModal(true)}
-                            StartIcon={FiLock}>
+                            StartIcon={Lock}>
                             {t("impersonate")}
                           </DropdownItem>
                         </DropdownMenuItem>
@@ -199,7 +199,7 @@ export default function MemberListItem(props: Props) {
                         type="button"
                         onClick={() => setShowDeleteModal(true)}
                         color="destructive"
-                        StartIcon={FiTrash}>
+                        StartIcon={Trash}>
                         {t("delete")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -210,11 +210,11 @@ export default function MemberListItem(props: Props) {
             <div className="flex md:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" variant="icon" color="minimal" StartIcon={FiMoreHorizontal} />
+                  <Button type="button" variant="icon" color="minimal" StartIcon={MoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem className="outline-none">
-                    <DropdownItem type="button" StartIcon={FiExternalLink}>
+                    <DropdownItem type="button" StartIcon={ExternalLink}>
                       {t("view_public_page")}
                     </DropdownItem>
                   </DropdownMenuItem>
@@ -224,7 +224,7 @@ export default function MemberListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           onClick={() => setShowChangeMemberRoleModal(true)}
-                          StartIcon={FiEdit2}>
+                          StartIcon={Edit2}>
                           {t("edit")}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -233,7 +233,7 @@ export default function MemberListItem(props: Props) {
                           type="button"
                           color="destructive"
                           onClick={() => setShowDeleteModal(true)}
-                          StartIcon={FiTrash}>
+                          StartIcon={Trash}>
                           {t("delete")}
                         </DropdownItem>
                       </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 3fbc27729c..204917634b 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -13,7 +13,7 @@ import {
   DropdownItem,
   DropdownMenuTrigger,
 } from "@calcom/ui";
-import { FiSlash, FiCheck, FiMoreHorizontal, FiX } from "@calcom/ui/components/icon";
+import { Slash, Check, MoreHorizontal, X } from "@calcom/ui/components/icon";
 
 interface Props {
   team: {
@@ -93,7 +93,7 @@ export default function TeamInviteListItem(props: Props) {
                 variant="icon"
                 color="secondary"
                 onClick={declineInvite}
-                StartIcon={FiSlash}
+                StartIcon={Slash}
               />
               <Button
                 type="button"
@@ -101,22 +101,22 @@ export default function TeamInviteListItem(props: Props) {
                 variant="icon"
                 color="secondary"
                 onClick={acceptInvite}
-                StartIcon={FiCheck}
+                StartIcon={Check}
               />
             </div>
             <div className="block sm:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
+                  <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
-                    <DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
+                    <DropdownItem type="button" StartIcon={Check} onClick={acceptInvite}>
                       {t("accept")}
                     </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
-                    <DropdownItem color="destructive" type="button" StartIcon={FiX} 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 261bf86efa..bc9f4cbf2c 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -4,7 +4,7 @@ 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 { FiUserPlus, FiUsers, FiEdit } from "@calcom/ui/components/icon";
+import { UserPlus, Users, Edit } from "@calcom/ui/components/icon";
 
 import TeamListItem from "./TeamListItem";
 
@@ -66,7 +66,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={<FiUserPlus className="h-5 w-5 text-green-700" />}
+                      icon={<UserPlus className="h-5 w-5 text-green-700" />}
                       variant="basic"
                       title={t("invite_team_member")}
                       description={t("meetings_are_better_with_the_right")}
@@ -77,7 +77,7 @@ export default function TeamList(props: Props) {
                     />
                     {/* @TODO: uncomment once managed event types is live
                     <Card
-                      icon={<FiUnlock className="h-5 w-5 text-blue-700" />}
+                      icon={<Unlock className="h-5 w-5 text-blue-700" />}
                       variant="basic"
                       title={t("create_a_managed_event")}
                       description={t("create_a_one_one_template")}
@@ -92,7 +92,7 @@ export default function TeamList(props: Props) {
                       }}
                     /> */}
                     <Card
-                      icon={<FiUsers className="h-5 w-5 text-orange-700" />}
+                      icon={<Users className="h-5 w-5 text-orange-700" />}
                       variant="basic"
                       title={t("collective_or_roundrobin")}
                       description={t("book_your_team_members")}
@@ -102,7 +102,7 @@ export default function TeamList(props: Props) {
                       }}
                     />
                     <Card
-                      icon={<FiEdit className="h-5 w-5 text-purple-700" />}
+                      icon={<Edit className="h-5 w-5 text-purple-700" />}
                       variant="basic"
                       title={t("appearance")}
                       description={t("appearance_subtitle")}
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index df1fbf6e2e..b7f9b60fed 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -26,16 +26,16 @@ import {
   Tooltip,
 } from "@calcom/ui";
 import {
-  FiMoreHorizontal,
-  FiCheck,
-  FiX,
-  FiLink,
-  FiEdit2,
-  FiExternalLink,
-  FiTrash,
-  FiLogOut,
-  FiGlobe,
-  FiSend,
+  MoreHorizontal,
+  Check,
+  X,
+  Link as LinkIcon,
+  Edit2,
+  ExternalLink,
+  Trash,
+  LogOut,
+  Globe,
+  Send,
 } from "@calcom/ui/components/icon";
 
 import { TeamRole } from "./TeamPill";
@@ -153,7 +153,7 @@ export default function TeamListItem(props: Props) {
                 <Button
                   type="button"
                   color="secondary"
-                  StartIcon={FiCheck}
+                  StartIcon={Check}
                   className="ms-2 me-2"
                   onClick={acceptInvite}>
                   {t("accept")}
@@ -162,16 +162,16 @@ export default function TeamListItem(props: Props) {
               <div className="block sm:hidden">
                 <Dropdown>
                   <DropdownMenuTrigger asChild>
-                    <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
+                    <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
-                      <DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
+                      <DropdownItem type="button" StartIcon={Check} onClick={acceptInvite}>
                         {t("accept")}
                       </DropdownItem>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                      <DropdownItem color="destructive" type="button" StartIcon={FiX} onClick={declineInvite}>
+                      <DropdownItem color="destructive" type="button" StartIcon={X} onClick={declineInvite}>
                         {t("reject")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -194,7 +194,7 @@ export default function TeamListItem(props: Props) {
                         showToast(t("link_copied"), "success");
                       }}
                       variant="icon"
-                      StartIcon={FiLink}
+                      StartIcon={LinkIcon}
                     />
                   </Tooltip>
                 )}
@@ -205,7 +205,7 @@ export default function TeamListItem(props: Props) {
                       type="button"
                       color="secondary"
                       variant="icon"
-                      StartIcon={FiMoreHorizontal}
+                      StartIcon={MoreHorizontal}
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent hidden={hideDropdown}>
@@ -214,7 +214,7 @@ export default function TeamListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           href={"/settings/teams/" + team.id + "/profile"}
-                          StartIcon={FiEdit2}>
+                          StartIcon={Edit2}>
                           {t("edit_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -226,7 +226,7 @@ export default function TeamListItem(props: Props) {
                           type="button"
                           target="_blank"
                           href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`}
-                          StartIcon={FiExternalLink}>
+                          StartIcon={ExternalLink}>
                           {t("preview_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -237,7 +237,7 @@ export default function TeamListItem(props: Props) {
                         onClick={() => {
                           setOpenMemberInvitationModal(true);
                         }}
-                        StartIcon={FiSend}>
+                        StartIcon={Send}>
                         {t("invite_team_member") as string}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -249,7 +249,7 @@ export default function TeamListItem(props: Props) {
                             <DropdownItem
                               color="destructive"
                               type="button"
-                              StartIcon={FiTrash}
+                              StartIcon={Trash}
                               onClick={(e) => {
                                 e.stopPropagation();
                               }}>
@@ -277,7 +277,7 @@ export default function TeamListItem(props: Props) {
                             <DropdownItem
                               color="destructive"
                               type="button"
-                              StartIcon={FiLogOut}
+                              StartIcon={LogOut}
                               onClick={(e) => {
                                 e.stopPropagation();
                               }}>
@@ -324,7 +324,7 @@ const TeamPublishButton = ({ teamId }: { teamId: number }) => {
         onClick={() => {
           publishTeamMutation.mutate({ teamId });
         }}
-        StartIcon={FiGlobe}>
+        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 69762bd6c4..3c595e619c 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -5,7 +5,7 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Alert, Button, ButtonGroup, Label } from "@calcom/ui";
-import { FiUsers, FiRefreshCcw, FiUserPlus, FiMail, FiVideo, FiEyeOff } from "@calcom/ui/components/icon";
+import { Users, RefreshCcw, UserPlus, Mail, Video, EyeOff } from "@calcom/ui/components/icon";
 
 import { UpgradeTip } from "../../../tips";
 import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
@@ -26,32 +26,32 @@ export function TeamsListing() {
 
   const features = [
     {
-      icon: <FiUsers className="h-5 w-5 text-red-500" />,
+      icon: <Users className="h-5 w-5 text-red-500" />,
       title: t("collective_scheduling"),
       description: t("make_it_easy_to_book"),
     },
     {
-      icon: <FiRefreshCcw className="h-5 w-5 text-blue-500" />,
+      icon: <RefreshCcw className="h-5 w-5 text-blue-500" />,
       title: t("round_robin"),
       description: t("find_the_best_person"),
     },
     {
-      icon: <FiUserPlus className="h-5 w-5 text-green-500" />,
+      icon: <UserPlus className="h-5 w-5 text-green-500" />,
       title: t("fixed_round_robin"),
       description: t("add_one_fixed_attendee"),
     },
     {
-      icon: <FiMail className="h-5 w-5 text-orange-500" />,
+      icon: <Mail className="h-5 w-5 text-orange-500" />,
       title: t("sms_attendee_action"),
       description: t("make_it_easy_to_book"),
     },
     {
-      icon: <FiVideo className="h-5 w-5 text-purple-500" />,
+      icon: <Video className="h-5 w-5 text-purple-500" />,
       title: "Cal Video" + " " + t("recordings_title"),
       description: t("upgrade_to_access_recordings_description"),
     },
     {
-      icon: <FiEyeOff className="h-5 w-5 text-indigo-500" />,
+      icon: <EyeOff 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 }),
     },
diff --git a/packages/features/ee/teams/pages/team-billing-view.tsx b/packages/features/ee/teams/pages/team-billing-view.tsx
index 590e2b0109..195fdcb1cf 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, Meta } from "@calcom/ui";
-import { FiExternalLink } from "@calcom/ui/components/icon";
+import { ExternalLink } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -21,7 +21,7 @@ const BillingView = () => {
           <p>{t("billing_manage_details_description")}</p>
         </div>
         <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pt-0 sm:pl-3">
-          <Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon={ExternalLink}>
             {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 4b52f9b223..99c4d24c10 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Meta, showToast } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
@@ -64,7 +64,7 @@ const MembersView = () => {
             <Button
               type="button"
               color="primary"
-              StartIcon={FiPlus}
+              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 4ed2248330..4dc4ad354a 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -29,7 +29,7 @@ import {
   TextField,
   Editor,
 } from "@calcom/ui";
-import { FiExternalLink, FiLink, FiTrash2, FiLogOut } from "@calcom/ui/components/icon";
+import { ExternalLink, Link as LinkIcon, Trash2, LogOut } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -263,10 +263,10 @@ const ProfileView = () => {
               </div>
               <div className="">
                 <Link href={permalink} passHref={true} target="_blank">
-                  <LinkIconButton Icon={FiExternalLink}>{t("preview")}</LinkIconButton>
+                  <LinkIconButton Icon={ExternalLink}>{t("preview")}</LinkIconButton>
                 </Link>
                 <LinkIconButton
-                  Icon={FiLink}
+                  Icon={LinkIcon}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Copied to clipboard", "success");
@@ -282,7 +282,7 @@ const ProfileView = () => {
           {team?.membership.role === "OWNER" ? (
             <Dialog>
               <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={FiTrash2}>
+                <Button color="destructive" className="border" StartIcon={Trash2}>
                   {t("disband_team")}
                 </Button>
               </DialogTrigger>
@@ -297,7 +297,7 @@ const ProfileView = () => {
           ) : (
             <Dialog>
               <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={FiLogOut}>
+                <Button color="destructive" className="border" StartIcon={LogOut}>
                   {t("leave_team")}
                 </Button>
               </DialogTrigger>
diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index ec574cdc1e..eaa284bd96 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -17,7 +17,7 @@ import {
   UpgradeTeamsBadge,
 } from "@calcom/ui";
 import { Button } from "@calcom/ui";
-import { FiDownload } from "@calcom/ui/components/icon";
+import { Download } from "@calcom/ui/components/icon";
 
 import RecordingListSkeleton from "./components/RecordingListSkeleton";
 
@@ -131,7 +131,7 @@ const ViewRecordingsList = ({ roomName, hasPaidPlan }: { roomName: string; hasPa
                 </div>
                 {hasPaidPlan ? (
                   <Button
-                    StartIcon={FiDownload}
+                    StartIcon={Download}
                     className="ml-4 lg:ml-0"
                     loading={isFetching && recordingId === recording.id}
                     onClick={() => handleDownloadClick(recording.id)}>
diff --git a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
index e8ed0ced59..83ac8d5100 100644
--- a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+++ b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
-import { FiUsers } from "@calcom/ui/components/icon";
+import { Users } from "@calcom/ui/components/icon";
 
 export default function UpgradeRecordingBanner() {
   const { t } = useLocale();
@@ -11,7 +11,7 @@ export default function UpgradeRecordingBanner() {
 
   return (
     <div className="bg-subtle flex items-start gap-2 rounded-md p-4">
-      <FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
+      <Users className="dark:bg-gray-90 inline-block h-5 w-5" />
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-2">
           <h2 className="text-sm font-semibold">{t("upgrade_to_access_recordings_title")}</h2>
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index 94db1d1800..3281ca47d7 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -5,7 +5,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 import { CreateButton, showToast, EmptyScreen as ClassicEmptyScreen } from "@calcom/ui";
-import { FiSmartphone, FiMail, FiZap } from "@calcom/ui/components/icon";
+import { Smartphone, Mail, Zap } from "@calcom/ui/components/icon";
 
 type WorkflowExampleType = {
   Icon: SVGComponent;
@@ -61,24 +61,24 @@ export default function EmptyScreen(props: {
   });
 
   const workflowsExamples = [
-    { icon: FiSmartphone, text: t("workflow_example_1") },
-    { icon: FiSmartphone, text: t("workflow_example_2") },
-    { icon: FiMail, text: t("workflow_example_3") },
-    { icon: FiMail, text: t("workflow_example_4") },
-    { icon: FiMail, text: t("workflow_example_5") },
-    { icon: FiSmartphone, 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") },
   ];
-  // new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon),
+  // 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={FiZap} 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">
-          <FiZap className="dark:text-default inline-block h-10 w-10 stroke-[1.3px]" />
+          <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 c137bb3a60..b6e9207d33 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui";
-import { FiExternalLink, FiZap } from "@calcom/ui/components/icon";
+import { ExternalLink, Zap } from "@calcom/ui/components/icon";
 
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import { getActionIcon } from "../lib/getActionIcon";
@@ -133,7 +133,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>
-            <FiExternalLink className="text-default -mt-[2px] h-4 w-4 stroke-2" />
+            <ExternalLink className="text-default -mt-[2px] h-4 w-4 stroke-2" />
           </Button>
         </Link>
       </div>
@@ -219,7 +219,7 @@ function EventWorkflowsTab(props: Props) {
         ) : (
           <div className="pt-4 before:border-0">
             <EmptyScreen
-              Icon={FiZap}
+              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 9519cedfeb..43ad47c66f 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -1,5 +1,5 @@
 import { SkeletonText } from "@calcom/ui";
-import { FiBell, FiLink } from "@calcom/ui/components/icon";
+import { Bell, Link as LinkIcon } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
@@ -21,9 +21,9 @@ function SkeletonItem() {
           <div className="flex flex-col space-y-2">
             <SkeletonText className="h-4 w-16 sm:w-24" />
             <div className="flex">
-              <FiBell className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Bell className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
-              <FiLink className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <LinkIcon className="mt-0.5 mr-1.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 3f518ec89c..81783bff28 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { UseFormReturn } from "react-hook-form";
+import type { UseFormReturn } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
   TextField,
 } from "@calcom/ui";
-import { FiChevronDown } from "@calcom/ui/components/icon";
+import { ChevronDown } from "@calcom/ui/components/icon";
 
 import { getWorkflowTimeUnitOptions } from "../lib/getOptions";
 import type { FormValues } from "../pages/workflow";
@@ -44,7 +44,7 @@ export const TimeTimeUnitInput = (props: Props) => {
                     {timeUnit ? t(`${timeUnit.toLowerCase()}_timeUnit`) : "undefined"}{" "}
                   </div>
                   <div className="w-1/4 pt-1">
-                    <FiChevronDown />
+                    <ChevronDown />
                   </div>
                 </button>
               </DropdownMenuTrigger>
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index 0b074c6c11..8a4f2bc717 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -11,7 +11,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
 import { Button, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui";
-import { FiArrowDown, FiTrash2 } from "@calcom/ui/components/icon";
+import { ArrowDown, Trash2 } from "@calcom/ui/components/icon";
 
 import { isSMSAction } from "../lib/isSMSAction";
 import type { FormValues } from "../pages/workflow";
@@ -136,7 +136,7 @@ export default function WorkflowDetailsPage(props: Props) {
           <div className="md:border-subtle my-7 border-transparent md:border-t" />
           <Button
             type="button"
-            StartIcon={FiTrash2}
+            StartIcon={Trash2}
             color="destructive"
             className="border"
             onClick={() => setDeleteDialogOpen(true)}>
@@ -169,7 +169,7 @@ export default function WorkflowDetailsPage(props: Props) {
             </>
           )}
           <div className="my-3 flex justify-center">
-            <FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
+            <ArrowDown 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 881132cb81..c17b0bebd2 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -17,7 +17,7 @@ import {
   Tooltip,
   Badge,
 } from "@calcom/ui";
-import { FiEdit2, FiLink, FiMoreHorizontal, FiTrash2 } from "@calcom/ui/components/icon";
+import { Edit2, Link as LinkIcon, MoreHorizontal, Trash2 } from "@calcom/ui/components/icon";
 
 import { getActionIcon } from "../lib/getActionIcon";
 import { DeleteDialog } from "./DeleteDialog";
@@ -116,13 +116,13 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                                   <p key={key}>{activeOn.eventType.title}</p>
                                 ))}>
                                 <div>
-                                  <FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                  <LinkIcon className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                                   {t("active_on_event_types", { count: workflow.activeOn.length })}
                                 </div>
                               </Tooltip>
                             ) : (
                               <div>
-                                <FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                <LinkIcon className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                                 {t("no_active_event_types")}
                               </div>
                             )}
@@ -147,7 +147,7 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                             type="button"
                             color="secondary"
                             variant="icon"
-                            StartIcon={FiEdit2}
+                            StartIcon={Edit2}
                             disabled={workflow.readOnly}
                             onClick={async () => await router.replace("/workflows/" + workflow.id)}
                           />
@@ -161,7 +161,7 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                             color="secondary"
                             variant="icon"
                             disabled={workflow.readOnly}
-                            StartIcon={FiTrash2}
+                            StartIcon={Trash2}
                           />
                         </Tooltip>
                       </ButtonGroup>
@@ -170,18 +170,13 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                       <div className="block sm:hidden">
                         <Dropdown>
                           <DropdownMenuTrigger asChild>
-                            <Button
-                              type="button"
-                              color="minimal"
-                              variant="icon"
-                              StartIcon={FiMoreHorizontal}
-                            />
+                            <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
                           </DropdownMenuTrigger>
                           <DropdownMenuContent>
                             <DropdownMenuItem>
                               <DropdownItem
                                 type="button"
-                                StartIcon={FiEdit2}
+                                StartIcon={Edit2}
                                 onClick={async () => await router.replace("/workflows/" + workflow.id)}>
                                 {t("edit")}
                               </DropdownItem>
@@ -190,7 +185,7 @@ export default function WorkflowListPage({ workflows, profileOptions, hasNoWorkf
                               <DropdownItem
                                 type="button"
                                 color="destructive"
-                                StartIcon={FiTrash2}
+                                StartIcon={Trash2}
                                 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 a7adf7c367..8ad1b8472d 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -35,7 +35,7 @@ import {
   AddVariablesDropdown,
   Input,
 } from "@calcom/ui";
-import { FiArrowDown, FiMoreHorizontal, FiTrash2, FiHelpCircle } from "@calcom/ui/components/icon";
+import { ArrowDown, MoreHorizontal, Trash2, HelpCircle } from "@calcom/ui/components/icon";
 
 import { DYNAMIC_TEXT_VARIABLES } from "../lib/constants";
 import { getWorkflowTemplateOptions, getWorkflowTriggerOptions } from "../lib/getOptions";
@@ -281,7 +281,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="my-3 flex justify-center">
-          <FiArrowDown className="text-subtle stroke-[1.5px] text-3xl" />
+          <ArrowDown 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">
@@ -301,13 +301,13 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div>
                   <Dropdown>
                     <DropdownMenuTrigger asChild>
-                      <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
+                      <Button type="button" color="minimal" variant="icon" StartIcon={MoreHorizontal} />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                       <DropdownMenuItem>
                         <DropdownItem
                           type="button"
-                          StartIcon={FiTrash2}
+                          StartIcon={Trash2}
                           color="destructive"
                           onClick={() => {
                             const steps = form.getValues("steps");
@@ -645,7 +645,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">
-                        <FiHelpCircle className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <HelpCircle className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
                     </button>
diff --git a/packages/features/ee/workflows/lib/getActionIcon.tsx b/packages/features/ee/workflows/lib/getActionIcon.tsx
index 5135b3e387..7792271af9 100644
--- a/packages/features/ee/workflows/lib/getActionIcon.tsx
+++ b/packages/features/ee/workflows/lib/getActionIcon.tsx
@@ -1,26 +1,25 @@
-import { WorkflowActions, WorkflowStep } from "@prisma/client";
+import type { WorkflowStep } from "@prisma/client";
+import { WorkflowActions } from "@prisma/client";
 
 import { classNames } from "@calcom/lib";
-import { FiZap, FiSmartphone, FiMail, FiBell } from "@calcom/ui/components/icon";
+import { Zap, Smartphone, Mail, Bell } from "@calcom/ui/components/icon";
 
 export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.Element {
   if (steps.length === 0) {
-    return (
-      <FiZap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
-    );
+    return <Zap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
   }
 
   if (steps.length === 1) {
     if (steps[0].action === WorkflowActions.SMS_ATTENDEE || steps[0].action === WorkflowActions.SMS_NUMBER) {
       return (
-        <FiSmartphone
+        <Smartphone
           className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
           aria-hidden="true"
         />
       );
     } else {
       return (
-        <FiMail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
+        <Mail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
       );
     }
   }
@@ -49,27 +48,21 @@ export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.El
     switch (messageType) {
       case "SMS":
         return (
-          <FiSmartphone
+          <Smartphone
             className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
             aria-hidden="true"
           />
         );
       case "EMAIL":
         return (
-          <FiMail
-            className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
-            aria-hidden="true"
-          />
+          <Mail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
         );
       case "MIX":
         return (
-          <FiBell
-            className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
-            aria-hidden="true"
-          />
+          <Bell className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
         );
       default:
-        <FiZap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
+        <Zap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
     }
   }
 
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index 56f2d8a36f..affa5966ec 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -4,7 +4,7 @@ import type { Props } from "react-select";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar, Select } from "@calcom/ui";
-import { FiX } from "@calcom/ui/components/icon";
+import { X } from "@calcom/ui/components/icon";
 
 export type CheckedSelectOption = {
   avatar: string;
@@ -49,7 +49,7 @@ export const CheckedTeamSelect = ({
           <li key={option.value} className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-b"}`}>
             <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
             <p className="text-emphasis my-auto ml-3 text-sm">{option.label}</p>
-            <FiX
+            <X
               onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
               className="my-auto ml-auto"
             />
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index d9a3f5dee3..c310e61213 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -10,15 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { baseEventTypeSelect } from "@calcom/prisma";
 import type { EventTypeModel } from "@calcom/prisma/zod";
 import { Badge } from "@calcom/ui";
-import {
-  FiClock,
-  FiUsers,
-  FiRefreshCw,
-  FiCreditCard,
-  FiClipboard,
-  FiPlus,
-  FiUser,
-} from "@calcom/ui/components/icon";
+import { Clock, Users, RefreshCw, CreditCard, Clipboard, Plus, User } from "@calcom/ui/components/icon";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
@@ -65,21 +57,21 @@ export const EventTypeDescription = ({
           {eventType.metadata?.multipleDuration ? (
             eventType.metadata.multipleDuration.map((dur, idx) => (
               <li key={idx}>
-                <Badge variant="gray" startIcon={FiClock}>
+                <Badge variant="gray" startIcon={Clock}>
                   {dur}m
                 </Badge>
               </li>
             ))
           ) : (
             <li>
-              <Badge variant="gray" startIcon={FiClock}>
+              <Badge variant="gray" startIcon={Clock}>
                 {eventType.length}m
               </Badge>
             </li>
           )}
           {eventType.schedulingType && (
             <li>
-              <Badge variant="gray" startIcon={FiUsers}>
+              <Badge variant="gray" startIcon={Users}>
                 {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
                 {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
               </Badge>
@@ -87,7 +79,7 @@ export const EventTypeDescription = ({
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
             <li className="hidden xl:block">
-              <Badge variant="gray" startIcon={FiRefreshCw}>
+              <Badge variant="gray" startIcon={RefreshCw}>
                 {t("repeats_up_to", {
                   count: recurringEvent.count,
                 })}
@@ -96,7 +88,7 @@ export const EventTypeDescription = ({
           )}
           {stripeAppData.price > 0 && (
             <li>
-              <Badge variant="gray" startIcon={FiCreditCard}>
+              <Badge variant="gray" startIcon={CreditCard}>
                 <IntlProvider locale="en">
                   <FormattedNumber
                     value={stripeAppData.price / 100.0}
@@ -109,7 +101,7 @@ export const EventTypeDescription = ({
           )}
           {eventType.requiresConfirmation && (
             <li className="hidden xl:block">
-              <Badge variant="gray" startIcon={FiClipboard}>
+              <Badge variant="gray" startIcon={Clipboard}>
                 {eventType.metadata?.requiresConfirmationThreshold
                   ? t("may_require_confirmation")
                   : t("requires_confirmation")}
@@ -119,7 +111,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={FiPlus}>
+              <Badge variant="gray" startIcon={Plus}>
                 <p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
               </Badge>
             </li>
@@ -128,7 +120,7 @@ export const EventTypeDescription = ({
           )}
           {eventType?.seatsPerTimeSlot ? (
             <li>
-              <Badge variant="gray" startIcon={FiUser}>
+              <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 9deff8d12d..e770822109 100644
--- a/packages/features/eventtypes/components/MultiDropdownSelect.tsx
+++ b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
@@ -2,7 +2,7 @@ import type { GroupBase, Props, ValueContainerProps } from "react-select";
 import { components } from "react-select";
 
 import { Select } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
   children,
@@ -24,7 +24,7 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
       {overflowCounter > 0 && (
         <span className="bg-subtle text-default flex items-center justify-center rounded-md py-[5px] px-2 text-[14px] font-medium leading-4">
           <>
-            <FiPlus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
+            <Plus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
           </>
         </span>
       )}
diff --git a/packages/features/flags/pages/flag-listing-view.tsx b/packages/features/flags/pages/flag-listing-view.tsx
index a649d0bf5d..0ba196bd48 100644
--- a/packages/features/flags/pages/flag-listing-view.tsx
+++ b/packages/features/flags/pages/flag-listing-view.tsx
@@ -2,7 +2,7 @@ import { Suspense } from "react";
 
 import NoSSR from "@calcom/core/components/NoSSR";
 import { Meta } from "@calcom/ui";
-import { FiLoader } from "@calcom/ui/components/icon";
+import { Loader } from "@calcom/ui/components/icon";
 
 import { FlagAdminList } from "../components/FlagAdminList";
 
@@ -11,7 +11,7 @@ export const FlagListingView = () => {
     <>
       <Meta title="Feature Flags" description="Here you can toggle your Cal.com instance features." />
       <NoSSR>
-        <Suspense fallback={<FiLoader />}>
+        <Suspense fallback={<Loader />}>
           <FlagAdminList />
         </Suspense>
       </NoSSR>
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 618365ec68..63b8b743ac 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -10,7 +10,7 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { BookingFieldType } from "@calcom/prisma/zod-utils";
 import { PhoneInput, AddressInput, Button, Label, Group, RadioField, EmailField, Tooltip } from "@calcom/ui";
-import { FiUserPlus, FiX } from "@calcom/ui/components/icon";
+import { UserPlus, X } from "@calcom/ui/components/icon";
 
 import { ComponentForField } from "./FormBuilder";
 import type { fieldsSchema } from "./FormBuilderFieldsSchema";
@@ -160,7 +160,7 @@ export const Components: Record<BookingFieldType, Component> = {
                                 value.splice(index, 1);
                                 setValue(value);
                               }}>
-                              <FiX className="text-default" />
+                              <X className="text-default" />
                             </button>
                           </Tooltip>
                         ) : null
@@ -174,7 +174,7 @@ export const Components: Record<BookingFieldType, Component> = {
                   data-testid="add-another-guest"
                   type="button"
                   color="minimal"
-                  StartIcon={FiUserPlus}
+                  StartIcon={UserPlus}
                   className="my-2.5"
                   onClick={() => {
                     value.push("");
@@ -193,7 +193,7 @@ export const Components: Record<BookingFieldType, Component> = {
               data-testid="add-guests"
               color="minimal"
               variant="button"
-              StartIcon={FiUserPlus}
+              StartIcon={UserPlus}
               onClick={() => {
                 value.push("");
                 setValue(value);
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index 1fbe7743e0..9447a0251c 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -23,7 +23,7 @@ import {
   showToast,
   Switch,
 } from "@calcom/ui";
-import { FiArrowDown, FiArrowUp, FiX, FiPlus, FiTrash2, FiInfo } from "@calcom/ui/components/icon";
+import { ArrowDown, ArrowUp, X, Plus, Trash2, Info } from "@calcom/ui/components/icon";
 
 import { Components } from "./Components";
 import type { fieldsSchema } from "./FormBuilderFieldsSchema";
@@ -210,7 +210,7 @@ export const FormBuilder = function FormBuilder({
                       className="mb-2 -ml-8 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
                       size="sm"
                       color="minimal"
-                      StartIcon={FiX}
+                      StartIcon={X}
                       onClick={() => {
                         if (!value) {
                           return;
@@ -232,7 +232,7 @@ export const FormBuilder = function FormBuilder({
                 value.push({ label: "", value: "" });
                 onChange(value);
               }}
-              StartIcon={FiPlus}>
+              StartIcon={Plus}>
               Add an Option
             </Button>
           )}
@@ -314,7 +314,7 @@ export const FormBuilder = function FormBuilder({
                     type="button"
                     className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-default hover:border-emphasis invisible absolute -left-[12px] -mt-4 mb-4 -ml-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)}>
-                    <FiArrowUp className="h-5 w-5" />
+                    <ArrowUp className="h-5 w-5" />
                   </button>
                 )}
                 {index < fields.length - 1 && (
@@ -322,7 +322,7 @@ export const FormBuilder = function FormBuilder({
                     type="button"
                     className="bg-default text-muted hover:border-emphasis border-default hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] mt-8 -ml-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)}>
-                    <FiArrowDown className="h-5 w-5" />
+                    <ArrowDown className="h-5 w-5" />
                   </button>
                 )}
                 <div>
@@ -371,7 +371,7 @@ export const FormBuilder = function FormBuilder({
                         onClick={() => {
                           removeField(index);
                         }}
-                        StartIcon={FiTrash2}
+                        StartIcon={Trash2}
                       />
                     )}
                     <Button
@@ -388,12 +388,7 @@ export const FormBuilder = function FormBuilder({
             );
           })}
         </ul>
-        <Button
-          color="minimal"
-          data-testid="add-field"
-          onClick={addField}
-          className="mt-4"
-          StartIcon={FiPlus}>
+        <Button color="minimal" data-testid="add-field" onClick={addField} className="mt-4" StartIcon={Plus}>
           {addFieldLabel}
         </Button>
       </div>
@@ -771,7 +766,7 @@ export const FormBuilderField = ({
                     <div
                       data-testid={`error-message-${field.name}`}
                       className="mt-2 flex items-center text-sm text-red-700 ">
-                      <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                      <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/FilterType.tsx b/packages/features/insights/filters/FilterType.tsx
index 6cb966f1c1..3151789f78 100644
--- a/packages/features/insights/filters/FilterType.tsx
+++ b/packages/features/insights/filters/FilterType.tsx
@@ -1,6 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Select } from "@calcom/ui";
-import { FiFilter } from "@calcom/ui/components/icon";
+import { Filter } from "@calcom/ui/components/icon";
 
 import { useFilterContext } from "../context/provider";
 
@@ -45,7 +45,7 @@ export const FilterType = () => {
       className="w-32 min-w-[130px]"
       placeholder={
         <div className="text-emphasis flex flex-row">
-          <FiFilter className="m-auto" />
+          <Filter className="m-auto" />
           {t("add_filter")}
         </div>
       }
diff --git a/packages/features/insights/filters/index.tsx b/packages/features/insights/filters/index.tsx
index 1e56db71d5..80d23a74cb 100644
--- a/packages/features/insights/filters/index.tsx
+++ b/packages/features/insights/filters/index.tsx
@@ -55,7 +55,7 @@ export const Filters = () => {
                     color="secondary"
                     target="_blank"
                     rel="noreferrer"
-                    StartIcon={FiSettings}
+                    StartIcon={Settings}
                     className="h-[38px]"
                   />
                 </Tooltip>
@@ -65,7 +65,7 @@ export const Filters = () => {
             color="secondary"
             target="_blank"
             rel="noreferrer"
-            StartIcon={FiDownload}
+            StartIcon={Download}
             className="h-[38px]"
           />
         </Tooltip>
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index 758a574b5b..eefd47307a 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -19,7 +19,7 @@ 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 { FiSearch, FiArrowUp, FiArrowDown, FiCornerDownLeft, FiCommand } from "@calcom/ui/components/icon";
+import { Search, ArrowUp, ArrowDown, CornerDownLeft, Command } from "@calcom/ui/components/icon";
 
 type shortcutArrayType = {
   shortcuts?: string[];
@@ -242,7 +242,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">
-            <FiSearch className="text-default mx-3 h-4 w-4" />
+            <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 +250,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">
-            <FiArrowUp className="h-4 w-4" />
-            <FiArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
-            <FiCornerDownLeft className="h-4 w-4" />
+            <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" />
             <span className="pr-2">{t("open")}</span>
-            {isMac ? <FiCommand className="h-3 w-3" /> : "CTRL"}
+            {isMac ? <Command className="h-3 w-3" /> : "CTRL"}
             <span className="pr-1">+ K </span>
             <span className="pr-2">{t("close")}</span>
           </div>
@@ -274,7 +274,7 @@ export const KBarTrigger = () => {
           color="minimal"
           onClick={query.toggle}
           className="text-default hover:bg-subtle lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md py-2 px-3 text-sm font-medium lg:p-1">
-          <FiSearch className="h-4 w-4 flex-shrink-0 text-inherit" />
+          <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 02d25a7454..7b1dd376a0 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -4,7 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import type { TimeRange, WorkingHours } from "@calcom/types/schedule";
 import { Button, DialogTrigger, Tooltip } from "@calcom/ui";
-import { FiEdit2, FiTrash2 } from "@calcom/ui/components/icon";
+import { Edit2, Trash2 } from "@calcom/ui/components/icon";
 
 import DateOverrideInputDialog from "./DateOverrideInputDialog";
 
@@ -91,7 +91,7 @@ const DateOverrideList = ({
                     className="text-default"
                     color="minimal"
                     variant="icon"
-                    StartIcon={FiEdit2}
+                    StartIcon={Edit2}
                   />
                 </DialogTrigger>
               }
@@ -101,7 +101,7 @@ const DateOverrideList = ({
                 className="text-default"
                 color="destructive"
                 variant="icon"
-                StartIcon={FiTrash2}
+                StartIcon={Trash2}
                 onClick={() => remove(index)}
               />
             </Tooltip>
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 0e8e56865d..bd52102758 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -15,7 +15,7 @@ import {
   InputField,
   showToast,
 } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+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={FiPlus}>
+        <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 3a550f4339..1f0d0e71f9 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -29,7 +29,7 @@ import {
   SkeletonText,
   Switch,
 } from "@calcom/ui";
-import { FiCopy, FiPlus, FiTrash } from "@calcom/ui/components/icon";
+import { Copy, Plus, Trash } from "@calcom/ui/components/icon";
 
 export type { TimeRange };
 
@@ -109,7 +109,7 @@ const CopyButton = ({
           tooltip={t("copy_times_to_tooltip")}
           color="minimal"
           variant="icon"
-          StartIcon={FiCopy}
+          StartIcon={Copy}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -188,7 +188,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 type="button"
                 color="minimal"
                 variant="icon"
-                StartIcon={FiPlus}
+                StartIcon={Plus}
                 onClick={() => {
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
                   const nextRange: any = getNextRange(fields[fields.length - 1]);
@@ -218,7 +218,7 @@ const RemoveTimeButton = ({
       type="button"
       variant="icon"
       color="minimal"
-      StartIcon={FiTrash}
+      StartIcon={Trash}
       onClick={() => remove(index)}
       className={className}
     />
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 3f323e4f2f..b3139015f6 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -15,7 +15,7 @@ import {
   DropdownMenuTrigger,
   showToast,
 } from "@calcom/ui";
-import { FiGlobe, FiMoreHorizontal, FiTrash, FiClock } from "@calcom/ui/components/icon";
+import { Globe, MoreHorizontal, Trash, Clock } from "@calcom/ui/components/icon";
 
 export function ScheduleListItem({
   schedule,
@@ -67,7 +67,7 @@ export function ScheduleListItem({
                 ))}
               {(schedule.timeZone || displayOptions?.timeZone) && (
                 <p className="my-1 flex items-center first-letter:text-xs">
-                  <FiGlobe />
+                  <Globe className="h-3.5 w-3.5" />
                   &nbsp;{schedule.timeZone ?? displayOptions?.timeZone}
                 </p>
               )}
@@ -82,7 +82,7 @@ export function ScheduleListItem({
               type="button"
               variant="icon"
               color="secondary"
-              StartIcon={FiMoreHorizontal}
+              StartIcon={MoreHorizontal}
             />
           </DropdownMenuTrigger>
           {!isLoading && data && (
@@ -91,7 +91,7 @@ export function ScheduleListItem({
                 {!schedule.isDefault && (
                   <DropdownItem
                     type="button"
-                    StartIcon={FiClock}
+                    StartIcon={Clock}
                     onClick={() => {
                       updateDefault({
                         scheduleId: schedule.id,
@@ -106,7 +106,7 @@ export function ScheduleListItem({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={FiTrash}
+                  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 6ffa500019..2d86c2c9af 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -15,24 +15,24 @@ import { trpc } from "@calcom/trpc/react";
 import type { VerticalTabItemProps } from "@calcom/ui";
 import { Badge, Button, ErrorBoundary, VerticalTabItem, Skeleton, useMeta } from "@calcom/ui";
 import {
-  FiUser,
-  FiKey,
-  FiCreditCard,
-  FiTerminal,
-  FiUsers,
-  FiLock,
-  FiArrowLeft,
-  FiChevronDown,
-  FiChevronRight,
-  FiPlus,
-  FiMenu,
+  User,
+  Key,
+  CreditCard,
+  Terminal,
+  Users,
+  Lock,
+  ArrowLeft,
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  Menu,
 } from "@calcom/ui/components/icon";
 
 const tabs: VerticalTabItemProps[] = [
   {
     name: "my_account",
     href: "/settings/my-account",
-    icon: FiUser,
+    icon: User,
     children: [
       { name: "profile", href: "/settings/my-account/profile" },
       { name: "general", href: "/settings/my-account/general" },
@@ -46,7 +46,7 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "security",
     href: "/settings/security",
-    icon: FiKey,
+    icon: Key,
     children: [
       { name: "password", href: "/settings/security/password" },
       { name: "2fa_auth", href: "/settings/security/two-factor-auth" },
@@ -56,13 +56,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "billing",
     href: "/settings/billing",
-    icon: FiCreditCard,
+    icon: CreditCard,
     children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: FiTerminal,
+    icon: Terminal,
     children: [
       //
       { name: "webhooks", href: "/settings/developer/webhooks" },
@@ -74,13 +74,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "teams",
     href: "/settings/teams",
-    icon: FiUsers,
+    icon: Users,
     children: [],
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: FiLock,
+    icon: Lock,
     children: [
       //
       { name: "features", href: "/settings/admin/flags" },
@@ -129,7 +129,7 @@ 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-64 flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
       data-testid={`vertical-tab-${name}`}>
-      <FiArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
+      <ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
       <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate">
         {name}
       </Skeleton>
@@ -255,7 +255,7 @@ const SettingsSidebarContainer = ({
                                 ])
                               }>
                               <div className="ltr:mr-3 rtl:ml-3">
-                                {teamMenuState[index].teamMenuOpen ? <FiChevronDown /> : <FiChevronRight />}
+                                {teamMenuState[index].teamMenuOpen ? <ChevronDown /> : <ChevronRight />}
                               </div>
                               <img
                                 src={getPlaceholderAvatar(team.logo, team?.name as string)}
@@ -324,7 +324,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={FiPlus}
+                  icon={Plus}
                   disableChevron
                 />
               </div>
@@ -344,14 +344,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 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button StartIcon={FiMenu} 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()}>
-            <FiArrowLeft className="text-default" />
+            <ArrowLeft className="text-default" />
             <p className="text-emphasis font-semibold">{t("settings")}</p>
           </button>
         </div>
@@ -431,7 +431,7 @@ function ShellHeader() {
       <div className="border-subtle mb-8 flex w-full items-center border-b pb-6">
         {meta.backButton && (
           <a href="javascript:history.back()">
-            <FiArrowLeft className="mr-7" />
+            <ArrowLeft className="mr-7" />
           </a>
         )}
         <div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index a52c9de9a4..8c1ba4d387 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -45,26 +45,26 @@ import {
   useCalcomTheme,
 } from "@calcom/ui";
 import {
-  FiArrowLeft,
-  FiArrowRight,
-  FiBarChart,
-  FiCalendar,
-  FiClock,
-  FiDownload,
-  FiExternalLink,
-  FiFileText,
-  FiGrid,
-  FiHelpCircle,
-  FiLink,
-  FiLogOut,
-  FiMap,
-  FiMoon,
-  FiMoreHorizontal,
-  FiMoreVertical,
-  FiSettings,
-  FiSlack,
-  FiUsers,
-  FiZap,
+  ArrowLeft,
+  ArrowRight,
+  BarChart,
+  Calendar,
+  Clock,
+  Download,
+  ExternalLink,
+  FileText,
+  Grid,
+  HelpCircle,
+  Link as LinkIcon,
+  LogOut,
+  Map,
+  Moon,
+  MoreHorizontal,
+  MoreVertical,
+  Settings,
+  Slack,
+  Users,
+  Zap,
 } from "@calcom/ui/components/icon";
 
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
@@ -318,7 +318,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                       : "No public page"}
                   </span>
                 </span>
-                <FiMoreVertical
+                <MoreVertical
                   className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2 rtl:mr-4"
                   aria-hidden="true"
                 />
@@ -344,7 +344,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   <DropdownItem
                     type="button"
                     StartIcon={(props) => (
-                      <FiMoon className={classNames("text-default", props.className)} aria-hidden="true" />
+                      <Moon className={classNames("text-default", props.className)} aria-hidden="true" />
                     )}
                     onClick={() => {
                       mutation.mutate({ away: !user?.away });
@@ -361,14 +361,14 @@ function UserDropdown({ small }: { small?: boolean }) {
                         target="_blank"
                         rel="noopener noreferrer"
                         href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-                        StartIcon={FiExternalLink}>
+                        StartIcon={ExternalLink}>
                         {t("view_public_page")}
                       </DropdownItem>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                       <DropdownItem
                         type="button"
-                        StartIcon={FiLink}
+                        StartIcon={LinkIcon}
                         onClick={(e) => {
                           e.preventDefault();
                           navigator.clipboard.writeText(
@@ -384,7 +384,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem>
                   <DropdownItem
-                    StartIcon={(props) => <FiSlack strokeWidth={1.5} {...props} />}
+                    StartIcon={(props) => <Slack strokeWidth={1.5} {...props} />}
                     target="_blank"
                     rel="noreferrer"
                     href={JOIN_SLACK}>
@@ -392,24 +392,20 @@ function UserDropdown({ small }: { small?: boolean }) {
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
-                  <DropdownItem StartIcon={FiMap} target="_blank" href={ROADMAP}>
+                  <DropdownItem StartIcon={Map} target="_blank" href={ROADMAP}>
                     {t("visit_roadmap")}
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props) => <FiHelpCircle aria-hidden="true" {...props} />}
+                    StartIcon={(props) => <HelpCircle aria-hidden="true" {...props} />}
                     onClick={() => setHelpOpen(true)}>
                     {t("help")}
                   </DropdownItem>
                 </DropdownMenuItem>
                 <DropdownMenuItem className="desktop-hidden hidden lg:flex">
-                  <DropdownItem
-                    StartIcon={FiDownload}
-                    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>
@@ -418,7 +414,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 <DropdownMenuItem>
                   <DropdownItem
                     type="button"
-                    StartIcon={(props) => <FiLogOut aria-hidden="true" {...props} />}
+                    StartIcon={(props) => <LogOut aria-hidden="true" {...props} />}
                     onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
                     {t("sign_out")}
                   </DropdownItem>
@@ -459,12 +455,12 @@ const navigation: NavigationItemType[] = [
   {
     name: "event_types_page_title",
     href: "/event-types",
-    icon: FiLink,
+    icon: LinkIcon,
   },
   {
     name: "bookings",
     href: "/bookings/upcoming",
-    icon: FiCalendar,
+    icon: Calendar,
     badge: <UnconfirmedBookingBadge />,
     isCurrent: ({ router }) => {
       const path = router.asPath.split("?")[0];
@@ -474,19 +470,19 @@ const navigation: NavigationItemType[] = [
   {
     name: "availability",
     href: "/availability",
-    icon: FiClock,
+    icon: Clock,
   },
   {
     name: "teams",
     href: "/teams",
-    icon: FiUsers,
+    icon: Users,
     onlyDesktop: true,
     badge: <TeamInviteBadge />,
   },
   {
     name: "apps",
     href: "/apps",
-    icon: FiGrid,
+    icon: Grid,
     isCurrent: ({ router, item }) => {
       const path = router.asPath.split("?")[0];
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
@@ -521,12 +517,12 @@ const navigation: NavigationItemType[] = [
   {
     name: MORE_SEPARATOR_NAME,
     href: "/more",
-    icon: FiMoreHorizontal,
+    icon: MoreHorizontal,
   },
   {
     name: "Routing Forms",
     href: "/apps/routing-forms/forms",
-    icon: FiFileText,
+    icon: FileText,
     isCurrent: ({ router }) => {
       return router.asPath.startsWith("/apps/routing-forms/");
     },
@@ -534,17 +530,17 @@ const navigation: NavigationItemType[] = [
   {
     name: "workflows",
     href: "/workflows",
-    icon: FiZap,
+    icon: Zap,
   },
   {
     name: "insights",
     href: "/insights",
-    icon: FiBarChart,
+    icon: BarChart,
   },
   {
     name: "settings",
     href: "/settings/my-account/profile",
-    icon: FiSettings,
+    icon: Settings,
   },
 ];
 
@@ -721,7 +717,7 @@ const MobileNavigationMoreItem: React.FC<{
           {item.icon && <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>
-        <FiArrowRight className="text-subtle h-5 w-5" />
+        <ArrowRight className="text-subtle h-5 w-5" />
       </Link>
     </li>
   );
@@ -753,13 +749,13 @@ function SideBar() {
                 color="minimal"
                 onClick={() => window.history.back()}
                 className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
-                <FiArrowLeft className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
+                <ArrowLeft className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
                 className="desktop-only hover:text-emphasis text-subtle group flex text-sm font-medium">
-                <FiArrowRight className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
+                <ArrowRight className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0" />
               </button>
               <KBarTrigger />
             </div>
@@ -811,7 +807,7 @@ export function ShellMain(props: LayoutProps) {
             onClick={() =>
               typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
             }
-            StartIcon={FiArrowLeft}
+            StartIcon={ArrowLeft}
             aria-label="Go Back"
             className="rounded-md ltr:mr-2 rtl:ml-2"
           />
@@ -901,7 +897,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">
-              <FiSettings className="text-default h-4 w-4" aria-hidden="true" />
+              <Settings className="text-default h-4 w-4" aria-hidden="true" />
             </Link>
           </button>
           <UserDropdown small />
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index def0f4e89d..dc65d13bc0 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -16,7 +16,7 @@ import {
   Switch,
   Tooltip,
 } from "@calcom/ui";
-import { FiAlertCircle, FiEdit, FiMoreHorizontal, FiTrash } from "@calcom/ui/components/icon";
+import { AlertCircle, Edit, MoreHorizontal, Trash } from "@calcom/ui/components/icon";
 
 type WebhookProps = {
   id: string;
@@ -71,7 +71,7 @@ export default function WebhookListItem(props: {
                 key={trigger}
                 className="mt-2.5 basis-1/5 ltr:mr-2 rtl:ml-2"
                 variant="gray"
-                startIcon={FiAlertCircle}>
+                startIcon={AlertCircle}>
                 {t(`${trigger.toLowerCase()}`)}
               </Badge>
             ))}
@@ -96,24 +96,24 @@ export default function WebhookListItem(props: {
         <Button
           className="hidden lg:flex"
           color="destructive"
-          StartIcon={FiTrash}
+          StartIcon={Trash}
           variant="icon"
           onClick={onDeleteWebhook}
         />
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
+            <Button className="lg:hidden" StartIcon={MoreHorizontal} variant="icon" color="secondary" />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <DropdownItem StartIcon={FiEdit} color="secondary" onClick={props.onEditWebhook}>
+              <DropdownItem StartIcon={Edit} color="secondary" onClick={props.onEditWebhook}>
                 {t("edit")}
               </DropdownItem>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
 
             <DropdownMenuItem>
-              <DropdownItem StartIcon={FiTrash} 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 9ed0094e86..53ce887073 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -3,7 +3,7 @@ import { useWatch } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge, Button, showToast } from "@calcom/ui";
-import { FiActivity } from "@calcom/ui/components/icon";
+import { Activity } from "@calcom/ui/components/icon";
 
 export default function WebhookTestDisclosure() {
   const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
@@ -26,7 +26,7 @@ export default function WebhookTestDisclosure() {
           type="button"
           color="secondary"
           disabled={mutation.isLoading || !subscriberUrl}
-          StartIcon={FiActivity}
+          StartIcon={Activity}
           onClick={() => mutation.mutate({ url: subscriberUrl, type: "PING", payloadTemplate })}>
           {t("ping_test")}
         </Button>
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index 228d3298f4..575c553250 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -5,7 +5,7 @@ import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button, EmptyScreen, Meta, SkeletonText } from "@calcom/ui";
-import { FiPlus, FiLink } from "@calcom/ui/components/icon";
+import { Plus, Link as LinkIcon } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../settings/layouts/SettingsLayout";
 import { WebhookListItem, WebhookListSkeleton } from "../components";
@@ -30,7 +30,7 @@ const NewWebhookButton = () => {
     <Button
       color="secondary"
       data-testid="new_webhook"
-      StartIcon={FiPlus}
+      StartIcon={Plus}
       href={`${WEBAPP_URL}/settings/developer/webhooks/new`}>
       {isLocaleReady ? t("new_webhook") : <SkeletonText className="h-4 w-24" />}
     </Button>
@@ -64,7 +64,7 @@ const WebhooksList = () => {
         </>
       ) : (
         <EmptyScreen
-          Icon={FiLink}
+          Icon={LinkIcon}
           headline={t("create_your_first_webhook")}
           description={t("create_your_first_webhook_description", { appName: APP_NAME })}
           buttonRaw={<NewWebhookButton />}
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 88ec7573db..390ac6039b 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -2,7 +2,7 @@ import { CheckCircleIcon, ExclamationIcon, InformationCircleIcon, XCircleIcon }
 import classNames from "classnames";
 import type { ReactNode } from "react";
 
-import { FiInfo } from "../icon";
+import { Info } from "../icon";
 
 export interface AlertProps {
   title?: ReactNode;
@@ -47,7 +47,7 @@ export function Alert(props: AlertProps) {
             />
           )}
           {severity === "neutral" && (
-            <FiInfo className={classNames("text-default h-5 w-5", iconClassName)} aria-hidden="true" />
+            <Info className={classNames("text-default h-5 w-5", iconClassName)} aria-hidden="true" />
           )}
           {severity === "success" && (
             <CheckCircleIcon className={classNames("text-muted h-5 w-5", iconClassName)} aria-hidden="true" />
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 198632996e..f030b17506 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -9,7 +9,7 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 
 import { EmptyScreen } from "../empty-screen";
-import { FiChevronLeft, FiChevronRight, FiSearch } from "../icon";
+import { ChevronLeft, ChevronRight, Search } from "../icon";
 import { AppCard } from "./AppCard";
 
 export function useShouldShowArrows() {
@@ -79,7 +79,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       {leftVisible && (
         <button onClick={handleLeft} className="absolute bottom-0 flex md:left-1/2 md:-top-1">
           <div className="bg-default flex h-12 w-5 items-center justify-end">
-            <FiChevronLeft className="text-subtle h-4 w-4" />
+            <ChevronLeft className="text-subtle h-4 w-4" />
           </div>
           <div className="to-default flex h-12 w-5 bg-gradient-to-l from-transparent" />
         </button>
@@ -122,7 +122,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">
-            <FiChevronRight className="text-subtle h-4 w-4" />
+            <ChevronRight className="text-subtle h-4 w-4" />
           </div>
         </button>
       )}
@@ -176,7 +176,7 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
         </div>
       ) : (
         <EmptyScreen
-          Icon={FiSearch}
+          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 bb1e6f0b3e..b851752069 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -9,7 +9,7 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 
 import { Button } from "../button";
-import { FiPlus } from "../icon";
+import { Plus } from "../icon";
 import { showToast } from "../toast";
 
 interface AppCardProps {
@@ -112,7 +112,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
                     <Button
                       color="secondary"
                       className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
-                      StartIcon={FiPlus}
+                      StartIcon={Plus}
                       {...props}>
                       {t("install")}
                     </Button>
@@ -139,7 +139,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
                   }
                   return (
                     <Button
-                      StartIcon={FiPlus}
+                      StartIcon={Plus}
                       color="secondary"
                       className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
                       data-testid="install-app-button"
diff --git a/packages/ui/components/apps/Categories.tsx b/packages/ui/components/apps/Categories.tsx
index e15502bacc..f6e2bb7684 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -2,7 +2,7 @@ import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
-import { FiArrowRight } from "../icon";
+import { ArrowRight } from "../icon";
 import { SkeletonText } from "../skeleton";
 import { Slider } from "./Slider";
 
@@ -44,7 +44,7 @@ export function AppStoreCategories({
               )}
               <p className="text-subtle pt-2 text-sm font-medium">
                 {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
-                <FiArrowRight className="inline-block h-4 w-4" />
+                <ArrowRight 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 4cebfad1da..d1c53be5dc 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 { FiArrowLeft, FiArrowRight } from "../icon";
+import { ArrowLeft, ArrowRight } from "../icon";
 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="<">
-              <FiArrowLeft className="h-5 w-5" />
+              <ArrowLeft className="h-5 w-5" />
             </SliderButton>
             <SliderButton data-glide-dir=">">
-              <FiArrowRight className="h-5 w-5" />
+              <ArrowRight className="h-5 w-5" />
             </SliderButton>
           </div>
         </div>
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index db1bc52cc2..9a0fab2197 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -7,7 +7,7 @@ import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
 
 import type { Maybe } from "@trpc/server";
 
-import { FiCheck } from "../icon";
+import { Check } from "../icon";
 
 export type AvatarProps = {
   className?: string;
@@ -62,7 +62,7 @@ export function Avatar(props: AvatarProps) {
               size === "lg" ? "h-5 w-5" : "h-2 w-2"
             )}>
             <div className="flex h-full items-center justify-center p-[2px]">
-              {size === "lg" && <FiCheck />}
+              {size === "lg" && <Check />}
             </div>
           </div>
         )}
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index 6421e63db1..817d6dcfac 100644
--- a/packages/ui/components/badge/badge.stories.mdx
+++ b/packages/ui/components/badge/badge.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable, VariantRow } from '@calcom/storybook/components'
-import { FiPlus } from '../icon';
+import { Plus } from '../icon';
 import { Badge } from './Badge';
 
 <Meta title="UI/Badge" component={Badge} />
@@ -40,7 +40,7 @@ Status badge communicate status information.  It is generally used within a cont
     <Badge withDot>Button Text</Badge>
   </Example>
   <Example title="With Icon">
-    <Badge startIcon={FiPlus}>Button Text</Badge>
+    <Badge startIcon={Plus}>Button Text</Badge>
   </Example>
 </Examples>
 
@@ -61,22 +61,22 @@ Alet badge is used in conjunction with an item, profile or label to indicate num
       <VariantRow variant="Default">
         <Badge variant="default" >Badge text</Badge>
         <Badge variant="default" withDot>Badge text</Badge>
-        <Badge variant="default" startIcon={FiPlus}>Badge text</Badge>
+        <Badge variant="default" startIcon={Plus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="Success">
         <Badge variant="success" >Badge text</Badge>
         <Badge variant="success" withDot>Badge text</Badge>
-        <Badge variant="success" startIcon={FiPlus}>Badge text</Badge>
+        <Badge variant="success" startIcon={Plus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="gray">
         <Badge variant="gray" >Badge text</Badge>
         <Badge variant="gray" withDot>Badge text</Badge>
-        <Badge variant="gray" startIcon={FiPlus}>Badge text</Badge>
+        <Badge variant="gray" startIcon={Plus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="error">
         <Badge variant="error" >Badge text</Badge>
         <Badge variant="error" withDot>Badge text</Badge>
-        <Badge variant="error" startIcon={FiPlus}>Badge text</Badge>
+        <Badge variant="error" startIcon={Plus}>Badge text</Badge>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 79f42bec15..efc3aa7cdc 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -8,7 +8,7 @@ import classNames from "@calcom/lib/classNames";
 import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
-import { FiPlus } from "../icon";
+import { Plus } from "../icon";
 import { Tooltip } from "../tooltip";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
@@ -202,7 +202,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           {variant === "fab" ? (
             <>
               <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:mr-2 ltr:-ml-1 rtl:-mr-1 rtl:ml-2 md:inline-flex" />
-              <FiPlus className="inline h-6 w-6 md:hidden" />
+              <Plus className="inline h-6 w-6 md:hidden" />
             </>
           ) : (
             <StartIcon
@@ -239,7 +239,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           {variant === "fab" ? (
             <>
               <EndIcon className="ms-2 me-2 -mr-1 hidden h-5 w-5 md:inline" />
-              <FiPlus className="inline h-6 w-6 md:hidden" />
+              <Plus className="inline h-6 w-6 md:hidden" />
             </>
           ) : (
             <EndIcon
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index 25f8cacad5..c40d65bd37 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title, VariantsTable, VariantColumn, RowTitles, CustomArgsTable} from '@calcom/storybook/components'
-import { FiPlus, FiX } from '../icon';
+import { Plus, X } from '../icon';
 import { Button } from './Button';
 
 <Meta title="UI/Button" component={Button} />
@@ -57,22 +57,22 @@ Button are clickable elements that initiates user actions. Labels in the button
     <Button>Button text</Button>
   </Example>
   <Example title="Icon left">
-      <Button StartIcon={FiPlus}>Button text</Button>
+      <Button StartIcon={Plus}>Button text</Button>
   </Example>
   <Example title="Icon right">
-    <Button EndIcon={FiPlus}>Button text</Button>
+    <Button EndIcon={Plus}>Button text</Button>
   </Example>
 </Examples>
 
 <Examples title="Icons">
   <Example title="Icon Normal">
-      <Button StartIcon={FiX} variant="icon" size="base" color="minimal"></Button>
+      <Button StartIcon={X} variant="icon" size="base" color="minimal"></Button>
   </Example>
   <Example title="Icon Small">
-      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal"></Button>
+      <Button StartIcon={X} variant="icon" size="sm" color="minimal"></Button>
   </Example>
    <Example title="Icon Loading">
-      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal" loading></Button>
+      <Button StartIcon={X} variant="icon" size="sm" color="minimal" loading></Button>
   </Example>
 </Examples>
 
@@ -96,35 +96,35 @@ 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={FiX}></Button>
+        <Button color="destructive" variant="icon" StartIcon={X}></Button>
       </VariantRow>
       <VariantRow variant="Hover">
         <Button className="sb-pseudo--hover">Button text</Button>
         <Button className="sb-pseudo--hover" color="secondary">Button text</Button>
         <Button className="sb-pseudo--hover" color="minimal">Button text</Button>
         <Button className="sb-pseudo--hover" color="destructive">Button text</Button>
-        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={FiX}></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>
         <Button className="sb-pseudo--focus" color="secondary">Button text</Button>
         <Button className="sb-pseudo--focus" color="minimal">Button text</Button>
         <Button className="sb-pseudo--focus" color="destructive">Button text</Button>
-        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={X}></Button>
       </VariantRow>
       <VariantRow variant="Loading">
         <Button loading>Button text</Button>
         <Button loading color="secondary">Button text</Button>
         <Button loading color="minimal">Button text</Button>
         <Button loading color="destructive">Button text</Button>
-        <Button loading color="destructive" variant="icon" StartIcon={FiX}></Button>
+        <Button loading color="destructive" variant="icon" StartIcon={X}></Button>
       </VariantRow>
       <VariantRow variant="Disabled">
         <Button disabled>Button text</Button>
         <Button disabled color="secondary">Button text</Button>
         <Button disabled color="minimal">Button text</Button>
         <Button disabled color="destructive">Button text</Button>
-        <Button disabled color="minimal" variant="icon" StartIcon={FiX}></Button>
+        <Button disabled color="minimal" variant="icon" StartIcon={X}></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index bee353c18b..4ae04619fa 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { FiTrash, FiNavigation, FiClipboard } from '../icon';
+import { Trash, Navigation, Clipboard } from '../icon';
 import { ButtonGroup} from './ButtonGroup';
 import { Button} from '../button/Button';
 
@@ -30,16 +30,16 @@ Button group enables multiple buttons to be combined into a single unit. It offe
 >
   <Example title="Default" >
     <ButtonGroup>
-      <Button StartIcon={FiTrash} variant="icon" color="secondary" />
-      <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
-      <Button StartIcon={FiClipboard} 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={FiTrash} variant="icon" color="secondary" />
-      <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
-      <Button StartIcon={FiClipboard} 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>
@@ -51,31 +51,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={FiTrash} variant="icon"  />
-          <Button StartIcon={FiNavigation} variant="icon"/>
-          <Button StartIcon={FiClipboard} variant="icon"  />
+          <Button StartIcon={Trash} variant="icon"  />
+          <Button StartIcon={Navigation} variant="icon"/>
+          <Button StartIcon={Clipboard} variant="icon"  />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={FiTrash} variant="icon" color="secondary" />
-          <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
-          <Button StartIcon={FiClipboard} 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={FiTrash} variant="icon" color="minimal" />
-          <Button StartIcon={FiNavigation} variant="icon" color="minimal" />
-          <Button StartIcon={FiClipboard} 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={FiTrash} variant="icon"  />
-          <Button StartIcon={FiNavigation} variant="icon"  />
-          <Button StartIcon={FiClipboard} variant="icon"  />
+          <Button StartIcon={Trash} variant="icon"  />
+          <Button StartIcon={Navigation} variant="icon"  />
+          <Button StartIcon={Clipboard} variant="icon"  />
         </ButtonGroup>
          <ButtonGroup combined>
-          <Button StartIcon={FiTrash} variant="icon" color="secondary"  />
-          <Button StartIcon={FiNavigation} variant="icon" color="secondary"  />
-          <Button StartIcon={FiClipboard} 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>
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index b7433441f3..153f1325e4 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from "react";
 import React from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { FiArrowRight } from "@calcom/ui/components/icon";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { Button } from "../button";
 
@@ -134,7 +134,7 @@ export function Card({
       {/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
       <div>
         {variant === "basic" && (
-          <Button color="secondary" href={actionButton?.href} className="mt-10" EndIcon={FiArrowRight}>
+          <Button color="secondary" href={actionButton?.href} className="mt-10" EndIcon={ArrowRight}>
             {actionButton?.child}
           </Button>
         )}
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index ca950e619e..a7ddca0fa8 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -5,7 +5,7 @@ import { classNames } from "@calcom/lib";
 import type { BadgeProps } from "../..";
 import { Badge } from "../..";
 import { Divider } from "../divider";
-import { FiArrowDown, FiArrowUp, FiTrash } from "../icon";
+import { ArrowDown, ArrowUp, Trash } from "../icon";
 
 type Action = { check: () => boolean; fn: () => void };
 export default function FormCard({
@@ -39,7 +39,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()}>
-            <FiArrowUp />
+            <ArrowUp />
           </button>
         ) : null}
         {moveDown?.check() ? (
@@ -47,7 +47,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()}>
-            <FiArrowDown />
+            <ArrowDown />
           </button>
         ) : null}
       </div>
@@ -68,7 +68,7 @@ export default function FormCard({
                 deleteField?.fn();
               }}
               color="secondary">
-              <FiTrash className="text-muted h-4 w-4" />
+              <Trash className="text-muted h-4 w-4" />
             </button>
           ) : null}
         </div>
diff --git a/packages/ui/components/createButton/CreateButton.tsx b/packages/ui/components/createButton/CreateButton.tsx
index a0eb1fc856..ce131fc495 100644
--- a/packages/ui/components/createButton/CreateButton.tsx
+++ b/packages/ui/components/createButton/CreateButton.tsx
@@ -12,7 +12,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuTrigger,
 } from "@calcom/ui";
-import { FiPlus } from "@calcom/ui/components/icon";
+import { Plus } from "@calcom/ui/components/icon";
 
 export interface Option {
   teamId: number | null | undefined; // if undefined, then it's a profile
@@ -72,7 +72,7 @@ export function CreateButton(props: CreateBtnProps) {
               : null
           }
           data-testid="new-event-type"
-          StartIcon={FiPlus}
+          StartIcon={Plus}
           loading={props.isLoading}
           variant={props.disableMobileButton ? "button" : "fab"}>
           {props.buttonText ? props.buttonText : t("new")}
@@ -82,7 +82,7 @@ export function CreateButton(props: CreateBtnProps) {
           <DropdownMenuTrigger asChild>
             <Button
               variant={props.disableMobileButton ? "button" : "fab"}
-              StartIcon={FiPlus}
+              StartIcon={Plus}
               loading={props.isLoading}>
               {props.buttonText ? props.buttonText : t("new")}
             </Button>
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index f7e6c49f81..bae2e76cbc 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 { FiAlertCircle, FiCheck } from "../icon";
+import { AlertCircle, Check } from "../icon";
 import { DialogClose, DialogContent } from "./Dialog";
 
 type ConfirmBtnType =
@@ -41,17 +41,17 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="bg-error mx-auto rounded-full p-2 text-center">
-                <FiAlertCircle className="h-5 w-5 text-red-600" />
+                <AlertCircle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
               <div className="bg-attention mx-auto rounded-full p-2 text-center">
-                <FiAlertCircle className="h-5 w-5 text-orange-600" />
+                <AlertCircle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="bg-success mx-auto rounded-full p-2 text-center">
-                <FiCheck className="h-5 w-5 text-green-600" />
+                <Check className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index b40210209a..f6864babd7 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 { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { FiChevronDown } from "../../icon";
+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")}
-                <FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+                <ChevronDown className="mt-[2px] ml-1 h-4 w-4" />
               </div>
               <div className="block sm:hidden">+</div>
             </>
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+              <ChevronDown className="mt-[2px] ml-1 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 cba2fe16aa..f140e4e133 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -27,7 +27,7 @@ import { createPortal } from "react-dom";
 
 import { Button } from "../../button";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../form/dropdown";
-import { FiBold, FiChevronDown, FiItalic, FiLink } from "../../icon";
+import { Bold, ChevronDown, Italic, Link } from "../../icon";
 import type { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
@@ -396,7 +396,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   <span className="text text-default hidden sm:flex">
                     {blockTypeToBlockName[blockType as keyof BlockType]}
                   </span>
-                  <FiChevronDown className="text-default ml-2 h-4 w-4" />
+                  <ChevronDown className="text-default ml-2 h-4 w-4" />
                 </>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start">
@@ -430,7 +430,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               color="minimal"
               variant="icon"
               type="button"
-              StartIcon={FiBold}
+              StartIcon={Bold}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
                 if (isItalic) {
@@ -445,7 +445,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               color="minimal"
               variant="icon"
               type="button"
-              StartIcon={FiItalic}
+              StartIcon={Italic}
               onClick={() => {
                 editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
                 if (isItalic) {
@@ -461,7 +461,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                 color="minimal"
                 variant="icon"
                 type="button"
-                StartIcon={FiLink}
+                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 5b0b2b460e..a17be261ab 100644
--- a/packages/ui/components/empty-screen/EmptyScreen.tsx
+++ b/packages/ui/components/empty-screen/EmptyScreen.tsx
@@ -1,6 +1,6 @@
+import type { LucideIcon as IconType } from "lucide-react";
 import type { ReactNode } from "react";
 import React from "react";
-import type { IconType } from "react-icons";
 
 import { classNames } from "@calcom/lib";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index 6d13bd9cd6..d769dc393b 100644
--- a/packages/ui/components/empty-screen/empty-screen.stories.mdx
+++ b/packages/ui/components/empty-screen/empty-screen.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable,VariantsTable,VariantRow } from '@calcom/storybook/components'
-import { FiCalendar } from "../icon";
+import { Calendar } from "../icon";
 import { EmptyScreen } from './EmptyScreen';
 
 <Meta title="UI/EmptyScreen" component={EmptyScreen} />
@@ -17,7 +17,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={FiCalendar}
+          Icon={Calendar}
           headline="Empty state header"
           description="Do consectetur qui ex deserunt do est veniam commodo. Eiusmod eiusmod dolore nostrud pariatur mollit sit commodo. Learn More."
           buttonText="Button text"
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index a96cbcd2fb..927df54eba 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 { FiArrowRight, FiCalendar, FiChevronLeft, FiChevronRight } from "../../icon";
+import { ArrowRight, Calendar, ChevronLeft, ChevronRight } from "../../icon";
 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={<FiCalendar className="text-subtle h-4 w-4" />}
-        rangeDivider={<FiArrowRight className="text-muted h-4 w-4 ltr:mr-2 rtl:ml-2" />}
+        calendarIcon={<Calendar className="text-subtle h-4 w-4" />}
+        rangeDivider={<ArrowRight 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={<FiChevronRight className="text-subtle h-4 w-4" />}
-        prevLabel={<FiChevronLeft className="text-subtle h-4 w-4" />}
+        nextLabel={<ChevronRight className="text-subtle h-4 w-4" />}
+        prevLabel={<ChevronLeft 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 c1664ebb9c..c8946efc13 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 { FiCalendar } from "../../icon";
+import { Calendar } from "../../icon";
 
 type Props = {
   date: Date;
@@ -23,7 +23,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
       )}
       calendarClassName="rounded-md"
       clearIcon={null}
-      calendarIcon={<FiCalendar className="text-subtle h-5 w-5 rounded-md" />}
+      calendarIcon={<Calendar className="text-subtle h-5 w-5 rounded-md" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
index 2aaf3c83a7..be2b5a8e86 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 { FiCheck, FiCircle, FiInfo, FiX } from "../../icon";
+import { Check, Circle, Info, X } from "../../icon";
 
 export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   hintErrors?: string[];
@@ -49,12 +49,12 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
                 className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
                 {error !== undefined ? (
                   submitted ? (
-                    <FiX size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                    <X size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
                   ) : (
-                    <FiCircle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                    <Circle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
                   )
                 ) : (
-                  <FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                  <Check size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
                 )}
                 {t(`${fieldName}_hint_${key}`)}
               </li>
@@ -70,7 +70,7 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
     return (
       <div className="text-gray mt-2 flex items-center gap-x-2 text-sm text-red-700">
         <div>
-          <FiInfo className="h-3 w-3" />
+          <Info className="h-3 w-3" />
         </div>
         <p>{fieldErrors.message}</p>
       </div>
@@ -89,9 +89,9 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
           return (
             <li key={key} className={!!dirty ? "text-green-600" : ""}>
               {!!dirty ? (
-                <FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                <Check size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
               ) : (
-                <FiCircle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                <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 ab5949507c..7edb5e0c17 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -8,7 +8,7 @@ import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Alert, showToast, Skeleton, Tooltip, UnstyledSelect } from "../../..";
-import { FiEye, FiEyeOff, FiX } from "../../icon";
+import { Eye, EyeOff, X } from "../../icon";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 
@@ -168,7 +168,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
             </Addon>
           )}
           {type === "search" && inputValue?.toString().length > 0 && (
-            <FiX
+            <X
               className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
               onClick={(e) => {
                 setInputValue("");
@@ -227,9 +227,9 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
               type="button"
               onClick={() => toggleIsPasswordVisible()}>
               {isPasswordVisible ? (
-                <FiEyeOff className="h-4 stroke-[2.5px]" />
+                <EyeOff className="h-4 stroke-[2.5px]" />
               ) : (
-                <FiEye className="h-4 stroke-[2.5px]" />
+                <Eye className="h-4 stroke-[2.5px]" />
               )}
               <span className="sr-only">{textLabel}</span>
             </button>
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index 0b585f077f..7e0057ea08 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -4,7 +4,7 @@ import { components as reactSelectComponents } from "react-select";
 import { classNames } from "@calcom/lib";
 
 import { UpgradeTeamsBadge } from "../../badge";
-import { FiCheck } from "../../icon";
+import { Check } from "../../icon";
 
 export const InputComponent = <
   Option,
@@ -45,7 +45,7 @@ export const OptionComponent = <
       <div className="flex">
         <span className="mr-auto">{props.label}</span>
         {(props.data as unknown as ExtendedOption).needsUpgrade && <UpgradeTeamsBadge />}
-        {props.isSelected && <FiCheck className="ml-2 h-4 w-4" />}
+        {props.isSelected && <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 ed33a3257a..cc4f29bef2 100644
--- a/packages/ui/components/form/select/select.stories.mdx
+++ b/packages/ui/components/form/select/select.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Examples, Example, Note, Title,CustomArgsTable, VariantRow,VariantsTable} from '@calcom/storybook/components'
-import { FiPlus } from "../../icon";
+import { Plus } from "../../icon";
 
 import { SelectField } from "./Select"
 
@@ -90,7 +90,7 @@ const BadSelect = props => (
 )
 
 // Good: Custom component declared outside of the Select scope
-const Control = <IconLeading icon={FiPlus}/>
+const Control = <IconLeading icon={Plus}/>
 
 const GoodSelect = props => <Select {...props} components={{ Control }} />
 
diff --git a/packages/ui/components/form/selectimproved/components/Item.tsx b/packages/ui/components/form/selectimproved/components/Item.tsx
index edcd339792..9350231eed 100755
--- a/packages/ui/components/form/selectimproved/components/Item.tsx
+++ b/packages/ui/components/form/selectimproved/components/Item.tsx
@@ -1,5 +1,5 @@
+import { Check } from "lucide-react";
 import React from "react";
-import { FiCheck } from "react-icons/fi";
 
 import { classNames as cn } from "@calcom/lib";
 
@@ -39,10 +39,10 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
                   ? "dark:bg-darkgray-200  border-subtle bg-gray-800 text-gray-50"
                   : " dark:bg-darkgray-200 border-subtle border-default bg-mutedext-gray-600"
               )}>
-              {isSelected && <FiCheck className="h-3 w-3 text-current" />}
+              {isSelected && <Check className="h-3 w-3 text-current" />}
             </div>
           ) : (
-            isSelected && <FiCheck className="text-emphasis h-3 w-3" strokeWidth={2} />
+            isSelected && <Check className="text-emphasis h-3 w-3" strokeWidth={2} />
           )}
         </>
       </li>
@@ -76,10 +76,10 @@ const Item: React.FC<ItemProps> = ({ item, index, focused }) => {
               ? "dark:bg-darkgray-200  border-subtle bg-gray-800 text-gray-50"
               : " dark:bg-darkgray-200 border-subtle border-default bg-mutedext-gray-600"
           )}>
-          {isSelected && <FiCheck className="h-3 w-3 text-current" />}
+          {isSelected && <Check className="h-3 w-3 text-current" />}
         </div>
       ) : (
-        isSelected && <FiCheck className="text-emphasis h-3 w-3" strokeWidth={2} />
+        isSelected && <Check className="text-emphasis h-3 w-3" strokeWidth={2} />
       )}
     </li>
   );
diff --git a/packages/ui/components/form/selectimproved/components/SearchInput.tsx b/packages/ui/components/form/selectimproved/components/SearchInput.tsx
index 9e9f420cdd..455d9510b9 100755
--- a/packages/ui/components/form/selectimproved/components/SearchInput.tsx
+++ b/packages/ui/components/form/selectimproved/components/SearchInput.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from "react";
 
-import { FiSearch } from "../../../icon";
+import { Search } from "../../../icon";
 import { SelectContext } from "./SelectProvider";
 
 interface SearchInputProps {
@@ -24,7 +24,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
       className={
         classNames && classNames.searchContainer ? classNames.searchContainer : "relative py-1 px-2.5"
       }>
-      <FiSearch
+      <Search
         className={
           classNames && classNames.searchIcon
             ? classNames.searchIcon
diff --git a/packages/ui/components/form/selectimproved/components/Select.tsx b/packages/ui/components/form/selectimproved/components/Select.tsx
index 0ac397b432..f3740352c3 100755
--- a/packages/ui/components/form/selectimproved/components/Select.tsx
+++ b/packages/ui/components/form/selectimproved/components/Select.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useRef, useState } from "react";
 
 import { classNames as cn } from "@calcom/lib";
 
-import { FiX, FiChevronDown } from "../../../icon";
+import { X, ChevronDown } from "../../../icon";
 import Options from "./Options";
 import SearchInput from "./SearchInput";
 import SelectProvider from "./SelectProvider";
@@ -162,7 +162,7 @@ function Select<T extends Option>({
                                 e.stopPropagation();
                                 removeItem(item);
                               }}>
-                              <FiX
+                              <X
                                 className={
                                   classNames?.tagItemIcon ??
                                   " dark:hover:text-darkgray-900 hover:text-emphasis text-subtle h-4 w-4"
@@ -185,7 +185,7 @@ function Select<T extends Option>({
                 <>
                   {isClearable && !isDisabled && selectedItems !== null && (
                     <div className="cursor-pointer" onClick={clearValue}>
-                      <FiX
+                      <X
                         className={
                           classNames && classNames.closeIcon ? classNames.closeIcon : "h-5 w-5 p-0.5"
                         }
@@ -193,7 +193,7 @@ function Select<T extends Option>({
                     </div>
                   )}
 
-                  <FiChevronDown className={cn("h-5 w-5 transition duration-300")} />
+                  <ChevronDown className={cn("h-5 w-5 transition duration-300")} />
                 </>
               </div>
             </div>
diff --git a/packages/ui/components/form/selectimproved/selectimproved.stories.mdx b/packages/ui/components/form/selectimproved/selectimproved.stories.mdx
index 2a6c4a8367..a8988a5738 100644
--- a/packages/ui/components/form/selectimproved/selectimproved.stories.mdx
+++ b/packages/ui/components/form/selectimproved/selectimproved.stories.mdx
@@ -10,7 +10,6 @@ import {
   VariantsTable,
 } from "@calcom/storybook/components";
 
-import { FiPlus } from "../../icon";
 import Select from "./components/Select";
 
 <Meta title="UI/Form/CustomSelect" component={Select} />
diff --git a/packages/ui/components/icon/Icon.tsx b/packages/ui/components/icon/Icon.tsx
index 9b00644181..853141bbf3 100644
--- a/packages/ui/components/icon/Icon.tsx
+++ b/packages/ui/components/icon/Icon.tsx
@@ -1,3 +1,3 @@
-// find all feather icons at https://feathericons.com/
-// github https://github.com/feathericons/feather
-export * from "react-icons/fi";
+// find all lucide icons at https://lucide.dev/
+// github https://github.com/lucide-icons/lucide
+export * from "lucide-react";
diff --git a/packages/ui/components/layout/spacing.stories.mdx b/packages/ui/components/layout/spacing.stories.mdx
index 3100ff654b..1bda5c54be 100644
--- a/packages/ui/components/layout/spacing.stories.mdx
+++ b/packages/ui/components/layout/spacing.stories.mdx
@@ -13,7 +13,6 @@ import {
 } from "@calcom/storybook/components";
 
 import { Tooltip } from "../tooltip";
-import { FiPlus, FiX } from "../icon";
 
 <Meta title="Layout/Spacing" />
 
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index b1ed623012..0b6e566d3e 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -7,7 +7,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { SVGComponent } from "@calcom/types/SVGComponent";
 
-import { FiChevronRight, FiExternalLink } from "../../icon";
+import { ChevronRight, ExternalLink } from "../../icon";
 import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
@@ -67,7 +67,7 @@ const VerticalTabItem = function ({
                 <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 mt-px truncate">
                   {t(name)}
                 </Skeleton>
-                {props.isExternalLink ? <FiExternalLink /> : null}
+                {props.isExternalLink ? <ExternalLink /> : null}
               </span>
               {info && (
                 <Skeleton as="p" title={t(info)} className="max-w-44 mt-1 truncate text-xs font-normal">
@@ -77,7 +77,7 @@ const VerticalTabItem = function ({
             </div>
             {!disableChevron && isCurrent && (
               <div className="ml-auto self-center">
-                <FiChevronRight
+                <ChevronRight
                   width={20}
                   height={20}
                   className="text-default h-auto w-[20px] stroke-[1.5px]"
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index f87a15b6cf..940bbd8088 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 { FiChevronDown } from "../icon";
+import { ChevronDown } from "../icon";
 
 export const AnimatedPopover = ({
   text,
@@ -54,7 +54,7 @@ export const AnimatedPopover = ({
                 )}
               </div>
             </Tooltip>
-            <FiChevronDown
+            <ChevronDown
               className={classNames("ml-2 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 4795ff7661..9069966786 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -7,7 +7,7 @@ import {
   sortByTimezone,
 } from "@calcom/lib/date-fns";
 
-import { FiGlobe } from "../icon";
+import { Globe } from "../icon";
 
 type Attendee = {
   id: number;
@@ -63,7 +63,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">
-        <FiGlobe />
+        <Globe className="h-3.5 w-3.5" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index 81e372d577..6cfecb8dec 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -1,6 +1,6 @@
+import type { LucideIcon as IconType } from "lucide-react";
 import type { FC } from "react";
 import React from "react";
-import type { IconType } from "react-icons/lib";
 
 import type { ButtonBaseProps } from "../button";
 import { Button } from "../button";
@@ -12,7 +12,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
 } from "../form/dropdown";
-import { FiChevronDown, FiMoreHorizontal } from "../icon";
+import { ChevronDown, MoreHorizontal } from "../icon";
 
 export type ActionType = {
   id: string;
@@ -46,7 +46,7 @@ export const DropdownActions = ({
     <Dropdown>
       {!actionTrigger ? (
         <DropdownMenuTrigger asChild>
-          <Button type="button" color="secondary" variant="icon" StartIcon={FiMoreHorizontal} />
+          <Button type="button" color="secondary" variant="icon" StartIcon={MoreHorizontal} />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
@@ -85,7 +85,7 @@ export const TableActions: FC<Props> = ({ actions }) => {
               href={action.href}
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
-              {...(action?.actions ? { EndIcon: FiChevronDown } : null)}
+              {...(action?.actions ? { EndIcon: ChevronDown } : null)}
               disabled={action.disabled}
               color={action.color || "secondary"}>
               {action.label}
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index b1d7583163..df082db640 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import toast from "react-hot-toast";
 
-import { FiCheck, FiInfo } from "../icon";
+import { Check, Info } from "../icon";
 
 type IToast = {
   message: string;
@@ -15,7 +15,7 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <FiCheck className="h-4 w-4" />
+      <Check className="h-4 w-4" />
     </span>
     <p data-testid="toast-success">{message}</p>
   </div>
@@ -28,7 +28,7 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <FiInfo className="h-4 w-4" />
+      <Info className="h-4 w-4" />
     </span>
     <p data-testid="toast-error">{message}</p>
   </div>
@@ -41,7 +41,7 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <FiInfo className="h-4 w-4" />
+      <Info className="h-4 w-4" />
     </span>
     <p data-testid="toast-warning">{message}</p>
   </div>
@@ -54,7 +54,7 @@ export const DefaultToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <FiCheck className="h-4 w-4" />
+      <Check className="h-4 w-4" />
     </span>
     <p>{message}</p>
   </div>
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index d5fc45db60..6863a7153d 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { noop } from "lodash";
 import type { ReactNode } from "react";
 
-import { FiAlertTriangle, FiInfo } from "../icon";
+import { AlertTriangle, Info } from "../icon";
 
 export type TopBannerProps = {
   text: string;
@@ -30,10 +30,10 @@ export function TopBanner(props: TopBannerProps) {
       <div className="flex flex-1 flex-col items-start justify-center gap-2 p-1 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">
           {variant === "error" && (
-            <FiAlertTriangle className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
+            <AlertTriangle className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
           )}
           {variant === "warning" && (
-            <FiInfo className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
+            <Info className="text-emphasis h-4 w-4 stroke-[2.5px]" aria-hidden="true" />
           )}
           {text}
         </p>
diff --git a/packages/ui/form/AddressInput.tsx b/packages/ui/form/AddressInput.tsx
index d48b53e4d7..1dce80fa4e 100644
--- a/packages/ui/form/AddressInput.tsx
+++ b/packages/ui/form/AddressInput.tsx
@@ -1,4 +1,4 @@
-import { FiMapPin } from "../components/icon";
+import { MapPin } from "../components/icon";
 
 export type AddressInputProps = {
   value: string;
@@ -12,7 +12,7 @@ export type AddressInputProps = {
 function AddressInput({ className = "", value, onChange, ...rest }: AddressInputProps) {
   return (
     <div className="relative ">
-      <FiMapPin color="#D2D2D2" className="absolute top-1/2 left-0.5 ml-3 h-6 -translate-y-1/2" />
+      <MapPin color="#D2D2D2" className="absolute top-1/2 left-0.5 ml-3 h-6 -translate-y-1/2" />
       <input
         {...rest}
         value={value}
diff --git a/yarn.lock b/yarn.lock
index 9d990e44e0..7cbed6066a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16663,6 +16663,7 @@ __metadata:
     jest-watch-select-projects: ^2.0.0
     jest-watch-typeahead: ^2.0.0
     lint-staged: ^12.5.0
+    lucide-react: ^0.130.0
     prettier: ^2.8.6
     ts-jest: ^28.0.8
     tsc-absolute: ^1.0.0
@@ -27403,6 +27404,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lucide-react@npm:^0.130.0":
+  version: 0.130.1
+  resolution: "lucide-react@npm:0.130.1"
+  peerDependencies:
+    react: ^16.5.1 || ^17.0.0 || ^18.0.0
+  checksum: 83ba516f60859053380bbe07c23c24695ff479f787aa0e18f2994b63cdf6a48867b7119b10c313a384e301b2521c460c48ebd59a8448ed62cf20a1224839389e
+  languageName: node
+  linkType: hard
+
 "luxon@npm:^1.26.0":
   version: 1.28.0
   resolution: "luxon@npm:1.28.0"