v2.5.5

Revert "v2.5.4"
This reverts commit 4f293edb6b.
2023-01-24 16:54:35 +00:00 · 2023-01-24 16:54:05 +00:00 · 2023-01-24 16:52:33 +00:00 · 2023-01-24 16:10:43 +00:00 · 2023-01-24 17:05:35 +01:00 · 2023-01-24 15:47:46 +00:00
224 changed files with 1735 additions and 1579 deletions
@@ -86,3 +86,4 @@ apps/storybook/build-storybook.log
 apps/api
 apps/website
 apps/console
+apps/auth
@@ -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>
@@ -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`}
@@ -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,
  },
 ];
@@ -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>
            }
@@ -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>
@@ -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(),
                })}
@@ -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>
@@ -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") : ""}
@@ -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,
  },
 ];

@@ -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}
@@ -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]"
@@ -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"
                />
@@ -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">
@@ -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}
@@ -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">
@@ -3,7 +3,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import { useEffect } from "react";
 import { Controller, useForm, useWatch } from "react-hook-form";
-import { components } from "react-select";
 import { z } from "zod";

 import {
@@ -14,32 +13,26 @@ import {
  LocationObject,
  LocationType,
 } from "@calcom/app-store/locations";
-import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RouterOutputs, trpc } from "@calcom/trpc/react";
-import { Button, Dialog, DialogClose, 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";

 import CheckboxField from "@components/ui/form/CheckboxField";
-import Select from "@components/ui/form/Select";
+import LocationSelect, { LocationOption } from "@components/ui/form/LocationSelect";

 type BookingItem = RouterOutputs["viewer"]["bookings"]["get"]["bookings"][number];

-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
-};
-
 interface ISetLocationDialog {
  saveLocation: (newLocationType: EventLocationType["type"], details: { [key: string]: string }) => void;
-  selection?: OptionTypeBase;
+  selection?: LocationOption;
  booking?: BookingItem;
  defaultValues?: LocationObject[];
  setShowLocationModal: React.Dispatch<React.SetStateAction<boolean>>;
  isOpenDialog: boolean;
-  setSelectedLocation?: (param: OptionTypeBase | undefined) => void;
+  setSelectedLocation?: (param: LocationOption | undefined) => void;
  setEditingLocationType?: (param: string) => void;
 }

@@ -211,11 +204,11 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
  })();

  return (
-    <Dialog open={isOpenDialog}>
-      <DialogContent disableOverflow>
+    <Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
+      <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">
@@ -296,57 +289,31 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                      name="locationType"
                      control={locationFormMethods.control}
                      render={() => (
-                        <Select<{ label: string; value: string; icon?: string }>
-                          maxMenuHeight={300}
-                          name="location"
-                          defaultValue={selection}
-                          options={locationOptions}
-                          components={{
-                            Option: (props) => (
-                              <components.Option {...props}>
-                                <div className="flex items-center gap-3">
-                                  {props.data.icon && (
-                                    <img src={props.data.icon} alt="cover" className="h-3.5 w-3.5" />
-                                  )}
-                                  <span
-                                    className={classNames(
-                                      "text-sm font-medium",
-                                      props.isSelected ? "text-white" : "text-gray-900"
-                                    )}>
-                                    {props.data.label}
-                                  </span>
-                                </div>
-                              </components.Option>
-                            ),
-                          }}
-                          formatOptionLabel={(e) => (
-                            <div className="flex items-center gap-3">
-                              {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
-                              <span>{e.label}</span>
-                            </div>
-                          )}
-                          formatGroupLabel={(e) => (
-                            <p className="text-xs font-medium text-gray-600">{e.label}</p>
-                          )}
-                          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>
                      )}
                    />
                  );
@@ -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")} />
@@ -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">
@@ -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" });
@@ -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
@@ -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={
@@ -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);
@@ -12,16 +12,27 @@ 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";

 import { EditLocationDialog } from "@components/dialog/EditLocationDialog";
+import LocationSelect, {
+  SingleValueLocationOption,
+  LocationOption,
+} from "@components/ui/form/LocationSelect";

-type OptionTypeBase = {
-  label: string;
-  value: EventLocationType["type"];
-  disabled?: boolean;
+const getLocationFromType = (
+  type: EventLocationType["type"],
+  locationOptions: Pick<EventTypeSetupProps, "locationOptions">["locationOptions"]
+) => {
+  for (const locationOption of locationOptions) {
+    const option = locationOption.options.find((option) => option.value === type);
+    if (option) {
+      return option;
+    }
+  }
 };

 export const EventSetupTab = (
@@ -32,7 +43,7 @@ export const EventSetupTab = (
  const { eventType, locationOptions, team } = props;
  const [showLocationModal, setShowLocationModal] = useState(false);
  const [editingLocationType, setEditingLocationType] = useState<string>("");
-  const [selectedLocation, setSelectedLocation] = useState<OptionTypeBase | undefined>(undefined);
+  const [selectedLocation, setSelectedLocation] = useState<LocationOption | undefined>(undefined);
  const [multipleDuration, setMultipleDuration] = useState(eventType.metadata.multipleDuration);

  const multipleDurationOptions = [5, 10, 15, 20, 25, 30, 45, 50, 60, 75, 80, 90, 120, 180].map((mins) => ({
@@ -51,7 +62,8 @@ export const EventSetupTab = (
  );

  const openLocationModal = (type: EventLocationType["type"]) => {
-    setSelectedLocation(locationOptions.find((option) => option.value === type));
+    const option = getLocationFromType(type, locationOptions);
+    setSelectedLocation(option);
    setShowLocationModal(true);
  };

@@ -127,18 +139,20 @@ 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">
-            <Select
+            <LocationSelect
+              defaultValue={defaultValue}
              placeholder={t("select")}
              options={locationOptions}
              isSearchable={false}
              className="block w-full min-w-0 flex-1 rounded-sm text-sm"
-              onChange={(e) => {
+              onChange={(e: SingleValueLocationOption) => {
                if (e?.value) {
-                  const newLocationType: EventLocationType["type"] = e.value;
+                  const newLocationType = e.value;
                  const eventLocationType = getEventLocationType(newLocationType);
                  if (!eventLocationType) {
                    return;
@@ -187,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>
@@ -199,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.
@@ -216,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>
@@ -362,7 +376,9 @@ export const EventSetupTab = (
        saveLocation={saveLocation}
        defaultValues={formMethods.getValues("locations")}
        selection={
-          selectedLocation ? { value: selectedLocation.value, label: t(selectedLocation.label) } : undefined
+          selectedLocation
+            ? { value: selectedLocation.value, label: t(selectedLocation.label), icon: selectedLocation.icon }
+            : undefined
        }
        setSelectedLocation={setSelectedLocation}
        setEditingLocationType={setEditingLocationType}
@@ -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)}
@@ -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)}
@@ -245,15 +259,15 @@ function EventTypeSingleLayout({
          <VerticalDivider className="hidden lg:block" />

          <Dropdown>
-            <DropdownMenuTrigger className="block h-9 w-9 justify-center rounded-md border border-gray-200 bg-transparent text-gray-700 lg:hidden">
-              <Icon.FiMoreHorizontal className="group-hover:text-gray-800" />
+            <DropdownMenuTrigger asChild>
+              <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")}
@@ -262,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");
@@ -273,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")}
@@ -308,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
@@ -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>
@@ -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">
@@ -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>
@@ -1,51 +0,0 @@
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as Tooltip from "@radix-ui/react-tooltip";
-
-import { Maybe } from "@calcom/trpc/server";
-
-import classNames from "@lib/classNames";
-import { defaultAvatarSrc } from "@lib/profile";
-
-export type AvatarProps = {
-  className?: string;
-  size?: number;
-  imageSrc?: Maybe<string>;
-  title?: string;
-  alt: string;
-  gravatarFallbackMd5?: string;
-};
-
-/**
- * @deprecated Use AvatarSSR instead. Once, there is no usage of Avatar, AvatarSSR can be renamed.
- */
-export default function Avatar(props: AvatarProps) {
-  const { imageSrc, gravatarFallbackMd5, size, alt, title } = props;
-  const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`);
-  const avatar = (
-    <AvatarPrimitive.Root>
-      <AvatarPrimitive.Image
-        src={imageSrc ?? undefined}
-        alt={alt}
-        className={classNames("rounded-full", `h-auto w-${size}`, props.className)}
-      />
-      <AvatarPrimitive.Fallback delayMs={600}>
-        {gravatarFallbackMd5 && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img src={defaultAvatarSrc({ md5: gravatarFallbackMd5 })} alt={alt} className={className} />
-        )}
-      </AvatarPrimitive.Fallback>
-    </AvatarPrimitive.Root>
-  );
-
-  return title ? (
-    <Tooltip.Tooltip delayDuration={300}>
-      <Tooltip.TooltipTrigger className="cursor-default">{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
-        <Tooltip.Arrow />
-        {title}
-      </Tooltip.Content>
-    </Tooltip.Tooltip>
-  ) : (
-    <>{avatar}</>
-  );
-}
@@ -1,47 +0,0 @@
-import Link from "next/link";
-import React from "react";
-
-import classNames from "@lib/classNames";
-
-import { AvatarSSR } from "@components/ui/AvatarSSR";
-
-export type AvatarGroupProps = {
-  border?: string; // this needs to be the color of the parent container background, i.e.: border-white dark:border-gray-900
-  size: number;
-  truncateAfter?: number;
-  items: {
-    image: string;
-    title?: string;
-    alt?: string;
-    href?: string;
-  }[];
-  className?: string;
-};
-
-export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
-  return (
-    <ul className={classNames(props.className)}>
-      {props.items.slice(0, props.truncateAfter).map((item, idx) => {
-        if (item.image != null) {
-          const avatar = (
-            <AvatarSSR
-              className={props.border}
-              imageSrc={item.image}
-              title={item.title}
-              alt={item.alt || ""}
-              size={props.size}
-            />
-          );
-
-          return (
-            <li key={idx} className="-ltr:mr-2 inline-block rtl:ml-2">
-              {item.href ? <Link href={item.href}>{avatar}</Link> : avatar}
-            </li>
-          );
-        }
-      })}
-    </ul>
-  );
-};
-
-export default AvatarGroup;
@@ -1,62 +0,0 @@
-import { User } from "@prisma/client";
-import * as Tooltip from "@radix-ui/react-tooltip";
-
-import classNames from "@lib/classNames";
-
-export type AvatarProps = (
-  | {
-      user: Pick<User, "name" | "username" | "avatar"> & { emailMd5?: string };
-    }
-  | {
-      user?: null;
-      imageSrc: string;
-    }
-) & {
-  className?: string;
-  size?: number;
-  title?: string;
-  href?: string;
-  alt: string;
-};
-
-// defaultAvatarSrc from profile.tsx can't be used as it imports crypto
-function defaultAvatarSrc(md5: string) {
-  return `https://www.gravatar.com/avatar/${md5}?s=160&d=mp&r=PG`;
-}
-
-// An SSR Supported version of Avatar component.
-export function AvatarSSR(props: AvatarProps) {
-  const { size, title } = props;
-
-  let imgSrc = "";
-  let alt: string = props.alt;
-
-  if (props.user) {
-    const user = props.user;
-    const nameOrUsername = user.name || user.username || "";
-    alt = alt || nameOrUsername;
-
-    if (user.avatar) {
-      imgSrc = user.avatar;
-    } else if (user.emailMd5) {
-      imgSrc = defaultAvatarSrc(user.emailMd5);
-    }
-  } else {
-    imgSrc = props.imageSrc;
-  }
-
-  const className = classNames("rounded-full", props.className, size && `h-${size} w-${size}`);
-
-  const avatar = imgSrc ? <img alt={alt} className={className} src={imgSrc} /> : null;
-  return title ? (
-    <Tooltip.Tooltip delayDuration={300}>
-      <Tooltip.TooltipTrigger asChild>{avatar}</Tooltip.TooltipTrigger>
-      <Tooltip.Content className="rounded-sm bg-black p-2 text-sm text-white">
-        <Tooltip.Arrow />
-        {title}
-      </Tooltip.Content>
-    </Tooltip.Tooltip>
-  ) : (
-    <>{avatar}</>
-  );
-}
@@ -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}
@@ -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>
    </>
