From cfa8fd8b677f4e7244e5625d47d7ed0c9de12bfe Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Mon, 23 Jan 2023 18:08:01 -0500
Subject: [PATCH] Reduce bundle size by importing single icons at a time
 (#6644)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Removed barrel import for icons to reduce bundle size.

* Fixed replacement mistakes

* Reverted unneccesary yarn.lock updates

* Added some missed Icon. import conversions

* Remove merge artifact import in @calcom/ui

* Don't import Icon in pages/[user]

* Update packages/ui/package.json

Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Omar López <zomars@me.com>
---
 apps/web/components/AddToHomescreen.tsx       |  4 +-
 apps/web/components/Embed.tsx                 | 16 ++---
 apps/web/components/SettingsShell.tsx         | 15 ++--
 .../apps/AdditionalCalendarSelector.tsx       |  7 +-
 apps/web/components/apps/App.tsx              | 28 +++++---
 .../components/apps/CalendarListContainer.tsx | 10 +--
 .../components/apps/IntegrationListItem.tsx   |  5 +-
 .../components/apps/layouts/AppsLayout.tsx    |  5 +-
 .../apps/layouts/InstalledAppsLayout.tsx      | 14 ++--
 .../booking/AvailableEventLocations.tsx       |  5 +-
 .../components/booking/BookingDescription.tsx |  9 +--
 .../components/booking/BookingListItem.tsx    | 18 ++---
 apps/web/components/booking/CancelBooking.tsx |  5 +-
 .../booking/pages/AvailabilityPage.tsx        | 13 ++--
 .../components/booking/pages/BookingPage.tsx  | 36 ++++++----
 .../components/dialog/EditLocationDialog.tsx  |  5 +-
 .../components/dialog/RescheduleDialog.tsx    |  4 +-
 .../components/eventtype/AvailabilityTab.tsx  |  7 +-
 .../eventtype/CustomInputTypeForm.tsx         |  7 +-
 .../components/eventtype/EventAdvancedTab.tsx | 10 +--
 .../web/components/eventtype/EventAppsTab.tsx |  5 +-
 .../components/eventtype/EventLimitsTab.tsx   |  7 +-
 .../components/eventtype/EventSetupTab.tsx    | 11 +--
 .../eventtype/EventTeamWebhooksTab.tsx        |  5 +-
 .../eventtype/EventTypeSingleLayout.tsx       | 55 ++++++++------
 .../components/eventtype/SkeletonLoader.tsx   |  7 +-
 .../security/TwoFactorModalHeader.tsx         |  4 +-
 .../components/settings/CalendarSwitch.tsx    |  5 +-
 apps/web/components/ui/EditableHeading.tsx    |  6 +-
 apps/web/components/ui/InfoBadge.tsx          |  5 +-
 .../UsernameAvailability/PremiumTextfield.tsx | 11 +--
 .../UsernameTextfield.tsx                     | 17 ++---
 apps/web/components/ui/form/CheckedSelect.tsx |  5 +-
 apps/web/components/ui/form/DatePicker.tsx    |  4 +-
 apps/web/pages/404.tsx                        | 25 +++----
 apps/web/pages/500.tsx                        |  5 +-
 apps/web/pages/[user].tsx                     |  9 +--
 apps/web/pages/apps/categories/index.tsx      |  7 +-
 apps/web/pages/apps/index.tsx                 |  4 +-
 apps/web/pages/apps/installed/[category].tsx  | 26 ++++---
 apps/web/pages/auth/error.tsx                 |  5 +-
 apps/web/pages/auth/login.tsx                 |  5 +-
 apps/web/pages/auth/logout.tsx                |  5 +-
 apps/web/pages/auth/setup/steps/StepDone.tsx  |  4 +-
 apps/web/pages/availability/[schedule].tsx    |  6 +-
 apps/web/pages/availability/index.tsx         |  5 +-
 apps/web/pages/booking/[uid].tsx              | 13 ++--
 apps/web/pages/bookings/[status].tsx          |  5 +-
 apps/web/pages/event-types/index.tsx          | 57 ++++++++-------
 apps/web/pages/settings/billing/index.tsx     |  5 +-
 .../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      |  8 +--
 .../web/pages/settings/my-account/profile.tsx |  8 +--
 apps/web/pages/team/[slug].tsx                |  5 +-
 apps/web/pages/teams/index.tsx                |  5 +-
 apps/web/pages/video/meeting-ended/[uid].tsx  |  9 +--
 .../pages/video/meeting-not-started/[uid].tsx |  9 +--
 apps/web/pages/video/no-meeting-found.tsx     |  7 +-
 .../_components/OmniInstallAppButton.tsx      |  5 +-
 packages/app-store/_utils/getAppCategories.ts | 16 ++---
 .../app-store/closecom/pages/setup/index.tsx  |  5 +-
 .../routing-forms/components/FormActions.tsx  |  4 +-
 .../routing-forms/components/SingleForm.tsx   | 26 +++----
 .../react-awesome-query-builder/widgets.tsx   |  7 +-
 .../pages/form-edit/[...appPages].tsx         |  6 +-
 .../pages/forms/[...appPages].tsx             | 58 +++++++++------
 .../components/ExistingGoogleCal.tsx          |  5 +-
 .../rainbow/components/RainbowKit.tsx         |  9 +--
 .../app-store/sendgrid/pages/setup/index.tsx  |  5 +-
 .../components/EventTypeAppCardInterface.tsx  |  6 +-
 .../pages/how-to-use/[...appPages].tsx        | 18 ++---
 .../app-store/zapier/pages/setup/index.tsx    |  5 +-
 packages/features/apps/AdminAppsList.tsx      |  6 +-
 .../apps/components/DisconnectIntegration.tsx |  6 +-
 packages/features/auth/SAMLLogin.tsx          |  5 +-
 .../bookings/components/PeopleFilter.tsx      |  5 +-
 .../bookings/components/TeamFilter.tsx        |  7 +-
 packages/features/calendars/DatePicker.tsx    |  5 +-
 .../components/heading/SchedulerHeading.tsx   |  7 +-
 .../api-keys/components/ApiKeyDialogForm.tsx  | 15 +---
 .../ee/api-keys/components/ApiKeyListItem.tsx |  8 +--
 .../ee/common/components/LicenseRequired.tsx  |  5 +-
 .../common/components/v2/LicenseRequired.tsx  |  5 +-
 .../ee/payments/components/PaymentPage.tsx    |  4 +-
 .../ee/sso/components/SAMLConfiguration.tsx   | 10 +--
 .../ee/support/components/HelpMenuItem.tsx    |  9 +--
 .../ee/teams/components/AddNewTeamMembers.tsx |  9 +--
 .../teams/components/CreateANewTeamForm.tsx   |  5 +-
 .../ee/teams/components/MemberListItem.tsx    | 31 ++++----
 .../teams/components/TeamInviteListItem.tsx   | 16 ++---
 .../ee/teams/components/TeamListItem.tsx      | 39 +++++-----
 .../ee/teams/components/TeamsListing.tsx      | 15 ++--
 .../ee/teams/pages/team-billing-view.tsx      |  5 +-
 .../ee/teams/pages/team-members-view.tsx      |  5 +-
 .../ee/teams/pages/team-profile-view.tsx      | 10 +--
 .../ee/video/ViewRecordingsDialog.tsx         |  5 +-
 .../components/UpgradeRecordingBanner.tsx     |  5 +-
 .../ee/workflows/components/EmptyScreen.tsx   | 17 ++---
 .../components/EventWorkflowsTab.tsx          |  7 +-
 .../components/SkeletonLoaderList.tsx         |  7 +-
 .../components/TimeTimeUnitInput.tsx          |  4 +-
 .../components/WorkflowDetailsPage.tsx        |  7 +-
 .../workflows/components/WorkflowListPage.tsx | 23 +++---
 .../components/WorkflowStepContainer.tsx      | 18 ++---
 .../ee/workflows/lib/getActionIcon.tsx        | 25 +++----
 .../features/ee/workflows/pages/index.tsx     |  5 +-
 .../components/CheckedTeamSelect.tsx          |  5 +-
 .../components/CreateEventTypeButton.tsx      |  6 +-
 .../eventtypes/components/CustomInputItem.tsx |  5 +-
 .../components/EventTypeDescription.tsx       | 17 ++---
 .../components/MultiDropdownSelect.tsx        |  4 +-
 packages/features/kbar/Kbar.tsx               | 15 ++--
 .../schedules/components/DateOverrideList.tsx |  7 +-
 .../components/NewScheduleButton.tsx          |  4 +-
 .../schedules/components/Schedule.tsx         | 10 +--
 .../schedules/components/ScheduleListItem.tsx |  8 +--
 .../settings/layouts/SettingsLayout.tsx       | 42 ++++++-----
 packages/features/shell/Shell.tsx             | 71 ++++++++++++-------
 packages/features/tips/UpgradeTip.tsx         |  5 +-
 .../webhooks/components/WebhookListItem.tsx   |  9 +--
 .../components/WebhookTestDisclosure.tsx      |  5 +-
 .../features/webhooks/pages/webhooks-view.tsx |  7 +-
 packages/ui/components/alert/Alert.tsx        |  4 +-
 packages/ui/components/apps/AllApps.tsx       |  8 +--
 packages/ui/components/apps/AppCard.tsx       |  8 +--
 packages/ui/components/apps/Categories.tsx    |  5 +-
 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/FormCard.tsx      |  9 +--
 .../dialog/ConfirmationDialogContent.tsx      |  8 +--
 .../editor/plugins/AddVariablesDropdown.tsx   |  7 +-
 .../editor/plugins/ToolbarPlugin.tsx          | 13 +---
 .../empty-screen/empty-screen.stories.mdx     |  4 +-
 .../date-range-picker/DateRangePicker.tsx     | 11 +--
 .../components/form/datepicker/DatePicker.tsx |  4 +-
 .../components/form/inputs/HintOrErrors.tsx   | 14 ++--
 packages/ui/components/form/inputs/Input.tsx  |  9 +--
 .../ui/components/form/select/components.tsx  |  4 +-
 .../components/form/select/select.stories.mdx |  4 +-
 packages/ui/components/icon/Icon.tsx          | 22 ++----
 .../navigation/tabs/VerticalTabItem.tsx       |  6 +-
 .../ui/components/popover/AnimatedPopover.tsx |  4 +-
 .../popover/MeetingTimeInTimezones.tsx        |  4 +-
 packages/ui/components/table/TableActions.tsx |  6 +-
 packages/ui/components/toast/showToast.tsx    | 10 +--
 .../ui/components/top-banner/TopBanner.tsx    |  7 +-
 packages/ui/form/AddressInput.tsx             |  5 +-
 packages/ui/index.tsx                         |  1 -
 packages/ui/package.json                      |  5 +-
 155 files changed, 881 insertions(+), 768 deletions(-)

diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index fe3296c86a..bae44edf0a 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 { Icon } from "@calcom/ui";
+import { FiX } 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>
-                <Icon.FiX className="h-6 w-6 text-white" aria-hidden="true" />
+                <FiX className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>
diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx
index 3037a4d43b..98ea80aaa4 100644
--- a/apps/web/components/Embed.tsx
+++ b/apps/web/components/Embed.tsx
@@ -12,7 +12,6 @@ import {
   DialogClose,
   DialogContent,
   HorizontalTabs,
-  Icon,
   InputLeading,
   Label,
   showToast,
@@ -20,6 +19,7 @@ import {
   TextArea,
   TextField,
 } from "@calcom/ui";
+import { FiCode, FiTrello, FiSun, FiArrowLeft, FiChevronRight } from "@calcom/ui/components/icon";
 
 import ColorPicker from "@components/ui/colorpicker";
 import Select from "@components/ui/form/Select";
@@ -488,7 +488,7 @@ const tabs = [
   {
     name: "HTML",
     href: "embedTabName=embed-code",
-    icon: Icon.FiCode,
+    icon: FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -541,7 +541,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     href: "embedTabName=embed-react",
-    icon: Icon.FiCode,
+    icon: FiCode,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -581,7 +581,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     href: "embedTabName=embed-preview",
-    icon: Icon.FiTrello,
+    icon: FiTrello,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -617,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <Icon.FiSun className="ml-2 h-4 w-4 text-gray-500" />
+      <FiSun className="ml-2 h-4 w-4 text-gray-500" />
       {children}
     </components.Control>
   );
@@ -815,7 +815,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onClick={() => {
                 removeQueryParams(router, ["embedType", "embedTabName"]);
               }}>
-              <Icon.FiArrowLeft className="mr-4 w-4" />
+              <FiArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
@@ -835,7 +835,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       ? "Floating Popup Customization"
                       : "Element Click Customization"}
                   </div>
-                  <Icon.FiChevronRight
+                  <FiChevronRight
                     className={`${
                       isEmbedCustomizationOpen ? "rotate-90 transform" : ""
                     } ml-auto h-5 w-5 text-gray-500`}
@@ -1002,7 +1002,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
                 <CollapsibleTrigger className="flex w-full" type="button">
                   <div className="text-base  font-medium text-gray-900">Cal Booking Customization</div>
-                  <Icon.FiChevronRight
+                  <FiChevronRight
                     className={`${
                       isBookingCustomizationOpen ? "rotate-90 transform" : ""
                     } ml-auto h-5 w-5 text-gray-500`}
diff --git a/apps/web/components/SettingsShell.tsx b/apps/web/components/SettingsShell.tsx
index 2b23566500..67ffc46f3c 100644
--- a/apps/web/components/SettingsShell.tsx
+++ b/apps/web/components/SettingsShell.tsx
@@ -1,7 +1,8 @@
 import React, { ComponentProps } from "react";
 
 import Shell from "@calcom/features/shell/Shell";
-import { ErrorBoundary, Icon } from "@calcom/ui";
+import { ErrorBoundary } from "@calcom/ui";
+import { FiCreditCard, FiKey, FiLock, FiTerminal, FiUser, FiUsers } from "@calcom/ui/components/icon";
 
 import NavTabs from "./NavTabs";
 
@@ -9,32 +10,32 @@ const tabs = [
   {
     name: "profile",
     href: "/settings/profile",
-    icon: Icon.FiUser,
+    icon: FiUser,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: Icon.FiUsers,
+    icon: FiUsers,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: Icon.FiKey,
+    icon: FiKey,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: Icon.FiTerminal,
+    icon: FiTerminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: Icon.FiCreditCard,
+    icon: FiCreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: Icon.FiLock,
+    icon: FiLock,
     adminRequired: true,
   },
 ];
diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
index 6e54a2cd98..d264da6f06 100644
--- a/apps/web/components/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -4,7 +4,8 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
-import { Button, Icon, Select } from "@calcom/ui";
+import { Button, Select } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -31,7 +32,7 @@ const ImageOption = (optionProps: OptionProps<{ [key: string]: string; type: App
     />
   ) : (
     <Button className="w-full" color="minimal" href="/apps/categories/calendar">
-      <Icon.FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
+      <FiPlus className="text-color mr-3 ml-1 h-4 w-4" />
       <p>{t("install_new_calendar_app")}</p>
     </Button>
   );
@@ -61,7 +62,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
           <Select
             name="additionalCalendar"
             placeholder={
-              <Button StartIcon={Icon.FiPlus} color="secondary">
+              <Button StartIcon={FiPlus} color="secondary">
                 {t("add")}
               </Button>
             }
diff --git a/apps/web/components/apps/App.tsx b/apps/web/components/apps/App.tsx
index 4a4aabcb5f..1260313028 100644
--- a/apps/web/components/apps/App.tsx
+++ b/apps/web/components/apps/App.tsx
@@ -12,7 +12,17 @@ import { APP_NAME, COMPANY_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/consta
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
-import { Button, Icon, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
+import { Button, showToast, SkeletonButton, SkeletonText, HeadSeo, Badge } from "@calcom/ui";
+import {
+  FiBookOpen,
+  FiCheck,
+  FiExternalLink,
+  FiFile,
+  FiFlag,
+  FiMail,
+  FiPlus,
+  FiShield,
+} from "@calcom/ui/components/icon";
 
 const Component = ({
   name,
@@ -118,7 +128,7 @@ const Component = ({
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
-              <Button StartIcon={Icon.FiCheck} color="secondary" disabled>
+              <Button StartIcon={FiCheck} color="secondary" disabled>
                 {existingCredentials.length > 0
                   ? t("active_install", { count: existingCredentials.length })
                   : t("default")}
@@ -139,7 +149,7 @@ const Component = ({
                     }
                     return (
                       <Button
-                        StartIcon={Icon.FiPlus}
+                        StartIcon={FiPlus}
                         {...props}
                         // @TODO: Overriding color and size prevent us from
                         // having to duplicate InstallAppButton for now.
@@ -226,7 +236,7 @@ const Component = ({
                 rel="noreferrer"
                 className="text-sm font-normal text-black no-underline hover:underline"
                 href={docs}>
-                <Icon.FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
+                <FiBookOpen className="mr-1 -mt-1 inline h-4 w-4 text-gray-500" />
                 {t("documentation")}
               </a>
             </li>
@@ -238,7 +248,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={website}>
-                <Icon.FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiExternalLink className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {website.replace("https://", "")}
               </a>
             </li>
@@ -250,7 +260,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={"mailto:" + email}>
-                <Icon.FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiMail className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
 
                 {email}
               </a>
@@ -263,7 +273,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={tos}>
-                <Icon.FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiFile className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {t("terms_of_service")}
               </a>
             </li>
@@ -275,7 +285,7 @@ const Component = ({
                 rel="noreferrer"
                 className="font-normal text-black no-underline hover:underline"
                 href={privacy}>
-                <Icon.FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
+                <FiShield className="mr-1 -mt-px inline h-4 w-4 text-gray-500" />
                 {t("privacy_policy")}
               </a>
             </li>
@@ -286,7 +296,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}`}>
-          <Icon.FiFlag className="inline h-3 w-3" /> {t("report_app")}
+          <FiFlag 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 e9f3ad30eb..d8534c80d6 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -11,13 +11,13 @@ import {
   Alert,
   Button,
   EmptyScreen,
-  Icon,
   List,
   showToast,
   AppSkeletonLoader as SkeletonLoader,
   Switch,
   ShellSubHeading,
 } from "@calcom/ui";
+import { FiArrowLeft, FiCalendar, FiPlus } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -100,7 +100,7 @@ function CalendarSwitch(props: {
       />
       {!!props.destination && (
         <span className="ml-4 inline-flex items-center gap-1 rounded-md bg-gray-100 px-2 py-1 text-sm font-normal text-gray-800">
-          <Icon.FiArrowLeft className="h-4 w-4" />
+          <FiArrowLeft className="h-4 w-4" />
           {t("adding_events_to")}
         </span>
       )}
@@ -282,8 +282,8 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                     <div className="flex justify-between rounded-md border border-gray-200 bg-gray-50 p-4">
                       <div className="flex w-full flex-col items-start gap-4 md:flex-row md:items-center">
                         <div className="relative rounded-md border border-gray-200 bg-white p-1.5">
-                          <Icon.FiCalendar className="h-8 w-8" strokeWidth="1" />
-                          <Icon.FiPlus
+                          <FiCalendar className="h-8 w-8" strokeWidth="1" />
+                          <FiPlus
                             className="absolute left-4 top-1/2 ml-0.5 mt-[1px] h-2 w-2 text-black"
                             strokeWidth="4"
                           />
@@ -322,7 +322,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
               </>
             ) : (
               <EmptyScreen
-                Icon={Icon.FiCalendar}
+                Icon={FiCalendar}
                 headline={t("no_category_apps", {
                   category: t("calendar").toLowerCase(),
                 })}
diff --git a/apps/web/components/apps/IntegrationListItem.tsx b/apps/web/components/apps/IntegrationListItem.tsx
index f641d2b8c1..47e7850466 100644
--- a/apps/web/components/apps/IntegrationListItem.tsx
+++ b/apps/web/components/apps/IntegrationListItem.tsx
@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
 import { ReactNode, useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Badge, Icon, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
+import { Badge, ListItem, ListItemText, ListItemTitle, showToast } from "@calcom/ui";
+import { FiAlertCircle } from "@calcom/ui/components/icon";
 
 import classNames from "@lib/classNames";
 
@@ -63,7 +64,7 @@ function IntegrationListItem(props: {
           {/* Alert error that key stopped working. */}
           {props.invalidCredential && (
             <div className="flex items-center space-x-2 rtl:space-x-reverse">
-              <Icon.FiAlertCircle className="w-8 text-red-500 sm:w-4" />
+              <FiAlertCircle className="w-8 text-red-500 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap text-red-500">
                 {t("invalid_credential")}
               </ListItemText>
diff --git a/apps/web/components/apps/layouts/AppsLayout.tsx b/apps/web/components/apps/layouts/AppsLayout.tsx
index 9995804fac..9ed2458510 100644
--- a/apps/web/components/apps/layouts/AppsLayout.tsx
+++ b/apps/web/components/apps/layouts/AppsLayout.tsx
@@ -4,7 +4,8 @@ import React, { ComponentProps } from "react";
 
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui";
+import { FiAlertCircle } from "@calcom/ui/components/icon";
 
 type AppsLayoutProps = {
   children: React.ReactNode;
@@ -25,7 +26,7 @@ export default function AppsLayout({ children, actions, emptyStore, ...rest }: A
         <main className="w-full">
           {emptyStore ? (
             <EmptyScreen
-              Icon={Icon.FiAlertCircle}
+              Icon={FiAlertCircle}
               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 d238742831..98092eb066 100644
--- a/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
+++ b/apps/web/components/apps/layouts/InstalledAppsLayout.tsx
@@ -4,39 +4,39 @@ import AppCategoryNavigation from "@calcom/app-store/_components/AppCategoryNavi
 import { InstalledAppVariants } from "@calcom/app-store/utils";
 import Shell from "@calcom/features/shell/Shell";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui";
 import type { HorizontalTabItemProps, VerticalTabItemProps } from "@calcom/ui";
+import { FiBarChart, FiCalendar, FiCreditCard, FiGrid, FiShare2, FiVideo } from "@calcom/ui/components/icon";
 
 const tabs: (VerticalTabItemProps | HorizontalTabItemProps)[] = [
   {
     name: "calendar",
     href: "/apps/installed/calendar",
-    icon: Icon.FiCalendar,
+    icon: FiCalendar,
   },
   {
     name: "conferencing",
     href: "/apps/installed/conferencing",
-    icon: Icon.FiVideo,
+    icon: FiVideo,
   },
   {
     name: "payment",
     href: "/apps/installed/payment",
-    icon: Icon.FiCreditCard,
+    icon: FiCreditCard,
   },
   {
     name: "automation",
     href: "/apps/installed/automation",
-    icon: Icon.FiShare2,
+    icon: FiShare2,
   },
   {
     name: "analytics",
     href: "/apps/installed/analytics",
-    icon: Icon.FiBarChart,
+    icon: FiBarChart,
   },
   {
     name: "other",
     href: "/apps/installed/other",
-    icon: Icon.FiGrid,
+    icon: FiGrid,
   },
 ];
 
diff --git a/apps/web/components/booking/AvailableEventLocations.tsx b/apps/web/components/booking/AvailableEventLocations.tsx
index 9c05ee7dc5..6269f3e1b1 100644
--- a/apps/web/components/booking/AvailableEventLocations.tsx
+++ b/apps/web/components/booking/AvailableEventLocations.tsx
@@ -1,7 +1,8 @@
 import { getEventLocationType, locationKeyToString } from "@calcom/app-store/locations";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui";
+import { FiLink } from "@calcom/ui/components/icon";
 
 import { Props } from "./pages/AvailabilityPage";
 
@@ -19,7 +20,7 @@ export function AvailableEventLocations({ locations }: { locations: Props["event
         return (
           <div key={location.type} className="flex flex-row items-center text-sm font-medium">
             {eventLocationType.iconUrl === "/link.svg" ? (
-              <Icon.FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
+              <FiLink className="dark:text-darkgray-600 ml-[2px] h-4 w-4 opacity-70 ltr:mr-[10px] rtl:ml-[10px] dark:opacity-100 " />
             ) : (
               <img
                 src={eventLocationType.iconUrl}
diff --git a/apps/web/components/booking/BookingDescription.tsx b/apps/web/components/booking/BookingDescription.tsx
index 2a381f74cd..b8df86e024 100644
--- a/apps/web/components/booking/BookingDescription.tsx
+++ b/apps/web/components/booking/BookingDescription.tsx
@@ -4,7 +4,8 @@ import { FC, ReactNode, useEffect } from "react";
 import dayjs from "@calcom/dayjs";
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Badge } from "@calcom/ui";
+import { Badge } from "@calcom/ui";
+import { FiCheckSquare, FiClock, FiInfo } from "@calcom/ui/components/icon";
 
 import useRouterQuery from "@lib/hooks/useRouterQuery";
 
@@ -93,7 +94,7 @@ const BookingDescription: FC<Props> = (props) => {
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiInfo
+              <FiInfo
                 className={classNames(
                   "ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]",
                   isBookingPage && "dark:text-darkgray-600 -mt-1 text-gray-500"
@@ -112,7 +113,7 @@ const BookingDescription: FC<Props> = (props) => {
               isBookingPage && "dark:text-darkgray-600 text-sm font-medium text-gray-600"
             )}>
             <div>
-              <Icon.FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+              <FiCheckSquare className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
             </div>
             {requiresConfirmationText}
           </div>
@@ -126,7 +127,7 @@ const BookingDescription: FC<Props> = (props) => {
             isBookingPage && "dark:text-darkgray-600 text-gray-600",
             !eventType.metadata?.multipleDuration && "items-center"
           )}>
-          <Icon.FiClock
+          <FiClock
             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/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index fc94f83f6e..6dcdb3932d 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -18,7 +18,6 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
-  Icon,
   MeetingTimeInTimezones,
   showToast,
   TextArea,
@@ -26,6 +25,7 @@ import {
   ActionType,
   TableActions,
 } from "@calcom/ui";
+import { FiCheck, FiClock, FiMapPin, FiRefreshCcw, FiSend, FiSlash, FiX } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -100,7 +100,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: Icon.FiSlash,
+      icon: FiSlash,
       disabled: mutation.isLoading,
     },
     {
@@ -109,7 +109,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         bookingConfirm(true);
       },
-      icon: Icon.FiCheck,
+      icon: FiCheck,
       disabled: mutation.isLoading,
       color: "primary",
     },
@@ -135,7 +135,7 @@ function BookingListItem(booking: BookingItemProps) {
       href: `/booking/${booking.uid}?cancel=true${
         isTabRecurring && isRecurring ? "&allRemainingBookings=true" : ""
       }`,
-      icon: Icon.FiX,
+      icon: FiX,
     },
     {
       id: "edit_booking",
@@ -143,13 +143,13 @@ function BookingListItem(booking: BookingItemProps) {
       actions: [
         {
           id: "reschedule",
-          icon: Icon.FiClock,
+          icon: FiClock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}`,
         },
         {
           id: "reschedule_request",
-          icon: Icon.FiSend,
+          icon: FiSend,
           iconClassName: "rotate-45 w-[16px] -translate-x-0.5 ",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -162,7 +162,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: Icon.FiMapPin,
+          icon: FiMapPin,
         },
       ],
     },
@@ -179,7 +179,7 @@ function BookingListItem(booking: BookingItemProps) {
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <Icon.FiSend className="-mt-[1px] w-4 rotate-45" />
+        <FiSend className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
     );
@@ -455,7 +455,7 @@ const RecurringBookingsTooltip = ({ booking, recurringDates }: RecurringBookings
                 );
               })}>
               <div className="text-gray-600 dark:text-white">
-                <Icon.FiRefreshCcw
+                <FiRefreshCcw
                   strokeWidth="3"
                   className="float-left mr-1 mt-1.5 inline-block h-3 w-3 text-gray-400"
                 />
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 142f702aad..39d33488f1 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -5,7 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import type { RecurringEvent } from "@calcom/types/Calendar";
-import { Button, Icon, TextArea } from "@calcom/ui";
+import { Button, TextArea } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
 
 type Props = {
   booking: {
@@ -39,7 +40,7 @@ export default function CancelBooking(props: Props) {
       {error && (
         <div className="mt-8">
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <Icon.FiX className="h-6 w-6 text-red-600" />
+            <FiX className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 7b1d5cbb39..6ebf471179 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -28,7 +28,8 @@ import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { detectBrowserTimeFormat, setIs24hClockInLocalStorage, TimeFormat } from "@calcom/lib/timeFormat";
 import { trpc } from "@calcom/trpc/react";
-import { Icon, HeadSeo } from "@calcom/ui";
+import { HeadSeo } from "@calcom/ui";
+import { FiChevronDown, FiChevronUp, FiCreditCard, FiGlobe, FiRefreshCcw } from "@calcom/ui/components/icon";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
 import useRouterQuery from "@lib/hooks/useRouterQuery";
@@ -220,12 +221,12 @@ function TimezoneDropdown({
     <Popover.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
       <Popover.Trigger className="min-w-32 dark:text-darkgray-600 radix-state-open:bg-gray-200 dark:radix-state-open:bg-darkgray-200 group relative mb-2 -ml-2 !mt-2 inline-block self-start rounded-md px-2 py-2 text-left text-gray-600">
         <p className="flex items-center text-sm font-medium">
-          <Icon.FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
+          <FiGlobe className="min-h-4 min-w-4 ml-[2px] -mt-[2px] inline-block ltr:mr-[10px] rtl:ml-[10px]" />
           {timeZone}
           {isTimeOptionsOpen ? (
-            <Icon.FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
+            <FiChevronUp className="min-h-4 min-w-4 ml-1 inline-block" />
           ) : (
-            <Icon.FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
+            <FiChevronDown className="min-h-4 min-w-4 ml-1 inline-block" />
           )}
         </p>
       </Popover.Trigger>
@@ -367,7 +368,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                     <BookingDescription profile={profile} eventType={eventType} rescheduleUid={rescheduleUid}>
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="flex items-start text-sm font-medium">
-                          <Icon.FiRefreshCcw className="float-left mt-[7px] ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] " />
+                          <FiRefreshCcw 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 })}
@@ -392,7 +393,7 @@ const AvailabilityPage = ({ profile, eventType, ...restProps }: Props) => {
                       )}
                       {stripeAppData.price > 0 && (
                         <p className="-ml-2 px-2 text-sm font-medium">
-                          <Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                          <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={stripeAppData.price / 100.0}
diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 8b5b5aa40f..d2f6625ed5 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -39,8 +39,16 @@ import useTheme from "@calcom/lib/hooks/useTheme";
 import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { AddressInput, Button, EmailInput, Form, Icon, PhoneInput, Tooltip } from "@calcom/ui";
-import { Group, RadioField } from "@calcom/ui";
+import { AddressInput, Button, EmailInput, Form, PhoneInput, Tooltip, Group, RadioField } from "@calcom/ui";
+import {
+  FiAlertTriangle,
+  FiCalendar,
+  FiCreditCard,
+  FiInfo,
+  FiRefreshCw,
+  FiUser,
+  FiUserPlus,
+} from "@calcom/ui/components/icon";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
@@ -479,7 +487,7 @@ const BookingPage = ({
               })}{" "}
           | {APP_NAME}
         </title>
-        <link rel="icon" href="/favicon.ico" />
+        <link rel="icon" href="/favico.ico" />
       </Head>
       <BookingPageTagManager eventType={eventType} />
       <CustomBranding lightVal={profile.brandColor} darkVal={profile.darkBrandColor} />
@@ -501,7 +509,7 @@ const BookingPage = ({
                 <BookingDescription isBookingPage profile={profile} eventType={eventType}>
                   {stripeAppData.price > 0 && (
                     <p className="text-bookinglight -ml-2 px-2 text-sm ">
-                      <Icon.FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                      <FiCreditCard className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={stripeAppData.price / 100.0}
@@ -513,7 +521,7 @@ const BookingPage = ({
                   )}
                   {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
                     <div className="items-start text-sm font-medium text-gray-600 dark:text-white">
-                      <Icon.FiRefreshCw className="ml-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                      <FiRefreshCw 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,
@@ -524,7 +532,7 @@ const BookingPage = ({
                     </div>
                   )}
                   <div className="text-bookinghighlight flex items-start text-sm">
-                    <Icon.FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                    <FiCalendar className="ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                     <div className="text-sm font-medium">
                       {(rescheduleUid || !eventType.recurringEvent?.freq) && `${parseDate(date, i18n)}`}
                       {!rescheduleUid &&
@@ -552,14 +560,14 @@ const BookingPage = ({
                         {t("former_time")}
                       </p>
                       <p className="line-through ">
-                        <Icon.FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+                        <FiCalendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                       </p>
                     </div>
                   )}
                   {!!eventType.seatsPerTimeSlot && (
                     <div className="text-bookinghighlight flex items-start text-sm">
-                      <Icon.FiUser
+                      <FiUser
                         className={`ml-[2px] mt-[2px] inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px] ${
                           booking && booking.attendees.length / eventType.seatsPerTimeSlot >= 0.5
                             ? "text-rose-600"
@@ -623,7 +631,7 @@ const BookingPage = ({
                     />
                     {bookingForm.formState.errors.email && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("email_validation_error")}</p>
                       </div>
                     )}
@@ -716,7 +724,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.phone && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -834,7 +842,7 @@ const BookingPage = ({
                           />
                           {bookingForm.formState.errors?.customInputs?.[input.id] && (
                             <div className="mt-2 flex items-center text-sm text-red-700 ">
-                              <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                              <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                               <p>{t("invalid_number")}</p>
                             </div>
                           )}
@@ -914,7 +922,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <Icon.FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <FiInfo className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -956,7 +964,7 @@ const BookingPage = ({
                       color="minimal"
                       variant="icon"
                       tooltip={t("additional_guests")}
-                      StartIcon={Icon.FiUserPlus}
+                      StartIcon={FiUserPlus}
                       onClick={() => setGuestToggle(!guestToggle)}
                       className="mr-auto"
                     />
@@ -993,7 +1001,7 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <Icon.FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+          <FiAlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
         </div>
         <div className="ltr:ml-3 rtl:mr-3">
           <p className="text-sm text-yellow-700">
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index aeac9ef05d..a2bcac74c3 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -15,7 +15,8 @@ import {
 } from "@calcom/app-store/locations";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, DialogFooter, Form, Icon, PhoneInput } from "@calcom/ui";
+import { Button, Dialog, DialogContent, DialogFooter, Form, PhoneInput } from "@calcom/ui";
+import { FiMapPin } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -207,7 +208,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
       <DialogContent disableOverflow>
         <div className="flex flex-row space-x-3">
           <div className="bg-secondary-100 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">
-            <Icon.FiMapPin className="text-primary-600 h-6 w-6" />
+            <FiMapPin className="text-primary-600 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 a81df1531c..6b910f1909 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -9,10 +9,10 @@ import {
   DialogContent,
   DialogFooter,
   DialogHeader,
-  Icon,
   showToast,
   TextArea,
 } from "@calcom/ui";
+import { FiClock } from "@calcom/ui/components/icon";
 
 interface IRescheduleDialog {
   isOpenDialog: boolean;
@@ -43,7 +43,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]">
-            <Icon.FiClock className="m-auto h-6 w-6" />
+            <FiClock 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 bcacbbaa96..86adb1c209 100644
--- a/apps/web/components/eventtype/AvailabilityTab.tsx
+++ b/apps/web/components/eventtype/AvailabilityTab.tsx
@@ -8,7 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { weekdayNames } from "@calcom/lib/weekday";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
-import { Badge, Button, Icon, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
+import { Badge, Button, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
+import { FiExternalLink, FiGlobe } from "@calcom/ui/components/icon";
 
 import { SelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 
@@ -164,13 +165,13 @@ export const AvailabilityTab = ({ isTeamEvent }: { isTeamEvent: boolean }) => {
           <hr />
           <div className="flex flex-col justify-center gap-2 sm:flex-row sm:justify-between">
             <span className="flex items-center justify-center text-sm text-gray-600 sm:justify-start">
-              <Icon.FiGlobe className="ltr:mr-2 rtl:ml-2" />
+              <FiGlobe className="ltr:mr-2 rtl:ml-2" />
               {schedule?.timeZone || <SkeletonText className="block h-5 w-32" />}
             </span>
             <Button
               href={`/availability/${schedule?.schedule.id}`}
               color="minimal"
-              EndIcon={Icon.FiExternalLink}
+              EndIcon={FiExternalLink}
               target="_blank"
               className="justify-center border sm:border-0"
               rel="noopener noreferrer">
diff --git a/apps/web/components/eventtype/CustomInputTypeForm.tsx b/apps/web/components/eventtype/CustomInputTypeForm.tsx
index 44d7b699af..7b309c1d77 100644
--- a/apps/web/components/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/eventtype/CustomInputTypeForm.tsx
@@ -5,7 +5,8 @@ import { FC } from "react";
 import { Control, Controller, useFieldArray, useForm, UseFormRegister, useWatch } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, Label, Select, TextField } from "@calcom/ui";
+import { Button, Label, Select, TextField } from "@calcom/ui";
+import { FiPlus, FiX } from "@calcom/ui/components/icon";
 
 interface OptionTypeBase {
   label: string;
@@ -185,7 +186,7 @@ function RadioInputHandler({
                   <Button
                     variant="icon"
                     color="minimal"
-                    StartIcon={Icon.FiX}
+                    StartIcon={FiX}
                     onClick={() => {
                       remove(index);
                     }}
@@ -196,7 +197,7 @@ function RadioInputHandler({
           ))}
           <Button
             color="minimal"
-            StartIcon={Icon.FiPlus}
+            StartIcon={FiPlus}
             className="!text-sm !font-medium"
             onClick={() => {
               append({ label: "", type: "text" });
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 15f27a6d61..a1ad7fc816 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -18,13 +18,13 @@ import {
   DialogClose,
   DialogContent,
   DialogFooter,
-  Icon,
   Label,
   SettingsToggle,
   showToast,
   TextField,
   Tooltip,
 } from "@calcom/ui";
+import { FiEdit, FiCopy, FiPlus } from "@calcom/ui/components/icon";
 
 import CustomInputTypeForm from "@components/eventtype/CustomInputTypeForm";
 
@@ -128,7 +128,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           addOnSuffix={
             <Button
               type="button"
-              StartIcon={Icon.FiEdit}
+              StartIcon={FiEdit}
               variant="icon"
               color="minimal"
               className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
@@ -168,7 +168,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           </ul>
           {customInputs.length > 0 && (
             <Button
-              StartIcon={Icon.FiPlus}
+              StartIcon={FiPlus}
               color="minimal"
               type="button"
               onClick={() => {
@@ -314,7 +314,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
                   }}
                   className="hover:stroke-3 hover:bg-transparent hover:text-black"
                   type="button">
-                  <Icon.FiCopy />
+                  <FiCopy />
                 </Button>
               </Tooltip>
             }
@@ -413,7 +413,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
           <Dialog open={selectedCustomInputModalOpen} onOpenChange={setSelectedCustomInputModalOpen}>
             <DialogContent
               type="creation"
-              Icon={Icon.FiPlus}
+              Icon={FiPlus}
               title={t("add_new_custom_input_field")}
               description={t("this_input_will_shown_booking_this_event")}>
               <CustomInputTypeForm
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 715a5f59da..958aa67ef2 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -7,7 +7,8 @@ import { EventTypeAppCardComponentProps } from "@calcom/app-store/types";
 import { EventTypeAppsList } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, Icon } from "@calcom/ui";
+import { Button, EmptyScreen } from "@calcom/ui";
+import { FiGrid } from "@calcom/ui/components/icon";
 
 export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
   EventTypeAppCardComponentProps["eventType"];
@@ -60,7 +61,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
         <div className="before:border-0">
           {!isLoading && !installedApps?.length ? (
             <EmptyScreen
-              Icon={Icon.FiGrid}
+              Icon={FiGrid}
               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 40f9f7a46a..1d0f97765c 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -10,7 +10,8 @@ import findDurationType from "@calcom/lib/findDurationType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PeriodType } from "@calcom/prisma/client";
 import type { BookingLimit } from "@calcom/types/Calendar";
-import { Button, DateRangePicker, Icon, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import { Button, DateRangePicker, Input, InputField, Label, Select, SettingsToggle } from "@calcom/ui";
+import { FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 const MinimumBookingNoticeInput = React.forwardRef<
   HTMLInputElement,
@@ -431,7 +432,7 @@ const BookingLimits = () => {
                       />
                       <Button
                         variant="icon"
-                        StartIcon={Icon.FiTrash}
+                        StartIcon={FiTrash}
                         color="destructive"
                         onClick={() => {
                           const current = currentBookingLimits;
@@ -445,7 +446,7 @@ const BookingLimits = () => {
             {currentBookingLimits && Object.keys(currentBookingLimits).length <= 3 && (
               <Button
                 color="minimal"
-                StartIcon={Icon.FiPlus}
+                StartIcon={FiPlus}
                 onClick={() => {
                   if (!currentBookingLimits || !watchBookingLimits) return;
                   const currentKeys = Object.keys(watchBookingLimits);
diff --git a/apps/web/components/eventtype/EventSetupTab.tsx b/apps/web/components/eventtype/EventSetupTab.tsx
index 8892ffda17..bfad38676e 100644
--- a/apps/web/components/eventtype/EventSetupTab.tsx
+++ b/apps/web/components/eventtype/EventSetupTab.tsx
@@ -12,7 +12,8 @@ import { z } from "zod";
 import { EventLocationType, getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import { Button, Label, Select, SettingsToggle, Skeleton, TextField } from "@calcom/ui";
+import { FiEdit2, FiCheck, FiX, FiPlus } from "@calcom/ui/components/icon";
 
 import { slugify } from "@lib/slugify";
 
@@ -198,10 +199,10 @@ export const EventSetupTab = (
                         }}
                         aria-label={t("edit")}
                         className="mr-1 p-1 text-gray-500 hover:text-gray-900">
-                        <Icon.FiEdit2 className="h-4 w-4" />
+                        <FiEdit2 className="h-4 w-4" />
                       </button>
                       <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                        <Icon.FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                        <FiX className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
                       </button>
                     </div>
                   </div>
@@ -210,7 +211,7 @@ export const EventSetupTab = (
             })}
             {validLocations.some((location) => location.type === MeetLocationType) && (
               <div className="flex text-sm text-gray-600">
-                <Icon.FiCheck className="mt-0.5 mr-1.5 h-2 w-2.5" />
+                <FiCheck 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.
@@ -227,7 +228,7 @@ export const EventSetupTab = (
             )}
             {validLocations.length > 0 && validLocations.length !== locationOptions.length && (
               <li>
-                <Button StartIcon={Icon.FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
+                <Button StartIcon={FiPlus} color="minimal" onClick={() => setShowLocationModal(true)}>
                   {t("add_location")}
                 </Button>
               </li>
diff --git a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
index 46e5029d71..0972beac76 100644
--- a/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
+++ b/apps/web/components/eventtype/EventTeamWebhooksTab.tsx
@@ -9,7 +9,8 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Webhook } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogContent, EmptyScreen, Icon, showToast } from "@calcom/ui";
+import { Button, Dialog, DialogContent, EmptyScreen, showToast } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 export const EventTeamWebhooksTab = ({
   eventType,
@@ -84,7 +85,7 @@ export const EventTeamWebhooksTab = ({
       <Button
         color="secondary"
         data-testid="new_webhook"
-        StartIcon={Icon.FiPlus}
+        StartIcon={FiPlus}
         onClick={() => setCreateModalOpen(true)}>
         {t("new_webhook")}
       </Button>
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index f13f9ca90d..da412ca8a3 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -23,7 +23,6 @@ import {
   DropdownItem,
   DropdownMenuTrigger,
   HorizontalTabs,
-  Icon,
   Label,
   showToast,
   Skeleton,
@@ -32,6 +31,21 @@ import {
   VerticalDivider,
   VerticalTabs,
 } from "@calcom/ui";
+import {
+  FiLink,
+  FiCalendar,
+  FiClock,
+  FiSliders,
+  FiRepeat,
+  FiGrid,
+  FiZap,
+  FiUsers,
+  FiExternalLink,
+  FiCode,
+  FiTrash,
+  FiMoreHorizontal,
+  FiLoader,
+} from "@calcom/ui/components/icon";
 
 import { EmbedButton, EmbedDialog } from "@components/Embed";
 
@@ -63,44 +77,44 @@ function getNavigation(props: {
     {
       name: "event_setup_tab_title",
       href: `/event-types/${eventType.id}?tabName=setup`,
-      icon: Icon.FiLink,
+      icon: FiLink,
       info: `${duration} ${t("minute_timeUnit")}`, // TODO: Get this from props
     },
     {
       name: "availability",
       href: `/event-types/${eventType.id}?tabName=availability`,
-      icon: Icon.FiCalendar,
+      icon: FiCalendar,
       info: `default_schedule_name`, // TODO: Get this from props
     },
     {
       name: "event_limit_tab_title",
       href: `/event-types/${eventType.id}?tabName=limits`,
-      icon: Icon.FiClock,
+      icon: FiClock,
       info: `event_limit_tab_description`,
     },
     {
       name: "event_advanced_tab_title",
       href: `/event-types/${eventType.id}?tabName=advanced`,
-      icon: Icon.FiSliders,
+      icon: FiSliders,
       info: `event_advanced_tab_description`,
     },
     {
       name: "recurring",
       href: `/event-types/${eventType.id}?tabName=recurring`,
-      icon: Icon.FiRepeat,
+      icon: FiRepeat,
       info: `recurring_event_tab_description`,
     },
     {
       name: "apps",
       href: `/event-types/${eventType.id}?tabName=apps`,
-      icon: Icon.FiGrid,
+      icon: FiGrid,
       //TODO: Handle proper translation with count handling
       info: `${installedAppsNumber} apps, ${enabledAppsNumber} ${t("active")}`,
     },
     {
       name: "workflows",
       href: `/event-types/${eventType.id}?tabName=workflows`,
-      icon: Icon.FiZap,
+      icon: FiZap,
       info: `${enabledWorkflowsNumber} ${t("active")}`,
     },
   ];
@@ -157,7 +171,7 @@ function EventTypeSingleLayout({
       navigation.splice(2, 0, {
         name: "assignment",
         href: `/event-types/${eventType.id}?tabName=team`,
-        icon: Icon.FiUsers,
+        icon: FiUsers,
         info: eventType.schedulingType === "COLLECTIVE" ? "collective" : "round_robin",
       });
       navigation.push({
@@ -211,14 +225,14 @@ function EventTypeSingleLayout({
                 variant="icon"
                 href={permalink}
                 rel="noreferrer"
-                StartIcon={Icon.FiExternalLink}
+                StartIcon={FiExternalLink}
               />
             </Tooltip>
 
             <Button
               color="secondary"
               variant="icon"
-              StartIcon={Icon.FiLink}
+              StartIcon={FiLink}
               tooltip={t("copy_link")}
               onClick={() => {
                 navigator.clipboard.writeText(permalink);
@@ -227,7 +241,7 @@ function EventTypeSingleLayout({
             />
             <EmbedButton
               embedUrl={encodeURIComponent(embedLink)}
-              StartIcon={Icon.FiCode}
+              StartIcon={FiCode}
               color="secondary"
               variant="icon"
               tooltip={t("embed")}
@@ -235,7 +249,7 @@ function EventTypeSingleLayout({
             <Button
               color="secondary"
               variant="icon"
-              StartIcon={Icon.FiTrash}
+              StartIcon={FiTrash}
               tooltip={t("delete")}
               disabled={!hasPermsToDelete}
               onClick={() => setDeleteDialogOpen(true)}
@@ -246,19 +260,14 @@ function EventTypeSingleLayout({
 
           <Dropdown>
             <DropdownMenuTrigger asChild>
-              <Button
-                className="lg:hidden"
-                StartIcon={Icon.FiMoreHorizontal}
-                variant="icon"
-                color="secondary"
-              />
+              <Button className="lg:hidden" StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   target="_blank"
                   type="button"
-                  StartIcon={Icon.FiExternalLink}
+                  StartIcon={FiExternalLink}
                   href={permalink}
                   rel="noreferrer">
                   {t("preview")}
@@ -267,7 +276,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   type="button"
-                  StartIcon={Icon.FiLink}
+                  StartIcon={FiLink}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Link copied!", "success");
@@ -278,7 +287,7 @@ function EventTypeSingleLayout({
               <DropdownMenuItem className="focus:ring-gray-100">
                 <DropdownItem
                   type="button"
-                  StartIcon={Icon.FiTrash}
+                  StartIcon={FiTrash}
                   disabled={!hasPermsToDelete}
                   onClick={() => setDeleteDialogOpen(true)}>
                   {t("delete")}
@@ -313,7 +322,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <Suspense fallback={<Icon.FiLoader />}>
+      <Suspense fallback={<FiLoader />}>
         <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs
diff --git a/apps/web/components/eventtype/SkeletonLoader.tsx b/apps/web/components/eventtype/SkeletonLoader.tsx
index a645f88827..769ef377a2 100644
--- a/apps/web/components/eventtype/SkeletonLoader.tsx
+++ b/apps/web/components/eventtype/SkeletonLoader.tsx
@@ -1,4 +1,5 @@
-import { Icon, SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { FiClock, FiUser } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
@@ -31,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">
-              <Icon.FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiClock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <Icon.FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiUser className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <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 d37f3c0636..47e2be473b 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -1,10 +1,10 @@
-import { Icon } from "@calcom/ui";
+import { ShieldCheckIcon } 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">
-        <Icon.ShieldCheckIcon className="h-6 w-6 text-white" />
+        <ShieldCheckIcon className="h-6 w-6 text-white" />
       </div>
       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
         <h3 className="font-cal text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/apps/web/components/settings/CalendarSwitch.tsx b/apps/web/components/settings/CalendarSwitch.tsx
index f8c7c08eca..20f02d7404 100644
--- a/apps/web/components/settings/CalendarSwitch.tsx
+++ b/apps/web/components/settings/CalendarSwitch.tsx
@@ -2,7 +2,8 @@ import { useMutation } from "@tanstack/react-query";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Icon, showToast, Switch } from "@calcom/ui";
+import { Badge, showToast, Switch } from "@calcom/ui";
+import { FiArrowLeft } from "@calcom/ui/components/icon";
 
 export function CalendarSwitch(props: {
   type: string;
@@ -74,7 +75,7 @@ export function CalendarSwitch(props: {
       />
       {props.defaultSelected && (
         <Badge variant="gray">
-          <Icon.FiArrowLeft className="mr-1" /> {t("adding_events_to")}
+          <FiArrowLeft className="mr-1" /> {t("adding_events_to")}
         </Badge>
       )}
     </div>
diff --git a/apps/web/components/ui/EditableHeading.tsx b/apps/web/components/ui/EditableHeading.tsx
index 57b723f1c7..5e6fe1c975 100644
--- a/apps/web/components/ui/EditableHeading.tsx
+++ b/apps/web/components/ui/EditableHeading.tsx
@@ -1,8 +1,8 @@
 import classNames from "classnames";
-import React, { useState } from "react";
+import { useState } from "react";
 import { ControllerRenderProps } from "react-hook-form";
 
-import { Icon } from "@calcom/ui";
+import { FiEdit2 } 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 && (
-            <Icon.FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
+            <FiEdit2 className="ml-1 inline h-4 w-4 align-top text-gray-700 group-hover:text-gray-500" />
           )}
           <input
             {...passThroughProps}
diff --git a/apps/web/components/ui/InfoBadge.tsx b/apps/web/components/ui/InfoBadge.tsx
index f5b9577350..58be50bbca 100644
--- a/apps/web/components/ui/InfoBadge.tsx
+++ b/apps/web/components/ui/InfoBadge.tsx
@@ -1,11 +1,12 @@
-import { Icon, Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui";
+import { FiInfo } from "@calcom/ui/components/icon";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <Icon.FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
+          <FiInfo className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
         </span>
       </Tooltip>
     </>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index fc038b416f..88eb17bf29 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -11,7 +11,8 @@ import { User } from "@calcom/prisma/client";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Icon, Input, Label } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogHeader, Input, Label } from "@calcom/ui";
+import { FiCheck, FiEdit2, FiExternalLink, StarIconSolid } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
   UPGRADE = "UPGRADE",
@@ -230,8 +231,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 isInputUsernamePremium ? "text-orange-400" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <Icon.StarIconSolid className="mt-[2px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <Icon.FiCheck className="mt-2 w-6" /> : <></>}
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <FiCheck className="mt-2 w-6" /> : <></>}
             </span>
           </div>
         </div>
@@ -249,7 +250,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <DialogContent>
           <div className="flex flex-row">
             <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <Icon.FiEdit2 className="m-auto h-6 w-6" />
+              <FiEdit2 className="m-auto h-6 w-6" />
             </div>
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
@@ -283,7 +284,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 data-testid="go-to-billing"
                 href={paymentLink}>
                 <>
-                  {t("go_to_stripe_billing")} <Icon.FiExternalLink className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <FiExternalLink 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 dfb4d40b90..4ccc5b1296 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -7,17 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  Icon,
-  Input,
-  Label,
-  TextField,
-} from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, DialogHeader, TextField } from "@calcom/ui";
+import { FiCheck, FiEdit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
   currentUsername: string | undefined;
@@ -145,7 +136,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 ? <Icon.FiCheck className="w-6" /> : <></>}
+                {usernameIsAvailable ? <FiCheck className="w-6" /> : <></>}
               </span>
             </div>
           )}
@@ -165,7 +156,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
         <DialogContent>
           <div style={{ display: "flex", flexDirection: "row" }}>
             <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <Icon.FiEdit2 className="m-auto h-6 w-6" />
+              <FiEdit2 className="m-auto h-6 w-6" />
             </div>
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />
diff --git a/apps/web/components/ui/form/CheckedSelect.tsx b/apps/web/components/ui/form/CheckedSelect.tsx
index 0ff26baa40..42225e6613 100644
--- a/apps/web/components/ui/form/CheckedSelect.tsx
+++ b/apps/web/components/ui/form/CheckedSelect.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Avatar } from "@calcom/ui";
+import { Avatar } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
 
 import Select from "@components/ui/form/Select";
 
@@ -48,7 +49,7 @@ export const CheckedSelect = ({
             alt={option.label}
           />
           {option.label}
-          <Icon.FiX
+          <FiX
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
             className="float-right mt-0.5 h-5 w-5 cursor-pointer text-gray-500"
           />
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index 3992ff8e9e..47e86a3e65 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 { Icon } from "@calcom/ui";
+import { FiCalendar } 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={<Icon.FiCalendar className="h-5 w-5 text-gray-500" />}
+      calendarIcon={<FiCalendar className="h-5 w-5 text-gray-500" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index 935f640a95..44ac023d22 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -4,7 +4,8 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { COMPANY_NAME, DEVELOPER_DOCS, DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
-import { Icon, HeadSeo } from "@calcom/ui";
+import { HeadSeo } from "@calcom/ui";
+import { FiFileText, FiCheck, FiBookOpen, FiChevronRight } from "@calcom/ui/components/icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -20,13 +21,13 @@ export default function Custom404() {
     {
       title: t("documentation"),
       description: t("documentation_description"),
-      icon: Icon.FiFileText,
+      icon: FiFileText,
       href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
-      icon: Icon.FiBookOpen,
+      icon: FiBookOpen,
       href: `${WEBSITE_URL}/blog`,
     },
   ];
@@ -75,7 +76,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">
-                          <Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -90,7 +91,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -103,7 +104,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-gray-50">
-                          <Icon.FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                          <FiFileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -116,7 +117,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </Link>
                   </li>
@@ -161,7 +162,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -218,7 +219,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">
-                            <Icon.FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
+                            <FiCheck className="h-6 w-6 text-green-500" aria-hidden="true" />
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
@@ -233,7 +234,7 @@ export default function Custom404() {
                           <p className="text-base text-gray-500">{t("claim_username_and_schedule_events")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
                       </a>
                     </li>
@@ -261,7 +262,7 @@ export default function Custom404() {
                           <p className="text-base text-gray-500">{link.description}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
                       </Link>
                     </li>
@@ -307,7 +308,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <Icon.FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <FiChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
diff --git a/apps/web/pages/500.tsx b/apps/web/pages/500.tsx
index 47bb99684c..208810b8ab 100644
--- a/apps/web/pages/500.tsx
+++ b/apps/web/pages/500.tsx
@@ -3,7 +3,8 @@ import { useRouter } from "next/router";
 
 import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, showToast } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+import { FiCopy } from "@calcom/ui/components/icon";
 
 export default function Error500() {
   const { t } = useLocale();
@@ -33,7 +34,7 @@ export default function Error500() {
               <Button
                 color="secondary"
                 className="mt-2 border-0 font-sans font-normal hover:bg-gray-300"
-                StartIcon={Icon.FiCopy}
+                StartIcon={FiCopy}
                 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 91f0b44ad0..d4cb3462e0 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -26,7 +26,8 @@ import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calco
 import prisma from "@calcom/prisma";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
 import { EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Icon, HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
+import { HeadSeo, AvatarGroup, Avatar } from "@calcom/ui";
+import { BadgeCheckIcon, FiArrowRight } from "@calcom/ui/components/icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { EmbedProps } from "@lib/withEmbedSsr";
@@ -55,7 +56,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
         <li
           key={index}
           className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
-          <Icon.FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+          <FiArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
             className="flex justify-between px-6 py-4"
@@ -134,7 +135,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
               <h1 className="font-cal mb-1 text-3xl text-gray-900 dark:text-white">
                 {nameOrUsername}
                 {user.verified && (
-                  <Icon.BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
+                  <BadgeCheckIcon className="mx-1 -mt-1 inline h-6 w-6 text-blue-500 dark:text-white" />
                 )}
               </h1>
               <p className="dark:text-darkgray-600 text-s text-gray-500">{user.bio}</p>
@@ -163,7 +164,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
                   className="dark:bg-darkgray-100 group relative border-b border-gray-200 bg-white  first:rounded-t-md last:rounded-b-md last:border-b-0 hover:bg-gray-50 dark:border-gray-700 dark:hover:border-gray-600">
-                  <Icon.FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+                  <FiArrowRight className="absolute right-4 top-4 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link
                     prefetch={false}
diff --git a/apps/web/pages/apps/categories/index.tsx b/apps/web/pages/apps/categories/index.tsx
index fb9517a174..7cfbcef51c 100644
--- a/apps/web/pages/apps/categories/index.tsx
+++ b/apps/web/pages/apps/categories/index.tsx
@@ -4,7 +4,8 @@ import Link from "next/link";
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
+import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
 
 export default function Apps({ categories }: InferGetStaticPropsType<typeof getStaticProps>) {
   const { t, isLocaleReady } = useLocale();
@@ -15,7 +16,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
         <Link
           href="/apps"
           className="inline-flex items-center justify-start gap-1 rounded-sm py-2 text-gray-900">
-          <Icon.FiArrowLeft className="h-4 w-4" />
+          <FiArrowLeft className="h-4 w-4" />
           {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
         </Link>
       </div>
@@ -31,7 +32,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
                 <h3 className="font-medium capitalize">{category.name}</h3>
                 <p className="text-sm text-gray-500">
                   {t("number_apps", { count: category.count })}{" "}
-                  <Icon.FiArrowRight className="inline-block h-4 w-4" />
+                  <FiArrowRight 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 ec6e7bed2c..b244b36997 100644
--- a/apps/web/pages/apps/index.tsx
+++ b/apps/web/pages/apps/index.tsx
@@ -12,10 +12,10 @@ import {
   AppStoreCategories,
   HorizontalTabItemProps,
   HorizontalTabs,
-  Icon,
   TextField,
   PopularAppsSlider,
 } from "@calcom/ui";
+import { FiSearch } from "@calcom/ui/components/icon";
 
 import AppsLayout from "@components/apps/layouts/AppsLayout";
 
@@ -42,7 +42,7 @@ function AppsSearch({
   return (
     <TextField
       className="!border-gray-100 bg-gray-100 !pl-0 focus:!ring-offset-0"
-      addOnLeading={<Icon.FiSearch className="h-4 w-4 text-gray-500" />}
+      addOnLeading={<FiSearch className="h-4 w-4 text-gray-500" />}
       addOnClassname="!border-gray-100"
       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 a14a5d5ec4..a03a1c28d6 100644
--- a/apps/web/pages/apps/installed/[category].tsx
+++ b/apps/web/pages/apps/installed/[category].tsx
@@ -13,11 +13,19 @@ import {
   Alert,
   Button,
   EmptyScreen,
-  Icon,
   List,
   AppSkeletonLoader as SkeletonLoader,
   ShellSubHeading,
 } from "@calcom/ui";
+import {
+  FiBarChart,
+  FiCalendar,
+  FiCreditCard,
+  FiGrid,
+  FiPlus,
+  FiShare2,
+  FiVideo,
+} from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -139,13 +147,13 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant, exclude, onlyInstalled: true });
   const emptyIcon = {
-    calendar: Icon.FiCalendar,
-    conferencing: Icon.FiVideo,
-    automation: Icon.FiShare2,
-    analytics: Icon.FiBarChart,
-    payment: Icon.FiCreditCard,
-    web3: Icon.FiBarChart,
-    other: Icon.FiGrid,
+    calendar: FiCalendar,
+    conferencing: FiVideo,
+    automation: FiShare2,
+    analytics: FiBarChart,
+    payment: FiCreditCard,
+    web3: FiBarChart,
+    other: FiGrid,
   };
 
   return (
@@ -169,7 +177,7 @@ const IntegrationsContainer = ({ variant, exclude }: IntegrationsContainerProps)
                           : "/apps"
                       }
                       color="secondary"
-                      StartIcon={Icon.FiPlus}>
+                      StartIcon={FiPlus}>
                       {t("add")}
                     </Button>
                   }
diff --git a/apps/web/pages/auth/error.tsx b/apps/web/pages/auth/error.tsx
index 2463015e5e..8179fa99e2 100644
--- a/apps/web/pages/auth/error.tsx
+++ b/apps/web/pages/auth/error.tsx
@@ -4,7 +4,8 @@ import { useRouter } from "next/router";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, SkeletonText } from "@calcom/ui";
+import { Button, SkeletonText } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
 
 import AuthContainer from "@components/ui/AuthContainer";
 
@@ -28,7 +29,7 @@ export default function Error() {
     <AuthContainer title="" description="">
       <div>
         <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-          <Icon.FiX className="h-6 w-6 text-red-600" />
+          <FiX className="h-6 w-6 text-red-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index 1810c7e50a..4ca72f73ad 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -13,7 +13,8 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import prisma from "@calcom/prisma";
-import { Alert, Button, EmailField, Icon, PasswordField } from "@calcom/ui";
+import { Alert, Button, EmailField, PasswordField } from "@calcom/ui";
+import { FiArrowLeft } from "@calcom/ui/components/icon";
 
 import { ErrorCode, getSession } from "@lib/auth";
 import { WEBAPP_URL, WEBSITE_URL } from "@lib/config/constants";
@@ -85,7 +86,7 @@ export default function Login({
         setTwoFactorRequired(false);
         methods.setValue("totpCode", "");
       }}
-      StartIcon={Icon.FiArrowLeft}
+      StartIcon={FiArrowLeft}
       color="minimal">
       {t("go_back")}
     </Button>
diff --git a/apps/web/pages/auth/logout.tsx b/apps/web/pages/auth/logout.tsx
index 95038fc8f7..587a9cfbe0 100644
--- a/apps/web/pages/auth/logout.tsx
+++ b/apps/web/pages/auth/logout.tsx
@@ -5,7 +5,8 @@ import { useEffect } from "react";
 
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiCheck } from "@calcom/ui/components/icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -31,7 +32,7 @@ export default function Logout(props: Props) {
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")} showLogo>
       <div className="mb-4">
         <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-          <Icon.FiCheck className="h-6 w-6 text-green-600" />
+          <FiCheck className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
diff --git a/apps/web/pages/auth/setup/steps/StepDone.tsx b/apps/web/pages/auth/setup/steps/StepDone.tsx
index 933ce7edd5..3019ffeed0 100644
--- a/apps/web/pages/auth/setup/steps/StepDone.tsx
+++ b/apps/web/pages/auth/setup/steps/StepDone.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { FiCheck } from "@calcom/ui/components/icon";
 
 const StepDone = () => {
   const router = useRouter();
@@ -18,7 +18,7 @@ const StepDone = () => {
       }}>
       <div className="min-h-36 my-6 flex flex-col items-center justify-center">
         <div className="flex h-[72px] w-[72px] items-center justify-center rounded-full bg-gray-600 dark:bg-white">
-          <Icon.FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
+          <FiCheck className="inline-block h-10 w-10 text-white dark:bg-white dark:text-gray-600" />
         </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/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index 55452ef239..201f2fea0f 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -15,7 +15,6 @@ import type { Schedule as ScheduleType, TimeRange, WorkingHours } from "@calcom/
 import {
   Button,
   Form,
-  Icon,
   Label,
   showToast,
   Skeleton,
@@ -25,6 +24,7 @@ import {
   Tooltip,
   VerticalDivider,
 } from "@calcom/ui";
+import { FiInfo, FiPlus } from "@calcom/ui/components/icon";
 
 import { HttpError } from "@lib/core/http/error";
 
@@ -56,7 +56,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
         {t("date_overrides")}{" "}
         <Tooltip content={t("date_overrides_info")}>
           <span className="inline-block">
-            <Icon.FiInfo />
+            <FiInfo />
           </span>
         </Tooltip>
       </h3>
@@ -74,7 +74,7 @@ const DateOverride = ({ workingHours }: { workingHours: WorkingHours[] }) => {
           excludedDates={fields.map((field) => yyyymmdd(field.ranges[0].start))}
           onChange={(ranges) => append({ ranges })}
           Trigger={
-            <Button color="secondary" StartIcon={Icon.FiPlus} data-testid="add-override">
+            <Button color="secondary" StartIcon={FiPlus} data-testid="add-override">
               Add an override
             </Button>
           }
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 0fa6b47159..c12f8c40d9 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -5,7 +5,8 @@ import { NewScheduleButton, ScheduleListItem } from "@calcom/features/schedules"
 import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { EmptyScreen, Icon, showToast } from "@calcom/ui";
+import { EmptyScreen, showToast } from "@calcom/ui";
+import { FiClock } from "@calcom/ui/components/icon";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
@@ -76,7 +77,7 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
       {schedules.length === 0 ? (
         <div className="flex justify-center">
           <EmptyScreen
-            Icon={Icon.FiClock}
+            Icon={FiClock}
             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 c70be8c6c9..7b7d4749af 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -35,7 +35,8 @@ import { localStorage } from "@calcom/lib/webstorage";
 import prisma from "@calcom/prisma";
 import { Prisma } from "@calcom/prisma/client";
 import { customInputSchema, EventTypeMetaDataSchema } from "@calcom/prisma/zod-utils";
-import { Button, EmailInput, Icon, HeadSeo } from "@calcom/ui";
+import { Button, EmailInput, HeadSeo } from "@calcom/ui";
+import { FiX, FiChevronLeft, FiCheck, FiCalendar } from "@calcom/ui/components/icon";
 
 import { timeZone } from "@lib/clock";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -142,7 +143,7 @@ function RedirectionToast({ url }: { url: string }) {
                     setIsToastVisible(false);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
-                  <Icon.FiX className="h-6 w-6 text-white" />
+                  <FiX className="h-6 w-6 text-white" />
                 </button>
               </div>
             </div>
@@ -356,7 +357,7 @@ export default function Success(props: SuccessProps) {
           <Link
             href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
             className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800 dark:hover:bg-transparent dark:hover:text-white">
-            <Icon.FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
+            <FiChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
           </Link>
         </div>
       )}
@@ -401,10 +402,10 @@ export default function Success(props: SuccessProps) {
                     <img src={giphyImage} alt="Gif from Giphy" />
                   )}
                   {!giphyImage && !needsConfirmation && !isCancelled && (
-                    <Icon.FiCheck className="h-5 w-5 text-green-600" />
+                    <FiCheck className="h-5 w-5 text-green-600" />
                   )}
-                  {needsConfirmation && !isCancelled && <Icon.FiCalendar className="h-5 w-5 text-gray-900" />}
-                  {isCancelled && <Icon.FiX className="h-5 w-5 text-red-600" />}
+                  {needsConfirmation && !isCancelled && <FiCalendar className="h-5 w-5 text-gray-900" />}
+                  {isCancelled && <FiX className="h-5 w-5 text-red-600" />}
                 </div>
                 <div className="mt-6 mb-8 text-center last:mb-0">
                   <h3
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 73d1a5fa13..8e7e74e8c1 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -9,7 +9,8 @@ import BookingLayout from "@calcom/features/bookings/layout/BookingLayout";
 import { filterQuerySchema, useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Alert, Button, EmptyScreen, Icon } from "@calcom/ui";
+import { Alert, Button, EmptyScreen } from "@calcom/ui";
+import { FiCalendar } from "@calcom/ui/components/icon";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
@@ -176,7 +177,7 @@ export default function Bookings() {
         {query.status === "success" && isEmpty && (
           <div className="flex items-center justify-center pt-2 xl:pt-0">
             <EmptyScreen
-              Icon={Icon.FiCalendar}
+              Icon={FiCalendar}
               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 0f889e4746..4fd35685fc 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -26,13 +26,27 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   EmptyScreen,
-  Icon,
   showToast,
   Switch,
   Avatar,
   AvatarGroup,
   Tooltip,
 } from "@calcom/ui";
+import {
+  FiArrowDown,
+  FiArrowUp,
+  FiClipboard,
+  FiCode,
+  FiCopy,
+  FiEdit,
+  FiEdit2,
+  FiExternalLink,
+  FiLink,
+  FiMoreHorizontal,
+  FiTrash,
+  FiUpload,
+  FiUsers,
+} from "@calcom/ui/components/icon";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
@@ -263,7 +277,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <button
                       className="invisible absolute left-[5px] -mt-4 mb-4 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, -1)}>
-                      <Icon.FiArrowUp className="h-5 w-5" />
+                      <FiArrowUp className="h-5 w-5" />
                     </button>
                   )}
 
@@ -271,7 +285,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     <button
                       className="invisible absolute left-[5px] mt-8 -ml-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md  border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow disabled:hover:border-inherit disabled:hover:text-gray-400 disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-[36px]"
                       onClick={() => moveEventType(index, 1)}>
-                      <Icon.FiArrowDown className="h-5 w-5" />
+                      <FiArrowDown className="h-5 w-5" />
                     </button>
                   )}
                   <MemoizedItem type={type} group={group} readOnly={readOnly} />
@@ -314,7 +328,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               target="_blank"
                               variant="icon"
                               href={calLink}
-                              StartIcon={Icon.FiExternalLink}
+                              StartIcon={FiExternalLink}
                             />
                           </Tooltip>
 
@@ -322,7 +336,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             <Button
                               color="secondary"
                               variant="icon"
-                              StartIcon={Icon.FiLink}
+                              StartIcon={FiLink}
                               onClick={() => {
                                 showToast(t("link_copied"), "success");
                                 navigator.clipboard.writeText(calLink);
@@ -338,7 +352,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 type="button"
                                 variant="icon"
                                 color="secondary"
-                                StartIcon={Icon.FiMoreHorizontal}
+                                StartIcon={FiMoreHorizontal}
                               />
                             </DropdownMenuTrigger>
                             <DropdownMenuContent>
@@ -346,7 +360,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <DropdownItem
                                   type="button"
                                   data-testid={"event-type-edit-" + type.id}
-                                  StartIcon={Icon.FiEdit2}
+                                  StartIcon={FiEdit2}
                                   onClick={() => router.push("/event-types/" + type.id)}>
                                   {t("edit")}
                                 </DropdownItem>
@@ -355,7 +369,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <DropdownItem
                                   type="button"
                                   data-testid={"event-type-duplicate-" + type.id}
-                                  StartIcon={Icon.FiCopy}
+                                  StartIcon={FiCopy}
                                   onClick={() => openDuplicateModal(type)}>
                                   {t("duplicate")}
                                 </DropdownItem>
@@ -364,7 +378,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                 <EmbedButton
                                   as={DropdownItem}
                                   type="button"
-                                  StartIcon={Icon.FiCode}
+                                  StartIcon={FiCode}
                                   className="w-full rounded-none"
                                   embedUrl={encodeURIComponent(embedLink)}>
                                   {t("embed")}
@@ -380,7 +394,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                                       setDeleteDialogOpen(true);
                                       setDeleteDialogTypeId(type.id);
                                     }}
-                                    StartIcon={Icon.FiTrash}
+                                    StartIcon={FiTrash}
                                     className="w-full rounded-none">
                                     {t("delete")}
                                   </DropdownItem>
@@ -396,12 +410,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={Icon.FiMoreHorizontal}
-                      />
+                      <Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
@@ -409,7 +418,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           <Link href={calLink} target="_blank">
                             <Button
                               color="minimal"
-                              StartIcon={Icon.FiExternalLink}
+                              StartIcon={FiExternalLink}
                               className="w-full rounded-none">
                               {t("preview")}
                             </Button>
@@ -421,7 +430,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             color="minimal"
                             className="w-full rounded-none text-left"
                             data-testid={"event-type-duplicate-" + type.id}
-                            StartIcon={Icon.FiClipboard}
+                            StartIcon={FiClipboard}
                             onClick={() => {
                               navigator.clipboard.writeText(calLink);
                               showToast(t("link_copied"), "success");
@@ -436,7 +445,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               color="minimal"
                               className="w-full rounded-none"
                               data-testid={"event-type-duplicate-" + type.id}
-                              StartIcon={Icon.FiUpload}
+                              StartIcon={FiUpload}
                               onClick={() => {
                                 navigator
                                   .share({
@@ -457,7 +466,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             onClick={() => router.push("/event-types/" + type.id)}
                             color="minimal"
                             className="w-full rounded-none"
-                            StartIcon={Icon.FiEdit}>
+                            StartIcon={FiEdit}>
                             {t("edit")}
                           </Button>
                         </DropdownMenuItem>
@@ -467,7 +476,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             color="minimal"
                             className="w-full rounded-none"
                             data-testid={"event-type-duplicate-" + type.id}
-                            StartIcon={Icon.FiCopy}
+                            StartIcon={FiCopy}
                             onClick={() => openDuplicateModal(type)}>
                             {t("duplicate")}
                           </Button>
@@ -480,7 +489,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               setDeleteDialogTypeId(type.id);
                             }}
                             color="destructive"
-                            StartIcon={Icon.FiTrash}
+                            StartIcon={FiTrash}
                             className="w-full rounded-none">
                             {t("delete")}
                           </Button>
@@ -535,7 +544,7 @@ const EventTypeListHeading = ({
           <span className="relative -top-px text-xs text-gray-500 ltr:ml-2 ltr:mr-2 rtl:ml-2">
             <Link href={`/settings/teams/${teamId}/members`}>
               <Badge variant="gray">
-                <Icon.FiUsers className="mr-1 -mt-px inline h-3 w-3" />
+                <FiUsers className="mr-1 -mt-px inline h-3 w-3" />
                 {membershipCount}
               </Badge>
             </Link>
@@ -556,7 +565,7 @@ const CreateFirstEventTypeView = () => {
 
   return (
     <EmptyScreen
-      Icon={Icon.FiLink}
+      Icon={FiLink}
       headline={t("new_event_type_heading")}
       description={t("new_event_type_description")}
     />
diff --git a/apps/web/pages/settings/billing/index.tsx b/apps/web/pages/settings/billing/index.tsx
index ffca758c7c..cf5765438a 100644
--- a/apps/web/pages/settings/billing/index.tsx
+++ b/apps/web/pages/settings/billing/index.tsx
@@ -8,7 +8,8 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, Meta } from "@calcom/ui";
+import { Button, Meta } from "@calcom/ui";
+import { FiExternalLink } from "@calcom/ui/components/icon";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -55,7 +56,7 @@ const BillingView = () => {
         <CtaRow
           title={t("billing_manage_details_title")}
           description={t("billing_manage_details_description")}>
-          <Button color="primary" href={billingHref} target="_blank" EndIcon={Icon.FiExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
             {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 7576882151..9d890edca6 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -14,10 +14,10 @@ import {
   Dialog,
   DialogContent,
   EmptyScreen,
-  Icon,
   Meta,
   AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";
+import { FiLink, FiPlus } from "@calcom/ui/components/icon";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -35,7 +35,7 @@ const ApiKeysView = () => {
     return (
       <Button
         color="secondary"
-        StartIcon={Icon.FiPlus}
+        StartIcon={FiPlus}
         onClick={() => {
           setApiKeyToEdit(undefined);
           setApiKeyModal(true);
@@ -75,7 +75,7 @@ const ApiKeysView = () => {
               </>
             ) : (
               <EmptyScreen
-                Icon={Icon.FiLink}
+                Icon={FiLink}
                 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 7a535318b1..89c6e3d286 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -166,7 +166,7 @@ const AppearanceView = () => {
       {/* TODO future PR to preview brandColors */}
       {/* <Button
         color="secondary"
-        EndIcon={Icon.FiExternalLink}
+        EndIcon={FiExternalLink}
         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 56bfb74054..5479b7d604 100644
--- a/apps/web/pages/settings/my-account/calendars.tsx
+++ b/apps/web/pages/settings/my-account/calendars.tsx
@@ -14,7 +14,6 @@ import {
   Badge,
   Button,
   EmptyScreen,
-  Icon,
   List,
   ListItem,
   ListItemText,
@@ -25,6 +24,7 @@ import {
   SkeletonText,
   showToast,
 } from "@calcom/ui";
+import { FiPlus, FiCalendar } from "@calcom/ui/components/icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -52,7 +52,7 @@ const AddCalendarButton = () => {
 
   return (
     <>
-      <Button color="secondary" StartIcon={Icon.FiPlus} href="/apps/categories/calendar">
+      <Button color="secondary" StartIcon={FiPlus} href="/apps/categories/calendar">
         {t("add_calendar")}
       </Button>
     </>
@@ -89,7 +89,7 @@ const CalendarsView = () => {
             <div>
               <div className="mt-4 flex space-x-4 rounded-md border-gray-200 bg-gray-50 p-2 sm:mx-0 sm:p-10 md:border md:p-6 xl:mt-0">
                 <div className=" flex h-9 w-9 items-center justify-center rounded-md border-2 border-gray-200 bg-white p-[6px]">
-                  <Icon.FiCalendar className="h-6 w-6" />
+                  <FiCalendar className="h-6 w-6" />
                 </div>
 
                 <div className="flex w-full flex-col space-y-3">
@@ -197,7 +197,7 @@ const CalendarsView = () => {
             </div>
           ) : (
             <EmptyScreen
-              Icon={Icon.FiCalendar}
+              Icon={FiCalendar}
               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 386d2b579d..474a30cdba 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -15,13 +15,13 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
-  Icon,
   List,
   Meta,
   showToast,
   SkeletonContainer,
   SkeletonText,
 } from "@calcom/ui";
+import { FiAlertCircle, FiMoreHorizontal, FiTrash } from "@calcom/ui/components/icon";
 
 import AppListCard from "@components/AppListCard";
 
@@ -85,7 +85,7 @@ const ConferencingLayout = () => {
                   <div>
                     <Dropdown>
                       <DropdownMenuTrigger asChild>
-                        <Button StartIcon={Icon.FiMoreHorizontal} variant="icon" color="secondary" />
+                        <Button StartIcon={FiMoreHorizontal} variant="icon" color="secondary" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         <DropdownMenuItem>
@@ -93,7 +93,7 @@ const ConferencingLayout = () => {
                             type="button"
                             color="destructive"
                             disabled={app.isGlobal}
-                            StartIcon={Icon.FiTrash}
+                            StartIcon={FiTrash}
                             onClick={() => {
                               setDeleteCredentialId(app.credentialIds[0]);
                               setDeleteAppModal(true);
@@ -114,7 +114,7 @@ const ConferencingLayout = () => {
           title={t("Remove app")}
           description={t("are_you_sure_you_want_to_remove_this_app")}
           type="confirmation"
-          Icon={Icon.FiAlertCircle}>
+          Icon={FiAlertCircle}>
           <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 be1d515af5..92ca200ebc 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -22,7 +22,6 @@ import {
   DialogFooter,
   DialogTrigger,
   Form,
-  Icon,
   ImageUploader,
   Label,
   Meta,
@@ -34,6 +33,7 @@ import {
   SkeletonText,
   TextField,
 } from "@calcom/ui";
+import { FiAlertTriangle, FiTrash2 } from "@calcom/ui/components/icon";
 
 import TwoFactor from "@components/auth/TwoFactor";
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
@@ -229,7 +229,7 @@ const ProfileView = () => {
       {/* Delete account Dialog */}
       <Dialog open={deleteAccountOpen} onOpenChange={setDeleteAccountOpen}>
         <DialogTrigger asChild>
-          <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={Icon.FiTrash2}>
+          <Button data-testid="delete-account" color="destructive" className="mt-1" StartIcon={FiTrash2}>
             {t("delete_account")}
           </Button>
         </DialogTrigger>
@@ -237,7 +237,7 @@ const ProfileView = () => {
           title={t("delete_account_modal_title")}
           description={t("confirm_delete_account_modal", { appName: APP_NAME })}
           type="creation"
-          Icon={Icon.FiAlertTriangle}>
+          Icon={FiAlertTriangle}>
           <>
             <p className="mb-7">{t("delete_account_confirmation_message", { appName: APP_NAME })}</p>
             {isCALIdentityProviver && (
@@ -278,7 +278,7 @@ const ProfileView = () => {
           title={t("confirm_password")}
           description={t("confirm_password_change_email")}
           type="creation"
-          Icon={Icon.FiAlertTriangle}>
+          Icon={FiAlertTriangle}>
           <>
             <PasswordField
               data-testid="password"
diff --git a/apps/web/pages/team/[slug].tsx b/apps/web/pages/team/[slug].tsx
index 7ea6129fca..de7cee4c49 100644
--- a/apps/web/pages/team/[slug].tsx
+++ b/apps/web/pages/team/[slug].tsx
@@ -12,7 +12,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
-import { Avatar, Button, Icon, HeadSeo, AvatarGroup } from "@calcom/ui";
+import { Avatar, Button, HeadSeo, AvatarGroup } from "@calcom/ui";
+import { FiArrowRight } from "@calcom/ui/components/icon";
 
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -113,7 +114,7 @@ function TeamPage({ team }: TeamPageProps) {
                 <aside className="mt-8 flex justify-center text-center dark:text-white">
                   <Button
                     color="minimal"
-                    EndIcon={Icon.FiArrowRight}
+                    EndIcon={FiArrowRight}
                     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 3694a888a8..e5e651f29d 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -4,7 +4,8 @@ import { TeamsListing } from "@calcom/features/ee/teams/components";
 import Shell from "@calcom/features/shell/Shell";
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import { ssrInit } from "@server/lib/ssr";
 
@@ -17,7 +18,7 @@ function Teams() {
       CTA={
         <Button
           variant="fab"
-          StartIcon={Icon.FiPlus}
+          StartIcon={FiPlus}
           type="button"
           href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
           {t("new")}
diff --git a/apps/web/pages/video/meeting-ended/[uid].tsx b/apps/web/pages/video/meeting-ended/[uid].tsx
index b716d75f03..d3c709cd87 100644
--- a/apps/web/pages/video/meeting-ended/[uid].tsx
+++ b/apps/web/pages/video/meeting-ended/[uid].tsx
@@ -4,7 +4,8 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
-import { Button, Icon, HeadSeo } from "@calcom/ui";
+import { Button, HeadSeo } from "@calcom/ui";
+import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -28,7 +29,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                    <Icon.FiX className="h-6 w-6 text-red-600" />
+                    <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -40,14 +41,14 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                       {props.booking.title}
                     </h2>
                     <p className="text-center text-gray-500">
-                      <Icon.FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                      <FiCalendar 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={Icon.FiArrowRight}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
                       {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 927d8c4c44..11bda5d35a 100644
--- a/apps/web/pages/video/meeting-not-started/[uid].tsx
+++ b/apps/web/pages/video/meeting-not-started/[uid].tsx
@@ -5,7 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Button, Icon, HeadSeo } from "@calcom/ui";
+import { Button, HeadSeo } from "@calcom/ui";
+import { FiArrowRight, FiCalendar, FiX } from "@calcom/ui/components/icon";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
   const { t } = useLocale();
@@ -26,7 +27,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                    <Icon.FiX className="h-6 w-6 text-red-600" />
+                    <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -38,7 +39,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                       {props.booking.title}
                     </h2>
                     <p className="text-center text-gray-500">
-                      <Icon.FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
+                      <FiCalendar className="mr-1 -mt-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(detectBrowserTimeFormat + ", dddd DD MMMM YYYY")}
                     </p>
                   </div>
@@ -50,7 +51,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
                   <div className="mt-5">
-                    <Button data-testid="return-home" href="/event-types" EndIcon={Icon.FiArrowRight}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
                       {t("go_back")}
                     </Button>
                   </div>
diff --git a/apps/web/pages/video/no-meeting-found.tsx b/apps/web/pages/video/no-meeting-found.tsx
index 46d62605c7..a09d56100d 100644
--- a/apps/web/pages/video/no-meeting-found.tsx
+++ b/apps/web/pages/video/no-meeting-found.tsx
@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, HeadSeo } from "@calcom/ui";
+import { Button, HeadSeo } from "@calcom/ui";
+import { FiX, FiArrowRight } from "@calcom/ui/components/icon";
 
 export default function NoMeetingFound() {
   const { t } = useLocale();
@@ -21,7 +22,7 @@ export default function NoMeetingFound() {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                    <Icon.FiX className="h-6 w-6 text-red-600" />
+                    <FiX className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -34,7 +35,7 @@ export default function NoMeetingFound() {
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
                   <div className="mt-5">
-                    <Button data-testid="return-home" href="/event-types" EndIcon={Icon.FiArrowRight}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon={FiArrowRight}>
                       {t("go_back_home")}
                     </Button>
                   </div>
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
index b3645db335..6efa4e81b9 100644
--- a/packages/app-store/_components/OmniInstallAppButton.tsx
+++ b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -2,7 +2,8 @@ import { classNames } from "@calcom/lib";
 import useApp from "@calcom/lib/hooks/useApp";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, showToast } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import useAddAppMutation from "../_utils/useAddAppMutation";
 import { InstallAppButton } from "../components";
@@ -62,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={Icon.FiPlus}
+            StartIcon={FiPlus}
             {...props}>
             {t("install")}
           </Button>
diff --git a/packages/app-store/_utils/getAppCategories.ts b/packages/app-store/_utils/getAppCategories.ts
index 3d6cf8d45b..6264cf72f5 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 { Icon } from "@calcom/ui";
+import { FiCalendar, FiVideo, FiCreditCard, FiShare2, FiBarChart, FiGrid } 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: Icon.FiCalendar,
+      icon: FiCalendar,
     },
     {
       name: "conferencing",
       href: getHref(baseURL, "conferencing", useQueryParam),
-      icon: Icon.FiVideo,
+      icon: FiVideo,
     },
     {
       name: "payment",
       href: getHref(baseURL, "payment", useQueryParam),
-      icon: Icon.FiCreditCard,
+      icon: FiCreditCard,
     },
     {
       name: "automation",
       href: getHref(baseURL, "automation", useQueryParam),
-      icon: Icon.FiShare2,
+      icon: FiShare2,
     },
     {
       name: "analytics",
       href: getHref(baseURL, "analytics", useQueryParam),
-      icon: Icon.FiBarChart,
+      icon: FiBarChart,
     },
     {
       name: "web3",
       href: getHref(baseURL, "web3", useQueryParam),
-      icon: Icon.FiBarChart,
+      icon: FiBarChart,
     },
     {
       name: "other",
       href: getHref(baseURL, "other", useQueryParam),
-      icon: Icon.FiGrid,
+      icon: FiGrid,
     },
   ];
 };
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index 6bff0241df..b80a752c92 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -6,7 +6,8 @@ import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, showToast, TextField, Icon } from "@calcom/ui";
+import { Button, Form, showToast, TextField } from "@calcom/ui";
+import { FiCheck, FiX } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -106,7 +107,7 @@ export default function CloseComSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
+                    StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : undefined}
                     className={
                       testPassed !== undefined
                         ? testPassed
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index fa245ea4af..379e1f3157 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -22,13 +22,13 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   Form,
-  Icon,
   showToast,
   Switch,
   TextAreaField,
   TextField,
   SettingsToggle,
 } from "@calcom/ui";
+import { FiMoreHorizontal } 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={Icon.FiMoreHorizontal}
+            StartIcon={FiMoreHorizontal}
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent>{children}</DropdownMenuContent>
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index 19bc39cf98..d851403fc1 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -25,7 +25,6 @@ import {
   DialogHeader,
   DropdownMenuSeparator,
   Form,
-  Icon,
   Meta,
   SettingsToggle,
   showToast,
@@ -34,6 +33,7 @@ import {
   Tooltip,
   VerticalDivider,
 } from "@calcom/ui";
+import { FiExternalLink, FiLink, FiDownload, FiCode, FiTrash } from "@calcom/ui/components/icon";
 
 import { RoutingPages } from "../lib/RoutingPages";
 import { getSerializableForm } from "../lib/getSerializableForm";
@@ -77,7 +77,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={Icon.FiExternalLink}
+            StartIcon={FiExternalLink}
           />
         </Tooltip>
         <FormAction
@@ -86,7 +86,7 @@ const Actions = ({
           color="secondary"
           variant="icon"
           type="button"
-          StartIcon={Icon.FiLink}
+          StartIcon={FiLink}
           tooltip={t("copy_link_to_form")}
         />
 
@@ -98,7 +98,7 @@ const Actions = ({
             color="secondary"
             variant="icon"
             type="button"
-            StartIcon={Icon.FiDownload}
+            StartIcon={FiDownload}
           />
         </Tooltip>
         <FormAction
@@ -106,7 +106,7 @@ const Actions = ({
           action="embed"
           color="secondary"
           variant="icon"
-          StartIcon={Icon.FiCode}
+          StartIcon={FiCode}
           tooltip={t("embed")}
         />
         <DropdownMenuSeparator />
@@ -115,7 +115,7 @@ const Actions = ({
           action="_delete"
           // className="mr-3"
           variant="icon"
-          StartIcon={Icon.FiTrash}
+          StartIcon={FiTrash}
           color="secondary"
           type="button"
           tooltip={t("delete")}
@@ -128,7 +128,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={Icon.FiLink}>
+              StartIcon={FiLink}>
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           </FormActionsDropdown>
@@ -144,7 +144,7 @@ const Actions = ({
             type="button"
             rel="noreferrer"
             action="preview"
-            StartIcon={Icon.FiExternalLink}>
+            StartIcon={FiExternalLink}>
             {t("preview")}
           </FormAction>
           <FormAction
@@ -153,7 +153,7 @@ const Actions = ({
             routingForm={form}
             color="minimal"
             type="button"
-            StartIcon={Icon.FiLink}>
+            StartIcon={FiLink}>
             {t("copy_link_to_form")}
           </FormAction>
           <FormAction
@@ -162,7 +162,7 @@ const Actions = ({
             className="w-full"
             color="minimal"
             type="button"
-            StartIcon={Icon.FiDownload}>
+            StartIcon={FiDownload}>
             {t("download_responses")}
           </FormAction>
           <FormAction
@@ -171,7 +171,7 @@ const Actions = ({
             color="minimal"
             type="button"
             className="w-full"
-            StartIcon={Icon.FiCode}>
+            StartIcon={FiCode}>
             {t("embed")}
           </FormAction>
           {typeformApp ? (
@@ -181,7 +181,7 @@ const Actions = ({
               action="copyRedirectUrl"
               color="minimal"
               type="button"
-              StartIcon={Icon.FiLink}>
+              StartIcon={FiLink}>
               {t("Copy Typeform Redirect Url")}
             </FormAction>
           ) : null}
@@ -192,7 +192,7 @@ const Actions = ({
             className="w-full"
             type="button"
             color="destructive"
-            StartIcon={Icon.FiTrash}>
+            StartIcon={FiTrash}>
             {t("delete")}
           </FormAction>
         </FormActionsDropdown>
diff --git a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
index f120b9d505..a8fb9e3778 100644
--- a/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/ee/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -10,7 +10,8 @@ import {
   TextWidgetProps,
 } from "react-awesome-query-builder";
 
-import { Button as CalButton, Icon, SelectWithValidation as Select, TextArea, TextField } from "@calcom/ui";
+import { Button as CalButton, SelectWithValidation as Select, TextArea, TextField } from "@calcom/ui";
+import { FiTrash, FiPlus } from "@calcom/ui/components/icon";
 
 // import { mapListValues } from "../../../../utils/stuff";
 
@@ -152,7 +153,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   if (type === "delRule" || type == "delGroup") {
     return (
       <button className="ml-5">
-        <Icon.FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
+        <FiTrash className="m-0 h-4 w-4 text-gray-500" onClick={onClick} />
       </button>
     );
   }
@@ -166,7 +167,7 @@ function Button({ config, type, label, onClick, readonly }: ButtonProps) {
   }
   return (
     <CalButton
-      StartIcon={Icon.FiPlus}
+      StartIcon={FiPlus}
       data-testid={dataTestId}
       type="button"
       color="secondary"
diff --git a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
index 3511e3521a..5b5d2ec471 100644
--- a/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/form-edit/[...appPages].tsx
@@ -10,11 +10,11 @@ import {
   Button,
   EmptyScreen,
   FormCard,
-  Icon,
   SelectField,
   TextAreaField,
   TextField,
 } from "@calcom/ui";
+import { FiPlus, FiFileText } from "@calcom/ui/components/icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -286,7 +286,7 @@ const FormEdit = ({
             <Button
               data-testid="add-field"
               type="button"
-              StartIcon={Icon.FiPlus}
+              StartIcon={FiPlus}
               color="secondary"
               onClick={addField}>
               Add Field
@@ -298,7 +298,7 @@ const FormEdit = ({
   ) : (
     <div className="w-full">
       <EmptyScreen
-        Icon={Icon.FiFileText}
+        Icon={FiFileText}
         headline="Create your first field"
         description="Fields are the form fields that the booker would see."
         buttonRaw={
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index 198fddf8e8..3688698894 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -1,6 +1,5 @@
 // TODO: i18n
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import { useMemo } from "react";
 
 import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
 import Shell, { ShellMain } from "@calcom/features/shell/Shell";
@@ -16,12 +15,29 @@ import {
   ButtonGroup,
   DropdownMenuSeparator,
   EmptyScreen,
-  Icon,
   List,
   ListLinkItem,
   Tooltip,
   Button,
 } from "@calcom/ui";
+import {
+  FiPlus,
+  FiGitMerge,
+  FiExternalLink,
+  FiLink,
+  FiEdit,
+  FiDownload,
+  FiCode,
+  FiCopy,
+  FiTrash,
+  FiMenu,
+  FiMessageCircle,
+  FiFileText,
+  FiShuffle,
+  FiBarChart,
+  FiCheckCircle,
+  FiMail,
+} from "@calcom/ui/components/icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -43,32 +59,32 @@ export default function RoutingForms({
 
   const features = [
     {
-      icon: <Icon.FiFileText className="h-5 w-5 text-orange-500" />,
+      icon: <FiFileText className="h-5 w-5 text-orange-500" />,
       title: t("create_your_first_form"),
       description: t("create_your_first_form_description"),
     },
     {
-      icon: <Icon.FiShuffle className="h-5 w-5 text-lime-500" />,
+      icon: <FiShuffle className="h-5 w-5 text-lime-500" />,
       title: t("create_your_first_route"),
       description: t("route_to_the_right_person"),
     },
     {
-      icon: <Icon.FiBarChart className="h-5 w-5 text-blue-500" />,
+      icon: <FiBarChart className="h-5 w-5 text-blue-500" />,
       title: t("reporting"),
       description: t("reporting_feature"),
     },
     {
-      icon: <Icon.FiCheckCircle className="h-5 w-5 text-teal-500" />,
+      icon: <FiCheckCircle className="h-5 w-5 text-teal-500" />,
       title: t("test_routing_form"),
       description: t("test_preview_description"),
     },
     {
-      icon: <Icon.FiMail className="h-5 w-5 text-yellow-500" />,
+      icon: <FiMail className="h-5 w-5 text-yellow-500" />,
       title: t("routing_forms_send_email_owner"),
       description: t("routing_forms_send_email_owner_description"),
     },
     {
-      icon: <Icon.FiDownload className="h-5 w-5 text-violet-500" />,
+      icon: <FiDownload className="h-5 w-5 text-violet-500" />,
       title: t("download_responses"),
       description: t("download_responses_description"),
     },
@@ -80,7 +96,7 @@ export default function RoutingForms({
         variant="fab"
         routingForm={null}
         data-testid="new-routing-form"
-        StartIcon={Icon.FiPlus}
+        StartIcon={FiPlus}
         action="create">
         {t("new")}
       </FormAction>
@@ -119,7 +135,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={Icon.FiGitMerge}
+                  Icon={FiGitMerge}
                   headline={t("create_your_first_form")}
                   description={t("create_your_first_form_description")}
                   buttonRaw={<NewFormButton />}
@@ -153,7 +169,7 @@ export default function RoutingForms({
                                     action="preview"
                                     routingForm={form}
                                     target="_blank"
-                                    StartIcon={Icon.FiExternalLink}
+                                    StartIcon={FiExternalLink}
                                     color="secondary"
                                     variant="icon"
                                     disabled={disabled}
@@ -164,7 +180,7 @@ export default function RoutingForms({
                                   action="copyLink"
                                   color="secondary"
                                   variant="icon"
-                                  StartIcon={Icon.FiLink}
+                                  StartIcon={FiLink}
                                   disabled={disabled}
                                   tooltip={t("copy_link_to_form")}
                                 />
@@ -174,14 +190,14 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="minimal"
                                     className="!flex"
-                                    StartIcon={Icon.FiEdit}>
+                                    StartIcon={FiEdit}>
                                     {t("edit")}
                                   </FormAction>
                                   <FormAction
                                     action="download"
                                     routingForm={form}
                                     color="minimal"
-                                    StartIcon={Icon.FiDownload}>
+                                    StartIcon={FiDownload}>
                                     {t("download_responses")}
                                   </FormAction>
                                   <FormAction
@@ -189,7 +205,7 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="minimal"
                                     className="w-full"
-                                    StartIcon={Icon.FiCode}>
+                                    StartIcon={FiCode}>
                                     {t("embed")}
                                   </FormAction>
                                   <FormAction
@@ -197,7 +213,7 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="minimal"
                                     className="w-full"
-                                    StartIcon={Icon.FiCopy}>
+                                    StartIcon={FiCopy}>
                                     {t("duplicate")}
                                   </FormAction>
                                   {typeformApp?.isInstalled ? (
@@ -207,7 +223,7 @@ export default function RoutingForms({
                                       action="copyRedirectUrl"
                                       color="minimal"
                                       type="button"
-                                      StartIcon={Icon.FiLink}>
+                                      StartIcon={FiLink}>
                                       {t("Copy Typeform Redirect Url")}
                                     </FormAction>
                                   ) : null}
@@ -217,7 +233,7 @@ export default function RoutingForms({
                                     routingForm={form}
                                     color="destructive"
                                     className="w-full"
-                                    StartIcon={Icon.FiTrash}>
+                                    StartIcon={FiTrash}>
                                     {t("delete")}
                                   </FormAction>
                                 </FormActionsDropdown>
@@ -225,13 +241,13 @@ export default function RoutingForms({
                             </>
                           }>
                           <div className="flex flex-wrap gap-1">
-                            <Badge variant="gray" StartIcon={Icon.FiMenu}>
+                            <Badge variant="gray" StartIcon={FiMenu}>
                               {fields.length} {fields.length === 1 ? "field" : "fields"}
                             </Badge>
-                            <Badge variant="gray" StartIcon={Icon.FiGitMerge}>
+                            <Badge variant="gray" StartIcon={FiGitMerge}>
                               {form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
                             </Badge>
-                            <Badge variant="gray" StartIcon={Icon.FiMessageCircle}>
+                            <Badge variant="gray" StartIcon={FiMessageCircle}>
                               {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
                             </Badge>
                           </div>
diff --git a/packages/app-store/googlevideo/components/ExistingGoogleCal.tsx b/packages/app-store/googlevideo/components/ExistingGoogleCal.tsx
index b23f5c43c2..b85d973560 100644
--- a/packages/app-store/googlevideo/components/ExistingGoogleCal.tsx
+++ b/packages/app-store/googlevideo/components/ExistingGoogleCal.tsx
@@ -4,7 +4,8 @@ import Link from "next/link";
 import { CAL_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { Icon, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
+import { FiAlertCircle } from "@calcom/ui/components/icon";
 
 const ExistingGoogleCal = () => {
   const { t } = useLocale();
@@ -14,7 +15,7 @@ const ExistingGoogleCal = () => {
     <div className="rounded-md bg-blue-100 py-3 px-4 text-blue-900">
       <div className="flex items-start space-x-2.5">
         <div>
-          <Icon.FiAlertCircle className="font-semibold" />
+          <FiAlertCircle className="font-semibold" />
         </div>
         <div>
           <span className="font-semibold">{t("requires_google_calendar")}</span>
diff --git a/packages/app-store/rainbow/components/RainbowKit.tsx b/packages/app-store/rainbow/components/RainbowKit.tsx
index 1cc638c0e8..4ed15cfbfe 100644
--- a/packages/app-store/rainbow/components/RainbowKit.tsx
+++ b/packages/app-store/rainbow/components/RainbowKit.tsx
@@ -14,7 +14,8 @@ import { configureChains, createClient, useAccount, useSignMessage, WagmiConfig
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Icon, showToast, SkeletonText } from "@calcom/ui";
+import { showToast, SkeletonText } from "@calcom/ui";
+import { FiAlertTriangle, FiLoader } from "@calcom/ui/components/icon";
 
 import { ETH_MESSAGE, getProviders, SUPPORTED_CHAINS } from "../utils/ethereum";
 
@@ -131,7 +132,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
                   <>
                     {!balanceData.data.hasBalance && (
                       <div className="mt-2 flex flex-row items-center">
-                        <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
+                        <FiAlertTriangle 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}.
@@ -142,7 +143,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
 
                     {balanceData.data.hasBalance && isSignatureLoading && (
                       <div className="mt-2 flex flex-row items-center">
-                        <Icon.FiLoader className="h-5 w-5 text-green-600" />
+                        <FiLoader className="h-5 w-5 text-green-600" />
                         <p className="ml-2 text-green-600">{t("rainbow_sign_message_request")}</p>
                       </div>
                     )}
@@ -151,7 +152,7 @@ const BalanceCheck: React.FC<RainbowGateProps> = ({ chainId, setToken, tokenAddr
 
                 {isSignatureError && (
                   <div className="mt-2 flex flex-row items-center">
-                    <Icon.FiAlertTriangle className="h-5 w-5 text-red-600" />
+                    <FiAlertTriangle 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/sendgrid/pages/setup/index.tsx b/packages/app-store/sendgrid/pages/setup/index.tsx
index b613804176..bcf47c3ef5 100644
--- a/packages/app-store/sendgrid/pages/setup/index.tsx
+++ b/packages/app-store/sendgrid/pages/setup/index.tsx
@@ -6,7 +6,8 @@ import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, Icon, showToast, TextField } from "@calcom/ui";
+import { Button, Form, showToast, TextField } from "@calcom/ui";
+import { FiCheck, FiX } from "@calcom/ui/components/icon";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -101,7 +102,7 @@ export default function SendgridSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
+                    StartIcon={testPassed !== undefined ? (testPassed ? FiCheck : FiX) : 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 3eda0cc54d..8eaa31e84c 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 { Icon } from "@calcom/ui";
+import { FiSunrise, FiSunset } from "@calcom/ui/components/icon";
 
 import { 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 ? <Icon.FiSunrise /> : <Icon.FiSunset />}</span>I am
-          an AppCard for Event with Title: {eventType.title}
+          <span className="ltr:mr-2 rtl:ml-2">{isSunrise ? <FiSunrise /> : <FiSunset />}</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 2123907a7c..25a4f01e20 100644
--- a/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
+++ b/packages/app-store/typeform/pages/how-to-use/[...appPages].tsx
@@ -1,7 +1,8 @@
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiExternalLink } from "@calcom/ui/components/icon";
 
 export default function HowToUse() {
   const { t } = useLocale();
@@ -30,10 +31,7 @@ export default function HowToUse() {
                   href="/api/app-store/typeform/copy-typeform-redirect-url.png"
                   target="_blank"
                   className="inline-flex items-baseline text-base text-gray-500">
-                  <Icon.FiExternalLink
-                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
-                    aria-hidden="true"
-                  />
+                  <FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Click &quot;Copy Typeform Redirect URL&quot;
                 </Link>
               </li>
@@ -44,10 +42,7 @@ export default function HowToUse() {
                   href="https://www.typeform.com/help/a/end-screens-and-redirects-360051791392/#h_01G0CFXF21W2EQ8PXKSB4KSC8P"
                   target="_blank"
                   className="inline-flex items-baseline text-base text-gray-500">
-                  <Icon.FiExternalLink
-                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
-                    aria-hidden="true"
-                  />
+                  <FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" aria-hidden="true" />
                   Redirect to your typeform
                 </Link>
               </li>
@@ -57,10 +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="inline-flex items-baseline text-base text-gray-500">
-                  <Icon.FiExternalLink
-                    className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2"
-                    aria-hidden="true"
-                  />
+                  <FiExternalLink className="h-4 w-4 text-gray-500 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 5637836af7..9ec20b749e 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -5,7 +5,8 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, showToast, Tooltip } from "@calcom/ui";
+import { Button, showToast, Tooltip } from "@calcom/ui";
+import { ClipboardCopyIcon } from "@calcom/ui/components/icon";
 
 export interface IZapierSetupProps {
   inviteLink: string;
@@ -75,7 +76,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
                         }}
                         type="button"
                         className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-                        <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+                        <ClipboardCopyIcon 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 5c8e745cb7..38ad0cb3cd 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -17,7 +17,6 @@ import {
   Dialog,
   EmptyScreen,
   Form,
-  Icon,
   showToast,
   SkeletonButton,
   SkeletonContainer,
@@ -26,6 +25,7 @@ import {
   TextField,
   VerticalDivider,
 } from "@calcom/ui";
+import { FiAlertCircle, FiEdit } from "@calcom/ui/components/icon";
 
 const IntegrationContainer = ({
   app,
@@ -110,7 +110,7 @@ const IntegrationContainer = ({
                         variant="icon"
                         tooltip={t("edit_keys")}
                         onClick={() => setShowKeys(!showKeys)}>
-                        <Icon.FiEdit />
+                        <FiEdit />
                       </Button>
                     </CollapsibleTrigger>
                   </>
@@ -224,7 +224,7 @@ const AdminAppsListContainer = () => {
   if (!apps) {
     return (
       <EmptyScreen
-        Icon={Icon.FiAlertCircle}
+        Icon={FiAlertCircle}
         headline={t("no_available_apps")}
         description={t("no_available_apps_description")}
       />
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index 4bdcf75101..5e6682437c 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -8,11 +8,11 @@ import {
   Dialog,
   DialogContent,
   DialogTrigger,
-  Icon,
   showToast,
   DialogFooter,
   DialogClose,
 } from "@calcom/ui";
+import { FiTrash, FiAlertCircle } 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 ? Icon.FiTrash : undefined}
+            StartIcon={trashIcon ? FiTrash : 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={Icon.FiAlertCircle}>
+          Icon={FiAlertCircle}>
           <DialogFooter>
             <DialogClose onClick={() => setModalOpen(false)} />
             <DialogClose color="primary" onClick={() => mutation.mutate({ id: credentialId })}>
diff --git a/packages/features/auth/SAMLLogin.tsx b/packages/features/auth/SAMLLogin.tsx
index c68678ee46..28405d0786 100644
--- a/packages/features/auth/SAMLLogin.tsx
+++ b/packages/features/auth/SAMLLogin.tsx
@@ -7,7 +7,8 @@ import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiLock } from "@calcom/ui/components/icon";
 
 interface Props {
   samlTenantID: string;
@@ -35,7 +36,7 @@ export function SAMLLogin({ samlTenantID, samlProductID, setErrorMessage }: Prop
 
   return (
     <Button
-      StartIcon={Icon.FiLock}
+      StartIcon={FiLock}
       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 f0c24cc804..4e0073471c 100644
--- a/packages/features/bookings/components/PeopleFilter.tsx
+++ b/packages/features/bookings/components/PeopleFilter.tsx
@@ -1,6 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, Icon } from "@calcom/ui";
+import { AnimatedPopover, Avatar } from "@calcom/ui";
+import { FiUser } from "@calcom/ui/components/icon";
 
 import { useFilterQuery } from "../lib/useFilterQuery";
 
@@ -19,7 +20,7 @@ export const PeopleFilter = () => {
       text={userNames && userNames.length > 0 ? `${userNames.join(", ")}` : t("all_users_filter_label")}>
       <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <Icon.FiUser className="h-5 w-5" />
+          <FiUser className="h-5 w-5" />
         </div>
         <label htmlFor="allUsers" className="mr-auto self-center truncate text-sm font-medium text-gray-700">
           {t("all_users_filter_label")}
diff --git a/packages/features/bookings/components/TeamFilter.tsx b/packages/features/bookings/components/TeamFilter.tsx
index 232058b32a..bfc36f67e3 100644
--- a/packages/features/bookings/components/TeamFilter.tsx
+++ b/packages/features/bookings/components/TeamFilter.tsx
@@ -2,7 +2,8 @@ import { useSession } from "next-auth/react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { AnimatedPopover, Avatar, Icon } from "@calcom/ui";
+import { AnimatedPopover, Avatar } from "@calcom/ui";
+import { FiLayers, FiUser } from "@calcom/ui/components/icon";
 
 import { useFilterQuery } from "../lib/useFilterQuery";
 
@@ -22,7 +23,7 @@ export const TeamsMemberFilter = () => {
       text={teamNames && teamNames.length > 0 ? `${teamNames.join(", ")}` : t("all_bookings_filter_label")}>
       <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <Icon.FiLayers className="h-5 w-5" />
+          <FiLayers className="h-5 w-5" />
         </div>
         <label
           htmlFor="allBookings"
@@ -42,7 +43,7 @@ export const TeamsMemberFilter = () => {
       </div>
       <div className="item-center flex px-4 py-[6px] focus-within:bg-gray-100 hover:cursor-pointer hover:bg-gray-50">
         <div className="flex h-6 w-6 items-center justify-center ltr:mr-2 rtl:ml-2">
-          <Icon.FiUser className="h-5 w-5" />
+          <FiUser className="h-5 w-5" />
         </div>
         <label
           htmlFor="yourBookings"
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 58be50d715..7749637279 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -7,7 +7,8 @@ import { daysInMonth, yyyymmdd } from "@calcom/lib/date-fns";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { weekdayNames } from "@calcom/lib/weekday";
-import { Button, Icon, SkeletonText } from "@calcom/ui";
+import { Button, SkeletonText } from "@calcom/ui";
+import { FiArrowRight } 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 */
@@ -83,7 +84,7 @@ const NoAvailabilityOverlay = ({
       <h4 className="mb-4 font-medium text-gray-900 dark:text-white">
         {t("no_availability_in_month", { month: month })}
       </h4>
-      <Button onClick={nextMonthButton} color="primary" EndIcon={Icon.FiArrowRight}>
+      <Button onClick={nextMonthButton} color="primary" EndIcon={FiArrowRight}>
         {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 3e7a82d761..e712c22fad 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -1,5 +1,6 @@
 import dayjs from "@calcom/dayjs";
-import { Icon, Button, ButtonGroup } from "@calcom/ui";
+import { Button, ButtonGroup } from "@calcom/ui";
+import { FiChevronLeft, FiChevronRight } from "@calcom/ui/components/icon";
 
 import { useCalendarStore } from "../../state/store";
 
@@ -29,7 +30,7 @@ export function SchedulerHeading() {
         <ButtonGroup combined>
           {/* TODO: i18n label with correct view */}
           <Button
-            StartIcon={Icon.FiChevronLeft}
+            StartIcon={FiChevronLeft}
             variant="icon"
             color="secondary"
             aria-label="Previous Week"
@@ -38,7 +39,7 @@ export function SchedulerHeading() {
             }}
           />
           <Button
-            StartIcon={Icon.FiChevronRight}
+            StartIcon={FiChevronRight}
             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 f257ef3745..3e405d1a2d 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -6,17 +6,8 @@ import { TApiKeys } from "@calcom/ee/api-keys/components/ApiKeyListItem";
 import LicenseRequired from "@calcom/ee/common/components/v2/LicenseRequired";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import {
-  Button,
-  Icon,
-  DatePicker,
-  DialogFooter,
-  Form,
-  showToast,
-  Switch,
-  TextField,
-  Tooltip,
-} from "@calcom/ui";
+import { Button, DatePicker, DialogFooter, Form, showToast, Switch, TextField, Tooltip } from "@calcom/ui";
+import { ClipboardCopyIcon } from "@calcom/ui/components/icon";
 
 export default function ApiKeyDialogForm({
   defaultValues,
@@ -83,7 +74,7 @@ export default function ApiKeyDialogForm({
                   }}
                   type="button"
                   className="rounded-l-none py-[19px] text-base ">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100 ltr:mr-2 rtl:ml-2" />
+                  <ClipboardCopyIcon 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 1b19f5e4d7..5670ade914 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -10,8 +10,8 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-  Icon,
 } from "@calcom/ui";
+import { FiMoreHorizontal, FiEdit2, FiTrash } from "@calcom/ui/components/icon";
 
 export type TApiKeys = RouterOutputs["viewer"]["apiKeys"]["list"][number];
 
@@ -66,12 +66,12 @@ const ApiKeyListItem = ({
       <div>
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+            <Button type="button" variant="icon" color="secondary" StartIcon={FiMoreHorizontal} />
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
             <DropdownMenuItem>
-              <DropdownItem type="button" onClick={onEditClick} StartIcon={Icon.FiEdit2}>
+              <DropdownItem type="button" onClick={onEditClick} StartIcon={FiEdit2}>
                 {t("edit") as string}
               </DropdownItem>
             </DropdownMenuItem>
@@ -83,7 +83,7 @@ const ApiKeyListItem = ({
                     id: apiKey.id,
                   })
                 }
-                StartIcon={Icon.FiTrash}>
+                StartIcon={FiTrash}>
                 {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 c88d9f4db5..6c60bc239e 100644
--- a/packages/features/ee/common/components/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/LicenseRequired.tsx
@@ -9,7 +9,8 @@ import React, { AriaRole, ComponentType, Fragment } from "react";
 
 import { APP_NAME, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui";
+import { FiAlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -35,7 +36,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
         children
       ) : (
         <EmptyScreen
-          Icon={Icon.FiAlertTriangle}
+          Icon={FiAlertTriangle}
           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 2b246003bb..6ae329ce5f 100644
--- a/packages/features/ee/common/components/v2/LicenseRequired.tsx
+++ b/packages/features/ee/common/components/v2/LicenseRequired.tsx
@@ -4,7 +4,8 @@ import React, { AriaRole, ComponentType, Fragment } from "react";
 
 import { APP_NAME, CONSOLE_URL, SUPPORT_MAIL_ADDRESS } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { EmptyScreen, Icon } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui";
+import { FiAlertTriangle } from "@calcom/ui/components/icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -25,7 +26,7 @@ const LicenseRequired = ({ children, as = "", ...rest }: LicenseRequiredProps) =
         children
       ) : (
         <EmptyScreen
-          Icon={Icon.FiAlertTriangle}
+          Icon={FiAlertTriangle}
           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 fd4988693d..046699a129 100644
--- a/packages/features/ee/payments/components/PaymentPage.tsx
+++ b/packages/features/ee/payments/components/PaymentPage.tsx
@@ -14,7 +14,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 { Icon } from "@calcom/ui";
+import { FiCreditCard } from "@calcom/ui/components/icon";
 
 import type { PaymentPageProps } from "../pages/payment";
 import PaymentComponent from "./Payment";
@@ -79,7 +79,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                    <Icon.FiCreditCard className="h-8 w-8 text-green-600" />
+                    <FiCreditCard 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/SAMLConfiguration.tsx b/packages/features/ee/sso/components/SAMLConfiguration.tsx
index a7e9928b3a..5c268d612a 100644
--- a/packages/features/ee/sso/components/SAMLConfiguration.tsx
+++ b/packages/features/ee/sso/components/SAMLConfiguration.tsx
@@ -13,12 +13,12 @@ import {
   Dialog,
   DialogContent,
   DialogTrigger,
-  Icon,
   Label,
   Meta,
   showToast,
   AppSkeletonLoader as SkeletonLoader,
 } from "@calcom/ui";
+import { ClipboardCopyIcon, FiDatabase, FiTrash2 } from "@calcom/ui/components/icon";
 
 export default function SAMLConfiguration({ teamId }: { teamId: number | null }) {
   const { t } = useLocale();
@@ -90,7 +90,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
           <div>
             <Button
               color="secondary"
-              StartIcon={Icon.FiDatabase}
+              StartIcon={FiDatabase}
               onClick={() => {
                 setConfigModal(true);
               }}>
@@ -122,7 +122,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
+                  <ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
                   {t("copy")}
                 </Button>
               </div>
@@ -142,7 +142,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
                   }}
                   type="button"
                   className="px-4 text-base">
-                  <Icon.ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
+                  <ClipboardCopyIcon className="h-5 w-5 text-gray-100" />
                   {t("copy")}
                 </Button>
               </div>
@@ -157,7 +157,7 @@ export default function SAMLConfiguration({ teamId }: { teamId: number | null })
             <div className="mb-3 text-base font-semibold">{t("danger_zone")}</div>
             <Dialog>
               <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={Icon.FiTrash2}>
+                <Button color="destructive" className="border" StartIcon={FiTrash2}>
                   {t("delete_saml_configuration")}
                 </Button>
               </DialogTrigger>
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index f33550a141..06ee567533 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -4,7 +4,8 @@ import { useChat } from "react-live-chat-loader";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, showToast } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+import { FiExternalLink, FiAlertTriangle } from "@calcom/ui/components/icon";
 
 import ContactMenuItem from "./ContactMenuItem";
 
@@ -48,7 +49,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
           rel="noreferrer">
           {t("support_documentation")}
-          <Icon.FiExternalLink
+          <FiExternalLink
             className={classNames(
               "text-gray-400 group-hover:text-gray-500",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -62,7 +63,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
           rel="noreferrer">
           {t("developer_documentation")}
-          <Icon.FiExternalLink
+          <FiExternalLink
             className={classNames(
               "text-gray-400 group-hover:text-gray-500",
               "ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
@@ -186,7 +187,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         {mutation.isError && (
           <div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
             <div className="flex-shrink-0">
-              <Icon.FiAlertTriangle className="h-5 w-5" />
+              <FiAlertTriangle 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 0733a5b6cd..b09e32148b 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -8,7 +8,8 @@ import { classNames } from "@calcom/lib";
 import { WEBAPP_URL, APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Avatar, Badge, Button, Icon, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { Avatar, Badge, Button, showToast, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { FiPlus, FiArrowRight, FiTrash2 } from "@calcom/ui/components/icon";
 
 const querySchema = z.object({
   id: z.string().transform((val) => parseInt(val)),
@@ -70,7 +71,7 @@ export const AddNewTeamMembersForm = ({
         <Button
           color="secondary"
           data-testid="new-member-button"
-          StartIcon={Icon.FiPlus}
+          StartIcon={FiPlus}
           onClick={() => setMemberInviteModal(true)}
           className="mt-6 w-full justify-center">
           {t("add_team_member")}
@@ -92,7 +93,7 @@ export const AddNewTeamMembersForm = ({
       />
       <hr className="my-6 border-neutral-200" />
       <Button
-        EndIcon={Icon.FiArrowRight}
+        EndIcon={FiArrowRight}
         className="mt-6 w-full justify-center"
         disabled={publishTeamMutation.isLoading}
         onClick={() => {
@@ -169,7 +170,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
       {member.role !== "OWNER" && (
         <Button
           data-testid="remove-member-button"
-          StartIcon={Icon.FiTrash2}
+          StartIcon={FiTrash2}
           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 8ddbb26fbd..f2e2327cf6 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -6,7 +6,8 @@ import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { trpc } from "@calcom/trpc/react";
-import { Avatar, Button, Form, Icon, ImageUploader, TextField } from "@calcom/ui";
+import { Avatar, Button, Form, ImageUploader, TextField } from "@calcom/ui";
+import { FiArrowRight } from "@calcom/ui/components/icon";
 
 import { NewTeamFormValues } from "../lib/types";
 
@@ -140,7 +141,7 @@ export const CreateANewTeamForm = () => {
             disabled={createTeamMutation.isLoading}
             color="primary"
             type="submit"
-            EndIcon={Icon.FiArrowRight}
+            EndIcon={FiArrowRight}
             className="w-full justify-center">
             {t("continue")}
           </Button>
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index dc4e5edc3e..8b1448e250 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -22,10 +22,17 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Icon,
   showToast,
   Tooltip,
 } from "@calcom/ui";
+import {
+  FiClock,
+  FiExternalLink,
+  FiMoreHorizontal,
+  FiEdit2,
+  FiLock,
+  FiTrash,
+} from "@calcom/ui/components/icon";
 
 import MemberChangeRoleModal from "./MemberChangeRoleModal";
 import TeamPill, { TeamRole } from "./TeamPill";
@@ -134,7 +141,7 @@ export default function MemberListItem(props: Props) {
                   onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
                   color="secondary"
                   variant="icon"
-                  StartIcon={Icon.FiClock}
+                  StartIcon={FiClock}
                 />
               </Tooltip>
               <Tooltip content={t("view_public_page")}>
@@ -144,7 +151,7 @@ export default function MemberListItem(props: Props) {
                   color="secondary"
                   className={classNames(!editMode ? "rounded-r-md" : "")}
                   variant="icon"
-                  StartIcon={Icon.FiExternalLink}
+                  StartIcon={FiExternalLink}
                 />
               </Tooltip>
               {editMode && (
@@ -154,7 +161,7 @@ export default function MemberListItem(props: Props) {
                       className="radix-state-open:rounded-r-md"
                       color="secondary"
                       variant="icon"
-                      StartIcon={Icon.FiMoreHorizontal}
+                      StartIcon={FiMoreHorizontal}
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
@@ -162,7 +169,7 @@ export default function MemberListItem(props: Props) {
                       <DropdownItem
                         type="button"
                         onClick={() => setShowChangeMemberRoleModal(true)}
-                        StartIcon={Icon.FiEdit2}>
+                        StartIcon={FiEdit2}>
                         {t("edit")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -172,7 +179,7 @@ export default function MemberListItem(props: Props) {
                           <DropdownItem
                             type="button"
                             onClick={() => setShowImpersonateModal(true)}
-                            StartIcon={Icon.FiLock}>
+                            StartIcon={FiLock}>
                             {t("impersonate")}
                           </DropdownItem>
                         </DropdownMenuItem>
@@ -184,7 +191,7 @@ export default function MemberListItem(props: Props) {
                         type="button"
                         onClick={() => setShowDeleteModal(true)}
                         color="destructive"
-                        StartIcon={Icon.FiTrash}>
+                        StartIcon={FiTrash}>
                         {t("delete")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -195,18 +202,18 @@ export default function MemberListItem(props: Props) {
             <div className="flex md:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" variant="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
+                  <Button type="button" variant="icon" color="minimal" StartIcon={FiMoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {props.member.accepted && (
                     <DropdownMenuItem className="outline-none">
-                      <DropdownItem type="button" StartIcon={Icon.FiClock}>
+                      <DropdownItem type="button" StartIcon={FiClock}>
                         {t("team_view_user_availability")}
                       </DropdownItem>
                     </DropdownMenuItem>
                   )}
                   <DropdownMenuItem className="outline-none">
-                    <DropdownItem type="button" StartIcon={Icon.FiExternalLink}>
+                    <DropdownItem type="button" StartIcon={FiExternalLink}>
                       {t("view_public_page")}
                     </DropdownItem>
                   </DropdownMenuItem>
@@ -216,7 +223,7 @@ export default function MemberListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           onClick={() => setShowChangeMemberRoleModal(true)}
-                          StartIcon={Icon.FiEdit2}>
+                          StartIcon={FiEdit2}>
                           {t("edit")}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -225,7 +232,7 @@ export default function MemberListItem(props: Props) {
                           type="button"
                           color="destructive"
                           onClick={() => setShowDeleteModal(true)}
-                          StartIcon={Icon.FiTrash}>
+                          StartIcon={FiTrash}>
                           {t("delete")}
                         </DropdownItem>
                       </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 1c23baf6eb..96c4e79671 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -12,8 +12,8 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
-  Icon,
 } from "@calcom/ui";
+import { FiSlash, FiCheck, FiMoreHorizontal, FiX } 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={Icon.FiSlash}
+                StartIcon={FiSlash}
               />
               <Button
                 type="button"
@@ -101,26 +101,22 @@ export default function TeamInviteListItem(props: Props) {
                 variant="icon"
                 color="secondary"
                 onClick={acceptInvite}
-                StartIcon={Icon.FiCheck}
+                StartIcon={FiCheck}
               />
             </div>
             <div className="block sm:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
+                  <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
-                    <DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
+                    <DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
                       {t("accept")}
                     </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
-                    <DropdownItem
-                      color="destructive"
-                      type="button"
-                      StartIcon={Icon.FiX}
-                      onClick={declineInvite}>
+                    <DropdownItem color="destructive" type="button" StartIcon={FiX} onClick={declineInvite}>
                       {t("reject")}
                     </DropdownItem>
                   </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 5845dd52f4..44c3f5fdc4 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -21,10 +21,21 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Icon,
   showToast,
   Tooltip,
 } from "@calcom/ui";
+import {
+  FiMoreHorizontal,
+  FiCheck,
+  FiX,
+  FiLink,
+  FiEdit2,
+  FiExternalLink,
+  FiTrash,
+  FiLogOut,
+  FiGlobe,
+  FiSend,
+} from "@calcom/ui/components/icon";
 
 import { TeamRole } from "./TeamPill";
 
@@ -144,20 +155,16 @@ export default function TeamListItem(props: Props) {
               <div className="block sm:hidden">
                 <Dropdown>
                   <DropdownMenuTrigger asChild>
-                    <Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
+                    <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
-                      <DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
+                      <DropdownItem type="button" StartIcon={FiCheck} onClick={acceptInvite}>
                         {t("accept")}
                       </DropdownItem>
                     </DropdownMenuItem>
                     <DropdownMenuItem>
-                      <DropdownItem
-                        color="destructive"
-                        type="button"
-                        StartIcon={Icon.FiX}
-                        onClick={declineInvite}>
+                      <DropdownItem color="destructive" type="button" StartIcon={FiX} onClick={declineInvite}>
                         {t("reject")}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -180,7 +187,7 @@ export default function TeamListItem(props: Props) {
                         showToast(t("link_copied"), "success");
                       }}
                       variant="icon"
-                      StartIcon={Icon.FiLink}
+                      StartIcon={FiLink}
                     />
                   </Tooltip>
                 )}
@@ -191,7 +198,7 @@ export default function TeamListItem(props: Props) {
                       type="button"
                       color="secondary"
                       variant="icon"
-                      StartIcon={Icon.FiMoreHorizontal}
+                      StartIcon={FiMoreHorizontal}
                     />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent hidden={hideDropdown}>
@@ -200,7 +207,7 @@ export default function TeamListItem(props: Props) {
                         <DropdownItem
                           type="button"
                           href={"/settings/teams/" + team.id + "/profile"}
-                          StartIcon={Icon.FiEdit2}>
+                          StartIcon={FiEdit2}>
                           {t("edit_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -212,7 +219,7 @@ export default function TeamListItem(props: Props) {
                           type="button"
                           target="_blank"
                           href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/team/${team.slug}`}
-                          StartIcon={Icon.FiExternalLink}>
+                          StartIcon={FiExternalLink}>
                           {t("preview_team") as string}
                         </DropdownItem>
                       </DropdownMenuItem>
@@ -223,7 +230,7 @@ export default function TeamListItem(props: Props) {
                         onClick={() => {
                           setOpenMemberInvitationModal(true);
                         }}
-                        StartIcon={Icon.FiSend}>
+                        StartIcon={FiSend}>
                         {t("invite_team_member") as string}
                       </DropdownItem>
                     </DropdownMenuItem>
@@ -235,7 +242,7 @@ export default function TeamListItem(props: Props) {
                             <DropdownItem
                               color="destructive"
                               type="button"
-                              StartIcon={Icon.FiTrash}
+                              StartIcon={FiTrash}
                               onClick={(e) => {
                                 e.stopPropagation();
                               }}>
@@ -264,7 +271,7 @@ export default function TeamListItem(props: Props) {
                               type="button"
                               color="destructive"
                               size="lg"
-                              StartIcon={Icon.FiLogOut}
+                              StartIcon={FiLogOut}
                               className="w-full rounded-none"
                               onClick={(e) => {
                                 e.stopPropagation();
@@ -312,7 +319,7 @@ const TeamPublishButton = ({ teamId }: { teamId: number }) => {
         onClick={() => {
           publishTeamMutation.mutate({ teamId });
         }}
-        StartIcon={Icon.FiGlobe}>
+        StartIcon={FiGlobe}>
         {t("team_publish")}
       </DropdownItem>
     </DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index 43fa44cadc..cef6c78434 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -4,7 +4,8 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Alert, Button, ButtonGroup, Icon } from "@calcom/ui";
+import { Alert, Button, ButtonGroup } from "@calcom/ui";
+import { FiUsers, FiRefreshCcw, FiUserPlus, FiMail, FiVideo, FiEyeOff } from "@calcom/ui/components/icon";
 
 import { UpgradeTip } from "../../../tips";
 import SkeletonLoaderTeamList from "./SkeletonloaderTeamList";
@@ -24,32 +25,32 @@ export function TeamsListing() {
 
   const features = [
     {
-      icon: <Icon.FiUsers className="h-5 w-5 text-red-500" />,
+      icon: <FiUsers className="h-5 w-5 text-red-500" />,
       title: t("collective_scheduling"),
       description: t("make_it_easy_to_book"),
     },
     {
-      icon: <Icon.FiRefreshCcw className="h-5 w-5 text-blue-500" />,
+      icon: <FiRefreshCcw className="h-5 w-5 text-blue-500" />,
       title: t("round_robin"),
       description: t("find_the_best_person"),
     },
     {
-      icon: <Icon.FiUserPlus className="h-5 w-5 text-green-500" />,
+      icon: <FiUserPlus className="h-5 w-5 text-green-500" />,
       title: t("fixed_round_robin"),
       description: t("add_one_fixed_attendee"),
     },
     {
-      icon: <Icon.FiMail className="h-5 w-5 text-orange-500" />,
+      icon: <FiMail className="h-5 w-5 text-orange-500" />,
       title: t("sms_attendee_action"),
       description: t("make_it_easy_to_book"),
     },
     {
-      icon: <Icon.FiVideo className="h-5 w-5 text-purple-500" />,
+      icon: <FiVideo className="h-5 w-5 text-purple-500" />,
       title: "Cal Video" + " " + t("recordings_title"),
       description: t("upgrade_to_access_recordings_description"),
     },
     {
-      icon: <Icon.FiEyeOff className="h-5 w-5 text-indigo-500" />,
+      icon: <FiEyeOff 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 31f31c29cc..3ca809a716 100644
--- a/packages/features/ee/teams/pages/team-billing-view.tsx
+++ b/packages/features/ee/teams/pages/team-billing-view.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Icon, Meta } from "@calcom/ui";
+import { Button, Meta } from "@calcom/ui";
+import { FiExternalLink } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -20,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={Icon.FiExternalLink}>
+          <Button color="primary" href={billingHref} target="_blank" EndIcon={FiExternalLink}>
             {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 b3f305f139..05c16c9ce6 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -5,7 +5,8 @@ import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, Meta, showToast } from "@calcom/ui";
+import { Button, Meta, showToast } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 import DisableTeamImpersonation from "../components/DisableTeamImpersonation";
@@ -55,7 +56,7 @@ const MembersView = () => {
             <Button
               type="button"
               color="primary"
-              StartIcon={Icon.FiPlus}
+              StartIcon={FiPlus}
               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 8b354bd103..4ca7d7a6ec 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -19,7 +19,6 @@ import {
   Dialog,
   DialogTrigger,
   Form,
-  Icon,
   ImageUploader,
   Label,
   LinkIconButton,
@@ -28,6 +27,7 @@ import {
   TextArea,
   TextField,
 } from "@calcom/ui";
+import { FiExternalLink, FiLink, FiTrash2, FiLogOut } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../../settings/layouts/SettingsLayout";
 
@@ -264,10 +264,10 @@ const ProfileView = () => {
               </div>
               <div className="">
                 <Link href={permalink} passHref={true} target="_blank">
-                  <LinkIconButton Icon={Icon.FiExternalLink}>{t("preview")}</LinkIconButton>
+                  <LinkIconButton Icon={FiExternalLink}>{t("preview")}</LinkIconButton>
                 </Link>
                 <LinkIconButton
-                  Icon={Icon.FiLink}
+                  Icon={FiLink}
                   onClick={() => {
                     navigator.clipboard.writeText(permalink);
                     showToast("Copied to clipboard", "success");
@@ -283,7 +283,7 @@ const ProfileView = () => {
           {team?.membership.role === "OWNER" ? (
             <Dialog>
               <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={Icon.FiTrash2}>
+                <Button color="destructive" className="border" StartIcon={FiTrash2}>
                   {t("disband_team")}
                 </Button>
               </DialogTrigger>
@@ -298,7 +298,7 @@ const ProfileView = () => {
           ) : (
             <Dialog>
               <DialogTrigger asChild>
-                <Button color="destructive" className="border" StartIcon={Icon.FiLogOut}>
+                <Button color="destructive" className="border" StartIcon={FiLogOut}>
                   {t("leave_team")}
                 </Button>
               </DialogTrigger>
diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index 96343263af..65d64446ac 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -15,7 +15,8 @@ import {
   DialogHeader,
   UpgradeTeamsBadge,
 } from "@calcom/ui";
-import { Button, showToast, Icon } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+import { FiDownload } from "@calcom/ui/components/icon";
 
 import RecordingListSkeleton from "./components/RecordingListSkeleton";
 
@@ -128,7 +129,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => {
                       </div>
                       {hasTeamPlan ? (
                         <Button
-                          StartIcon={Icon.FiDownload}
+                          StartIcon={FiDownload}
                           className="ml-4 lg:ml-0"
                           loading={downloadingRecordingId === 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 802a112d6e..d9639ef96a 100644
--- a/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
+++ b/packages/features/ee/video/components/UpgradeRecordingBanner.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, Button } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiUsers } from "@calcom/ui/components/icon";
 
 export default function UpgradeRecordingBanner() {
   const { t } = useLocale();
@@ -10,7 +11,7 @@ export default function UpgradeRecordingBanner() {
 
   return (
     <div className="flex items-start gap-2 rounded-md bg-gray-100 p-4">
-      <Icon.FiUsers className="dark:bg-gray-90 inline-block h-5 w-5" />
+      <FiUsers 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 adcf486a50..edcdc95caa 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -2,7 +2,8 @@ import React from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
+import { FiSmartphone, FiMail, FiPlus } from "@calcom/ui/components/icon";
 
 type WorkflowExampleType = {
   Icon: SVGComponent;
@@ -50,12 +51,12 @@ export default function EmptyScreen({
   const { t } = useLocale();
 
   const workflowsExamples = [
-    { icon: Icon.FiSmartphone, text: t("workflow_example_1") },
-    { icon: Icon.FiSmartphone, text: t("workflow_example_2") },
-    { icon: Icon.FiMail, text: t("workflow_example_3") },
-    { icon: Icon.FiMail, text: t("workflow_example_4") },
-    { icon: Icon.FiMail, text: t("workflow_example_5") },
-    { icon: Icon.FiSmartphone, text: t("workflow_example_6") },
+    { 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") },
   ];
   // new workflow example when 'after meetings ends' trigger is implemented: Send custom thank you email to attendee after event (FiSmile icon),
 
@@ -73,7 +74,7 @@ export default function EmptyScreen({
           {buttonOnClick && buttonText && (
             <Button
               type="button"
-              StartIcon={Icon.FiPlus}
+              StartIcon={FiPlus}
               onClick={(e) => buttonOnClick(e)}
               loading={isLoading}
               className="mx-auto mt-8">
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index 1c2e1c300a..21a3ef58f7 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -7,7 +7,8 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button, EmptyScreen, Icon, showToast, Switch, Tooltip } from "@calcom/ui";
+import { Button, EmptyScreen, showToast, Switch, Tooltip } from "@calcom/ui";
+import { FiExternalLink, FiZap } from "@calcom/ui/components/icon";
 
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import { getActionIcon } from "../lib/getActionIcon";
@@ -125,7 +126,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>
-            <Icon.FiExternalLink className="-mt-[2px] h-4 w-4 stroke-2 text-gray-600" />
+            <FiExternalLink className="-mt-[2px] h-4 w-4 stroke-2 text-gray-600" />
           </Button>
         </Link>
       </div>
@@ -204,7 +205,7 @@ function EventWorkflowsTab(props: Props) {
         ) : (
           <div className="pt-4 before:border-0">
             <EmptyScreen
-              Icon={Icon.FiZap}
+              Icon={FiZap}
               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 c84f6bfc09..4cba08fe1e 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -1,4 +1,5 @@
-import { Icon, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
+import { FiBell, FiLink } from "@calcom/ui/components/icon";
 
 function SkeletonLoader() {
   return (
@@ -20,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">
-              <Icon.FiBell className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiBell 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" />
-              <Icon.FiLink className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <FiLink 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 bf989f401b..3f518ec89c 100644
--- a/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -8,9 +8,9 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
-  Icon,
   TextField,
 } from "@calcom/ui";
+import { FiChevronDown } 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">
-                    <Icon.FiChevronDown />
+                    <FiChevronDown />
                   </div>
                 </button>
               </DropdownMenuTrigger>
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index aa8c93b658..f9d2978ac9 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -7,7 +7,8 @@ import { SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui";
-import { Button, Icon, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui";
+import { Button, Label, MultiSelectCheckboxes, TextField } from "@calcom/ui";
+import { FiArrowDown, FiTrash2 } from "@calcom/ui/components/icon";
 
 import { isSMSAction } from "../lib/isSMSAction";
 import type { FormValues } from "../pages/workflow";
@@ -115,7 +116,7 @@ export default function WorkflowDetailsPage(props: Props) {
           <div className="my-7 border-transparent md:border-t md:border-gray-200" />
           <Button
             type="button"
-            StartIcon={Icon.FiTrash2}
+            StartIcon={FiTrash2}
             color="destructive"
             className="border"
             onClick={() => setDeleteDialogOpen(true)}>
@@ -147,7 +148,7 @@ export default function WorkflowDetailsPage(props: Props) {
             </>
           )}
           <div className="my-3 flex justify-center">
-            <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
+            <FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
           </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 0476febf91..cb848c3b07 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -15,10 +15,10 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
-  Icon,
   showToast,
   Tooltip,
 } from "@calcom/ui";
+import { FiEdit2, FiLink, FiMoreHorizontal, FiTrash2, FiZap } from "@calcom/ui/components/icon";
 
 import { getActionIcon } from "../lib/getActionIcon";
 import { DeleteDialog } from "./DeleteDialog";
@@ -49,7 +49,7 @@ const CreateEmptyWorkflowView = () => {
     <EmptyScreen
       buttonText={t("create_workflow")}
       buttonOnClick={() => createMutation.mutate()}
-      IconHeading={Icon.FiZap}
+      IconHeading={FiZap}
       headline={t("workflows")}
       description={t("no_workflows_description")}
       isLoading={createMutation.isLoading}
@@ -122,13 +122,13 @@ export default function WorkflowListPage({ workflows }: Props) {
                                 <p key={key}>{activeOn.eventType.title}</p>
                               ))}>
                               <div>
-                                <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                <FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                                 {t("active_on_event_types", { count: workflow.activeOn.length })}
                               </div>
                             </Tooltip>
                           ) : (
                             <div>
-                              <Icon.FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                              <FiLink className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
                               {t("no_active_event_types")}
                             </div>
                           )}
@@ -144,7 +144,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                             type="button"
                             color="secondary"
                             variant="icon"
-                            StartIcon={Icon.FiEdit2}
+                            StartIcon={FiEdit2}
                             onClick={async () => await router.replace("/workflows/" + workflow.id)}
                           />
                         </Tooltip>
@@ -156,7 +156,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                             }}
                             color="secondary"
                             variant="icon"
-                            StartIcon={Icon.FiTrash2}
+                            StartIcon={FiTrash2}
                           />
                         </Tooltip>
                       </ButtonGroup>
@@ -164,18 +164,13 @@ export default function WorkflowListPage({ workflows }: Props) {
                     <div className="block sm:hidden">
                       <Dropdown>
                         <DropdownMenuTrigger asChild>
-                          <Button
-                            type="button"
-                            color="minimal"
-                            variant="icon"
-                            StartIcon={Icon.FiMoreHorizontal}
-                          />
+                          <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                           <DropdownMenuItem>
                             <DropdownItem
                               type="button"
-                              StartIcon={Icon.FiEdit2}
+                              StartIcon={FiEdit2}
                               onClick={async () => await router.replace("/workflows/" + workflow.id)}>
                               {t("edit")}
                             </DropdownItem>
@@ -184,7 +179,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                             <DropdownItem
                               type="button"
                               color="destructive"
-                              StartIcon={Icon.FiTrash2}
+                              StartIcon={FiTrash2}
                               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 0f04106a4d..50cf8b6982 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -14,12 +14,11 @@ import { SENDER_ID } from "@calcom/lib/constants";
 import { SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
-import { trpc, TRPCClientError } from "@calcom/trpc/react";
+import { trpc } from "@calcom/trpc/react";
 import {
   Badge,
   Button,
   Checkbox,
-  ConfirmationDialogContent,
   Dialog,
   DialogClose,
   DialogContent,
@@ -29,7 +28,6 @@ import {
   DropdownItem,
   DropdownMenuTrigger,
   EmailField,
-  Icon,
   Label,
   PhoneInput,
   Select,
@@ -40,6 +38,7 @@ import {
   AddVariablesDropdown,
   Input,
 } from "@calcom/ui";
+import { FiArrowDown, FiMoreHorizontal, FiTrash2, FiHelpCircle } from "@calcom/ui/components/icon";
 
 import { DYNAMIC_TEXT_VARIABLES } from "../lib/constants";
 import { getWorkflowTemplateOptions, getWorkflowTriggerOptions } from "../lib/getOptions";
@@ -276,7 +275,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="my-3 flex justify-center">
-          <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
+          <FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
           <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
@@ -296,18 +295,13 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div>
                   <Dropdown>
                     <DropdownMenuTrigger asChild>
-                      <Button
-                        type="button"
-                        color="minimal"
-                        variant="icon"
-                        StartIcon={Icon.FiMoreHorizontal}
-                      />
+                      <Button type="button" color="minimal" variant="icon" StartIcon={FiMoreHorizontal} />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                       <DropdownMenuItem>
                         <DropdownItem
                           type="button"
-                          StartIcon={Icon.FiTrash2}
+                          StartIcon={FiTrash2}
                           color="destructive"
                           onClick={() => {
                             const steps = form.getValues("steps");
@@ -638,7 +632,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
                       <div className="mt-2 flex text-sm text-gray-600">
-                        <Icon.FiHelpCircle className="mt-[3px] h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                        <FiHelpCircle 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 ee1b44e4d6..5135b3e387 100644
--- a/packages/features/ee/workflows/lib/getActionIcon.tsx
+++ b/packages/features/ee/workflows/lib/getActionIcon.tsx
@@ -1,32 +1,26 @@
 import { WorkflowActions, WorkflowStep } from "@prisma/client";
 
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui";
+import { FiZap, FiSmartphone, FiMail, FiBell } from "@calcom/ui/components/icon";
 
 export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.Element {
   if (steps.length === 0) {
     return (
-      <Icon.FiZap
-        className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
-        aria-hidden="true"
-      />
+      <FiZap 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 (
-        <Icon.FiSmartphone
+        <FiSmartphone
           className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
           aria-hidden="true"
         />
       );
     } else {
       return (
-        <Icon.FiMail
-          className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
-          aria-hidden="true"
-        />
+        <FiMail className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />
       );
     }
   }
@@ -55,30 +49,27 @@ export function getActionIcon(steps: WorkflowStep[], className?: string): JSX.El
     switch (messageType) {
       case "SMS":
         return (
-          <Icon.FiSmartphone
+          <FiSmartphone
             className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
             aria-hidden="true"
           />
         );
       case "EMAIL":
         return (
-          <Icon.FiMail
+          <FiMail
             className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
             aria-hidden="true"
           />
         );
       case "MIX":
         return (
-          <Icon.FiBell
+          <FiBell
             className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
             aria-hidden="true"
           />
         );
       default:
-        <Icon.FiZap
-          className={classNames(className ? className : "mr-1.5 inline h-3 w-3")}
-          aria-hidden="true"
-        />;
+        <FiZap className={classNames(className ? className : "mr-1.5 inline h-3 w-3")} aria-hidden="true" />;
     }
   }
 
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index 593868cc82..dbaee5bb90 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -5,7 +5,8 @@ import Shell from "@calcom/features/shell/Shell";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { trpc } from "@calcom/trpc/react";
-import { Button, Icon, showToast } from "@calcom/ui";
+import { Button, showToast } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import LicenseRequired from "../../common/components/v2/LicenseRequired";
 import SkeletonLoader from "../components/SkeletonLoaderList";
@@ -45,7 +46,7 @@ function WorkflowsPage() {
         session.data?.hasValidLicense && data?.workflows && data?.workflows.length > 0 ? (
           <Button
             variant="fab"
-            StartIcon={Icon.FiPlus}
+            StartIcon={FiPlus}
             onClick={() => createMutation.mutate()}
             loading={createMutation.isLoading}>
             {t("new")}
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index 64255a25eb..9b8297bed0 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -3,7 +3,8 @@ import { Props } from "react-select";
 
 import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Avatar, Icon, Select } from "@calcom/ui";
+import { Avatar, Select } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";
 
 export type CheckedSelectOption = {
   avatar: string;
@@ -48,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="my-auto ml-3 text-sm text-gray-900">{option.label}</p>
-            <Icon.FiX
+            <FiX
               onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
               className="my-auto ml-auto"
             />
diff --git a/packages/features/eventtypes/components/CreateEventTypeButton.tsx b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
index e8f036524b..5c9d17c94e 100644
--- a/packages/features/eventtypes/components/CreateEventTypeButton.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
@@ -27,12 +27,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   Form,
-  Icon,
   RadioGroup as RadioArea,
   showToast,
   TextAreaField,
   TextField,
 } from "@calcom/ui";
+import { FiPlus, FiChevronDown } from "@calcom/ui/components/icon";
 
 import { DuplicateDialog } from "./DuplicateDialog";
 
@@ -283,7 +283,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
         <Button
           onClick={() => openModal(props.options[0])}
           data-testid="new-event-type"
-          StartIcon={Icon.FiPlus}
+          StartIcon={FiPlus}
           variant="fab"
           disabled={!props.canAddEvents}>
           {t("new")}
@@ -291,7 +291,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
       ) : (
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button variant="fab" StartIcon={Icon.FiPlus}>
+            <Button variant="fab" StartIcon={FiPlus}>
               {t("new")}
             </Button>
           </DropdownMenuTrigger>
diff --git a/packages/features/eventtypes/components/CustomInputItem.tsx b/packages/features/eventtypes/components/CustomInputItem.tsx
index 1bb7a93cc4..95283ccb29 100644
--- a/packages/features/eventtypes/components/CustomInputItem.tsx
+++ b/packages/features/eventtypes/components/CustomInputItem.tsx
@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Badge, Button, ButtonGroup, Icon } from "@calcom/ui";
+import { Badge, Button, ButtonGroup } from "@calcom/ui";
+import { FiTrash } from "@calcom/ui/components/icon";
 
 type Props = {
   required?: boolean;
@@ -27,7 +28,7 @@ function CustomInputItem({ required, deleteOnClick, editOnClick, type, question
           {t("edit")}
         </Button>
         <Button
-          StartIcon={Icon.FiTrash}
+          StartIcon={FiTrash}
           variant="icon"
           color="destructive"
           onClick={deleteOnClick}
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index 86c9368c6c..42c603565c 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -8,7 +8,8 @@ import getStripeAppData from "@calcom/lib/getStripeAppData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma";
 import { EventTypeModel } from "@calcom/prisma/zod";
-import { Badge, Icon } from "@calcom/ui";
+import { Badge } from "@calcom/ui";
+import { FiClock, FiUsers, FiRefreshCw, FiCreditCard, FiClipboard, FiPlus } from "@calcom/ui/components/icon";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
@@ -43,21 +44,21 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           {eventType.metadata?.multipleDuration ? (
             eventType.metadata.multipleDuration.map((dur, idx) => (
               <li key={idx}>
-                <Badge variant="gray" size="lg" StartIcon={Icon.FiClock}>
+                <Badge variant="gray" size="lg" StartIcon={FiClock}>
                   {dur}m
                 </Badge>
               </li>
             ))
           ) : (
             <li>
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiClock}>
+              <Badge variant="gray" size="lg" StartIcon={FiClock}>
                 {eventType.length}m
               </Badge>
             </li>
           )}
           {eventType.schedulingType && (
             <li>
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiUsers}>
+              <Badge variant="gray" size="lg" StartIcon={FiUsers}>
                 {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
                 {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
               </Badge>
@@ -65,7 +66,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
             <li className="hidden xl:block">
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiRefreshCw}>
+              <Badge variant="gray" size="lg" StartIcon={FiRefreshCw}>
                 {t("repeats_up_to", {
                   count: recurringEvent.count,
                 })}
@@ -74,7 +75,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           )}
           {stripeAppData.price > 0 && (
             <li>
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiCreditCard}>
+              <Badge variant="gray" size="lg" StartIcon={FiCreditCard}>
                 <IntlProvider locale="en">
                   <FormattedNumber
                     value={stripeAppData.price / 100.0}
@@ -87,7 +88,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           )}
           {eventType.requiresConfirmation && (
             <li className="hidden xl:block">
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiClipboard}>
+              <Badge variant="gray" size="lg" StartIcon={FiClipboard}>
                 {eventType.metadata?.requiresConfirmationThreshold
                   ? t("may_require_confirmation")
                   : t("requires_confirmation")}
@@ -97,7 +98,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           {/* TODO: Maybe add a tool tip to this? */}
           {eventType.requiresConfirmation || (recurringEvent?.count && recurringEvent.count) ? (
             <li className="block xl:hidden">
-              <Badge variant="gray" size="lg" StartIcon={Icon.FiPlus}>
+              <Badge variant="gray" size="lg" StartIcon={FiPlus}>
                 <p>{[eventType.requiresConfirmation, recurringEvent?.count].filter(Boolean).length}</p>
               </Badge>
             </li>
diff --git a/packages/features/eventtypes/components/MultiDropdownSelect.tsx b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
index a2f79cd176..37d26906eb 100644
--- a/packages/features/eventtypes/components/MultiDropdownSelect.tsx
+++ b/packages/features/eventtypes/components/MultiDropdownSelect.tsx
@@ -1,6 +1,6 @@
 import { components, GroupBase, Props, ValueContainerProps } from "react-select";
 
-import { Icon, Select } from "../../..";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
   children,
@@ -22,7 +22,7 @@ const LimitedChipsContainer = <Option, IsMulti extends boolean, Group extends Gr
       {overflowCounter > 0 && (
         <span className="flex items-center justify-center rounded-md bg-gray-100 py-[5px] px-2 text-[14px] font-medium leading-4 text-gray-700">
           <>
-            <Icon.FiPlus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
+            <FiPlus className="mr-1 inline h-3 w-3 stroke-[3px]" /> <span>{overflowCounter} more</span>
           </>
         </span>
       )}
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index a641800f12..f08a7eeb5e 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -15,7 +15,8 @@ import { appStoreMetadata } from "@calcom/app-store/appStoreMetaData";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Icon, Tooltip } from "@calcom/ui";
+import { Tooltip } from "@calcom/ui";
+import { FiSearch, FiArrowUp, FiArrowDown, FiCornerDownLeft, FiCommand } from "@calcom/ui/components/icon";
 
 type shortcutArrayType = {
   shortcuts?: string[];
@@ -247,7 +248,7 @@ export const KBarContent = () => {
       <KBarPositioner>
         <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-md bg-white shadow-lg">
           <div className="flex items-center justify-center border-b">
-            <Icon.FiSearch className="mx-3 h-4 w-4 text-gray-500" />
+            <FiSearch className="mx-3 h-4 w-4 text-gray-500" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
               className="w-full rounded-sm py-2.5 focus-visible:outline-none"
@@ -255,11 +256,11 @@ export const KBarContent = () => {
           </div>
           <RenderResults />
           <div className="hidden items-center space-x-1 border-t px-2 py-1.5 text-xs text-gray-500 sm:flex">
-            <Icon.FiArrowUp className="h-4 w-4" />
-            <Icon.FiArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
-            <Icon.FiCornerDownLeft className="h-4 w-4" />
+            <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" />
             <span className="pr-2">{t("open")}</span>
-            {isMac ? <Icon.FiCommand className="h-3 w-3" /> : "CTRL"}
+            {isMac ? <FiCommand className="h-3 w-3" /> : "CTRL"}
             <span className="pr-1">+ K </span>
             <span className="pr-2">{t("close")}</span>
           </div>
@@ -279,7 +280,7 @@ export const KBarTrigger = () => {
           color="minimal"
           onClick={query.toggle}
           className="group flex rounded-md py-2 px-3 text-sm font-medium hover:bg-gray-100 lg:p-1 lg:hover:bg-gray-200 lg:hover:text-gray-900">
-          <Icon.FiSearch className="h-4 w-4 flex-shrink-0 text-inherit" />
+          <FiSearch 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 42df9aef24..146551426a 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -2,7 +2,8 @@ import { UseFieldArrayRemove } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeRange, WorkingHours } from "@calcom/types/schedule";
-import { Button, DialogTrigger, Icon, Tooltip } from "@calcom/ui";
+import { Button, DialogTrigger, Tooltip } from "@calcom/ui";
+import { FiEdit2, FiTrash2 } from "@calcom/ui/components/icon";
 
 import DateOverrideInputDialog from "./DateOverrideInputDialog";
 
@@ -76,7 +77,7 @@ const DateOverrideList = ({
                     className="text-gray-700"
                     color="minimal"
                     variant="icon"
-                    StartIcon={Icon.FiEdit2}
+                    StartIcon={FiEdit2}
                   />
                 </DialogTrigger>
               }
@@ -86,7 +87,7 @@ const DateOverrideList = ({
                 className="text-gray-700"
                 color="destructive"
                 variant="icon"
-                StartIcon={Icon.FiTrash2}
+                StartIcon={FiTrash2}
                 onClick={() => remove(index)}
               />
             </Tooltip>
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 2dc2089674..980b16184d 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -12,9 +12,9 @@ import {
   DialogFooter,
   DialogTrigger,
   Form,
-  Icon,
   showToast,
 } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 export function NewScheduleButton({ name = "new-schedule" }: { name?: string }) {
   const router = useRouter();
@@ -58,7 +58,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
   return (
     <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
       <DialogTrigger asChild>
-        <Button variant="fab" data-testid={name} StartIcon={Icon.FiPlus}>
+        <Button variant="fab" data-testid={name} StartIcon={FiPlus}>
           {t("new")}
         </Button>
       </DialogTrigger>
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 58d1e0638c..0050f9c934 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -12,7 +12,7 @@ import type {
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import { GroupBase, Props } from "react-select";
 
-import dayjs, { ConfigType, Dayjs } from "@calcom/dayjs";
+import dayjs, { ConfigType } from "@calcom/dayjs";
 import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -24,11 +24,11 @@ import {
   Dropdown,
   DropdownMenuContent,
   DropdownMenuTrigger,
-  Icon,
   Select,
   SkeletonText,
   Switch,
 } from "@calcom/ui";
+import { FiCopy, FiPlus, FiTrash } from "@calcom/ui/components/icon";
 
 export type { TimeRange };
 
@@ -110,7 +110,7 @@ const CopyButton = ({
           tooltip={t("copy_times_to_tooltip")}
           color="minimal"
           variant="icon"
-          StartIcon={Icon.FiCopy}
+          StartIcon={FiCopy}
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
@@ -188,7 +188,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 type="button"
                 color="minimal"
                 variant="icon"
-                StartIcon={Icon.FiPlus}
+                StartIcon={FiPlus}
                 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={Icon.FiTrash}
+      StartIcon={FiTrash}
       onClick={() => remove(index)}
       className={className}
     />
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 8cd11d65c0..610e747ae9 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -13,8 +13,8 @@ import {
   DropdownMenuItem,
   DropdownItem,
   DropdownMenuTrigger,
-  Icon,
 } from "@calcom/ui";
+import { FiGlobe, FiMoreHorizontal, FiTrash } from "@calcom/ui/components/icon";
 
 export function ScheduleListItem({
   schedule,
@@ -64,7 +64,7 @@ export function ScheduleListItem({
                 ))}
               {schedule.timeZone && schedule.timeZone !== displayOptions?.timeZone && (
                 <p className="my-1 flex items-center first-letter:text-xs">
-                  <Icon.FiGlobe />
+                  <FiGlobe />
                   &nbsp;{schedule.timeZone}
                 </p>
               )}
@@ -78,7 +78,7 @@ export function ScheduleListItem({
               type="button"
               variant="icon"
               color="secondary"
-              StartIcon={Icon.FiMoreHorizontal}
+              StartIcon={FiMoreHorizontal}
             />
           </DropdownMenuTrigger>
           {!isLoading && data && (
@@ -101,7 +101,7 @@ export function ScheduleListItem({
                 <DropdownItem
                   type="button"
                   color="destructive"
-                  StartIcon={Icon.FiTrash}
+                  StartIcon={FiTrash}
                   onClick={() => {
                     deleteFunction({
                       scheduleId: schedule.id,
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index 8df7f7f677..d3ee1fb5de 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -15,18 +15,30 @@ import {
   Badge,
   Button,
   ErrorBoundary,
-  Icon,
   VerticalTabItemProps,
   VerticalTabItem,
   Skeleton,
   useMeta,
 } from "@calcom/ui";
+import {
+  FiUser,
+  FiKey,
+  FiCreditCard,
+  FiTerminal,
+  FiUsers,
+  FiLock,
+  FiArrowLeft,
+  FiChevronDown,
+  FiChevronRight,
+  FiPlus,
+  FiMenu,
+} from "@calcom/ui/components/icon";
 
 const tabs: VerticalTabItemProps[] = [
   {
     name: "my_account",
     href: "/settings/my-account",
-    icon: Icon.FiUser,
+    icon: FiUser,
     children: [
       { name: "profile", href: "/settings/my-account/profile" },
       { name: "general", href: "/settings/my-account/general" },
@@ -40,7 +52,7 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "security",
     href: "/settings/security",
-    icon: Icon.FiKey,
+    icon: FiKey,
     children: [
       { name: "password", href: "/settings/security/password" },
       { name: "2fa_auth", href: "/settings/security/two-factor-auth" },
@@ -50,13 +62,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "billing",
     href: "/settings/billing",
-    icon: Icon.FiCreditCard,
+    icon: FiCreditCard,
     children: [{ name: "manage_billing", href: "/settings/billing" }],
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: Icon.FiTerminal,
+    icon: FiTerminal,
     children: [
       //
       { name: "webhooks", href: "/settings/developer/webhooks" },
@@ -68,13 +80,13 @@ const tabs: VerticalTabItemProps[] = [
   {
     name: "teams",
     href: "/settings/teams",
-    icon: Icon.FiUsers,
+    icon: FiUsers,
     children: [],
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: Icon.FiLock,
+    icon: FiLock,
     children: [
       //
       { name: "impersonation", href: "/settings/admin/impersonation" },
@@ -121,7 +133,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
       href="/event-types"
       className="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 text-black hover:bg-gray-100 group-hover:text-gray-700 [&[aria-current='page']]:bg-gray-200 [&[aria-current='page']]:text-gray-900"
       data-testid={`vertical-tab-${name}`}>
-      <Icon.FiArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] md:mt-0" />
+      <FiArrowLeft 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>
@@ -247,11 +259,7 @@ const SettingsSidebarContainer = ({
                                 ])
                               }>
                               <div className="ltr:mr-3 rtl:ml-3">
-                                {teamMenuState[index].teamMenuOpen ? (
-                                  <Icon.FiChevronDown />
-                                ) : (
-                                  <Icon.FiChevronRight />
-                                )}
+                                {teamMenuState[index].teamMenuOpen ? <FiChevronDown /> : <FiChevronRight />}
                               </div>
                               <img
                                 src={getPlaceholderAvatar(team.logo, team?.name as string)}
@@ -320,7 +328,7 @@ const SettingsSidebarContainer = ({
                   name={t("add_a_team")}
                   href={`${WEBAPP_URL}/settings/teams/new`}
                   textClassNames="px-3 text-gray-900 font-medium text-sm"
-                  icon={Icon.FiPlus}
+                  icon={FiPlus}
                   disableChevron
                 />
               </div>
@@ -339,14 +347,14 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
     <>
       <nav className="sticky top-0 z-20 flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button StartIcon={Icon.FiMenu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
+          <Button StartIcon={FiMenu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
 
           <a
             href="/"
             className="flex items-center space-x-2 rounded-md px-3 py-1 hover:bg-gray-200 rtl:space-x-reverse">
-            <Icon.FiArrowLeft className="text-gray-700" />
+            <FiArrowLeft className="text-gray-700" />
             <p className="font-semibold text-black">{t("settings")}</p>
           </a>
         </div>
@@ -426,7 +434,7 @@ function ShellHeader() {
       <div className="mb-8 flex w-full items-center border-b border-gray-200 pb-6">
         {meta.backButton && (
           <a href="javascript:history.back()">
-            <Icon.FiArrowLeft className="mr-7" />
+            <FiArrowLeft className="mr-7" />
           </a>
         )}
         <div>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index f020a097d4..93c95c708e 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -8,7 +8,6 @@ import { Toaster } from "react-hot-toast";
 import dayjs from "@calcom/dayjs";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import UnconfirmedBookingBadge from "@calcom/features/bookings/UnconfirmedBookingBadge";
-import LicenseRequired from "@calcom/features/ee/common/components/v2/LicenseRequired";
 import ImpersonatingBanner from "@calcom/features/ee/impersonation/components/ImpersonatingBanner";
 import HelpMenuItem from "@calcom/features/ee/support/components/HelpMenuItem";
 import { TeamsUpgradeBanner } from "@calcom/features/ee/teams/components";
@@ -35,12 +34,32 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
   ErrorBoundary,
-  HeadSeo,
-  Icon,
   Logo,
+  HeadSeo,
   showToast,
   SkeletonText,
 } from "@calcom/ui";
+import {
+  FiMoreVertical,
+  FiMoon,
+  FiExternalLink,
+  FiLink,
+  FiSlack,
+  FiMap,
+  FiHelpCircle,
+  FiDownload,
+  FiLogOut,
+  FiCalendar,
+  FiClock,
+  FiUsers,
+  FiGrid,
+  FiMoreHorizontal,
+  FiFileText,
+  FiZap,
+  FiSettings,
+  FiArrowRight,
+  FiArrowLeft,
+} from "@calcom/ui/components/icon";
 
 /* TODO: Migate this */
 
@@ -285,7 +304,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                       : "No public page"}
                   </span>
                 </span>
-                <Icon.FiMoreVertical
+                <FiMoreVertical
                   className="h-4 w-4 flex-shrink-0 text-gray-400 group-hover:text-gray-500 ltr:mr-2 rtl:ml-2 rtl:mr-4"
                   aria-hidden="true"
                 />
@@ -310,7 +329,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                 <DropdownItem
                   type="button"
                   StartIcon={(props) => (
-                    <Icon.FiMoon
+                    <FiMoon
                       className={classNames(
                         user.away
                           ? "text-purple-500 group-hover:text-purple-700"
@@ -335,14 +354,14 @@ function UserDropdown({ small }: { small?: boolean }) {
                       target="_blank"
                       rel="noopener noreferrer"
                       href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
-                      StartIcon={Icon.FiExternalLink}>
+                      StartIcon={FiExternalLink}>
                       {t("view_public_page")}
                     </DropdownItem>
                   </DropdownMenuItem>
                   <DropdownMenuItem>
                     <DropdownItem
                       type="button"
-                      StartIcon={Icon.FiLink}
+                      StartIcon={FiLink}
                       onClick={(e) => {
                         e.preventDefault();
                         navigator.clipboard.writeText(
@@ -358,7 +377,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               <DropdownMenuSeparator />
               <DropdownMenuItem>
                 <DropdownItem
-                  StartIcon={(props) => <Icon.FiSlack strokeWidth={1.5} {...props} />}
+                  StartIcon={(props) => <FiSlack strokeWidth={1.5} {...props} />}
                   target="_blank"
                   rel="noreferrer"
                   href={JOIN_SLACK}>
@@ -366,21 +385,21 @@ function UserDropdown({ small }: { small?: boolean }) {
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
-                <DropdownItem StartIcon={Icon.FiMap} target="_blank" href={ROADMAP}>
+                <DropdownItem StartIcon={FiMap} target="_blank" href={ROADMAP}>
                   {t("visit_roadmap")}
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <DropdownItem
                   type="button"
-                  StartIcon={(props) => <Icon.FiHelpCircle aria-hidden="true" {...props} />}
+                  StartIcon={(props) => <FiHelpCircle aria-hidden="true" {...props} />}
                   onClick={() => setHelpOpen(true)}>
                   {t("help")}
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuItem>
                 <DropdownItem
-                  StartIcon={Icon.FiDownload}
+                  StartIcon={FiDownload}
                   target="_blank"
                   rel="noreferrer"
                   className="desktop-hidden hidden lg:flex"
@@ -393,7 +412,7 @@ function UserDropdown({ small }: { small?: boolean }) {
               <DropdownMenuItem>
                 <DropdownItem
                   type="button"
-                  StartIcon={(props) => <Icon.FiLogOut aria-hidden="true" {...props} />}
+                  StartIcon={(props) => <FiLogOut aria-hidden="true" {...props} />}
                   onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
                   {t("sign_out")}
                 </DropdownItem>
@@ -433,12 +452,12 @@ const navigation: NavigationItemType[] = [
   {
     name: "event_types_page_title",
     href: "/event-types",
-    icon: Icon.FiLink,
+    icon: FiLink,
   },
   {
     name: "bookings",
     href: "/bookings/upcoming",
-    icon: Icon.FiCalendar,
+    icon: FiCalendar,
     badge: <UnconfirmedBookingBadge />,
     isCurrent: ({ router }) => {
       const path = router.asPath.split("?")[0];
@@ -448,18 +467,18 @@ const navigation: NavigationItemType[] = [
   {
     name: "availability",
     href: "/availability",
-    icon: Icon.FiClock,
+    icon: FiClock,
   },
   {
     name: "teams",
     href: "/teams",
-    icon: Icon.FiUsers,
+    icon: FiUsers,
     onlyDesktop: true,
   },
   {
     name: "apps",
     href: "/apps",
-    icon: Icon.FiGrid,
+    icon: FiGrid,
     isCurrent: ({ router, item }) => {
       const path = router.asPath.split("?")[0];
       // During Server rendering path is /v2/apps but on client it becomes /apps(weird..)
@@ -494,12 +513,12 @@ const navigation: NavigationItemType[] = [
   {
     name: MORE_SEPARATOR_NAME,
     href: "/more",
-    icon: Icon.FiMoreHorizontal,
+    icon: FiMoreHorizontal,
   },
   {
     name: "Routing Forms",
     href: "/apps/routing-forms/forms",
-    icon: Icon.FiFileText,
+    icon: FiFileText,
     isCurrent: ({ router }) => {
       return router.asPath.startsWith("/apps/routing-forms/");
     },
@@ -507,12 +526,12 @@ const navigation: NavigationItemType[] = [
   {
     name: "workflows",
     href: "/workflows",
-    icon: Icon.FiZap,
+    icon: FiZap,
   },
   {
     name: "settings",
     href: "/settings/my-account/profile",
-    icon: Icon.FiSettings,
+    icon: FiSettings,
   },
 ];
 
@@ -687,7 +706,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>
-        <Icon.FiArrowRight className="h-5 w-5 text-gray-500" />
+        <FiArrowRight className="h-5 w-5 text-gray-500" />
       </Link>
     </li>
   );
@@ -719,13 +738,13 @@ function SideBar() {
                 color="minimal"
                 onClick={() => window.history.back()}
                 className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
-                <Icon.FiArrowLeft className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
+                <FiArrowLeft className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
                 className="desktop-only group flex text-sm font-medium text-gray-500 hover:text-gray-900">
-                <Icon.FiArrowRight className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
+                <FiArrowRight className="h-4 w-4 flex-shrink-0 text-gray-500 group-hover:text-gray-900" />
               </button>
               <KBarTrigger />
             </div>
@@ -771,7 +790,7 @@ export function ShellMain(props: LayoutProps) {
             onClick={() =>
               typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
             }
-            StartIcon={Icon.FiArrowLeft}
+            StartIcon={FiArrowLeft}
             aria-label="Go Back"
             className="ltr:mr-2 rtl:ml-2"
           />
@@ -857,7 +876,7 @@ function TopNav() {
           <button className="rounded-full p-1 text-gray-400 hover:bg-gray-50 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
             <span className="sr-only">{t("settings")}</span>
             <Link href="/settings/profile">
-              <Icon.FiSettings className="h-4 w-4 text-gray-700" aria-hidden="true" />
+              <FiSettings className="h-4 w-4 text-gray-700" aria-hidden="true" />
             </Link>
           </button>
           <UserDropdown small />
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index 4c0eb4417e..4b5d14daaf 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -6,7 +6,8 @@ import { useHasTeamPlan } from "@calcom/lib/hooks/useHasTeamPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 // import isCalcom from "@calcom/lib/isCalcom";
 import { trpc } from "@calcom/trpc/react";
-import { EmptyScreen, Icon } from "@calcom/ui";
+import { EmptyScreen } from "@calcom/ui";
+import { FiUsers } from "@calcom/ui/components/icon";
 
 import TeamList from "../ee/teams/components/TeamList";
 
@@ -40,7 +41,7 @@ export function UpgradeTip({
   if (hasTeamPlan) return children;
 
   if (!isCalcom)
-    return <EmptyScreen Icon={Icon.FiUsers} headline={title} description={description} buttonRaw={buttons} />;
+    return <EmptyScreen Icon={FiUsers} headline={title} description={description} buttonRaw={buttons} />;
 
   if (isParentLoading || isLoading) return <>{isParentLoading}</>;
 
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index 6eb4c18be9..e613f7256b 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -2,8 +2,9 @@ import { WebhookTriggerEvents } from "@prisma/client";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Badge, Button, Icon, showToast, Switch, Tooltip } from "@calcom/ui";
+import { trpc } from "@calcom/trpc/react";
+import { Badge, Button, showToast, Switch, Tooltip } from "@calcom/ui";
+import { FiAlertCircle, FiTrash } from "@calcom/ui/components/icon";
 
 type WebhookProps = {
   id: string;
@@ -50,7 +51,7 @@ export default function WebhookListItem(props: {
                 className="ltr:mr-2 rtl:ml-2"
                 variant="gray"
                 bold
-                StartIcon={Icon.FiAlertCircle}>
+                StartIcon={FiAlertCircle}>
                 {t(`${trigger.toLowerCase()}`)}
               </Badge>
             ))}
@@ -74,7 +75,7 @@ export default function WebhookListItem(props: {
         </Button>
         <Button
           color="destructive"
-          StartIcon={Icon.FiTrash}
+          StartIcon={FiTrash}
           variant="icon"
           onClick={() => {
             // TODO: Confimation dialog before deleting
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 57907ee0df..406d7bdbf1 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -2,7 +2,8 @@ import { useWatch } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
-import { Badge, Button, Icon, showToast } from "@calcom/ui";
+import { Badge, Button, showToast } from "@calcom/ui";
+import { FiActivity } from "@calcom/ui/components/icon";
 
 export default function WebhookTestDisclosure() {
   const subscriberUrl: string = useWatch({ name: "subscriberUrl" });
@@ -29,7 +30,7 @@ export default function WebhookTestDisclosure() {
           type="button"
           color="secondary"
           disabled={mutation.isLoading || !subscriberUrl}
-          StartIcon={Icon.FiActivity}
+          StartIcon={FiActivity}
           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 b8e65132c7..dacd6aa34e 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -4,7 +4,8 @@ import { Suspense } from "react";
 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, Icon, Meta, SkeletonText } from "@calcom/ui";
+import { Button, EmptyScreen, Meta, SkeletonText } from "@calcom/ui";
+import { FiPlus, FiLink } from "@calcom/ui/components/icon";
 
 import { getLayout } from "../../settings/layouts/SettingsLayout";
 import { WebhookListItem, WebhookListSkeleton } from "../components";
@@ -29,7 +30,7 @@ const NewWebhookButton = () => {
     <Button
       color="secondary"
       data-testid="new_webhook"
-      StartIcon={Icon.FiPlus}
+      StartIcon={FiPlus}
       href={`${WEBAPP_URL}/settings/developer/webhooks/new`}>
       {isLocaleReady ? t("new_webhook") : <SkeletonText className="h-4 w-24" />}
     </Button>
@@ -63,7 +64,7 @@ const WebhooksList = () => {
         </>
       ) : (
         <EmptyScreen
-          Icon={Icon.FiLink}
+          Icon={FiLink}
           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 869cbf2434..c208e5bdf6 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 { ReactNode } from "react";
 
-import { Icon } from "../icon";
+import { FiInfo } from "../icon";
 
 export interface AlertProps {
   title?: ReactNode;
@@ -47,7 +47,7 @@ export function Alert(props: AlertProps) {
             />
           )}
           {severity === "neutral" && (
-            <Icon.FiInfo className={classNames("h-5 w-5 text-gray-800", iconClassName)} aria-hidden="true" />
+            <FiInfo className={classNames("h-5 w-5 text-gray-800", iconClassName)} aria-hidden="true" />
           )}
           {severity === "success" && (
             <CheckCircleIcon
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index 3973dddb38..2aface1cd1 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -6,7 +6,7 @@ import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
-import { Icon } from "@calcom/ui";
+import { FiChevronLeft, FiChevronRight, FiSearch } from "@calcom/ui/components/icon";
 
 import { EmptyScreen } from "../empty-screen";
 import { AppCard } from "./AppCard";
@@ -78,7 +78,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
       {leftVisible && (
         <button onClick={handleLeft} className="absolute top-9 flex md:left-1/2 md:-top-1">
           <div className="flex h-12 w-5 items-center justify-end bg-white">
-            <Icon.FiChevronLeft className="h-4 w-4 text-gray-500" />
+            <FiChevronLeft className="h-4 w-4 text-gray-500" />
           </div>
           <div className="flex h-12 w-5 bg-gradient-to-l from-transparent to-white" />
         </button>
@@ -121,7 +121,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
         <button onClick={handleRight} className="absolute top-9 right-0 flex md:-top-1">
           <div className="flex h-12 w-5 bg-gradient-to-r from-transparent to-white" />
           <div className="flex h-12 w-5 items-center justify-end bg-white">
-            <Icon.FiChevronRight className="h-4 w-4 text-gray-500" />
+            <FiChevronRight className="h-4 w-4 text-gray-500" />
           </div>
         </button>
       )}
@@ -175,7 +175,7 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
         </div>
       ) : (
         <EmptyScreen
-          Icon={Icon.FiSearch}
+          Icon={FiSearch}
           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 342b80bf05..175713d28e 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -6,8 +6,8 @@ import { InstallAppButton } from "@calcom/app-store/components";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
-
-import { Button, Icon, showToast } from "../..";
+import { Button, showToast } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 interface AppCardProps {
   app: App;
@@ -100,7 +100,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={Icon.FiPlus}
+                      StartIcon={FiPlus}
                       {...props}>
                       {t("install")}
                     </Button>
@@ -125,7 +125,7 @@ export function AppCard({ app, credentials, searchText }: AppCardProps) {
                   }
                   return (
                     <Button
-                      StartIcon={Icon.FiPlus}
+                      StartIcon={FiPlus}
                       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 6e56923188..17eeb266c9 100644
--- a/packages/ui/components/apps/Categories.tsx
+++ b/packages/ui/components/apps/Categories.tsx
@@ -1,7 +1,8 @@
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon, SkeletonText } from "@calcom/ui";
+import { SkeletonText } from "@calcom/ui";
+import { FiArrowRight } from "@calcom/ui/components/icon";
 
 import { Slider } from "./Slider";
 
@@ -43,7 +44,7 @@ export function AppStoreCategories({
               )}
               <p className="pt-2 text-sm font-medium text-gray-500">
                 {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
-                <Icon.FiArrowRight className="inline-block h-4 w-4" />
+                <FiArrowRight 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 5754d657d0..a62d284111 100644
--- a/packages/ui/components/apps/Slider.tsx
+++ b/packages/ui/components/apps/Slider.tsx
@@ -4,8 +4,8 @@ import "@glidejs/glide/dist/css/glide.theme.min.css";
 import { ComponentProps, FC, useEffect, useRef } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { FiArrowLeft, FiArrowRight } from "@calcom/ui/components/icon";
 
-import { Icon } from "../../components/icon";
 import { SkeletonText } from "../skeleton";
 
 const SliderButton: FC<ComponentProps<"button">> = (props) => {
@@ -68,10 +68,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="<">
-              <Icon.FiArrowLeft className="h-5 w-5" />
+              <FiArrowLeft className="h-5 w-5" />
             </SliderButton>
             <SliderButton data-glide-dir=">">
-              <Icon.FiArrowRight className="h-5 w-5" />
+              <FiArrowRight 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 ed9446b1f8..b72913ae7e 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 
 import classNames from "@calcom/lib/classNames";
 import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
-import { Icon } from "@calcom/ui";
+import { FiCheck } from "@calcom/ui/components/icon";
 
 import { Maybe } from "@trpc/server";
 
@@ -60,7 +60,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" && <Icon.FiCheck />}
+              {size === "lg" && <FiCheck />}
             </div>
           </div>
         )}
diff --git a/packages/ui/components/badge/badge.stories.mdx b/packages/ui/components/badge/badge.stories.mdx
index ec8055f3e3..d3d0502ed8 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 { Icon } from "@calcom/ui";
+import { FiPlus } from '@calcom/ui/components/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={Icon.FiPlus}>Button Text</Badge>
+    <Badge StartIcon={FiPlus}>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={Icon.FiPlus}>Badge text</Badge>
+        <Badge variant="default" StartIcon={FiPlus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="Success">
         <Badge variant="success" >Badge text</Badge>
         <Badge variant="success" withDot>Badge text</Badge>
-        <Badge variant="success" StartIcon={Icon.FiPlus}>Badge text</Badge>
+        <Badge variant="success" StartIcon={FiPlus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="gray">
         <Badge variant="gray" >Badge text</Badge>
         <Badge variant="gray" withDot>Badge text</Badge>
-        <Badge variant="gray" StartIcon={Icon.FiPlus}>Badge text</Badge>
+        <Badge variant="gray" StartIcon={FiPlus}>Badge text</Badge>
       </VariantRow>
       <VariantRow variant="error">
         <Badge variant="error" >Badge text</Badge>
         <Badge variant="error" withDot>Badge text</Badge>
-        <Badge variant="error" StartIcon={Icon.FiPlus}>Badge text</Badge>
+        <Badge variant="error" StartIcon={FiPlus}>Badge text</Badge>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 02b0cf138b..71d705fbdb 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -6,7 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Tooltip } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
 
@@ -204,7 +204,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           {variant === "fab" ? (
             <>
               <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2 sm:inline-flex" />
-              <Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
+              <FiPlus className="inline h-6 w-6 sm:hidden" />
             </>
           ) : (
             <StartIcon
@@ -238,7 +238,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           {variant === "fab" ? (
             <>
               <EndIcon className="-mr-1 hidden h-5 w-5 ltr:ml-2 rtl:-ml-1 rtl:mr-2 sm:inline" />
-              <Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
+              <FiPlus className="inline h-6 w-6 sm:hidden" />
             </>
           ) : (
             <EndIcon
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index 59193f6cd4..7b418b3e04 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 { Icon } from "@calcom/ui";
+import { FiPlus, FiX } from "@calcom/ui/components/icon";
 
 import { Button } from './Button';
 
@@ -58,22 +58,22 @@ Button are clickable elements that initiates user actions. Labels in the button
     <Button>Button text</Button>
   </Example>
   <Example title="Icon left">
-      <Button StartIcon={Icon.FiPlus}>Button text</Button>
+      <Button StartIcon={FiPlus}>Button text</Button>
   </Example>
   <Example title="Icon right">
-    <Button EndIcon={Icon.FiPlus}>Button text</Button>
+    <Button EndIcon={FiPlus}>Button text</Button>
   </Example>
 </Examples>
 
 <Examples title="Icons">
   <Example title="Icon Normal">
-      <Button StartIcon={Icon.FiX} variant="icon" size="base" color="minimal"></Button>
+      <Button StartIcon={FiX} variant="icon" size="base" color="minimal"></Button>
   </Example>
   <Example title="Icon Small">
-      <Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal"></Button>
+      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal"></Button>
   </Example>
    <Example title="Icon Loading">
-      <Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal" loading></Button>
+      <Button StartIcon={FiX} variant="icon" size="sm" color="minimal" loading></Button>
   </Example>
 </Examples>
 
@@ -97,35 +97,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={Icon.FiX}></Button>
+        <Button color="destructive" variant="icon" StartIcon={FiX}></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={Icon.FiX}></Button>
+        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={FiX}></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={Icon.FiX}></Button>
+        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={FiX}></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={Icon.FiX}></Button>
+        <Button loading color="destructive" variant="icon" StartIcon={FiX}></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="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
+        <Button disabled color="destructive" variant="icon" StartIcon={FiX}></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index fb8e1fd485..92f1a87c19 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 { Icon } from "@calcom/ui";
+import { FiTrash, FiNavigation, FiClipboard } from "@calcom/ui/components/icon";
 
 import { ButtonGroup} from './ButtonGroup';
 import { Button} from '../button/Button';
@@ -31,16 +31,16 @@ Button group enables multiple buttons to be combined into a single unit. It offe
 >
   <Example title="Default" >
     <ButtonGroup>
-      <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
-      <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
-      <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
+      <Button StartIcon={FiTrash} variant="icon" color="secondary" />
+      <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
+      <Button StartIcon={FiClipboard} variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
   <Example title="Combined">
     <ButtonGroup combined>
-      <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
-      <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
-      <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
+      <Button StartIcon={FiTrash} variant="icon" color="secondary" />
+      <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
+      <Button StartIcon={FiClipboard} variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
 </Examples>
@@ -52,31 +52,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={Icon.FiTrash} variant="icon"  />
-          <Button StartIcon={Icon.FiNavigation} variant="icon"/>
-          <Button StartIcon={Icon.FiClipboard} variant="icon"  />
+          <Button StartIcon={FiTrash} variant="icon"  />
+          <Button StartIcon={FiNavigation} variant="icon"/>
+          <Button StartIcon={FiClipboard} variant="icon"  />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
-          <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
-          <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
+          <Button StartIcon={FiTrash} variant="icon" color="secondary" />
+          <Button StartIcon={FiNavigation} variant="icon" color="secondary" />
+          <Button StartIcon={FiClipboard} variant="icon" color="secondary" />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Icon.FiTrash} variant="icon" color="minimal" />
-          <Button StartIcon={Icon.FiNavigation} variant="icon" color="minimal" />
-          <Button StartIcon={Icon.FiClipboard} variant="icon" color="minimal" />
+          <Button StartIcon={FiTrash} variant="icon" color="minimal" />
+          <Button StartIcon={FiNavigation} variant="icon" color="minimal" />
+          <Button StartIcon={FiClipboard} variant="icon" color="minimal" />
         </ButtonGroup>
       </VariantRow>
       <VariantRow variant="Combined">
         <ButtonGroup combined>
-          <Button StartIcon={Icon.FiTrash} variant="icon"  />
-          <Button StartIcon={Icon.FiNavigation} variant="icon"  />
-          <Button StartIcon={Icon.FiClipboard} variant="icon"  />
+          <Button StartIcon={FiTrash} variant="icon"  />
+          <Button StartIcon={FiNavigation} variant="icon"  />
+          <Button StartIcon={FiClipboard} variant="icon"  />
         </ButtonGroup>
          <ButtonGroup combined>
-          <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary"  />
-          <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary"  />
-          <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary"  />
+          <Button StartIcon={FiTrash} variant="icon" color="secondary"  />
+          <Button StartIcon={FiNavigation} variant="icon" color="secondary"  />
+          <Button StartIcon={FiClipboard} variant="icon" color="secondary"  />
         </ButtonGroup>
       </VariantRow>
     </VariantsTable>
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index d3841d7270..cb998772b3 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -1,8 +1,9 @@
 import Link from "next/link";
 
 import { classNames } from "@calcom/lib";
+import { FiArrowDown, FiArrowUp, FiTrash } from "@calcom/ui/components/icon";
 
-import { Icon, Badge, BadgeProps } from "../..";
+import { Badge, BadgeProps } from "../..";
 import { Divider } from "../divider";
 
 type Action = { check: () => boolean; fn: () => void };
@@ -37,7 +38,7 @@ export default function FormCard({
             type="button"
             className="invisible absolute left-0 -ml-[13px] -mt-10 flex h-6 w-6 scale-0 items-center justify-center rounded-md border   bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black  hover:shadow group-hover:visible group-hover:scale-100 "
             onClick={() => moveUp?.fn()}>
-            <Icon.FiArrowUp />
+            <FiArrowUp />
           </button>
         ) : null}
         {moveDown?.check() ? (
@@ -45,7 +46,7 @@ export default function FormCard({
             type="button"
             className="invisible absolute left-0 -ml-[13px] -mt-2 flex h-6 w-6  scale-0 items-center justify-center rounded-md border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100"
             onClick={() => moveDown?.fn()}>
-            <Icon.FiArrowDown />
+            <FiArrowDown />
           </button>
         ) : null}
       </div>
@@ -66,7 +67,7 @@ export default function FormCard({
                 deleteField?.fn();
               }}
               color="secondary">
-              <Icon.FiTrash className="h-4 w-4 text-gray-400" />
+              <FiTrash className="h-4 w-4 text-gray-400" />
             </button>
           ) : null}
         </div>
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index e98e6dec04..ca1d699bdd 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -2,8 +2,8 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { FiAlertCircle, FiCheck } from "@calcom/ui/components/icon";
 
-import { Icon } from "../icon";
 import { DialogClose, DialogContent } from "./Dialog";
 
 export type ConfirmationDialogContentProps = {
@@ -38,17 +38,17 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <Icon.FiAlertCircle className="h-5 w-5 text-red-600" />
+                <FiAlertCircle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
               <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <Icon.FiAlertCircle className="h-5 w-5 text-orange-600" />
+                <FiAlertCircle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <Icon.FiCheck className="h-5 w-5 text-green-600" />
+                <FiCheck 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 ba54d99dbb..4c3db3e31e 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -1,5 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Icon } from "@calcom/ui";
+import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui";
+import { FiChevronDown } from "@calcom/ui/components/icon";
 
 interface IAddVariablesDropdown {
   addVariable: (variable: string) => void;
@@ -18,14 +19,14 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
             <>
               <div className="hidden sm:flex">
                 {t("add_variable")}
-                <Icon.FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+                <FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
               </div>
               <div className="block sm:hidden">+</div>
             </>
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <Icon.FiChevronDown className="mt-[2px] ml-1 h-4 w-4" />
+              <FiChevronDown 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 ec9fad5513..2db765be53 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -29,15 +29,8 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
-import {
-  Icon,
-  Dropdown,
-  DropdownMenuTrigger,
-  DropdownMenuItem,
-  DropdownItem,
-  DropdownMenuContent,
-  Button,
-} from "@calcom/ui";
+import { Dropdown, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent, Button } from "@calcom/ui";
+import { FiChevronDown } from "@calcom/ui/components/icon";
 
 import { TextEditorProps } from "../Editor";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
@@ -407,7 +400,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   <span className="text hidden text-gray-700 sm:flex">
                     {blockTypeToBlockName[blockType as keyof BlockType]}
                   </span>
-                  <Icon.FiChevronDown className="ml-2 h-4 w-4 text-gray-700" />
+                  <FiChevronDown className="ml-2 h-4 w-4 text-gray-700" />
                 </>
               </DropdownMenuTrigger>
               <DropdownMenuContent>
diff --git a/packages/ui/components/empty-screen/empty-screen.stories.mdx b/packages/ui/components/empty-screen/empty-screen.stories.mdx
index 48ffc5976c..2b9d4ff951 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 { Icon } from "@calcom/ui";
+import { FiCalendar } from "@calcom/ui/components/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={Icon.FiCalendar}
+          Icon={FiCalendar}
           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 e3c70df139..eae568e0a2 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -2,7 +2,8 @@
 import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
 import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
 
-import { Icon } from "../../..";
+import { FiArrowRight, FiCalendar, FiChevronLeft, FiChevronRight } from "@calcom/ui/components/icon";
+
 import "./styles.css";
 
 type Props = {
@@ -19,14 +20,14 @@ const DateRangePicker = ({ disabled, startDate, endDate, onDatesChange }: Props)
         disabled={disabled || false}
         className="rounded-sm border-gray-300 text-sm"
         clearIcon={null}
-        calendarIcon={<Icon.FiCalendar className="h-4 w-4 text-gray-500" />}
-        rangeDivider={<Icon.FiArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
+        calendarIcon={<FiCalendar className="h-4 w-4 text-gray-500" />}
+        rangeDivider={<FiArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
         value={[startDate, endDate]}
         onChange={([startDate, endDate]: [Date, Date]) => {
           if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });
         }}
-        nextLabel={<Icon.FiChevronRight className="h-4 w-4 text-gray-500" />}
-        prevLabel={<Icon.FiChevronLeft className="h-4 w-4 text-gray-500" />}
+        nextLabel={<FiChevronRight className="h-4 w-4 text-gray-500" />}
+        prevLabel={<FiChevronLeft className="h-4 w-4 text-gray-500" />}
       />
     </>
   );
diff --git a/packages/ui/components/form/datepicker/DatePicker.tsx b/packages/ui/components/form/datepicker/DatePicker.tsx
index c87fa16611..dde29678dd 100644
--- a/packages/ui/components/form/datepicker/DatePicker.tsx
+++ b/packages/ui/components/form/datepicker/DatePicker.tsx
@@ -3,7 +3,7 @@ import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
 import classNames from "@calcom/lib/classNames";
-import { Icon } from "@calcom/ui";
+import { FiCalendar } from "@calcom/ui/components/icon";
 
 type Props = {
   date: Date;
@@ -22,7 +22,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
       )}
       calendarClassName="rounded-md"
       clearIcon={null}
-      calendarIcon={<Icon.FiCalendar className="h-5 w-5 rounded-md text-gray-500" />}
+      calendarIcon={<FiCalendar className="h-5 w-5 rounded-md text-gray-500" />}
       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 5b6c2328be..8db1cb0af4 100644
--- a/packages/ui/components/form/inputs/HintOrErrors.tsx
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -1,6 +1,6 @@
 import { FieldValues, useFormContext } from "react-hook-form";
 
-import { Icon } from "../../../components/icon";
+import { FiCheck, FiCircle, FiInfo, FiX } from "@calcom/ui/components/icon";
 
 export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   hintErrors?: string[];
@@ -48,12 +48,12 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
                 className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
                 {error !== undefined ? (
                   submitted ? (
-                    <Icon.FiX size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                    <FiX size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
                   ) : (
-                    <Icon.FiCircle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                    <FiCircle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
                   )
                 ) : (
-                  <Icon.FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                  <FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
                 )}
                 {t(`${fieldName}_hint_${key}`)}
               </li>
@@ -68,7 +68,7 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
   if (fieldErrors) {
     return (
       <div className="text-gray mt-2 flex items-center text-sm text-red-700">
-        <Icon.FiInfo className="mr-1 h-3 w-3" />
+        <FiInfo className="mr-1 h-3 w-3" />
         <>{fieldErrors.message}</>
       </div>
     );
@@ -86,9 +86,9 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
           return (
             <li key={key} className={!!dirty ? "text-green-600" : ""}>
               {!!dirty ? (
-                <Icon.FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
+                <FiCheck size="12" strokeWidth="3" className="-ml-1 inline-block ltr:mr-2 rtl:ml-2" />
               ) : (
-                <Icon.FiCircle fill="currentColor" size="5" className="inline-block ltr:mr-2 rtl:ml-2" />
+                <FiCircle 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 95e7d63123..e12e55356b 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -4,8 +4,9 @@ import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn
 import classNames from "@calcom/lib/classNames";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { FiEye, FiEyeOff, FiX } from "@calcom/ui/components/icon";
 
-import { Alert, Icon, showToast, Skeleton, Tooltip, UnstyledSelect } from "../../..";
+import { Alert, showToast, Skeleton, Tooltip, UnstyledSelect } from "../../..";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
 
@@ -162,7 +163,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
             </Addon>
           )}
           {type === "search" && inputValue?.toString().length > 0 && (
-            <Icon.FiX
+            <FiX
               className="absolute top-2.5 h-4 w-4 cursor-pointer text-gray-500 ltr:right-2 rtl:left-2"
               onClick={(e) => {
                 setInputValue("");
@@ -220,9 +221,9 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
               type="button"
               onClick={() => toggleIsPasswordVisible()}>
               {isPasswordVisible ? (
-                <Icon.FiEyeOff className="h-4 stroke-[2.5px]" />
+                <FiEyeOff className="h-4 stroke-[2.5px]" />
               ) : (
-                <Icon.FiEye className="h-4 stroke-[2.5px]" />
+                <FiEye 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 d241ab6e7b..8e44189af5 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -12,8 +12,8 @@ import {
 } from "react-select";
 
 import { classNames } from "@calcom/lib";
+import { FiCheck } from "@calcom/ui/components/icon";
 
-import { Icon } from "../../../components/icon";
 import { UpgradeTeamsBadge } from "../../badge";
 
 export const InputComponent = <
@@ -62,7 +62,7 @@ export const OptionComponent = <
       <>
         <span className="mr-auto">{props.label}</span>
         {(props.data as unknown as ExtendedOption).needsUpgrade && <UpgradeTeamsBadge />}
-        {props.isSelected && <Icon.FiCheck className="ml-2 h-4 w-4" />}
+        {props.isSelected && <FiCheck className="ml-2 h-4 w-4" />}
       </>
     </reactSelectComponents.Option>
   );
diff --git a/packages/ui/components/form/select/select.stories.mdx b/packages/ui/components/form/select/select.stories.mdx
index c67ff5a14a..0e6aecc995 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 { Icon } from "@calcom/ui";
+import { FiPlus } from "@calcom/ui/components/icon";
 
 import {SelectField} from "./Select"
 
@@ -88,7 +88,7 @@ const BadSelect = props => (
 )
 
 // Good: Custom component declared outside of the Select scope
-const Control = <IconLeading icon={Icon.FiPlus}/>
+const Control = <IconLeading icon={FiPlus}/>
 
 const GoodSelect = props => <Select {...props} components={{ Control }} />
 
diff --git a/packages/ui/components/icon/Icon.tsx b/packages/ui/components/icon/Icon.tsx
index 880de3cb91..78c2591c03 100644
--- a/packages/ui/components/icon/Icon.tsx
+++ b/packages/ui/components/icon/Icon.tsx
@@ -1,18 +1,10 @@
-// if feather icon is missing, use "@heroicons/react/outline";
-import { CollectionIcon } from "@heroicons/react/outline";
-import { ShieldCheckIcon } from "@heroicons/react/outline";
-import { BadgeCheckIcon } from "@heroicons/react/outline";
-import { ClipboardCopyIcon } from "@heroicons/react/outline";
-import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 // find all feather icons at https://feathericons.com/
 // github https://github.com/feathericons/feather
-import * as ReactIcons from "react-icons/fi";
+export * from "react-icons/fi";
 
-export const Icon = {
-  ...ReactIcons,
-  CollectionIcon,
-  ShieldCheckIcon,
-  BadgeCheckIcon,
-  ClipboardCopyIcon,
-  StarIconSolid,
-};
+// if feather icon is missing, use "@heroicons/react/outline";
+export { CollectionIcon } from "@heroicons/react/outline";
+export { ShieldCheckIcon } from "@heroicons/react/outline";
+export { BadgeCheckIcon } from "@heroicons/react/outline";
+export { ClipboardCopyIcon } from "@heroicons/react/outline";
+export { StarIcon as StarIconSolid } from "@heroicons/react/solid";
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 18a374fe39..2744ce3ccf 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -5,8 +5,8 @@ import { ComponentProps, Fragment } from "react";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
+import { FiChevronRight, FiExternalLink } from "@calcom/ui/components/icon";
 
-import { Icon } from "../../..";
 import { Skeleton } from "../../skeleton";
 
 export type VerticalTabItemProps = {
@@ -66,7 +66,7 @@ const VerticalTabItem = function ({
                 <Skeleton title={t(name)} as="p" className="max-w-36 min-h-4 truncate">
                   {t(name)}
                 </Skeleton>
-                {props.isExternalLink ? <Icon.FiExternalLink /> : null}
+                {props.isExternalLink ? <FiExternalLink /> : null}
               </span>
               {info && (
                 <Skeleton as="p" title={t(info)} className="max-w-44 mt-1 truncate text-xs font-normal">
@@ -76,7 +76,7 @@ const VerticalTabItem = function ({
             </div>
             {!disableChevron && isCurrent && (
               <div className="ml-auto self-center">
-                <Icon.FiChevronRight
+                <FiChevronRight
                   width={20}
                   height={20}
                   className="h-auto w-[20px] stroke-[1.5px] text-gray-700"
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index 04f92f2318..be7359a8a4 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -2,7 +2,7 @@ import * as Popover from "@radix-ui/react-popover";
 import React from "react";
 
 import { classNames } from "@calcom/lib";
-import { Icon } from "@calcom/ui";
+import { FiChevronDown } from "@calcom/ui/components/icon";
 
 export const AnimatedPopover = ({
   text,
@@ -52,7 +52,7 @@ export const AnimatedPopover = ({
                 <div className="flex h-4 w-4 items-center justify-center rounded-full">{count}</div>
               )}
             </div>
-            <Icon.FiChevronDown
+            <FiChevronDown
               className={classNames("mt-auto 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 b66949df7e..8b814c87c7 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -6,8 +6,8 @@ import {
   isPreviousDayInTimezone,
   sortByTimezone,
 } from "@calcom/lib/date-fns";
+import { FiGlobe } from "@calcom/ui/components/icon";
 
-import { Icon } from "../icon";
 import { Attendee } from ".prisma/client";
 
 interface MeetingTimeInTimezonesProps {
@@ -55,7 +55,7 @@ const MeetingTimeInTimezones = ({
       <Popover.Trigger
         onClick={preventBubbling}
         className="popover-button invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm text-gray-900 transition-colors hover:bg-gray-200 focus:bg-gray-200 group-hover:visible">
-        <Icon.FiGlobe />
+        <FiGlobe />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index 73436fb0b8..b1e0372330 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -10,8 +10,8 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
   ButtonBaseProps,
-  Icon,
 } from "@calcom/ui";
+import { FiChevronDown, FiMoreHorizontal } from "@calcom/ui/components/icon";
 
 export type ActionType = {
   id: string;
@@ -45,7 +45,7 @@ export const DropdownActions = ({
     <Dropdown>
       {!actionTrigger ? (
         <DropdownMenuTrigger asChild>
-          <Button type="button" color="secondary" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
+          <Button type="button" color="secondary" variant="icon" StartIcon={FiMoreHorizontal} />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
@@ -84,7 +84,7 @@ export const TableActions: FC<Props> = ({ actions }) => {
               href={action.href}
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
-              {...(action?.actions ? { EndIcon: Icon.FiChevronDown } : null)}
+              {...(action?.actions ? { EndIcon: FiChevronDown } : 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 0d8aaee563..c85af2af29 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 { Icon } from "@calcom/ui";
+import { FiCheck, FiInfo } from "@calcom/ui/components/icon";
 
 type IToast = {
   message: string;
@@ -15,7 +15,7 @@ export const SuccessToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <Icon.FiCheck className="h-4 w-4" />
+      <FiCheck className="h-4 w-4" />
     </span>
     <p>{message}</p>
   </div>
@@ -28,7 +28,7 @@ export const ErrorToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <Icon.FiInfo className="h-4 w-4" />
+      <FiInfo className="h-4 w-4" />
     </span>
     <p>{message}</p>
   </div>
@@ -41,7 +41,7 @@ export const WarningToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <Icon.FiInfo className="h-4 w-4" />
+      <FiInfo className="h-4 w-4" />
     </span>
     <p>{message}</p>
   </div>
@@ -54,7 +54,7 @@ export const DefaultToast = ({ message, toastVisible }: IToast) => (
       toastVisible && "animate-fade-in-up"
     )}>
     <span>
-      <Icon.FiCheck className="h-4 w-4" />
+      <FiCheck 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 8f5cf0b19f..3ade297c7e 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -1,10 +1,9 @@
-import { ExclamationIcon } from "@heroicons/react/outline";
 import { XIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import noop from "lodash/noop";
 import { ReactNode } from "react";
 
-import { Icon } from "@calcom/ui";
+import { FiAlertTriangle, FiInfo } from "@calcom/ui/components/icon";
 
 export type TopBannerProps = {
   text: string;
@@ -31,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="flex flex-col items-start justify-center gap-2 text-left font-sans text-sm font-medium leading-4 text-gray-900 lg:flex-row lg:items-center">
           {variant === "error" && (
-            <Icon.FiAlertTriangle className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
+            <FiAlertTriangle className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
           )}
           {variant === "warning" && (
-            <Icon.FiInfo className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
+            <FiInfo className="h-4 w-4 stroke-[2.5px] text-black" aria-hidden="true" />
           )}
           {text}
         </p>
diff --git a/packages/ui/form/AddressInput.tsx b/packages/ui/form/AddressInput.tsx
index ddc4efaf19..52d3ffbdfd 100644
--- a/packages/ui/form/AddressInput.tsx
+++ b/packages/ui/form/AddressInput.tsx
@@ -2,8 +2,7 @@ import { UseFormReturn } from "react-hook-form";
 import { Props } from "react-phone-number-input/react-hook-form";
 
 import { EventLocationType } from "@calcom/app-store/locations";
-
-import { Icon } from "../components/icon";
+import { FiMapPin } from "@calcom/ui/components/icon";
 
 type BookingFormValues = {
   name: string;
@@ -36,7 +35,7 @@ export type AddressInputProps<FormValues> = Props<
 function AddressInput<FormValues>({ bookingForm, name, className, ...rest }: AddressInputProps<FormValues>) {
   return (
     <div className="relative ">
-      <Icon.FiMapPin color="#D2D2D2" className="absolute top-1/2 left-0.5 ml-3 h-6 -translate-y-1/2" />
+      <FiMapPin color="#D2D2D2" className="absolute top-1/2 left-0.5 ml-3 h-6 -translate-y-1/2" />
       <input
         {...rest}
         {...bookingForm.register("attendeeAddress")}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 217cf7bad1..7f4ab4d00b 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -73,7 +73,6 @@ export type { TopBannerProps } from "./components/top-banner";
 export { AnimatedPopover, MeetingTimeInTimezones } from "./components/popover";
 export { TableActions, DropdownActions } from "./components/table/TableActions";
 export type { ActionType } from "./components/table/TableActions";
-export { Icon } from "./components/icon";
 export { ErrorBoundary } from "./components/errorBoundary";
 export { Logo } from "./components/logo";
 export { Alert } from "./components/alert";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6d4cd7b648..4fde5eac1c 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -3,7 +3,10 @@
   "sideEffects": false,
   "version": "0.0.0",
   "main": "./index.tsx",
-  "exports": "./index.tsx",
+  "exports": {
+    ".": "./index.tsx",
+    "./components/icon": "./components/icon/index.ts"
+  },
   "types": "./index.tsx",
   "license": "MIT",
   "scripts": {