v2.5.5

This reverts commit 4f293edb6b.

.gitignore

@@ -86,3 +86,4 @@ apps/storybook/build-storybook.log
 apps/api
 apps/website
 apps/console
+apps/auth

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>

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`}

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,
   },
 ];

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>
             }

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>

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(),
                 })}

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>

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") : ""}

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,
   },
 ];
 

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}

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>
@@ -123,9 +124,10 @@ const BookingDescription: FC<Props> = (props) => {
         <div
           className={classNames(
             "flex flex-nowrap text-sm font-medium",
-            isBookingPage && "dark:text-darkgray-600 text-gray-600"
+            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]"

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"
                 />

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">

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}

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">

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";
 
@@ -204,10 +205,10 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
-      <DialogContent disableOverflow>
+      <DialogContent>
         <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">
@@ -288,30 +289,31 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                       name="locationType"
                       control={locationFormMethods.control}
                       render={() => (
-                        <LocationSelect
-                          maxMenuHeight={300}
-                          name="location"
-                          defaultValue={selection}
-                          options={locationOptions}
-                          isSearchable
-                          className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
-                          onChange={(val) => {
-                            if (val) {
-                              locationFormMethods.setValue("locationType", val.value);
-                              locationFormMethods.unregister([
-                                "locationLink",
-                                "locationAddress",
-                                "locationPhoneNumber",
-                              ]);
-                              locationFormMethods.clearErrors([
-                                "locationLink",
-                                "locationPhoneNumber",
-                                "locationAddress",
-                              ]);
-                              setSelectedLocation?.(val);
-                            }
-                          }}
-                        />
+                        <div className="py-4">
+                          <LocationSelect
+                            maxMenuHeight={300}
+                            name="location"
+                            defaultValue={selection}
+                            options={locationOptions}
+                            isSearchable
+                            onChange={(val) => {
+                              if (val) {
+                                locationFormMethods.setValue("locationType", val.value);
+                                locationFormMethods.unregister([
+                                  "locationLink",
+                                  "locationAddress",
+                                  "locationPhoneNumber",
+                                ]);
+                                locationFormMethods.clearErrors([
+                                  "locationLink",
+                                  "locationPhoneNumber",
+                                  "locationAddress",
+                                ]);
+                                setSelectedLocation?.(val);
+                              }
+                            }}
+                          />
+                        </div>
                       )}
                     />
                   );

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")} />

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">

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;
@@ -77,7 +78,7 @@ const CustomInputTypeForm: FC<Props> = (props) => {
               defaultValue={selectedInputOption}
               options={inputOptions}
               isSearchable={false}
-              className="mt-1 mb-2 block w-full min-w-0 flex-1  text-sm"
+              className="mt-1 mb-2 block w-full min-w-0 flex-1 text-sm"
               onChange={(option) => option && field.onChange(option.value)}
               value={selectedInputOption}
               onBlur={field.onBlur}
@@ -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" });

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

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={

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);

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";
 
@@ -138,11 +139,13 @@ export const EventSetupTab = (
       return true;
     });
 
+    const defaultValue = locationOptions.find((item) => item.label === "video")?.options;
     return (
       <div className="w-full">
         {validLocations.length === 0 && (
           <div className="flex">
             <LocationSelect
+              defaultValue={defaultValue}
               placeholder={t("select")}
               options={locationOptions}
               isSearchable={false}
@@ -198,10 +201,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 +213,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 +230,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>

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>
@@ -130,7 +131,10 @@ export const EventTeamWebhooksTab = ({
 
           {/* New webhook dialog */}
           <Dialog open={createModalOpen} onOpenChange={(isOpen) => !isOpen && setCreateModalOpen(false)}>
-            <DialogContent title={t("create_webhook")} description={t("create_webhook_team_event_type")}>
+            <DialogContent
+              enableOverflow
+              title={t("create_webhook")}
+              description={t("create_webhook_team_event_type")}>
               <WebhookForm
                 onSubmit={onCreateWebhook}
                 onCancel={() => setCreateModalOpen(false)}

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

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>

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">

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>

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}

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>
     </>

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>
             )}

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")} />

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"
           />

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}

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "2.5.3",
+  "version": "2.5.5",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

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>

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");

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}

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>

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"

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>
                   }

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">

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>

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">

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>

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>
           }

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 />}

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

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(),

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>
@@ -518,14 +527,13 @@ const EventTypeListHeading = ({
 }: EventTypeListHeadingProps): JSX.Element => {
   return (
     <div className="mb-4 flex items-center space-x-2">
-      <Link href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}>
-        <Avatar
-          alt={profile?.name || ""}
-          imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
-          size="sm"
-          className="mt-1 inline ltr:mr-2 rtl:ml-2"
-        />
-      </Link>
+      <Avatar
+        alt={profile?.name || ""}
+        href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
+        imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
+        size="md"
+        className="mt-1 inline-flex justify-center"
+      />
       <div>
         <Link
           href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
@@ -536,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>
@@ -557,7 +565,7 @@ const CreateFirstEventTypeView = () => {
 
   return (
     <EmptyScreen
-      Icon={Icon.FiLink}
+      Icon={FiLink}
       headline={t("new_event_type_heading")}
       description={t("new_event_type_description")}
     />

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>

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 />}

apps/web/pages/settings/my-account/appearance.tsx

@@ -4,6 +4,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout";
 import { APP_NAME } from "@calcom/lib/constants";
+import { useHasTeamPlan } from "@calcom/lib/hooks/useHasTeamPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import {
@@ -49,7 +50,8 @@ const AppearanceView = () => {
   const session = useSession();
   const utils = trpc.useContext();
   const { data: user, isLoading } = trpc.viewer.me.useQuery();
-  const { data: dataHasTeamPlan, isLoading: isLoadingHasTeamPlan } = trpc.viewer.teams.hasTeamPlan.useQuery();
+
+  const { isLoading: isTeamPlanStatusLoading, hasTeamPlan } = useHasTeamPlan();
 
   const formMethods = useForm({
     defaultValues: {
@@ -74,7 +76,7 @@ const AppearanceView = () => {
     },
   });
 
-  if (isLoading || isLoadingHasTeamPlan)
+  if (isLoading || isTeamPlanStatusLoading)
     return <SkeletonLoader title={t("appearance")} description={t("appearance_description")} />;
 
   if (!user) return null;
@@ -164,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
@@ -182,18 +184,18 @@ const AppearanceView = () => {
                   <p className="font-semibold ltr:mr-2 rtl:ml-2">
                     {t("disable_cal_branding", { appName: APP_NAME })}
                   </p>
-                  {!dataHasTeamPlan?.hasTeamPlan && <UpgradeTeamsBadge />}
+                  <UpgradeTeamsBadge />
                 </div>
                 <p className="mt-0.5  text-gray-600">{t("removes_cal_branding", { appName: APP_NAME })}</p>
               </div>
               <div className="flex-none">
                 <Switch
                   id="hideBranding"
-                  disabled={!dataHasTeamPlan?.hasTeamPlan}
+                  disabled={!hasTeamPlan}
                   onCheckedChange={(checked) =>
                     formMethods.setValue("hideBranding", checked, { shouldDirty: true })
                   }
-                  checked={!dataHasTeamPlan?.hasTeamPlan ? false : value}
+                  checked={hasTeamPlan ? value : false}
                 />
               </div>
             </div>

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")}

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")}

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"

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}>

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")}

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>

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>

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>

apps/web/playwright/fixtures/users.ts

@@ -1,6 +1,6 @@
 import type { Page, WorkerInfo } from "@playwright/test";
 import type Prisma from "@prisma/client";
-import { Prisma as PrismaType } from "@prisma/client";
+import { Prisma as PrismaType, MembershipRole } from "@prisma/client";
 import { hash } from "bcryptjs";
 
 import dayjs from "@calcom/dayjs";
@@ -34,6 +34,27 @@ const seededForm = {
 
 type UserWithIncludes = PrismaType.UserGetPayload<typeof userWithEventTypes>;
 
+const createTeamAndAddUser = async ({ user }: { user: { id: number; role?: MembershipRole } }) => {
+  const team = await prisma.team.create({
+    data: {
+      name: "",
+      slug: `team-${Date.now()}`,
+    },
+  });
+  if (!team) {
+    return;
+  }
+
+  const { role = MembershipRole.OWNER, id: userId } = user;
+  await prisma.membership.create({
+    data: {
+      teamId: team.id,
+      userId,
+      role: role,
+    },
+  });
+};
+
 // creates a user fixture instance and stores the collection
 export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
   const store = { users: [], page } as { users: UserFixture[]; page: typeof page };
@@ -42,6 +63,7 @@ export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
       opts?: CustomUserOpts | null,
       scenario: {
         seedRoutingForms?: boolean;
+        hasTeam?: true;
       } = {}
     ) => {
       const _user = await prisma.user.create({
@@ -193,6 +215,9 @@ export const createUsersFixture = (page: Page, workerInfo: WorkerInfo) => {
         where: { id: _user.id },
         include: userIncludes,
       });
+      if (scenario.hasTeam) {
+        await createTeamAndAddUser({ user: { id: user.id, role: "OWNER" } });
+      }
       const userFixture = createUserFixture(user, store.page!);
       store.users.push(userFixture);
       return userFixture;

apps/web/public/static/locales/en/common.json

@@ -24,6 +24,7 @@
   "rejection_confirmation": "Reject the booking",
   "manage_this_event": "Manage this event",
   "invite_team_member": "Invite team member",
+  "invite_team_notifcation_badge":"Inv.",
   "your_event_has_been_scheduled": "Your event has been scheduled",
   "your_event_has_been_scheduled_recurring": "Your recurring event has been scheduled",
   "accept_our_license": "Accept our license by changing the .env variable <1>NEXT_PUBLIC_LICENSE_CONSENT</1> to '{{agree}}'.",
@@ -1238,6 +1239,7 @@
   "to": "To",
   "workflow_turned_on_successfully": "{{workflowName}} workflow turned {{offOn}} successfully",
   "download_responses": "Download Responses",
+  "download_responses_description": "Download all responses to your form in CSV format.",
   "download": "Download",
   "create_your_first_form": "Create your first form",
   "create_your_first_form_description": "With Routing Forms you can ask qualifying questions and route to the correct person or event type.",
@@ -1280,6 +1282,8 @@
   "routing_forms_send_email_owner": "Send Email to Owner",
   "routing_forms_send_email_owner_description": "Sends an email to the owner when the form is submitted",
   "add_new_form": "Add new form",
+  "create_your_first_route": "Create your first route",
+  "route_to_the_right_person": "Route to the right person based on the answers to your form",
   "form_description": "Create your form to route a booker",
   "copy_link_to_form": "Copy link to form",
   "theme": "Theme",
@@ -1310,6 +1314,7 @@
   "password_reset_leading": "If you don't receive an email soon, check that the email address you entered is correct, check your spam folder or reach out to support if the issue persists.",
   "password_updated": "Password updated!",
   "pending_payment": "Pending payment",
+  "pending_invites":"Pending Invites",
   "confirmation_page_rainbow": "Token gate your event with tokens or NFTs on Ethereum, Polygon, and more.",
   "not_on_cal": "Not on {{appName}}",
   "no_calendar_installed": "No calendar installed",
@@ -1514,5 +1519,9 @@
   "install_google_meet": "Install Google Meet",
   "install_google_calendar": "Install Google Calendar",
   "sender_name": "Sender name",
-  "no_recordings_found": "No recordings found"
+  "no_recordings_found": "No recordings found",
+  "reporting": "Reporting",
+  "reporting_feature": "See all incoming from data and download it as a CSV",
+  "teams_plan_required": "Teams plan required",
+  "routing_forms_are_a_great_way": "Routing forms are a great way to route your incoming leads to the right person. Upgrade to a Teams plan to access this feature."
 }

git-init.sh

@@ -1,7 +1,7 @@
 #!/bin/sh
-# If there's a `.gitmodule` file skip this script
+# Skip if `.gitmodules` exists
 [ -f .gitmodules ] && {
-  echo ".gitmodules already initializied"
+  echo ".gitmodules already initialized"
   exit 0
 }
 

git-setup.sh

@@ -5,11 +5,13 @@ if [ $# -eq 0 ]; then
   echo "Usage: git-setup.sh <api,console,website>"
   exit 1
 fi
+# Get remote url to support either https or ssh
+remote_url=$(echo $(git config --get remote.origin.url) | sed 's![^/]*$!!')
 # Loop through the requested modules
 for module in "$@"; do
   echo "Setting up '$module' module..."
   # Set the project git URL
-  project=$(echo "git@github.com:calcom/$module.git")
+  project=$remote_url$module.git
   # Check if we have access to the module
   if [ "$(git ls-remote "$project" 2>/dev/null)" ]; then
     echo "You have access to '${module}'"
@@ -18,7 +20,7 @@ for module in "$@"; do
     # Prevents duplicate entries
     git config -f .gitmodules --unset-all "submodule.apps/$module.branch"
     # Add the submodule
-    git submodule add --force "git@github.com:calcom/$module.git" "apps/$module"
+    git submodule add --force $project "apps/$module"
     # Set the default branch to main
     git config -f .gitmodules --add "submodule.apps/$module.branch" main
     # Adding the subdmoule ignores the `.gitignore` so a reset is needed

packages/app-store/_components/EventTypeAppCardInterface.tsx

@@ -16,7 +16,11 @@ export const EventTypeAppCard = (props: {
   return (
     <ErrorBoundary message={`There is some problem with ${app.name} App`}>
       <EventTypeAppContext.Provider value={[getAppData, setAppData]}>
-        <DynamicComponent slug={app.slug} componentMap={EventTypeAddonMap} {...props} />
+        <DynamicComponent
+          slug={app.slug === "stripe" ? "stripepayment" : app.slug}
+          componentMap={EventTypeAddonMap}
+          {...props}
+        />
       </EventTypeAppContext.Provider>
     </ErrorBoundary>
   );

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>

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,
     },
   ];
 };

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

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>

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>

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"

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={

packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx

@@ -1,8 +1,12 @@
 // TODO: i18n
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import SkeletonLoaderTeamList from "@calcom/features/ee/teams/components/SkeletonloaderTeamList";
 import Shell, { ShellMain } from "@calcom/features/shell/Shell";
+import { UpgradeTip } from "@calcom/features/tips";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import useApp from "@calcom/lib/hooks/useApp";
+import { useHasTeamPlan } from "@calcom/lib/hooks/useHasTeamPlan";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AppGetServerSidePropsContext, AppPrisma, AppUser } from "@calcom/types/AppGetServerSideProps";
@@ -11,11 +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";
 
@@ -27,156 +49,218 @@ export default function RoutingForms({
   appUrl,
 }: inferSSRProps<typeof getServerSideProps> & { appUrl: string }) {
   const { t } = useLocale();
-  const { data: forms } = trpc.viewer.appRoutingForms.forms.useQuery(undefined, {
+  const { hasTeamPlan } = useHasTeamPlan();
+
+  const { data: forms, isLoading } = trpc.viewer.appRoutingForms.forms.useQuery(undefined, {
     initialData: forms_,
   });
 
   const { data: typeformApp } = useApp("typeform");
 
+  const features = [
+    {
+      icon: <FiFileText className="h-5 w-5 text-orange-500" />,
+      title: t("create_your_first_form"),
+      description: t("create_your_first_form_description"),
+    },
+    {
+      icon: <FiShuffle className="h-5 w-5 text-lime-500" />,
+      title: t("create_your_first_route"),
+      description: t("route_to_the_right_person"),
+    },
+    {
+      icon: <FiBarChart className="h-5 w-5 text-blue-500" />,
+      title: t("reporting"),
+      description: t("reporting_feature"),
+    },
+    {
+      icon: <FiCheckCircle className="h-5 w-5 text-teal-500" />,
+      title: t("test_routing_form"),
+      description: t("test_preview_description"),
+    },
+    {
+      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: <FiDownload className="h-5 w-5 text-violet-500" />,
+      title: t("download_responses"),
+      description: t("download_responses_description"),
+    },
+  ];
+
   function NewFormButton() {
     return (
       <FormAction
         variant="fab"
         routingForm={null}
         data-testid="new-routing-form"
-        StartIcon={Icon.FiPlus}
+        StartIcon={FiPlus}
         action="create">
         {t("new")}
       </FormAction>
     );
   }
   return (
-    <ShellMain heading="Routing Forms" CTA={<NewFormButton />} subtitle={t("routing_forms_description")}>
-      <FormActionsProvider appUrl={appUrl}>
-        <div className="-mx-4 md:-mx-8">
-          <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
-            {!forms?.length ? (
-              <EmptyScreen
-                Icon={Icon.FiGitMerge}
-                headline={t("create_your_first_form")}
-                description={t("create_your_first_form_description")}
-                buttonRaw={<NewFormButton />}
-              />
-            ) : null}
-            {forms?.length ? (
-              <div className="mb-16 overflow-hidden bg-white">
-                <List data-testid="routing-forms-list">
-                  {forms.map((form, index) => {
-                    if (!form) {
-                      return null;
-                    }
+    <ShellMain
+      heading="Routing Forms"
+      CTA={hasTeamPlan && <NewFormButton />}
+      subtitle={t("routing_forms_description")}>
+      <UpgradeTip
+        dark
+        title={t("teams_plan_required")}
+        description={t("routing_forms_are_a_great_way")}
+        features={features}
+        background="/routing-form-banner-background.jpg"
+        isParentLoading={isLoading && <SkeletonLoaderTeamList />}
+        buttons={
+          <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <ButtonGroup>
+              <Button color="secondary" href={`${WEBAPP_URL}/settings/teams/new`}>
+                {t("upgrade")}
+              </Button>
+              <Button
+                color="minimal"
+                className="!bg-transparent text-white opacity-50 hover:opacity-100"
+                href="https://go.cal.com/teams-video"
+                target="_blank">
+                {t("learn_more")}
+              </Button>
+            </ButtonGroup>
+          </div>
+        }>
+        <FormActionsProvider appUrl={appUrl}>
+          <div className="-mx-4 md:-mx-8">
+            <div className="mb-10 w-full px-4 pb-2 sm:px-6 md:px-8">
+              {!forms?.length ? (
+                <EmptyScreen
+                  Icon={FiGitMerge}
+                  headline={t("create_your_first_form")}
+                  description={t("create_your_first_form_description")}
+                  buttonRaw={<NewFormButton />}
+                />
+              ) : null}
+              {forms?.length ? (
+                <div className="mb-16 overflow-hidden bg-white">
+                  <List data-testid="routing-forms-list">
+                    {forms.map((form, index) => {
+                      if (!form) {
+                        return null;
+                      }
 
-                    const description = form.description || "";
-                    const disabled = form.disabled;
-                    form.routes = form.routes || [];
-                    const fields = form.fields || [];
-                    return (
-                      <ListLinkItem
-                        key={index}
-                        href={appUrl + "/form-edit/" + form.id}
-                        heading={form.name}
-                        disabled={disabled}
-                        subHeading={description}
-                        actions={
-                          <>
-                            <FormAction className="self-center" action="toggle" routingForm={form} />
-                            <ButtonGroup combined>
-                              <Tooltip content={t("preview")}>
+                      const description = form.description || "";
+                      const disabled = form.disabled;
+                      form.routes = form.routes || [];
+                      const fields = form.fields || [];
+                      return (
+                        <ListLinkItem
+                          key={index}
+                          href={appUrl + "/form-edit/" + form.id}
+                          heading={form.name}
+                          disabled={disabled}
+                          subHeading={description}
+                          actions={
+                            <>
+                              <FormAction className="self-center" action="toggle" routingForm={form} />
+                              <ButtonGroup combined>
+                                <Tooltip content={t("preview")}>
+                                  <FormAction
+                                    action="preview"
+                                    routingForm={form}
+                                    target="_blank"
+                                    StartIcon={FiExternalLink}
+                                    color="secondary"
+                                    variant="icon"
+                                    disabled={disabled}
+                                  />
+                                </Tooltip>
                                 <FormAction
-                                  action="preview"
                                   routingForm={form}
-                                  target="_blank"
-                                  StartIcon={Icon.FiExternalLink}
+                                  action="copyLink"
                                   color="secondary"
                                   variant="icon"
+                                  StartIcon={FiLink}
                                   disabled={disabled}
+                                  tooltip={t("copy_link_to_form")}
                                 />
-                              </Tooltip>
-                              <FormAction
-                                routingForm={form}
-                                action="copyLink"
-                                color="secondary"
-                                variant="icon"
-                                StartIcon={Icon.FiLink}
-                                disabled={disabled}
-                                tooltip={t("copy_link_to_form")}
-                              />
-                              <FormActionsDropdown form={form}>
-                                <FormAction
-                                  action="edit"
-                                  routingForm={form}
-                                  color="minimal"
-                                  className="!flex"
-                                  StartIcon={Icon.FiEdit}>
-                                  {t("edit")}
-                                </FormAction>
-                                <FormAction
-                                  action="download"
-                                  routingForm={form}
-                                  color="minimal"
-                                  StartIcon={Icon.FiDownload}>
-                                  {t("download_responses")}
-                                </FormAction>
-                                <FormAction
-                                  action="embed"
-                                  routingForm={form}
-                                  color="minimal"
-                                  className="w-full"
-                                  StartIcon={Icon.FiCode}>
-                                  {t("embed")}
-                                </FormAction>
-                                <FormAction
-                                  action="duplicate"
-                                  routingForm={form}
-                                  color="minimal"
-                                  className="w-full"
-                                  StartIcon={Icon.FiCopy}>
-                                  {t("duplicate")}
-                                </FormAction>
-                                {typeformApp?.isInstalled ? (
+                                <FormActionsDropdown form={form}>
                                   <FormAction
-                                    data-testid="copy-redirect-url"
+                                    action="edit"
                                     routingForm={form}
-                                    action="copyRedirectUrl"
                                     color="minimal"
-                                    type="button"
-                                    StartIcon={Icon.FiLink}>
-                                    {t("Copy Typeform Redirect Url")}
+                                    className="!flex"
+                                    StartIcon={FiEdit}>
+                                    {t("edit")}
                                   </FormAction>
-                                ) : null}
-                                <DropdownMenuSeparator />
-                                <FormAction
-                                  action="_delete"
-                                  routingForm={form}
-                                  color="destructive"
-                                  className="w-full"
-                                  StartIcon={Icon.FiTrash}>
-                                  {t("delete")}
-                                </FormAction>
-                              </FormActionsDropdown>
-                            </ButtonGroup>
-                          </>
-                        }>
-                        <div className="flex flex-wrap gap-1">
-                          <Badge variant="gray" StartIcon={Icon.FiMenu}>
-                            {fields.length} {fields.length === 1 ? "field" : "fields"}
-                          </Badge>
-                          <Badge variant="gray" StartIcon={Icon.FiGitMerge}>
-                            {form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
-                          </Badge>
-                          <Badge variant="gray" StartIcon={Icon.FiMessageCircle}>
-                            {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
-                          </Badge>
-                        </div>
-                      </ListLinkItem>
-                    );
-                  })}
-                </List>
-              </div>
-            ) : null}
+                                  <FormAction
+                                    action="download"
+                                    routingForm={form}
+                                    color="minimal"
+                                    StartIcon={FiDownload}>
+                                    {t("download_responses")}
+                                  </FormAction>
+                                  <FormAction
+                                    action="embed"
+                                    routingForm={form}
+                                    color="minimal"
+                                    className="w-full"
+                                    StartIcon={FiCode}>
+                                    {t("embed")}
+                                  </FormAction>
+                                  <FormAction
+                                    action="duplicate"
+                                    routingForm={form}
+                                    color="minimal"
+                                    className="w-full"
+                                    StartIcon={FiCopy}>
+                                    {t("duplicate")}
+                                  </FormAction>
+                                  {typeformApp?.isInstalled ? (
+                                    <FormAction
+                                      data-testid="copy-redirect-url"
+                                      routingForm={form}
+                                      action="copyRedirectUrl"
+                                      color="minimal"
+                                      type="button"
+                                      StartIcon={FiLink}>
+                                      {t("Copy Typeform Redirect Url")}
+                                    </FormAction>
+                                  ) : null}
+                                  <DropdownMenuSeparator />
+                                  <FormAction
+                                    action="_delete"
+                                    routingForm={form}
+                                    color="destructive"
+                                    className="w-full"
+                                    StartIcon={FiTrash}>
+                                    {t("delete")}
+                                  </FormAction>
+                                </FormActionsDropdown>
+                              </ButtonGroup>
+                            </>
+                          }>
+                          <div className="flex flex-wrap gap-1">
+                            <Badge variant="gray" StartIcon={FiMenu}>
+                              {fields.length} {fields.length === 1 ? "field" : "fields"}
+                            </Badge>
+                            <Badge variant="gray" StartIcon={FiGitMerge}>
+                              {form.routes.length} {form.routes.length === 1 ? "route" : "routes"}
+                            </Badge>
+                            <Badge variant="gray" StartIcon={FiMessageCircle}>
+                              {form._count.responses} {form._count.responses === 1 ? "response" : "responses"}
+                            </Badge>
+                          </div>
+                        </ListLinkItem>
+                      );
+                    })}
+                  </List>
+                </div>
+              ) : null}
+            </div>
           </div>
-        </div>
-      </FormActionsProvider>
+        </FormActionsProvider>
+      </UpgradeTip>
     </ShellMain>
   );
 }

packages/app-store/ee/routing-forms/playwright/tests/basic.e2e.ts

@@ -118,7 +118,12 @@ test.describe("Routing Forms", () => {
 
     // TODO: How to install the app just once?
     test.beforeEach(async ({ page, users }) => {
-      const user = await users.create({ username: "routing-forms" });
+      const user = await users.create(
+        { username: "routing-forms" },
+        {
+          hasTeam: true,
+        }
+      );
       await user.login();
       // Install app
       await page.goto(`/apps/routing-forms`);
@@ -148,7 +153,10 @@ test.describe("Routing Forms", () => {
       users: Fixtures["users"];
       page: Page;
     }) {
-      const user = await users.create({ username: "routing-forms" }, { seedRoutingForms: true });
+      const user = await users.create(
+        { username: "routing-forms" },
+        { seedRoutingForms: true, hasTeam: true }
+      );
       await user.login();
       // Install app
       await page.goto(`/apps/routing-forms`);

packages/app-store/ga4/config.json

@@ -12,16 +12,18 @@
   "email": "support@cal.com",
   "description": "Google Analytics is a web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand.",
   "extendsFeature": "EventType",
-  "tag": {
-    "scripts": [
-      {
-        "src": "https://www.googletagmanager.com/gtag/js?id={TRACKING_ID}",
-        "attrs": {}
-      },
-      {
-        "content": "window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '{TRACKING_ID}');"
-      }
-    ]
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "src": "https://www.googletagmanager.com/gtag/js?id={TRACKING_ID}",
+          "attrs": {}
+        },
+        {
+          "content": "window.dataLayer = window.dataLayer || [];\n      function gtag(){dataLayer.push(arguments);}\n      gtag('js', new Date());\n      gtag('config', '{TRACKING_ID}');"
+        }
+      ]
+    }
   },
   "__createdUsingCli": true
 }

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>

packages/app-store/office365video/lib/VideoApiAdapter.ts

@@ -52,7 +52,7 @@ const o365Auth = async (credential: CredentialPayload) => {
   if (!client_id) throw new HttpError({ statusCode: 400, message: "MS teams client_id missing." });
   if (!client_secret) throw new HttpError({ statusCode: 400, message: "MS teams client_secret missing." });
 
-  const isExpired = (expiryDate: number) => expiryDate < Math.round(+new Date() / 1000);
+  const isExpired = (expiryDate: number) => expiryDate < Math.round(+new Date());
 
   const o365AuthCredentials = credential.key as unknown as O365AuthCredentials;
 
@@ -69,9 +69,10 @@ const o365Auth = async (credential: CredentialPayload) => {
     });
 
     const responseBody = await handleErrorsJson<ITokenResponse>(response);
+
     if (responseBody?.error) {
       console.error(responseBody);
-      throw new HttpError({ statusCode: 500, message: "Error contacting MS Teams" });
+      throw new HttpError({ statusCode: 500, message: `Error contacting MS Teams: ${responseBody.error}` });
     }
     // set expiry date as offset from current time.
     responseBody.expiry_date = Math.round(Date.now() + (responseBody?.expires_in || 0) * 1000);
@@ -93,9 +94,9 @@ const o365Auth = async (credential: CredentialPayload) => {
 
   return {
     getToken: () =>
-      !isExpired(o365AuthCredentials.expiry_date)
-        ? Promise.resolve(o365AuthCredentials.access_token)
-        : refreshAccessToken(o365AuthCredentials.refresh_token),
+      isExpired(o365AuthCredentials.expiry_date)
+        ? refreshAccessToken(o365AuthCredentials.refresh_token)
+        : Promise.resolve(o365AuthCredentials.access_token),
   };
 };
 

packages/app-store/plausible/config.json

@@ -11,15 +11,17 @@
   "publisher": "Cal.com, Inc.",
   "email": "help@cal.com",
   "extendsFeature": "EventType",
-  "tag": {
-    "scripts": [
-      {
-        "src": "https://plausible.io/js/script.js",
-        "attrs": {
-          "data-domain": "{TRACKED_DOMAIN}"
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "src": "https://plausible.io/js/script.js",
+          "attrs": {
+            "data-domain": "{TRACKED_DOMAIN}"
+          }
         }
-      }
-    ]
+      ]
+    }
   },
   "description": "Simple, privacy-friendly Google Analytics alternative.",
   "__createdUsingCli": true

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")}

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

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

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.

packages/app-store/typeform/playwright/tests/basic.e2e.ts

@@ -8,7 +8,12 @@ import { CAL_URL } from "@calcom/lib/constants";
 import { Fixtures, test } from "@calcom/web/playwright/lib/fixtures";
 
 const installApps = async (page: Page, users: Fixtures["users"]) => {
-  const user = await users.create({ username: "routing-forms" });
+  const user = await users.create(
+    { username: "routing-forms" },
+    {
+      hasTeam: true,
+    }
+  );
   await user.login();
   await page.goto(`/apps/routing-forms`);
   await page.click('[data-testid="install-app-button"]');

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>

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")}
       />

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 })}>

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"

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")}

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"

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>

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"

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>

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>

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

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

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">

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>