@@ -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>
            )}
@@ -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;
@@ -131,7 +122,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
            autoCapitalize="none"
            autoCorrect="none"
            className={classNames(
-              "mb-0 mt-0 h-6 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
+              "mb-0 mt-0 rounded-md ltr:rounded-l-none rtl:rounded-r-none",
              markAsError
                ? "focus:shadow-0 focus:ring-shadow-0 border-red-500 focus:border-red-500 focus:outline-none focus:ring-0"
                : ""
@@ -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")} />
@@ -2,9 +2,9 @@ import React from "react";
 import { Props } from "react-select";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui";
+import { Avatar } from "@calcom/ui";
+import { FiX } from "@calcom/ui/components/icon";

-import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";

 type CheckedSelectOption = {
@@ -43,12 +43,13 @@ export const CheckedSelect = ({
      {value.map((option) => (
        <div key={option.value} className="border p-2 font-medium">
          <Avatar
-            className="inline h-6 w-6 rounded-full ltr:mr-2 rtl:ml-2"
+            className="inline ltr:mr-2 rtl:ml-2"
+            size="sm"
            imageSrc={option.avatar}
            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"
          />
@@ -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}
@@ -0,0 +1,64 @@
+import { components, GroupBase, Props, SingleValue } from "react-select";
+
+import type { EventLocationType } from "@calcom/app-store/locations";
+import { classNames } from "@calcom/lib";
+
+import Select from "@components/ui/form/Select";
+
+export type LocationOption = {
+  label: string;
+  value: EventLocationType["type"];
+  icon?: string;
+  disabled?: boolean;
+};
+
+export type SingleValueLocationOption = SingleValue<LocationOption>;
+
+export type GroupOptionType = GroupBase<LocationOption>;
+
+const OptionWithIcon = ({
+  icon,
+  isSelected,
+  label,
+}: {
+  icon?: string;
+  isSelected?: boolean;
+  label: string;
+}) => {
+  return (
+    <div className="flex items-center gap-3">
+      {icon && <img src={icon} alt="cover" className="h-3.5 w-3.5" />}
+      <span className={classNames("text-sm font-medium", isSelected ? "text-white" : "text-gray-900")}>
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export default function LocationSelect(props: Props<LocationOption, false, GroupOptionType>) {
+  return (
+    <Select<LocationOption>
+      name="location"
+      components={{
+        Option: (props) => (
+          <components.Option {...props}>
+            <OptionWithIcon icon={props.data.icon} label={props.data.label} isSelected={props.isSelected} />
+          </components.Option>
+        ),
+        SingleValue: (props) => (
+          <components.SingleValue {...props}>
+            <OptionWithIcon icon={props.data.icon} label={props.data.label} />
+          </components.SingleValue>
+        ),
+      }}
+      formatOptionLabel={(e) => (
+        <div className="flex items-center gap-3">
+          {e.icon && <img src={e.icon} alt="app-icon" className="h-5 w-5" />}
+          <span>{e.label}</span>
+        </div>
+      )}
+      formatGroupLabel={(e) => <p className="text-xs font-medium text-gray-600">{e.label}</p>}
+      {...props}
+    />
+  );
+}
@@ -1,6 +1,6 @@
 {
  "name": "@calcom/web",
-  "version": "2.5.2",
+  "version": "2.5.5",
  "private": true,
  "scripts": {
    "analyze": "ANALYZE=true next build",
@@ -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>
@@ -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");
@@ -26,13 +26,12 @@ 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 } 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";

-import { AvatarSSR } from "@components/ui/AvatarSSR";
-
 import { ssrInit } from "@server/lib/ssr";

 export default function User(props: inferSSRProps<typeof getServerSideProps> & EmbedProps) {
@@ -57,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"
@@ -132,11 +131,11 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
          )}>
          {isSingleUser && ( // When we deal with a single user, not dynamic group
            <div className="mb-8 text-center">
-              <AvatarSSR user={user} className="mx-auto mb-4 h-24 w-24" alt={nameOrUsername} />
+              <Avatar imageSrc={user.avatar} size="xl" alt={nameOrUsername} />
              <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>
@@ -165,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}
@@ -54,7 +54,7 @@ export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {

  return {
    paths,
-    fallback: false,
+    fallback: "blocking",
  };
 };

@@ -62,7 +62,7 @@ export const getStaticProps = async (ctx: GetStaticPropsContext) => {
  if (typeof ctx.params?.slug !== "string") return { notFound: true };

  const app = await prisma.app.findUnique({
-    where: { slug: ctx.params.slug },
+    where: { slug: ctx.params.slug.toLowerCase() },
  });

  if (!app) return { notFound: true };
@@ -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>
@@ -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"
@@ -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>
                  }
@@ -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">
@@ -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>
@@ -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">
@@ -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>
@@ -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>
          }
@@ -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 />}
@@ -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
@@ -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(),
@@ -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")}
    />
@@ -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>
@@ -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 />}
@@ -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>
@@ -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")}
@@ -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")}
@@ -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"
@@ -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}>
@@ -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")}
@@ -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>
@@ -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>
@@ -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>
@@ -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;
@@ -426,7 +426,6 @@
  "password_hint_num": "يحتوي على رقم واحد على الأقل",
  "invalid_password_hint": "يجب أن تتألف كلمة المرور على الأقل من 7 أحرف، ورقم واحد على الأقل، ومزيج من الحروف الكبيرة والصغيرة",
  "incorrect_password": "كلمة المرور غير صحيحة.",
-  "1_on_1": "اجتماع 1 مع 1",
  "24_h": "24 ساعة",
  "use_setting": "استخدام الإعداد",
  "am_pm": "صباحًا/مساءً",
@@ -426,7 +426,6 @@
  "password_hint_num": "Obsahuje alespoň 1 číslo",
  "invalid_password_hint": "Heslo musí být minimálně 7 znaků dlouhé, obsahovat alespoň jedno číslo a obsahovat kombinaci velkých a malých písmen",
  "incorrect_password": "Heslo není správné.",
-  "1_on_1": "Jeden na jednoho",
  "24_h": "24h",
  "use_setting": "Použít nastavení",
  "am_pm": "am/pm",
@@ -425,7 +425,6 @@
  "password_hint_num": "Enthält mindestens 1 Zahl",
  "invalid_password_hint": "Das Passwort muss mindestens 7 Zeichen lang sein und mindestens eine Nummer beinhalten, sowie eine Mischung aus Groß- und Kleinbuchstaben sein",
  "incorrect_password": "Passwort ist falsch",
-  "1_on_1": "1-on-1",
  "24_h": "24 Std",
  "use_setting": "Benutze Einstellung",
  "am_pm": "am/pm",
@@ -23,6 +23,8 @@
  "rejection_reason_description": "Are you sure you want to reject the booking? We'll let the person who tried to book know. You can provide a reason below.",
  "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}}'.",
@@ -429,7 +431,6 @@
  "password_hint_num": "Contain at least 1 number",
  "invalid_password_hint": "The password must be a minimum of 7 characters long containing at least one number and have a mixture of uppercase and lowercase letters",
  "incorrect_password": "Password is incorrect.",
-  "1_on_1": "1-on-1",
  "24_h": "24h",
  "use_setting": "Use setting",
  "am_pm": "am/pm",
@@ -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",
@@ -1465,6 +1470,7 @@
  "individual":"Individual",
  "all_bookings_filter_label":"All Bookings",
  "all_users_filter_label":"All Users",
+  "your_bookings_filter_label":"Your Bookings",
  "meeting_url_variable": "Meeting url",
  "meeting_url_info": "The event meeting conference url",
  "date_overrides": "Date overrides",
@@ -1513,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."
 }
@@ -426,7 +426,6 @@
  "password_hint_num": "Debe contener al menos 1 número",
  "invalid_password_hint": "La contraseña debe tener un mínimo de 7 caracteres que contengan al menos un número y una mezcla de letras mayúsculas y minúsculas",
  "incorrect_password": "La Contraseña es Incorrecta.",
-  "1_on_1": "1 a 1",
  "24_h": "24hs",
  "use_setting": "Usar Ajuste",
  "am_pm": "am/pm",
@@ -429,7 +429,6 @@
  "password_hint_num": "Contient au moins 1 chiffre",
  "invalid_password_hint": "Le mot de passe doit contenir au moins 7 caractères, un chiffre et un mélange de lettres, majuscules et minuscules.",
  "incorrect_password": "Le mot de passe est incorrect.",
-  "1_on_1": "tête-à-tête",
  "24_h": "24 h",
  "use_setting": "Utiliser le paramètre",
  "am_pm": "AM/PM",
@@ -426,7 +426,6 @@
  "password_hint_num": "לכלול לפחות ספרה אחת",
  "invalid_password_hint": "הסיסמה חייבת להיות באורך של 7 תווים לפחות ולכלול לפחות ספרה אחת ושילוב של אותיות רישיות וקטנות",
  "incorrect_password": "הסיסמה שגויה.",
-  "1_on_1": "אחד על אחד",
  "24_h": "24 שעות",
  "use_setting": "השתמש בהגדרה",
  "am_pm": "לפנה\"צ/אחה\"צ",
@@ -426,7 +426,6 @@
  "password_hint_num": "Deve contenere almeno 1 numero",
  "invalid_password_hint": "La password deve avere una lunghezza minima di 7 caratteri e deve contenere almeno 1 numero e una combinazione di caratteri maiuscoli e minuscoli",
  "incorrect_password": "La password non è corretta.",
-  "1_on_1": "1-su-1",
  "24_h": "24 ore",
  "use_setting": "Usa impostazione",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "少なくとも 1 文字は数字を含めてください",
  "invalid_password_hint": "パスワードには少なくとも 1 文字以上数字を含め、アルファベットの大文字と小文字を両方使用した上で 7 文字以上の長さに設定してください",
  "incorrect_password": "パスワードが正しくありません。",
-  "1_on_1": "1対1",
  "24_h": "24時間",
  "use_setting": "設定を使用",
  "am_pm": "午前/午後",
@@ -426,7 +426,6 @@
  "password_hint_num": "1개 이상 숫자 포함",
  "invalid_password_hint": "비밀번호는 7자 이상이어야 하고 숫자가 하나 이상 포함되어야 하며 대문자와 소문자가 혼합되어야 합니다",
  "incorrect_password": "비밀번호가 잘못되었습니다",
-  "1_on_1": "일대일",
  "24_h": "24시간",
  "use_setting": "사용 설정",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Minimaal 1 cijfer bevatten",
  "invalid_password_hint": "Het wachtwoord moet minimaal 7 tekens lang zijn, minimaal 1 cijfer bevatten en bestaan uit een mix van hoofd- en kleine letters",
  "incorrect_password": "Uw wachtwoord is incorrect.",
-  "1_on_1": "1 op 1",
  "24_h": "24u",
  "use_setting": "Instelling gebruiken",
  "am_pm": "am/pm",
@@ -429,7 +429,6 @@
  "password_hint_num": "Inneholde minst 1 tall",
  "invalid_password_hint": "Passordet må være minst 7 tegn langt og inneholde minst ett tall og ha en blanding av store og små bokstaver",
  "incorrect_password": "Passordet er feil.",
-  "1_on_1": "1-til-1",
  "24_h": "24t",
  "use_setting": "Bruk innstilling",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Zawrzyj co najmniej 1 cyfrę",
  "invalid_password_hint": "Hasło musi składać się z co najmniej 7 znaków, zawierać co najmniej jedną cyfrę oraz kombinację wielkich i małych liter",
  "incorrect_password": "Hasło jest nieprawidłowe.",
-  "1_on_1": "1-na-1",
  "24_h": "24 godz.",
  "use_setting": "Użyj ustawień",
  "am_pm": "rano/po południu",
@@ -426,7 +426,6 @@
  "password_hint_num": "Contém pelo menos um número",
  "invalid_password_hint": "A senha precisa ter pelo menos sete caracteres com pelo menos um número e ser uma combinação de letras maiúsculas e minúsculas",
  "incorrect_password": "Senha incorreta.",
-  "1_on_1": "1 em 1",
  "24_h": "24h",
  "use_setting": "Usar configurações",
  "am_pm": "manhã/tarde",
@@ -426,7 +426,6 @@
  "password_hint_num": "Contém pelo menos 1 número",
  "invalid_password_hint": "A palavra-passe deve ter no mínimo 7 caracteres, com pelo menos um número e uma mistura de letras maiúsculas e minúsculas",
  "incorrect_password": "Palavra-Passe incorreta",
-  "1_on_1": "1 para 1",
  "24_h": "24h",
  "use_setting": "Usar Configuração",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Conține cel puțin 1 cifră",
  "invalid_password_hint": "Parola trebuie să aibă cel puțin 7 caractere, să conțină cel puțin o cifră și o combinație de litere mari și litere mici",
  "incorrect_password": "Parola este incorectă.",
-  "1_on_1": "1-la-1",
  "24_h": "24h",
  "use_setting": "Folosește setarea",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Не менее 1 цифры",
  "invalid_password_hint": "Пароль должен быть не короче 7 символов и содержать заглавные и строчные буквы, а также не менее одной цифры",
  "incorrect_password": "Неверный пароль",
-  "1_on_1": "1-на-1",
  "24_h": "24 часа",
  "use_setting": "Использовать настройки",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Sadrži barem 1 broj",
  "invalid_password_hint": "Lozinka mora da bude dugačka najmanje 7 znakova, da sadrži najmanje jedan broj i da ima mešavinu velikih i malih slova",
  "incorrect_password": "Lozinka je netačna.",
-  "1_on_1": "1 na 1",
  "24_h": "24 sata",
  "use_setting": "Koristi podešavanje",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "Innehåller minst 1 siffra",
  "invalid_password_hint": "Lösenordet måste innehålla minst 7 tecken och har minst en siffra samt en blandning av versaler och gemener",
  "incorrect_password": "Lösenordet är felaktigt.",
-  "1_on_1": "1 och 1",
  "24_h": "24 timmar",
  "use_setting": "Använd inställning",
  "am_pm": "am/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "En az 1 rakam içermelidir",
  "invalid_password_hint": "Şifre en az 7 karakter uzunluğunda olmalı, en az bir rakam içermeli ve büyük ve küçük harflerin karışımından oluşmalıdır",
  "incorrect_password": "Şifre hatalı.",
-  "1_on_1": "Bire bir",
  "24_h": "24 sa",
  "use_setting": "Ayarı kullan",
  "am_pm": "öö/ös",
@@ -426,7 +426,6 @@
  "password_hint_num": "Містить принаймні 1 цифру",
  "invalid_password_hint": "Пароль має містити не менше ніж 7 символів: принаймні одну цифру та комбінацію великих і малих літер",
  "incorrect_password": "Пароль неправильний.",
-  "1_on_1": "1 на 1",
  "24_h": "24 год",
  "use_setting": "Використовувати налаштування",
  "am_pm": "дп/пп",
@@ -426,7 +426,6 @@
  "password_hint_num": "Chứa ít nhất 1 con số",
  "invalid_password_hint": "Mật khẩu phải có tối thiểu 7 ký tự chứa ít nhất một con số và phải kết hợp chữ cái in hoa lẫn in thường",
  "incorrect_password": "Mật khẩu không đúng.",
-  "1_on_1": "1 với 1",
  "24_h": "24h",
  "use_setting": "Sử dụng cài đặt",
  "am_pm": "\u001dam/pm",
@@ -426,7 +426,6 @@
  "password_hint_num": "包含至少 1 个数字",
  "invalid_password_hint": "密码必须是至少 7 个字符长，包含至少一个数字，并且是大写和小写字母混合",
  "incorrect_password": "密码不正确。",
-  "1_on_1": "1对1",
  "24_h": "24 小时制",
  "use_setting": "使用设置",
  "am_pm": "12小时制",
@@ -426,7 +426,6 @@
  "password_hint_num": "至少包含 1 個數字",
  "invalid_password_hint": "密碼長度至少要有 7 個字元，其中包含至少一個數字和大小寫字母組合",
  "incorrect_password": "密碼不正確。",
-  "1_on_1": "1 對 1",
  "24_h": "24 小時",
  "use_setting": "使用設定",
  "am_pm": "上午/下午",
@@ -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
 }

@@ -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,14 +20,14 @@ 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
    git reset
  else
    # If the module is the API, display a link to request access
-    if [ "$module" == "api" ]; then
+    if [ "$module" = "api" ]; then
      echo "You don't have access to: '${module}' module. You can request access in: https://console.cal.com"
    else
      # If the module is not the API, display normal message
@@ -60,28 +60,29 @@ const config: Config = {
      transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
      testEnvironment: "jsdom",
    },
-    {
-      displayName: "@calcom/api",
-      roots: ["<rootDir>/apps/api"],
-      testMatch: ["**/test/lib/**/*.(spec|test).(ts|tsx|js)"],
-      setupFilesAfterEnv: ["<rootDir>/tests/config/singleton.ts"],
-      transform: {
-        "^.+\\.ts?$": "ts-jest",
-      },
-      globals: {
-        "ts-jest": {
-          tsconfig: "<rootDir>/apps/api/tsconfig.json",
-        },
-      },
-      transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
-      testEnvironment: "node",
-      clearMocks: true,
-      moduleNameMapper: {
-        "^@lib/(.*)$": "<rootDir>/apps/api/lib/$1",
-        "^@api/(.*)$": "<rootDir>/apps/api/pages/api/$1",
-      },
-      // setupFilesAfterEnv: ["<rootDir>/apps/api/jest.setup.ts"], // Uncomment when API becomes public
-    },
+    // FIXME: Prevent this breaking Jest when API module is missing
+    // {
+    //   displayName: "@calcom/api",
+    //   roots: ["<rootDir>/apps/api"],
+    //   testMatch: ["**/test/lib/**/*.(spec|test).(ts|tsx|js)"],
+    //   setupFilesAfterEnv: ["<rootDir>/tests/config/singleton.ts"],
+    //   transform: {
+    //     "^.+\\.ts?$": "ts-jest",
+    //   },
+    //   globals: {
+    //     "ts-jest": {
+    //       tsconfig: "<rootDir>/apps/api/tsconfig.json",
+    //     },
+    //   },
+    //   transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
+    //   testEnvironment: "node",
+    //   clearMocks: true,
+    //   moduleNameMapper: {
+    //     "^@lib/(.*)$": "<rootDir>/apps/api/lib/$1",
+    //     "^@api/(.*)$": "<rootDir>/apps/api/pages/api/$1",
+    //   },
+    //   // setupFilesAfterEnv: ["<rootDir>/apps/api/jest.setup.ts"], // Uncomment when API becomes public
+    // },
  ],
  watchPlugins: [
    "jest-watch-typeahead/filename",
@@ -84,6 +84,7 @@
    "turbo": "^1.4.3"
  },
  "resolutions": {
+    "@apidevtools/json-schema-ref-parser": "9.0.9",
    "@types/node": "16.9.1",
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6"
@@ -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>
  );
@@ -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>
@@ -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,
    },
  ];
 };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Alex van Andel	865663646a	v2.5.5 release.yml / release (push) Canceled after 0s Details	2023-01-24 16:54:35 +00:00
Alex van Andel	b7c92063c2	Revert "v2.5.4" This reverts commit `4f293edb6b`.	2023-01-24 16:54:05 +00:00
Alex van Andel	4f293edb6b	v2.5.4	2023-01-24 16:52:33 +00:00
Ben HybertandAlex van Andel	0c88cf75e0	corrected avatars inside users block (#6667 ) * corrected avatars inside users block * ensured the team avatar didnt shrink too * Update packages/ui/components/avatar/Avatar.tsx Co-authored-by: Alex van Andel <me@alexvanandel.com>	2023-01-24 16:10:43 +00:00
Nafees NazikandUdit Takkar	0b93647209	fix: double border issue in Location Select (#6646 ) * fix: border issue * fix: remove border from dropdown Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>	2023-01-24 17:05:35 +01:00
Alex van Andel	b931b00714	Add env variables to turbo.json relevant to the website build (#6654 )	2023-01-24 15:47:46 +00:00
Nafees Nazik	796a5f8d51	feat: use cal video as the default location (#6643 ) * feat: use cal video as default while creating new events * feat: use cal video as default value * chore: remove default value * fix: default value logic * chore: remove console.log	2023-01-24 15:28:40 +00:00
sean-brydon	905a110377	Invites (#6665 )	2023-01-24 15:27:05 +00:00
Alex van Andel	6ccc19985f	Add sizePropsBySize to avatarPrimitive root (#6666 )	2023-01-24 14:01:27 +00:00
Udit Takkar	8f71474303	fix: add allowOverflow property (#6636 ) * fix: add allowOverlfow property Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: date override input dialog Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>	2023-01-24 14:00:45 +00:00
zomars	5f351230ff	Ignores auth submodule	2023-01-23 16:50:17 -07:00
Alex van Andel	3e005919c1	Only return enabled apps in getEnabledApps (#6653 )	2023-01-23 16:27:20 -07:00
Jeroen Reumkens Alex van Andel Omar López	cfa8fd8b67	Reduce bundle size by importing single icons at a time (#6644 ) * Removed barrel import for icons to reduce bundle size. * Fixed replacement mistakes * Reverted unneccesary yarn.lock updates * Added some missed Icon. import conversions * Remove merge artifact import in @calcom/ui * Don't import Icon in pages/[user] * Update packages/ui/package.json Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Omar López <zomars@me.com>	2023-01-23 23:08:01 +00:00
Alex van Andel	a888be6e04	Support both https/git by detection of origin root (#6651 ) * Support both https/git by detection of origin root * Remove unnecessary . * Minor comment fixup	2023-01-23 23:05:53 +00:00
Joe Au-Yeung	6aa2cba3ce	Msteams access token refresh (#6607 ) * Add is valid call * WIP * Change logic for Microsoft refresh token * remove async	2023-01-23 15:36:24 -07:00
sean-brydon	12ab615684	Fix weird avatar issue (#6645 )	2023-01-23 15:48:40 +00:00
sean-brydon Peer Richelsen CarinaWolli Carina Wollendorfer Alex van Andel Hariom Balhara	1d792a2c6c	generic <UpgradeScreen> component (#6594 ) * first attempt of <UpgradeScreen> * changes to icons * reverted changes back to initial state, needs fix: teams not showing * WIP * Fix weird reactnode error * Fix loading text * added upgradeTip to routing forms * icon colors * create and use hook to check if user has team plan * use useTeamPlan for upgradeTeamsBadge * replace huge svg with compressed jpeg * responsive fixes * Update packages/ui/components/badge/UpgradeTeamsBadge.tsx Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Give team plan features to E2E tests * Allow option to make a user part of team int ests * Remove flash of paywall for team user * Add team user for typeform tests as well Co-authored-by: Peer Richelsen <peer@cal.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>	2023-01-23 10:58:41 +01:00
Hariom Balhara	9602ac29fb	Fix Ga4 tracking (#6630 )	2023-01-23 09:09:16 +00:00
Leo Giovanetti	5714471b9a	Temporary fix (#6626 ) release.yml / release (push) Canceled after 0s Details	2023-01-22 17:27:27 +00:00
Mohammed CherfaouiandAlex van Andel	a99e93a4bd	fix tooltip and modal stacking issues (#6491 ) * fix tooltip and modal stacking issues * use z-index in larger screens and less Co-authored-by: Alex van Andel <me@alexvanandel.com>	2023-01-22 20:31:25 +05:30
Udit Takkar	7f044ff92f	fix: use items-center (#6618 )	2023-01-22 13:36:07 +01:00
Alex van Andel	17a0a61313	v2.5.3 release.yml / release (push) Canceled after 0s Details	2023-01-22 00:06:41 +00:00
Alex van Andel	12b7739c9a	Bugfix/dropdown menu trigger as child remove class names (#6614 ) * Fix UsernameTextfield to take right height * Remove className side-effect * Incorrect resolution version fixed * Converted mobile DropdownMenuTrigger styles into Button	2023-01-21 17:03:59 -07:00
Alex van Andel	ff283a25d2	Reduce the avatar size to 'sm' for now	2023-01-21 22:09:32 +00:00
sean-brydon	4b343f20a4	Update booking filters design (#6543 ) * Update booking filters * Add filter on YOUR bookings * Fix pending members showing up in list	2023-01-21 18:15:59 +01:00
Udit Takkar	5bb6904ffd	feat: add LocationSelect component (#6571 ) * feat: add LocationSelect component Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: type error Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * chore: type error Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>	2023-01-21 16:52:21 +00:00
sean-brydon	0e04f5d338	Fix FAB (#6611 )	2023-01-21 16:14:08 +00:00
Nafees Nazik	da0ea5d9d0	fix: case-sensitivity in apps path (#6552 ) * fix: lowercase slug * fix: make fallback blocking	2023-01-21 16:13:55 +00:00
Peer Richelsen	1a19261b8f	remove 1 on 1 icon (#6609 ) * removed 1-on-1 badge * changed user to users for group events	2023-01-21 16:07:45 +00:00
Luis Cadillo	55a6c65db6	fix: remove annoying outline when <Button /> clicked (#6537 ) * fix: remove annoying outline when <Button /> clicked * Delete yarn.lock	2023-01-21 16:07:30 +00:00
Alex van Andel	c9ed3388ae	Regenerated lockfile without upgrade (#6610 )	2023-01-21 15:49:35 +00:00
Harsh Singh Guest root	2588b7ef84	Harsh/add member invite (#6598 ) Co-authored-by: Guest <guest@pop-os.localdomain> Co-authored-by: root <harsh.singh@gocomet.com>	2023-01-21 16:32:00 +01:00
GitStart-Cal.com gitstart-calcom Alex van Andel	7ce83542e2	[CAL-811] Avatar icon not redirecting user back to the main page (#6586 ) * Remove cursor-pointer, remove old Avatar* files * Fixed styling for checkedSelect + some cleanup Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Alex van Andel <me@alexvanandel.com>	2023-01-21 11:41:49 +00:00
Alex van Andel	0bb0883e64	Fix string equality check in git-setup.sh	2023-01-21 06:24:29 +00:00
zomars	d3be62fbdd	Yarn lock fixes	2023-01-20 16:28:22 -07:00
zomars	736308e43a	Test fixes	2023-01-20 15:10:09 -07:00