chore: release v6.1.16

feat: add signup watchlist review mode (#27912 )
* feat: add signup watchlist review feature flag and handler logic - Add 'signup-watchlist-review' global feature flag - Add SIGNUP to WatchlistSource enum in Prisma schema - When flag enabled, lock new signups and add email to watchlist - Show 'account under review' message on signup page - Add i18n strings for review UI - Create seed migration for the feature flag Co-Authored-By: alex@cal.com <me@alexvanandel.com> * test: add isAccountUnderReview tests to fetchSignup test suite Co-Authored-By: alex@cal.com <me@alexvanandel.com> * fix: address Cubic AI review feedback (confidence >= 9/10) - Remove 'import process from node:process' in signup-view.tsx (P0 bug in 'use client' component) - Move watchlist review check before checkoutSessionId early return in calcomSignupHandler (P1 premium bypass) - Revert selfHostedHandler to original state (out of scope per user request) - Add test mocks for FeaturesRepository and GlobalWatchlistRepository Co-Authored-By: alex@cal.com <me@alexvanandel.com> * fix: remove node:process import from useFlags.ts (client-side file) Co-Authored-By: alex@cal.com <me@alexvanandel.com> * fix: remove !token condition from watchlist review check Token is present in normal email-verified signups, so the !token condition was incorrectly skipping watchlist review for verified users. Co-Authored-By: alex@cal.com <me@alexvanandel.com> * Apply suggestion from @cubic-dev-ai[bot] Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com> * refactor: move user lock to UserRepository.lockByEmail Co-Authored-By: alex@cal.com <me@alexvanandel.com> * refactor: use cached getFeatureRepository() instead of deprecated FeaturesRepository Co-Authored-By: alex@cal.com <me@alexvanandel.com> * refactor: remove user locking, keep only watchlist addition on signup review Co-Authored-By: alex@cal.com <me@alexvanandel.com> * feat: lock user on signup review, remove watchlist entry on unlock Co-Authored-By: alex@cal.com <me@alexvanandel.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
2026-02-12 23:27:31 +00:00 · 2026-02-12 23:14:31 +00:00 · 2026-02-12 20:13:01 +00:00 · 2026-02-12 17:46:20 +00:00 · 2026-02-12 22:35:43 +05:30 · 2026-02-12 16:05:12 +00:00
301 changed files with 4906 additions and 1827 deletions
@@ -209,11 +209,13 @@ NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
 NEXT_PUBLIC_IS_PREMIUM_NEW_PLAN=0
 NEXT_PUBLIC_STRIPE_PREMIUM_NEW_PLAN_PRICE=
 STRIPE_TEAM_MONTHLY_PRICE_ID=
+STRIPE_TEAM_ANNUAL_PRICE_ID=
 NEXT_PUBLIC_STRIPE_CREDITS_PRICE_ID=
 ORG_MONTHLY_CREDITS=
 STRIPE_TEAM_PRODUCT_ID=
 # It is a price ID in the product with id STRIPE_ORG_PRODUCT_ID
 STRIPE_ORG_MONTHLY_PRICE_ID=
+STRIPE_ORG_ANNUAL_PRICE_ID=
 STRIPE_ORG_PRODUCT_ID=
 # Used to pass trial days for orgs during the Stripe checkout session
 STRIPE_ORG_TRIAL_DAYS=
@@ -987,12 +987,6 @@ An example of good readme is [atoms readme](https://github.com/calcom/cal.com/bl
 1. Follow semantic versioning when using changesets.
 2. Mark breaking changes using `❗️Breaking change`

-<!-- LICENSE -->
-
-## License
-
-Distributed under the [AGPLv3 License](https://github.com/calcom/cal.com/blob/main/LICENSE). See `LICENSE` for more information.
-
 <!-- ACKNOWLEDGEMENTS -->

 ## Acknowledgements
@@ -1 +1 @@
-export const TRIGGER_VERSION = '20260212.1';
+export const TRIGGER_VERSION = '20260212.3';
@@ -1 +1 @@
-export const TRIGGER_VERSION = '20260212.1';
+export const TRIGGER_VERSION = '20260212.3';
@@ -14,10 +14,10 @@ import {
  SelectField,
  TextField,
 } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import type { getServerSidePropsForSingleFormView as getServerSideProps } from "@calcom/web/lib/apps/routing-forms/[...pages]/getServerSidePropsSingleForm";
 import SingleForm from "@components/apps/routing-forms/SingleForm";
+import { ChevronDownIcon, MenuIcon } from "@coss/ui/icons";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import type { inferSSRProps } from "@lib/types/inferSSRProps";
 import type { UseFormReturn } from "react-hook-form";
@@ -164,8 +164,8 @@ function Field({
                            "h-8 w-full justify-between text-left text-sm",
                            !!router && "bg-subtle cursor-not-allowed"
                          )}>
-                          <span className="text-default">{defaultValue?.label || "Select field type"}</span>
-                          <Icon name="chevron-down" className="text-default h-4 w-4" />
+                          <span className="text-default">{defaultValue?.label || t("select_field_type")}</span>
+                          <ChevronDownIcon className="text-default h-4 w-4" />
                        </Button>
                      </Tooltip>
                    </div>
@@ -333,7 +333,7 @@ const FormEdit = ({
          {/* Icon card - Top */}
          <div className="bg-default border-subtle z-30 col-start-1 col-end-1 row-start-1 row-end-1 h-10 w-10 transform rounded-md border shadow-sm">
            <div className="text-emphasis flex h-full items-center justify-center">
-              <Icon name="menu" className="text-emphasis h-4 w-4" />
+              <MenuIcon className="text-emphasis h-4 w-4" />
            </div>
          </div>
          {/* Left fanned card */}
@@ -1,10 +1,7 @@
 "use client";

-import { useState, useEffect } from "react";
-import type z from "zod";
-
 import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
-import { WhenToWriteToRecord, SalesforceFieldType } from "@calcom/app-store/salesforce/lib/enums";
+import { SalesforceFieldType, WhenToWriteToRecord } from "@calcom/app-store/salesforce/lib/enums";
 import type { writeToRecordDataSchema as salesforceWriteToRecordDataSchema } from "@calcom/app-store/salesforce/zod";
 import { routingFormIncompleteBookingDataSchema as salesforceRoutingFormIncompleteBookingDataSchema } from "@calcom/app-store/salesforce/zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -12,15 +9,13 @@ import { IncompleteBookingActionType } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import { Button } from "@calcom/ui/components/button";
-import { Switch } from "@calcom/ui/components/form";
-import { InputField } from "@calcom/ui/components/form";
-import { Select } from "@calcom/ui/components/form";
-import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InputField, Label, Select, Switch } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/components/toast";
 import type { getServerSidePropsForSingleFormView as getServerSideProps } from "@calcom/web/lib/apps/routing-forms/[...pages]/getServerSidePropsSingleForm";
-
 import SingleForm from "@components/apps/routing-forms/SingleForm";
+import { GlobeIcon } from "@coss/ui/icons";
+import { useEffect, useState } from "react";
+import type z from "zod";

 function Page({ form }: { form: RoutingFormWithResponseCount }) {
  const { t } = useLocale();
@@ -105,7 +100,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-0.5">
              <div className="border-subtle rounded-lg border p-1">
-                <Icon name="globe" className="text-subtle h-4 w-4" />
+                <GlobeIcon className="text-subtle h-4 w-4" />
              </div>
              <div className="flex flex-col">
                <span className="text-emphasis ml-2 text-sm font-medium">
@@ -1,13 +1,7 @@
 "use client";

-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import posthog from "posthog-js";
-import { useEffect, useState } from "react";
-import { useFormContext } from "react-hook-form";
-
 import { isFallbackRoute } from "@calcom/app-store/routing-forms/lib/isFallbackRoute";
 import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
-import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import { FilterResults } from "~/filters/components/FilterResults";
 import { TeamsFilter } from "~/filters/components/TeamsFilter";
 import { getTeamsFiltersFromQuery } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
@@ -21,22 +15,33 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
-import { Icon } from "@calcom/ui/components/icon";
 import { List, ListLinkItem } from "@calcom/ui/components/list";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import type {
-  SetNewFormDialogState,
  NewFormDialogState,
+  SetNewFormDialogState,
 } from "@calcom/web/components/apps/routing-forms/FormActions";
 import {
  FormAction,
  FormActionsDropdown,
  FormActionsProvider,
 } from "@calcom/web/components/apps/routing-forms/FormActions";
-
+import {
+  ChartBarIcon,
+  CircleCheckIcon,
+  DownloadIcon,
+  FileTextIcon,
+  MailIcon,
+  ShuffleIcon,
+} from "@coss/ui/icons";
+import { useAutoAnimate } from "@formkit/auto-animate/react";
+import posthog from "posthog-js";
+import { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 import { useHasPaidPlan } from "~/billing/hooks/useHasPaidPlan";
-import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
+import LicenseRequired from "~/ee/common/components/LicenseRequired";
 import { CreateButtonWithTeamsList } from "~/ee/teams/components/createButton/CreateButtonWithTeamsList";
+import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
 import { ShellMain } from "~/shell/Shell";
 import { UpgradeTip } from "~/shell/UpgradeTip";

@@ -92,32 +97,32 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
  const forms = queryRes.data?.filtered;
  const features = [
    {
-      icon: <Icon name="file-text" className="h-5 w-5 text-orange-500" />,
+      icon: <FileTextIcon className="h-5 w-5 text-orange-500" />,
      title: t("create_your_first_form"),
      description: t("create_your_first_form_description"),
    },
    {
-      icon: <Icon name="shuffle" className="h-5 w-5 text-lime-500" />,
+      icon: <ShuffleIcon className="h-5 w-5 text-lime-500" />,
      title: t("create_your_first_route"),
      description: t("route_to_the_right_person"),
    },
    {
-      icon: <Icon name="chart-bar" className="h-5 w-5 text-blue-500" />,
+      icon: <ChartBarIcon className="h-5 w-5 text-blue-500" />,
      title: t("reporting"),
      description: t("reporting_feature"),
    },
    {
-      icon: <Icon name="circle-check" className="h-5 w-5 text-teal-500" />,
+      icon: <CircleCheckIcon className="h-5 w-5 text-teal-500" />,
      title: t("test_routing_form"),
      description: t("test_preview_description"),
    },
    {
-      icon: <Icon name="mail" className="h-5 w-5 text-yellow-500" />,
+      icon: <MailIcon className="h-5 w-5 text-yellow-500" />,
      title: t("routing_forms_send_email_owner"),
      description: t("routing_forms_send_email_owner_description"),
    },
    {
-      icon: <Icon name="download" className="h-5 w-5 text-violet-500" />,
+      icon: <DownloadIcon className="h-5 w-5 text-violet-500" />,
      title: t("download_responses"),
      description: t("download_responses_description"),
    },
@@ -5,7 +5,7 @@ import { z } from "zod";

 import { IdentityProvider } from "@calcom/prisma/enums";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";

 import AuthContainer from "@components/ui/AuthContainer";

@@ -61,7 +61,7 @@ const ServerPage = async ({ searchParams }: PageProps) => {
    <AuthContainer>
      <div>
        <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <Icon name="x" className="h-6 w-6 text-red-600" />
+          <XIcon className="h-6 w-6 text-red-600" />
        </div>
        <div className="mt-3 text-center sm:mt-5">
          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -3,14 +3,14 @@
 import React, { Suspense } from "react";

 import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon } from "@coss/ui/icons";

 export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <div className="flex flex-1 *:flex-1">
        <ErrorBoundary>
-          <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
+          <Suspense fallback={<LoaderIcon />}>{children}</Suspense>
        </ErrorBoundary>
      </div>
    </>
@@ -7,7 +7,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
-import { Icon } from "@calcom/ui/components/icon";
+import { RefreshCcwIcon, UserPlusIcon, UsersIcon } from "@coss/ui/icons";

 import { UpgradeTip } from "~/shell/UpgradeTip";

@@ -22,17 +22,17 @@ export default function UpgradeTipWrapper({ children }: { children: React.ReactN

  const features = [
    {
-      icon: <Icon name="users" className="h-5 w-5 text-red-500" />,
+      icon: <UsersIcon className="h-5 w-5 text-red-500" />,
      title: t("view_bookings_across"),
      description: t("view_bookings_across_description"),
    },
    {
-      icon: <Icon name="refresh-ccw" className="h-5 w-5 text-blue-500" />,
+      icon: <RefreshCcwIcon className="h-5 w-5 text-blue-500" />,
      title: t("identify_booking_trends"),
      description: t("identify_booking_trends_description"),
    },
    {
-      icon: <Icon name="user-plus" className="h-5 w-5 text-green-500" />,
+      icon: <UserPlusIcon className="h-5 w-5 text-green-500" />,
      title: t("spot_popular_event_types"),
      description: t("spot_popular_event_types_description"),
    },
@@ -3,7 +3,8 @@
 import { useReactTable, getCoreRowModel, createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";

-import { ColumnFilterType, DataTableProvider } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import type { DateRangeFilterOptions } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "~/data-table/components/filters/DateRangeFilter";

@@ -31,6 +31,7 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { ErrorBoundary } from "@calcom/ui/components/errorBoundary";
 import { Icon } from "@calcom/ui/components/icon";
+import { ArrowLeftIcon, ChevronDownIcon, ChevronRightIcon } from "@coss/ui/icons";
 import type { VerticalTabItemProps } from "@calcom/ui/components/navigation";
 import { VerticalTabItem } from "@calcom/ui/components/navigation";
 import { Skeleton } from "@calcom/ui/components/skeleton";
@@ -475,10 +476,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
      href="/event-types"
      className="hover:bg-subtle todesktop:mt-10 [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 text-sm font-medium leading-4 transition"
      data-testid={`vertical-tab-${name}`}>
-      <Icon
-        name="arrow-left"
-        className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0"
-      />
+      <ArrowLeftIcon className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
      <Skeleton title={name} as="p" className="min-h-4 max-w-36 truncate" loadingClassName="ms-3">
        {name}
      </Skeleton>
@@ -602,9 +600,9 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                    }`}>
                    <div className="me-3">
                      {teamMenuState[index].teamMenuOpen ? (
-                        <Icon name="chevron-down" className="h-4 w-4" />
+                        <ChevronDownIcon className="h-4 w-4" />
                      ) : (
-                        <Icon name="chevron-right" className="h-4 w-4" />
+                        <ChevronRightIcon className="h-4 w-4" />
                      )}
                    </div>
                    {}
@@ -949,9 +947,9 @@ const SettingsSidebarContainer = ({
                                  }`}>
                                  <div className="me-3">
                                    {otherTeamMenuState[index].teamMenuOpen ? (
-                                      <Icon name="chevron-down" className="h-4 w-4" />
+                                      <ChevronDownIcon className="h-4 w-4" />
                                    ) : (
-                                      <Icon name="chevron-right" className="h-4 w-4" />
+                                      <ChevronRightIcon className="h-4 w-4" />
                                    )}
                                  </div>
                                  {}
@@ -1036,7 +1034,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
          <button
            className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
            onClick={() => router.back()}>
-            <Icon name="arrow-left" className="text-default h-4 w-4" />
+            <ArrowLeftIcon className="text-default h-4 w-4" />
            <p className="text-emphasis font-semibold">{t("settings")}</p>
          </button>
        </div>
@@ -11,8 +11,8 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Checkbox, Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { ChevronRightIcon, InfoIcon } from "@coss/ui/icons";

 import { usePermissions } from "./usePermissions";

@@ -98,8 +98,7 @@ export function AdvancedPermissionGroup({
          }
        }}>
        <div className="flex items-center gap-1.5" onClick={() => setIsExpanded(!isExpanded)}>
-          <Icon
-            name="chevron-right"
+          <ChevronRightIcon
            className={classNames(
              "h-4 w-4 transition-transform",
              isExpanded && !isAllResources ? "rotate-90" : ""
@@ -173,7 +172,7 @@ export function AdvancedPermissionGroup({
                    </span>
                    {isAutoEnabled && (
                      <Tooltip content={t("read_permission_auto_enabled_tooltip")}>
-                        <Icon name="info" className="text-muted-foreground h-3 w-3" />
+                        <InfoIcon className="text-muted-foreground h-3 w-3" />
                      </Tooltip>
                    )}
                  </div>
@@ -7,8 +7,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { LockIcon, ShieldCheckIcon, ShieldIcon, UsersIcon } from "@coss/ui/icons";

 import { FingerprintAnimation } from "./FingerprintAnimation";

@@ -59,7 +59,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
          <div className="bg-subtle border-subtle w-full stack-y-px overflow-hidden rounded-xl border">
            <div className="bg-default flex gap-3 p-3">
              <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
-                <Icon name="shield-check" className="text-subtle h-5 w-5" />
+                <ShieldCheckIcon className="text-subtle h-5 w-5" />
              </div>
              <div className="flex flex-col gap-1">
                <p className="text-emphasis text-sm font-semibold">{t("pbac_opt_in_custom_roles_title")}</p>
@@ -69,7 +69,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac

            <div className="bg-default flex gap-3 p-3">
              <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
-                <Icon name="lock" className="text-subtle h-5 w-5" />
+                <LockIcon className="text-subtle h-5 w-5" />
              </div>
              <div className="flex flex-col gap-1">
                <p className="text-emphasis text-sm font-semibold">
@@ -81,7 +81,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac

            <div className="bg-default flex gap-3 p-3">
              <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
-                <Icon name="users" className="text-subtle h-5 w-5" />
+                <UsersIcon className="text-subtle h-5 w-5" />
              </div>
              <div className="flex flex-col gap-1">
                <p className="text-emphasis text-sm font-semibold">
@@ -93,7 +93,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac

            <div className="bg-default flex gap-3 p-3">
              <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
-                <Icon name="shield" className="text-subtle h-5 w-5" />
+                <ShieldIcon className="text-subtle h-5 w-5" />
              </div>
              <div className="flex flex-col gap-1">
                <p className="text-emphasis text-sm font-semibold">
@@ -1,17 +1,15 @@
-import type { Mock } from "vitest";
-import { vi } from "vitest";
-
 import type { MockResponse } from "@calcom/features/auth/signup/handlers/__tests__/mocks/next.mocks";
-
 import {
  prismaMock,
  resetPrismaMock,
 } from "@calcom/features/auth/signup/handlers/__tests__/mocks/prisma.mocks";
-import {
-  createMockTeam,
-  createMockFoundToken,
-} from "@calcom/features/auth/signup/handlers/__tests__/mocks/signup.factories";
 import type { SignupBody } from "@calcom/features/auth/signup/handlers/__tests__/mocks/signup.factories";
+import {
+  createMockFoundToken,
+  createMockTeam,
+} from "@calcom/features/auth/signup/handlers/__tests__/mocks/signup.factories";
+import type { Mock } from "vitest";
+import { vi } from "vitest";

 const mockFindTokenByToken: Mock = vi.fn();
 const mockValidateAndGetCorrectedUsernameForTeam: Mock = vi.fn();
@@ -77,6 +75,22 @@ vi.mock("@calcom/features/watchlist/lib/telemetry", () => ({ sentrySpan: {} }));
 vi.mock("@calcom/features/watchlist/operations/check-if-email-in-watchlist.controller", () => ({
  checkIfEmailIsBlockedInWatchlistController: vi.fn().mockResolvedValue(false),
 }));
+vi.mock("@calcom/features/di/containers/FeatureRepository", () => ({
+  getFeatureRepository: vi.fn().mockReturnValue({
+    checkIfFeatureIsEnabledGlobally: vi.fn().mockResolvedValue(false),
+  }),
+}));
+vi.mock("@calcom/features/watchlist/lib/repository/GlobalWatchlistRepository", () => {
+  return {
+    GlobalWatchlistRepository: class {
+      findBlockedEmail = vi.fn().mockResolvedValue(null);
+      createEntry = vi.fn().mockResolvedValue({});
+    },
+  };
+});
+vi.mock("@calcom/features/watchlist/lib/utils/normalization", () => ({
+  normalizeEmail: vi.fn((e: string) => e.toLowerCase()),
+}));
 vi.mock("@calcom/web/lib/buildLegacyCtx", () => ({ buildLegacyRequest: vi.fn() }));
 vi.mock("@calcom/features/auth/signup/utils/organization", () => ({ joinAnyChildTeamOnOrgInvite: vi.fn() }));
 vi.mock("@calcom/features/auth/signup/utils/token", () => ({
@@ -1,14 +1,23 @@
-import { cookies, headers } from "next/headers";
-import { NextResponse } from "next/server";
-
+import process from "node:process";
 import { getPremiumMonthlyPlanPriceId } from "@calcom/app-store/stripepayment/lib/utils";
 import { getLocaleFromRequest } from "@calcom/features/auth/lib/getLocaleFromRequest";
 import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
+import { SIGNUP_ERROR_CODES } from "@calcom/features/auth/signup/constants";
 import { createOrUpdateMemberships } from "@calcom/features/auth/signup/utils/createOrUpdateMemberships";
+import { joinAnyChildTeamOnOrgInvite } from "@calcom/features/auth/signup/utils/organization";
 import { prefillAvatar } from "@calcom/features/auth/signup/utils/prefillAvatar";
+import {
+  findTokenByToken,
+  throwIfTokenExpired,
+  validateAndGetCorrectedUsernameForTeam,
+} from "@calcom/features/auth/signup/utils/token";
 import { validateAndGetCorrectedUsernameAndEmail } from "@calcom/features/auth/signup/utils/validateUsername";
 import { getBillingProviderService } from "@calcom/features/ee/billing/di/containers/Billing";
+import { getFeatureRepository } from "@calcom/features/di/containers/FeatureRepository";
+import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
+import { GlobalWatchlistRepository } from "@calcom/features/watchlist/lib/repository/GlobalWatchlistRepository";
 import { sentrySpan } from "@calcom/features/watchlist/lib/telemetry";
+import { normalizeEmail } from "@calcom/features/watchlist/lib/utils/normalization";
 import { checkIfEmailIsBlockedInWatchlistController } from "@calcom/features/watchlist/operations/check-if-email-in-watchlist.controller";
 import { hashPassword } from "@calcom/lib/auth/hashPassword";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -19,19 +28,17 @@ import type { CustomNextApiHandler } from "@calcom/lib/server/username";
 import { usernameHandler } from "@calcom/lib/server/username";
 import { getTrackingFromCookies } from "@calcom/lib/tracking";
 import prisma from "@calcom/prisma";
-import { CreationSource } from "@calcom/prisma/enums";
-import { IdentityProvider } from "@calcom/prisma/enums";
+import {
+  CreationSource,
+  IdentityProvider,
+  WatchlistAction,
+  WatchlistSource,
+  WatchlistType,
+} from "@calcom/prisma/enums";
 import { signupSchema } from "@calcom/prisma/zod-utils";
 import { buildLegacyRequest } from "@calcom/web/lib/buildLegacyCtx";
-
-import { joinAnyChildTeamOnOrgInvite } from "@calcom/features/auth/signup/utils/organization";
-import { SIGNUP_ERROR_CODES } from "@calcom/features/auth/signup/constants";
-
-import {
-  findTokenByToken,
-  throwIfTokenExpired,
-  validateAndGetCorrectedUsernameForTeam,
-} from "@calcom/features/auth/signup/utils/token";
+import { cookies, headers } from "next/headers";
+import { NextResponse } from "next/server";

 const log = logger.getSubLogger({ prefix: ["signupCalcomHandler"] });

@@ -291,6 +298,34 @@ const handler: CustomNextApiHandler = async (body, usernameStatus, query) => {
    }
  }

+  const featureRepository = getFeatureRepository();
+  const signupWatchlistReviewEnabled =
+    await featureRepository.checkIfFeatureIsEnabledGlobally("signup-watchlist-review");
+
+  if (signupWatchlistReviewEnabled && !token) {
+    const globalWatchlistRepo = new GlobalWatchlistRepository(prisma);
+    const normalizedEmail = normalizeEmail(email);
+    const existing = await globalWatchlistRepo.findBlockedEmail(normalizedEmail);
+
+    if (!existing) {
+      await globalWatchlistRepo.createEntry({
+        type: WatchlistType.EMAIL,
+        value: normalizedEmail,
+        action: WatchlistAction.BLOCK,
+        source: WatchlistSource.SIGNUP,
+        description: "Auto-added during signup review",
+      });
+    }
+
+    const userRepository = new UserRepository(prisma);
+    await userRepository.lockByEmail({ email });
+
+    return NextResponse.json(
+      { message: "Created user", stripeCustomerId: customer.stripeCustomerId, accountUnderReview: true },
+      { status: 201 }
+    );
+  }
+
  if (checkoutSessionId) {
    console.log("Created user but missing payment", checkoutSessionId);
    return NextResponse.json(
@@ -1,7 +1,7 @@
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";

 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 name="x" className="text-inverted h-6 w-6 dark:text-white" aria-hidden="true" />
+                <XIcon className="text-inverted h-6 w-6 dark:text-white" />
              </button>
            </div>
          </div>
@@ -3,7 +3,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChartBarIcon, CreditCardIcon, GlobeIcon, LockIcon, PaintbrushIcon, UsersIcon } from "@coss/ui/icons";

 import Shell from "~/shell/Shell";
 import { UpgradeTip } from "~/shell/UpgradeTip";
@@ -13,32 +13,32 @@ export default function EnterprisePage() {

  const features = [
    {
-      icon: <Icon name="globe" className="h-5 w-5 text-red-500" />,
+      icon: <GlobeIcon className="h-5 w-5 text-red-500" />,
      title: t("branded_subdomain"),
      description: t("branded_subdomain_description"),
    },
    {
-      icon: <Icon name="chart-bar" className="h-5 w-5 text-blue-500" />,
+      icon: <ChartBarIcon className="h-5 w-5 text-blue-500" />,
      title: t("org_insights"),
      description: t("org_insights_description"),
    },
    {
-      icon: <Icon name="paintbrush" className="h-5 w-5 text-pink-500" />,
+      icon: <PaintbrushIcon className="h-5 w-5 text-pink-500" />,
      title: t("extensive_whitelabeling"),
      description: t("extensive_whitelabeling_description"),
    },
    {
-      icon: <Icon name="users" className="h-5 w-5 text-orange-500" />,
+      icon: <UsersIcon className="h-5 w-5 text-orange-500" />,
      title: t("unlimited_teams"),
      description: t("unlimited_teams_description"),
    },
    {
-      icon: <Icon name="credit-card" className="h-5 w-5 text-green-500" />,
+      icon: <CreditCardIcon className="h-5 w-5 text-green-500" />,
      title: t("unified_billing"),
      description: t("advanced_managed_events_description"),
    },
    {
-      icon: <Icon name="lock" className="h-5 w-5 text-purple-500" />,
+      icon: <LockIcon className="h-5 w-5 text-purple-500" />,
      title: t("advanced_managed_events"),
      description: t("advanced_managed_events_description"),
    },
@@ -19,7 +19,15 @@ import type { App as AppType } from "@calcom/types/App";
 import classNames from "@calcom/ui/classNames";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  BookOpenIcon,
+  CircleAlertIcon,
+  ExternalLinkIcon,
+  FileIcon,
+  FlagIcon,
+  MailIcon,
+  ShieldIcon,
+} from "@coss/ui/icons";
 import { SkeletonButton, SkeletonText } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";

@@ -385,7 +393,7 @@ export const AppPage = ({
            <div className="items-start space-x-2.5">
              <div className="text-info flex items-start">
                <div>
-                  <Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
+                  <CircleAlertIcon className="mr-2 mt-1 font-semibold" />
                </div>
                <div>
                  <span className="font-semibold">{t("msteams_calendar_warning_body")}</span>
@@ -445,7 +453,7 @@ export const AppPage = ({
                rel="noreferrer"
                className="text-emphasis text-sm font-normal no-underline hover:underline"
                href={docs}>
-                <Icon name="book-open" className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
+                <BookOpenIcon className="text-subtle -mt-1 mr-1 inline h-4 w-4" />
                {t("documentation")}
              </a>
            </li>
@@ -457,7 +465,7 @@ export const AppPage = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={website}>
-                <Icon name="external-link" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <ExternalLinkIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                {website.replace("https://", "")}
              </a>
            </li>
@@ -469,7 +477,7 @@ export const AppPage = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={`mailto:${email}`}>
-                <Icon name="mail" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <MailIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />

                {email}
              </a>
@@ -482,7 +490,7 @@ export const AppPage = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={tos}>
-                <Icon name="file" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <FileIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                {t("terms_of_service")}
              </a>
            </li>
@@ -494,7 +502,7 @@ export const AppPage = ({
                rel="noreferrer"
                className="text-emphasis font-normal no-underline hover:underline"
                href={privacy}>
-                <Icon name="shield" className="text-subtle -mt-px mr-1 inline h-4 w-4" />
+                <ShieldIcon className="text-subtle -mt-px mr-1 inline h-4 w-4" />
                {t("privacy_policy")}
              </a>
            </li>
@@ -505,7 +513,7 @@ export const AppPage = ({
          {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
        </span>
        <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
-          <Icon name="flag" className="inline h-3 w-3" /> {t("report_app")}
+          <FlagIcon className="inline h-3 w-3" /> {t("report_app")}
        </a>
      </div>
    </div>
@@ -12,8 +12,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { InfoIcon } from "@coss/ui/icons";

 export default function AlbySetup(props: IAlbySetupProps) {
  const params = useCompatSearchParams();
@@ -165,7 +165,7 @@ function AlbySetupPage(props: IAlbySetupProps) {

            {/* TODO: remove when invoices are generated using user identifier */}
            <div className="mt-4 rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
-              <Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
+              <InfoIcon className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be
              used to generate invoices. If you update your lightning address, please disconnect and setup the
              Alby app again.
            </div>
@@ -16,8 +16,8 @@ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { LoaderIcon } from "@coss/ui/icons";

 export default function BTCPaySetup(props: IBTCPaySetupProps) {
  const params = useCompatSearchParams();
@@ -324,7 +324,7 @@ function BTCPaySetupPage(props: IBTCPaySetupProps) {
                      disabled={loading || validating || !updatable}>
                      {loading ? (
                        <>
-                          <Icon name="loader" className="mr-2 animate-spin" />
+                          <LoaderIcon className="mr-2 animate-spin" />
                          {t("connecting")}
                        </>
                      ) : (
@@ -16,7 +16,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";

 export default function HitPaySetup(props: IHitPaySetupProps) {
@@ -205,7 +205,7 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
        {showContent ? (
          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
            <div className="rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
-              <Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
+              <InfoIcon className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
              HitPay account to receive payments for your paid bookings.
            </div>

@@ -8,7 +8,7 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { PlusIcon, TrashIcon } from "@coss/ui/icons";

 export default function ICSFeedSetup() {
  const { t } = useLocale();
@@ -78,7 +78,7 @@ export default function ICSFeedSetup() {
                          type="button"
                          className="mb-2 h-min text-sm"
                          onClick={() => setUrls((urls) => urls.filter((_, ii) => i !== ii))}>
-                          <Icon name="trash" size={16} />
+                          <TrashIcon size={16} />
                        </button>
                      ) : null}
                    </div>
@@ -91,7 +91,7 @@ export default function ICSFeedSetup() {
                  onClick={() => {
                    setUrls((urls) => urls.concat(""));
                  }}>
-                  {t("add")} <Icon className="inline" name="plus" size={16} />
+                  {t("add")} <PlusIcon className="inline" size={16} />
                </button>

                {errorMessage && (
@@ -8,9 +8,9 @@ import ServerTrans from "@calcom/lib/components/ServerTrans";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { ClipboardIcon } from "@coss/ui/icons";

 const MAKE = "make";

@@ -164,7 +164,7 @@ const CopyApiKey = ({ apiKey }: { apiKey: string }) => {
            }}
            type="button"
            className="mt-4 text-base sm:mt-0 sm:rounded-l-none">
-            <Icon name="clipboard" className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
+            <ClipboardIcon className="h-4 w-4 ltr:mr-2 rtl:ml-2" />
            {t("copy")}
          </Button>
        </Tooltip>
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CircleAlertIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";

 export default function PayPalSetup() {
@@ -91,7 +91,7 @@ export default function PayPalSetup() {
              </p>

              <p className="text-lgf text-default mt-5 inline-flex font-bold">
-                <Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" /> Important requirements:
+                <CircleAlertIcon className="mr-2 mt-1 h-4 w-4" /> Important requirements:
              </p>
              <ul className="text-default ml-1 mt-2 list-disc pl-2">
                <li>Paypal Business account</li>
@@ -145,7 +145,7 @@ export default function PayPalSetup() {
                <li>You should be all setup after this.</li>
              </ol>
              <p className="text-default mt-5 inline-flex font-bold">
-                <Icon name="circle-alert" className="mr-2 mt-1 h-4 w-4" />
+                <CircleAlertIcon className="mr-2 mt-1 h-4 w-4" />
                Reminder:
              </p>
              <p className="text-default mt-2">
@@ -9,7 +9,7 @@ import type { RoutingFormWithResponseCount } from "@calcom/routing-forms/types/t
 import { Button } from "@calcom/ui/components/button";
 import { DropdownMenuSeparator } from "@calcom/ui/components/dropdown";
 import { ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { MenuIcon, PencilIcon, WaypointsIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";

 import { FormAction, FormActionsDropdown } from "./FormActions";
@@ -298,7 +298,7 @@ export function Header({
                color="minimal"
                onClick={() => setIsEditing(true)}
                CustomStartIcon={
-                  <Icon name="pencil" className="text-subtle group-hover:text-default h-3 w-3" />
+                  <PencilIcon className="text-subtle group-hover:text-default h-3 w-3" />
                }>
                <span className="sr-only">Edit</span>
              </Button>
@@ -319,13 +319,13 @@ export function Header({
              {
                value: "form-edit",
                label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
-                iconLeft: <Icon name="menu" className="h-3 w-3" />,
+                iconLeft: <MenuIcon className="h-3 w-3" />,
                dataTestId: "toggle-group-item-form-edit",
              },
              {
                value: "route-builder",
                label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
-                iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
+                iconLeft: <WaypointsIcon className="h-3 w-3" />,
              },
            ]}
          />
@@ -355,12 +355,12 @@ export function Header({
            {
              value: "form-edit",
              label: <span className="sr-only sm:not-sr-only">{t("form")}</span>,
-              iconLeft: <Icon name="menu" className="h-3 w-3" />,
+              iconLeft: <MenuIcon className="h-3 w-3" />,
            },
            {
              value: "route-builder",
              label: <span className="sr-only sm:not-sr-only">{t("routing")}</span>,
-              iconLeft: <Icon name="waypoints" className="h-3 w-3" />,
+              iconLeft: <WaypointsIcon className="h-3 w-3" />,
            },
          ]}
        />
@@ -9,7 +9,7 @@ import logger from "@calcom/lib/logger";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
+import { ClockIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";

 interface IConfirmDialogWipe {
@@ -83,7 +83,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <div className="flex flex-row space-x-3">
          <div className="flex h-10 w-10 shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <Icon name="clock" className="m-auto h-5 w-5" />
+            <ClockIcon className="m-auto h-5 w-5" />
          </div>
          <div className="pt-1">
            <DialogHeader title="Wipe My Calendar" />
@@ -10,8 +10,8 @@ import type { RecurringEvent } from "@calcom/types/Calendar";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Label, Select, TextArea, CheckboxField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { InfoIcon, XIcon } from "@coss/ui/icons";

 interface InternalNotePresetsSelectProps {
  internalNotePresets: { id: number; name: string }[];
@@ -182,7 +182,7 @@ export default function CancelBooking(props: Props) {
      {error && !props.showErrorAsToast && (
        <div className="mt-8">
          <div className="bg-error mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-            <Icon name="x" className="h-6 w-6 text-red-600" />
+            <XIcon className="h-6 w-6 text-red-600" />
          </div>
          <div className="mt-3 text-center sm:mt-5">
            <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -230,7 +230,7 @@ export default function CancelBooking(props: Props) {
          />
          {isCancellationUserHost ? (
            <div className="-mt-2 mb-4 flex items-center gap-2">
-              <Icon name="info" className="text-subtle h-4 w-4" />
+              <InfoIcon className="text-subtle h-4 w-4" />
              <p className="text-subtle text-sm leading-none">
                {t("notify_attendee_cancellation_reason_warning")}
              </p>
@@ -8,8 +8,8 @@ import { trpc } from "@calcom/trpc/react";
 import { MultiEmail } from "@calcom/ui/components/address";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { TriangleAlertIcon, UserPlusIcon } from "@coss/ui/icons";

 interface IAddGuestsDialog {
  isOpenDialog: boolean;
@@ -59,7 +59,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
      <DialogContent enableOverflow>
        <div className="flex flex-row md:space-x-3">
          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
-            <Icon name="user-plus" className="m-auto h-6 w-6" />
+            <UserPlusIcon className="m-auto h-6 w-6" />
          </div>
          <div className="w-full md:pt-1">
            <DialogHeader title={t("additional_guests")} />
@@ -75,7 +75,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
            {isInvalidEmail && (
              <div className="my-4 flex text-sm text-red-700">
                <div className="shrink-0">
-                  <Icon name="triangle-alert" className="h-5 w-5" />
+                  <TriangleAlertIcon className="h-5 w-5" />
                </div>
                <div className="ml-3">
                  <p className="font-medium">{t("emails_must_be_unique_valid")}</p>
@@ -6,8 +6,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { CreditCardIcon, TriangleAlertIcon } from "@coss/ui/icons";

 interface IRescheduleDialog {
  isOpenDialog: boolean;
@@ -45,7 +45,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
      <DialogContent>
        <div className="flex flex-row space-x-3">
          <div className=" bg-subtle flex h-10 w-10 shrink-0 justify-center rounded-full">
-            <Icon name="credit-card" className="m-auto h-6 w-6" />
+            <CreditCardIcon className="m-auto h-6 w-6" />
          </div>
          <div className="pt-1">
            <DialogHeader title={t("charge_card")} />
@@ -53,7 +53,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {

            {chargeError && (
              <div className="mt-4 flex text-red-500">
-                <Icon name="triangle-alert" className="mr-2 h-5 w-5 " aria-hidden="true" />
+                <TriangleAlertIcon className="mr-2 h-5 w-5" />
                <p className="text-sm">{chargeError}</p>
              </div>
            )}
@@ -23,7 +23,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { Form, Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { MapPinIcon } from "@coss/ui/icons";

 import { QueryCell } from "../../lib/QueryCell";

@@ -258,7 +258,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
          }}>
          <div className="flex flex-row md:space-x-3">
            <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
-              <Icon name="map-pin" className="m-auto h-6 w-6" />
+              <MapPinIcon className="m-auto h-6 w-6" />
            </div>
            <div className="w-full md:pt-1">
              <DialogHeader title={t("edit_location")} />
@@ -20,9 +20,9 @@ import {
  ConfirmationDialogContent,
 } from "@calcom/ui/components/dialog";
 import { TextAreaField, Form, Label, Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
 import { showToast } from "@calcom/ui/components/toast";
+import { CheckIcon, LoaderIcon } from "@coss/ui/icons";

 enum ReassignType {
  AUTO = "auto",
@@ -287,7 +287,7 @@ export const ReassignDialog = ({
                    {isFetching && teamMemberOptions.length === 0 ? (
                      <div className="flex h-full items-center justify-center">
                        <div className="flex flex-col items-center gap-2">
-                          <Icon name="loader" className="text-subtle h-5 w-5 animate-spin" />
+                          <LoaderIcon className="text-subtle h-5 w-5 animate-spin" />
                          <p className="text-subtle text-sm">{t("loading")}</p>
                        </div>
                      </div>
@@ -328,7 +328,7 @@ export const ReassignDialog = ({
                            <span className="text-emphasis w-full text-sm">{member.label}</span>
                            {watchedTeamMemberId === member.value && (
                              <div className="place-self-end pr-2">
-                                <Icon name="check" className="text-emphasis h-4 w-4" />
+                                <CheckIcon className="text-emphasis h-4 w-4" />
                              </div>
                            )}
                          </div>
@@ -7,8 +7,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { TextArea } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { ClockIcon } from "@coss/ui/icons";

 interface IRescheduleDialog {
  isOpenDialog: boolean;
@@ -39,7 +39,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
      <DialogContent enableOverflow data-testid="reschedule-dialog">
        <div className="flex flex-row md:space-x-3">
          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
-            <Icon name="clock" className="m-auto h-6 w-6" />
+            <ClockIcon className="m-auto h-6 w-6" />
          </div>
          <div className="w-full md:pt-1">
            <DialogHeader title={t("send_reschedule_request")} />
@@ -10,8 +10,8 @@ import { trpc } from "@calcom/trpc/react";
 import type { App } from "@calcom/types/App";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { ArrowRightIcon, CircleAlertIcon } from "@coss/ui/icons";

 interface IAppConnectionItem {
  title: string;
@@ -79,7 +79,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
                  <div className="items-start space-x-2.5">
                    <div className="flex items-start">
                      <div>
-                        <Icon name="circle-alert" className="mr-2 mt-1 font-semibold" />
+                        <CircleAlertIcon className="mr-2 mt-1 font-semibold" />
                      </div>
                      <div>
                        <span className="text-xs font-semibold">
@@ -99,7 +99,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
                                <span className="mr-1">
                                  {t("connect_app", { dependencyName: dependency.name })}
                                </span>
-                                <Icon name="arrow-right" className="inline-block h-3 w-3" />
+                                <ArrowRightIcon className="inline-block h-3 w-3" />
                              </Link>
                            </>
                          </div>
@@ -1,10 +1,10 @@
-import { Icon } from "@calcom/ui/components/icon";
+import { ShieldIcon } from "@coss/ui/icons";

 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
  return (
    <div className="mb-4 sm:flex sm:items-start">
      <div className="bg-brand/5 text-brandcontrast dark:bg-darkmodebrand/5 dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-        <Icon name="shield" className="text-inverted h-6 w-6" />
+        <ShieldIcon className="text-inverted h-6 w-6" />
      </div>
      <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
        <h3 className="font-cal text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -5,8 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
 import { Button } from "@calcom/ui/components/button";
 import { Label, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { InfoIcon } from "@coss/ui/icons";

 type OAuthClientFormProps = {
  defaultValues?: Partial<FormValues>;
@@ -227,7 +227,7 @@ export const OAuthClientForm = ({
              className="max-w-[400px] whitespace-normal"
              content="If enabled and the managed user has calendar connected, an event in the calendar will be created. By default true. Disable it if you want to create events in the calendar manually.">
              <div className="ml-1">
-                <Icon name="info" className="h-4 w-4 text-gray-500" aria-hidden="true" />
+                <InfoIcon className="h-4 w-4 text-gray-500" />
              </div>
            </Tooltip>
          </div>
@@ -252,7 +252,7 @@ export const OAuthClientForm = ({
              className="max-w-[400px] whitespace-normal"
              content="If enabled, when creating a managed user the managed user will have 4 default event types: 30 and 60 minutes without Cal video, 30 and 60 minutes with Cal video. Leave this disabled if you want to create a managed user and then manually create event types for the user.">
              <div className="ml-1">
-                <Icon name="info" className="h-4 w-4 text-gray-500" aria-hidden="true" />
+                <InfoIcon className="h-4 w-4 text-gray-500" />
              </div>
            </Tooltip>
          </div>
@@ -12,7 +12,7 @@ import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon, LoaderIcon } from "@coss/ui/icons";

 type EnterpriseLicenseFormValues = {
  licenseKey: string;
@@ -122,9 +122,9 @@ const EnterpriseLicense = (
                )}
                addOnSuffix={
                  checkLicenseLoading ? (
-                    <Icon name="loader" className="h-5 w-5 animate-spin" />
+                    <LoaderIcon className="h-5 w-5 animate-spin" />
                  ) : errors.licenseKey === undefined && isDirty ? (
-                    <Icon name="check" className="h-5 w-5 text-green-700" />
+                    <CheckIcon className="h-5 w-5 text-green-700" />
                  ) : undefined
                }
                color={errors.licenseKey ? "warn" : ""}
@@ -13,7 +13,7 @@ import type { RouterInputs, RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon, LoaderIcon } from "@coss/ui/icons";

 type LicenseSelectionFormValues = {
  licenseKey: string;
@@ -180,9 +180,9 @@ const LicenseSelection = (
                      )}
                      addOnSuffix={
                        checkLicenseLoading ? (
-                          <Icon name="loader" className="h-5 w-5 animate-spin" />
+                          <LoaderIcon className="h-5 w-5 animate-spin" />
                        ) : licenseValidation?.valid && licenseTouched ? (
-                          <Icon name="check" className="h-5 w-5 text-green-700" />
+                          <CheckIcon className="h-5 w-5 text-green-700" />
                        ) : undefined
                      }
                      color={errors.licenseKey ? "warn" : ""}
@@ -20,6 +20,7 @@ import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
 import { Label, Input } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon, ExternalLinkIcon } from "@coss/ui/icons";

 import type { TRPCClientErrorLike } from "@trpc/client";

@@ -251,7 +252,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                <></>
              )}
              {!isInputUsernamePremium && usernameIsAvailable ? (
-                <Icon name="check" className="mt-[2px] h-4 w-4" />
+                <CheckIcon className="mt-[2px] h-4 w-4" />
              ) : (
                <></>
              )}
@@ -307,7 +308,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                data-testid="go-to-billing"
                href={paymentLink}>
                <>
-                  {t("go_to_stripe_billing")} <Icon name="external-link" className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
                </>
              </Button>
            )}
@@ -14,7 +14,7 @@ import type { AppRouter } from "@calcom/trpc/types/server/routers/_app";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogClose } from "@calcom/ui/components/dialog";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";

 import type { TRPCClientErrorLike } from "@trpc/client";
@@ -143,7 +143,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
            <div className="absolute right-[2px] top-6 flex h-7 flex-row">
              <span className={classNames("bg-default mx-0 p-3")}>
                {usernameIsAvailable ? (
-                  <Icon name="check" className="relative bottom-[6px] h-4 w-4" />
+                  <CheckIcon className="relative bottom-[6px] h-4 w-4" />
                ) : (
                  <></>
                )}
@@ -4,7 +4,7 @@ import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";

 import classNames from "@calcom/ui/classNames";
-import { Icon } from "@calcom/ui/components/icon";
+import { CalendarIcon } from "@coss/ui/icons";

 type Props = {
  date: Date;
@@ -22,7 +22,7 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
        className
      )}
      clearIcon={null}
-      calendarIcon={<Icon name="calendar" className="text-subtle h-5 w-5" />}
+      calendarIcon={<CalendarIcon className="text-subtle h-5 w-5" />}
      value={date}
      minDate={minDate}
      disabled={disabled}
@@ -59,7 +59,7 @@ if (
  initBotId({
    protect: [
      {
-        path: "/api/book/event",
+        path: "*/api/book/event",
        method: "POST",
      },
    ],
@@ -12,7 +12,7 @@ import type { AppCategories } from "@calcom/prisma/enums";
 import type { AppFrontendPayload } from "@calcom/types/App";
 import classNames from "@calcom/ui/classNames";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { SearchIcon } from "@coss/ui/icons";
 import type { HorizontalTabItemProps } from "@calcom/ui/components/navigation";
 import { HorizontalTabs } from "@calcom/ui/components/navigation";

@@ -39,7 +39,7 @@ function AppsSearch({
  const { t } = useLocale();
  return (
    <TextField
-      addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
+      addOnLeading={<SearchIcon className="text-subtle h-4 w-4" />}
      addOnClassname="!border-muted"
      containerClassName={classNames("focus:ring-offset-0! m-1", className)}
      type="search"
@@ -4,7 +4,7 @@ import Link from "next/link";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowLeftIcon, ArrowRightIcon } from "@coss/ui/icons";
 import { SkeletonText } from "@calcom/ui/components/skeleton";

 import type { getServerSideProps } from "@lib/apps/categories/getServerSideProps";
@@ -22,7 +22,7 @@ export default function Apps({ categories }: PageProps) {
        <Link
          href="/apps"
          className="text-emphasis inline-flex items-center justify-start gap-1 rounded-sm py-2">
-          <Icon name="arrow-left" className="h-4 w-4" />
+          <ArrowLeftIcon className="h-4 w-4" />
          {isLocaleReady ? t("app_store") : <SkeletonText className="h-6 w-24" />}{" "}
        </Link>
      </div>
@@ -38,7 +38,7 @@ export default function Apps({ categories }: PageProps) {
                <h3 className="font-medium capitalize">{category.name}</h3>
                <p className="text-subtle text-sm">
                  {t("number_apps", { count: category.count })}{" "}
-                  <Icon name="arrow-right" className="inline-block h-4 w-4" />
+                  <ArrowRightIcon className="inline-block h-4 w-4" />
                </p>
              </div>
            </Link>
@@ -29,8 +29,8 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Form } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { List } from "@calcom/ui/components/list";
+import { PencilIcon } from "@coss/ui/icons";
 import { SkeletonButton, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";

@@ -92,7 +92,7 @@ const IntegrationContainer = ({
          <div className="flex items-center justify-self-end">
            {app.keys && (
              <Button color="secondary" className="mr-2" onClick={() => showKeyModal()}>
-                <Icon name="pencil" />
+                <PencilIcon />
              </Button>
            )}

@@ -11,7 +11,7 @@ import type { AppFrontendPayload as App } from "@calcom/types/App";
 import type { CredentialFrontendPayload as Credential } from "@calcom/types/Credential";
 import classNames from "@calcom/ui/classNames";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";

 import { AppCard } from "./AppCard";

@@ -90,7 +90,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
      {leftVisible && (
        <button onClick={handleLeft} className="absolute bottom-0 flex  lg:left-1/2">
          <div className="bg-default flex h-12 w-5 items-center justify-end">
-            <Icon name="chevron-left" className="text-subtle h-4 w-4" />
+            <ChevronLeftIcon className="text-subtle h-4 w-4" />
          </div>
          <div className="to-default flex h-12 w-5 bg-linear-to-l from-transparent" />
        </button>
@@ -131,7 +131,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
        <button onClick={handleRight} className="absolute bottom-0 right-0 flex ">
          <div className="to-default flex h-12 w-5 bg-linear-to-r from-transparent" />
          <div className="bg-default flex h-12 w-5 items-center justify-end">
-            <Icon name="chevron-right" className="text-subtle h-4 w-4" />
+            <ChevronRightIcon className="text-subtle h-4 w-4" />
          </div>
        </button>
      )}
@@ -2,8 +2,8 @@ import Image from "next/image";
 import Link from "next/link";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { ArrowRightIcon } from "@coss/ui/icons";

 import { Slider } from "./Slider";

@@ -52,7 +52,7 @@ export function AppStoreCategories({
              )}
              <p className="text-subtle pt-2 text-sm font-medium">
                {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
-                <Icon name="arrow-right" className="inline-block h-4 w-4" />
+                <ArrowRightIcon className="inline-block h-4 w-4" />
              </p>
            </div>
          </Link>
@@ -8,8 +8,8 @@ import type { ComponentProps, FC } from "react";
 import { useEffect, useRef } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { ArrowLeftIcon, ArrowRightIcon } from "@coss/ui/icons";

 const SliderButton: FC<ComponentProps<"button">> = (props) => {
  const { children, ...rest } = props;
@@ -64,10 +64,10 @@ export const Slider = <T extends string | unknown>({
          )}
          <div className="glide__arrows ml-auto flex items-center gap-x-1" data-glide-el="controls">
            <SliderButton data-glide-dir="<">
-              <Icon name="arrow-left" className="h-5 w-5" />
+              <ArrowLeftIcon className="h-5 w-5" />
            </SliderButton>
            <SliderButton data-glide-dir=">">
-              <Icon name="arrow-right" className="h-5 w-5" />
+              <ArrowRightIcon className="h-5 w-5" />
            </SliderButton>
          </div>
        </div>
@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";

 import AuthContainer from "@components/ui/AuthContainer";

@@ -44,7 +44,7 @@ export function Logout(props: PageProps) {
    <AuthContainer showLogo>
      <div className="mb-4">
        <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-          <Icon name="check" className="h-6 w-6 text-green-600" />
+          <CheckIcon className="h-6 w-6 text-green-600" />
        </div>
        <div className="mt-3 text-center sm:mt-5">
          <h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
@@ -13,7 +13,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon, PlusIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";

 export function Authorize() {
@@ -147,7 +147,7 @@ export function Authorize() {
        <div className="flex justify-center items-center">
          <Avatar
            alt=""
-            fallback={<Icon name="plus" className="w-6 h-6 text-subtle" />}
+            fallback={<PlusIcon className="w-6 h-6 text-subtle" />}
            className="items-center"
            imageSrc={client.logo}
            size="lg"
@@ -231,7 +231,7 @@ export function Authorize() {
        </ul>
        <div className="flex p-3 mt-8 mb-8 rounded-md bg-subtle">
          <div>
-            <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
+            <InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
          </div>
          <div className="ml-1">
            <div className="mb-1 text-sm font-medium">
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { PERMISSIONS_GROUPED_MAP } from "@calcom/platform-constants/permissions";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon, PlusIcon } from "@coss/ui/icons";

 import { hasPermission } from "../../../../../packages/platform/utils/permissions";

@@ -67,7 +67,7 @@ export default function Authorize() {
          {client.logo ? (
            <Avatar
              alt=""
-              fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
+              fallback={<PlusIcon className="text-subtle h-6 w-6" />}
              className="items-center"
              imageSrc={client.logo}
              size="lg"
@@ -75,7 +75,7 @@ export default function Authorize() {
          ) : (
            <Avatar
              alt=""
-              fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
+              fallback={<PlusIcon className="text-subtle h-6 w-6" />}
              className="items-center"
              imageSrc="/cal-com-icon.svg"
              size="lg"
@@ -98,7 +98,7 @@ export default function Authorize() {
        <ul className="stack-y-4 text-sm text-black">{permissions}</ul>
        <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
          <div>
-            <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
+            <InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
          </div>
          <div className="ml-1 ">
            <div className="mb-1 text-sm font-medium">
@@ -1,19 +1,18 @@
 "use client";

-import { motion } from "framer-motion";
-import { signIn } from "next-auth/react";
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import z from "zod";
-
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { MailOpenIcon, TriangleAlertIcon } from "@coss/ui/icons";
+import { motion } from "framer-motion";
+import { usePathname, useRouter } from "next/navigation";
+import { signIn } from "next-auth/react";
+import { useEffect, useRef, useState } from "react";
+import z from "zod";

 async function sendVerificationLogin(email: string, username: string, t: (key: string) => string) {
  await signIn("email", {
@@ -59,7 +58,7 @@ const querySchema = z.object({

 const PaymentFailedIcon = () => (
  <div className="rounded-full bg-orange-900 p-3">
-    <Icon name="triangle-alert" className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
+    <TriangleAlertIcon className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
  </div>
 );

@@ -106,9 +105,9 @@ const PaymentSuccess = () => (
  </div>
 );

-const MailOpenIcon = () => (
+const MailOpenIconWrapper = () => (
  <div className="bg-default rounded-full p-3">
-    <Icon name="mail-open" className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
+    <MailOpenIcon className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
  </div>
 );

@@ -170,7 +169,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
          ) : isPremiumUsername ? (
            <PaymentSuccess />
          ) : (
-            <MailOpenIcon />
+            <MailOpenIconWrapper />
          )}
          <h3 className="font-cal text-emphasis my-6 text-2xl font-normal leading-none">
            {hasPaymentFailed
@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { ExternalLinkIcon } from "@coss/ui/icons";
 import {
  Sheet,
  SheetContent,
@@ -132,7 +132,7 @@ export function BlocklistEntryDetailsSheet<T extends BlocklistEntry>({
                          <Link key={report.booking.uid} href={`/booking/${report.booking.uid}`}>
                            <div className="text-subtle flex items-center gap-1 text-sm">
                              {report.booking.title}
-                              <Icon name="external-link" className="h-4 w-4" />
+                              <ExternalLinkIcon className="h-4 w-4" />
                            </div>
                          </Link>
                        );
@@ -8,7 +8,7 @@ import { WatchlistType } from "@calcom/prisma/enums";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ExternalLinkIcon, GlobeIcon, MailIcon } from "@coss/ui/icons";

 import type { GroupedBookingReport, BlocklistScope } from "@calcom/features/blocklist/types";

@@ -130,7 +130,7 @@ export function BookingReportDetailsModal<T extends GroupedBookingReport>({
                      <Link key={report.id} href={`/booking/${report.booking.uid}`}>
                        <div className="text-subtle hover:text-emphasis flex items-center gap-1 text-sm">
                          {report.booking.title || t("untitled")}
-                          <Icon name="external-link" className="h-3 w-3" />
+                          <ExternalLinkIcon className="h-3 w-3" />
                        </div>
                      </Link>
                    ))}
@@ -157,12 +157,12 @@ export function BookingReportDetailsModal<T extends GroupedBookingReport>({
                      {
                        value: WatchlistType.EMAIL,
                        label: t("block_this_email"),
-                        iconLeft: <Icon name="mail" className="h-4 w-4" />,
+                        iconLeft: <MailIcon className="h-4 w-4" />,
                      },
                      {
                        value: WatchlistType.DOMAIN,
                        label: t("block_all_from_domain"),
-                        iconLeft: <Icon name="globe" className="h-4 w-4" />,
+                        iconLeft: <GlobeIcon className="h-4 w-4" />,
                      },
                    ]}
                  />
@@ -10,7 +10,7 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { Input, Label, TextArea, ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { GlobeIcon, MailIcon } from "@coss/ui/icons";

 import type { BlocklistScope, CreateBlocklistEntryFormData } from "@calcom/features/blocklist/types";

@@ -82,8 +82,8 @@ export function CreateBlocklistEntryModal({
  };

  const typeOptions = [
-    { label: t("email"), value: WatchlistType.EMAIL, iconLeft: <Icon name="mail" className="h-4 w-4" /> },
-    { label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: <Icon name="globe" className="h-4 w-4" /> },
+    { label: t("email"), value: WatchlistType.EMAIL, iconLeft: <MailIcon className="h-4 w-4" /> },
+    { label: t("domain"), value: WatchlistType.DOMAIN, iconLeft: <GlobeIcon className="h-4 w-4" /> },
  ];

  return (
@@ -16,8 +16,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { localStorage } from "@calcom/lib/webstorage";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { CalendarX2Icon } from "@coss/ui/icons";

 import { useBookerTime } from "@calcom/features/bookings/Booker/hooks/useBookerTime";
 import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param";
@@ -284,7 +284,7 @@ export const AvailableTimes = ({
          <div
            data-testId="no-slots-available"
            className="bg-subtle border-subtle flex h-full flex-col items-center rounded-md border p-6 dark:bg-transparent">
-            <Icon name="calendar-x-2" className="text-muted mb-2 h-4 w-4" />
+            <CalendarX2Icon className="text-muted mb-2 h-4 w-4" />
            <p className={classNames("text-muted", showTimeFormatToggle ? "-mt-1 text-lg" : "text-sm")}>
              {t("all_booked_today")}
            </p>
@@ -7,7 +7,7 @@ import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
 import { getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import React, { useEffect, useMemo } from "react";
 import { useBookingCalendarData } from "~/bookings/hooks/useBookingCalendarData";
@@ -136,11 +136,11 @@ function BookingCalendarInner({
          <ButtonGroup combined>
            <Button color="secondary" onClick={goToPreviousWeek}>
              <span className="sr-only">{t("view_previous_week")}</span>
-              <Icon name="chevron-left" className="h-4 w-4" />
+              <ChevronLeftIcon className="h-4 w-4" />
            </Button>
            <Button color="secondary" onClick={goToNextWeek}>
              <span className="sr-only">{t("view_next_week")}</span>
-              <Icon name="chevron-right" className="h-4 w-4" />
+              <ChevronRightIcon className="h-4 w-4" />
            </Button>
          </ButtonGroup>
          <ViewToggleButton bookingsV3Enabled={bookingsV3Enabled} />
@@ -20,7 +20,6 @@ import classNames from "@calcom/ui/classNames";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { SegmentedControl } from "@calcom/ui/components/segmented-control";
 import {
  Sheet,
@@ -30,6 +29,7 @@ import {
  SheetHeader,
  SheetTitle,
 } from "@calcom/ui/components/sheet";
+import { ExternalLinkIcon, RepeatIcon } from "@coss/ui/icons";
 import { BookingHistory } from "@calcom/web/modules/booking-audit/components/BookingHistory";
 import assignmentReasonBadgeTitleMap from "@lib/booking/assignmentReasonBadgeTitleMap";
 import Link from "next/link";
@@ -202,15 +202,15 @@ function BookingDetailsSheetInner({
  const recurringInfo =
    booking.recurringEventId && booking.eventType?.recurringEvent
      ? {
-          count: booking.eventType.recurringEvent.count,
-          recurringEvent: booking.eventType.recurringEvent,
-        }
+        count: booking.eventType.recurringEvent.count,
+        recurringEvent: booking.eventType.recurringEvent,
+      }
      : null;

  const customResponses = booking.responses
    ? Object.entries(booking.responses as Record<string, unknown>)
-        .filter(([fieldName]) => shouldShowFieldInCustomResponses(fieldName))
-        .map(([question, answer]) => [question, answer] as [string, unknown])
+      .filter(([fieldName]) => shouldShowFieldInCustomResponses(fieldName))
+      .map(([question, answer]) => [question, answer] as [string, unknown])
    : [];

  const reason =
@@ -220,7 +220,7 @@ function BookingDetailsSheetInner({
  return (
    <Sheet open={true} onOpenChange={handleClose} modal={false}>
      <SheetContent
-        className="overflow-y-auto"
+        className="overflow-y-auto pb-0 sm:pb-0"
        hideOverlay
        onInteractOutside={(e) => {
          // Check if the click is on a booking list item
@@ -349,7 +349,7 @@ function BookingDetailsSheetInner({
          </div>
        </SheetBody>

-        <SheetFooter className="bg-muted border-subtle -mx-4 -mb-4 border-t pt-0 sm:-mx-6 sm:-my-6">
+        <SheetFooter className="bg-muted border-subtle -mx-4 border-t pt-0 sm:-mx-6">
          <div className="flex w-full min-w-0 flex-row flex-wrap items-center justify-end gap-2 px-4 pb-4 pt-4">
            {isPending ? (
              <>
@@ -755,7 +755,7 @@ function OldRescheduledBookingInfo({
          <Link href={`/booking/${rescheduledToBooking.uid}`}>
            <div className="text-default flex items-center gap-1 text-sm underline">
              {t("view_booking")}
-              <Icon name="external-link" className="h-4 w-4" />
+              <ExternalLinkIcon className="h-4 w-4" />
            </div>
          </Link>
        </Section>
@@ -798,7 +798,7 @@ function NewRescheduledBookingInfo({ booking }: { booking: BookingOutput }) {
        <Link href={`/booking/${booking.fromReschedule}`}>
          <div className="text-default flex items-center gap-1 text-sm underline">
            {t("original_booking")}
-            <Icon name="external-link" className="h-4 w-4" />
+            <ExternalLinkIcon className="h-4 w-4" />
          </div>
        </Link>
      </Section>
@@ -894,7 +894,7 @@ function BookingHeaderBadges({
      ) : null}
      {recurringInfo && (
        <Badge variant="gray">
-          <Icon name="repeat" className="mr-1 h-3 w-3" />
+          <RepeatIcon className="mr-1 h-3 w-3" />
          {recurringInfo.count}
        </Badge>
      )}
@@ -1,7 +1,8 @@
 "use client";

 import dayjs from "@calcom/dayjs";
-import { useDataTable, useDisplayedFilterCount } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useDisplayedFilterCount } from "~/data-table/hooks/useDisplayedFilterCount";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
@@ -1,6 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";

 export interface BookingSuccessCardProps {
  title: string;
@@ -42,7 +42,7 @@ export function BookingSuccessCard({
                aria-labelledby="modal-headline">
                <div>
                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                    <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
+                    <CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
                  </div>
                </div>
                <div className="mb-8 mt-6 text-center last:mb-0">
@@ -1,6 +1,6 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";

 export interface DecoyBookingSuccessCardProps {
  title: string;
@@ -42,7 +42,7 @@ export function DecoyBookingSuccessCard({
                aria-labelledby="modal-headline">
                <div>
                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                    <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
+                    <CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
                  </div>
                </div>
                <div className="mb-8 mt-6 text-center last:mb-0">
@@ -1,7 +1,7 @@
 import { useState } from "react";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon } from "@coss/ui/icons";

 export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
  const { t } = useLocale();
@@ -17,7 +17,7 @@ export const DryRunMessage = ({ isEmbed }: { isEmbed?: boolean }) => {
      } z-50 -translate-x-1/2 transform cursor-pointer items-center gap-3 rounded-xl border p-3 text-sm shadow-md`}>
      <div className="flex items-center gap-3">
        <div className="relative">
-          <Icon name="info" className="h-5 w-5 text-orange-500" />
+          <InfoIcon className="h-5 w-5 text-orange-500" />
        </div>
        <div className="text-emphasis font-medium" data-testid="dry-run-msg">
          {t("dry_run_mode_active")}
@@ -2,7 +2,7 @@ import { useState } from "react";

 import { BOOKER_NUMBER_OF_DAYS_TO_LOAD } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowRightIcon, InfoIcon } from "@coss/ui/icons";

 type Props = {
  onButtonClick: () => void;
@@ -30,7 +30,7 @@ export function HavingTroubleFindingTime(props: Props) {
  return (
    <div className="bg-default border-subtle mt-6 flex w-1/2 min-w-0 items-center justify-between rounded-[32px] border p-3 text-sm leading-none shadow-sm lg:w-1/3">
      <div className="flex items-center gap-2 overflow-x-hidden">
-        <Icon name="info" className="text-default h-4 w-4" />
+        <InfoIcon className="text-default h-4 w-4" />
        <p className="w-full  leading-none">{t("having_trouble_finding_time")}</p>
      </div>
      {/* TODO: we should give this more of a touch target on mobile */}
@@ -41,7 +41,7 @@ export function HavingTroubleFindingTime(props: Props) {
          props.onButtonClick();
          setInternalClick(true);
        }}>
-        {t("show_more")} <Icon name="arrow-right" className="h-4 w-4" />
+        {t("show_more")} <ArrowRightIcon className="h-4 w-4" />
      </button>
    </div>
  );
@@ -9,7 +9,7 @@ import type { TimezoneSelectComponentProps } from "@calcom/features/timezone/com
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { GlobeIcon } from "@coss/ui/icons";
 import dynamic from "next/dynamic";
 import type { ComponentType } from "react";
 import { useMemo } from "react";
@@ -104,7 +104,7 @@ export const SlotSelectionModalHeader = ({
        {event && <EventDetails event={event} blocks={[EventDetailBlocks.DURATION]} />}

        <div className="mb-0 flex items-center gap-2 text-default text-sm">
-          <Icon name="globe" className="h-4 w-4 shrink-0 text-subtle" />
+          <GlobeIcon className="h-4 w-4 shrink-0 text-subtle" />
          {TimezoneSelect && (
            <span className="-mt-[2px] flex h-6 min-w-32 max-w-full items-center justify-start">
              <TimezoneSelect
@@ -9,7 +9,7 @@ import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
 import { Input } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon } from "@coss/ui/icons";

 export const VerifyCodeDialog = ({
  isOpenDialog,
@@ -113,7 +113,7 @@ export const VerifyCodeDialog = ({
            {error && (
              <div className="mt-2 flex items-center gap-x-2 text-sm text-red-700">
                <div>
-                  <Icon name="info" className="h-3 w-3" />
+                  <InfoIcon className="h-3 w-3" />
                </div>
                <p>{error}</p>
              </div>
@@ -5,7 +5,7 @@ import { useEffect } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import { ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CalendarIcon, MenuIcon } from "@coss/ui/icons";

 import { useBookingsView } from "../hooks/useBookingsView";

@@ -42,13 +42,13 @@ export function ViewToggleButton({ bookingsV3Enabled }: ViewToggleButtonProps) {
            value: "list",
            label: "",
            tooltip: t("list_view"),
-            iconLeft: <Icon name="menu" className="h-4 w-4" />,
+            iconLeft: <MenuIcon className="h-4 w-4" />,
          },
          {
            value: "calendar",
            label: "",
            tooltip: t("calendar_view"),
-            iconLeft: <Icon name="calendar" className="h-4 w-4" />,
+            iconLeft: <CalendarIcon className="h-4 w-4" />,
          },
        ]}
      />
@@ -8,8 +8,8 @@ import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import classNames from "@calcom/ui/classNames";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { LinkIcon, MapPinIcon } from "@coss/ui/icons";

 const excludeNullValues = (value: unknown) => !!value;

@@ -81,7 +81,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
      return (
        <div key={`${location.type}-${index}`} className="flex flex-row items-center text-sm font-medium">
          {eventLocationType.iconUrl === "/link.svg" ? (
-            <Icon name="link" className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
+            <LinkIcon className="text-default h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
          ) : (
            <RenderIcon eventLocationType={eventLocationType} isTooltip={false} />
          )}
@@ -98,7 +98,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
  return filteredLocations.length > 1 ? (
    <div className="flex flex-row items-center text-sm font-medium">
      {isPlatform ? (
-        <Icon name="map-pin" className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
+        <MapPinIcon className={classNames("me-[10px] h-4 w-4 opacity-70 dark:invert")} />
      ) : (
        <img
          src="/map-pin-dark.svg"
@@ -8,7 +8,7 @@ import { useBookerStoreContext } from "@calcom/features/bookings/Booker/BookerSt
 import type { BookerEvent } from "@calcom/features/bookings/types";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";

 /** Render X mins as X hours or X hours Y mins instead of in minutes once >= 60 minutes */
 export const getDurationFormatted = (mins: number | undefined, t: TFunction) => {
@@ -106,7 +106,7 @@ export const EventDuration = ({
      {leftVisible && (
        <button onClick={handleLeft} className="absolute bottom-0 left-0 flex">
          <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
-            <Icon name="chevron-left" className="text-subtle h-4 w-4" />
+            <ChevronLeftIcon className="text-subtle h-4 w-4" />
          </div>
          <div className="to-default flex h-9 w-5 bg-linear-to-l from-transparent" />
        </button>
@@ -136,7 +136,7 @@ export const EventDuration = ({
        <button onClick={handleRight} className="absolute bottom-0 right-0 flex">
          <div className="to-default flex h-9 w-5 bg-linear-to-r from-transparent" />
          <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
-            <Icon name="chevron-right" className="text-subtle h-4 w-4" />
+            <ChevronRightIcon className="text-subtle h-4 w-4" />
          </div>
        </button>
      )}
@@ -1,8 +1,8 @@
-import { Icon } from "@calcom/ui/components/icon";
 import { SatSymbol } from "@calcom/ui/components/icon";
+import { CreditCardIcon } from "@coss/ui/icons";

 export function PriceIcon(props: { currency: string; className?: string }) {
  const { className, currency } = props;
-  if (currency !== "BTC") return <Icon name="credit-card" className={className} />;
+  if (currency !== "BTC") return <CreditCardIcon className={className} />;
  return <SatSymbol className={className} />;
 }
@@ -1,5 +1,6 @@
-import type { ActiveFilter, ActiveFilters, ActiveFiltersValidator } from "@calcom/features/data-table";
+import type { ActiveFilter, ActiveFilters } from "@calcom/features/data-table";
 import { ColumnFilterType } from "@calcom/features/data-table";
+import type { ActiveFiltersValidator } from "~/data-table/DataTableProvider";
 import { trpc } from "@calcom/trpc/react";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import { useCallback, useMemo } from "react";
@@ -1,9 +1,5 @@
-import {
-  useFilterValue,
-  ZMultiSelectFilterValue,
-  ZDateRangeFilterValue,
-  ZTextFilterValue,
-} from "@calcom/features/data-table";
+import { ZMultiSelectFilterValue, ZDateRangeFilterValue, ZTextFilterValue } from "@calcom/features/data-table";
+import { useFilterValue } from "~/data-table/hooks/useFilterValue";

 export function useBookingFilters() {
  const eventTypeIds = useFilterValue("eventTypeId", ZMultiSelectFilterValue)?.data as number[] | undefined;
@@ -1,6 +1,7 @@
 import { useMemo, useEffect, useRef } from "react";

-import { ColumnFilterType, useDataTable } from "@calcom/features/data-table";
+import { ColumnFilterType } from "@calcom/features/data-table";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";

 /**
@@ -1,7 +1,7 @@
 "use client";

 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";

 export default function DryRunSuccessful() {
  const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function DryRunSuccessful() {
    <div className="flex h-screen">
      <div className="bg-default m-auto rounded-md p-10 text-center">
        <div className="bg-cal-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
-          <Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
+          <CheckIcon className="h-6 w-6 text-green-600 dark:text-green-400" />
        </div>
        <h1 className="text-emphasis mb-4 text-2xl font-medium" data-testid="dry-run-success-msg">
          {t("booking_dry_run_successful")}
@@ -54,6 +54,13 @@ import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { EmailInput, TextArea } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
+import {
+  CalendarIcon,
+  CheckIcon,
+  ChevronLeftIcon,
+  ExternalLinkIcon,
+  XIcon,
+} from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { useCalcomTheme } from "@calcom/ui/styles";
 import CancelBooking from "@calcom/web/components/booking/CancelBooking";
@@ -476,7 +483,7 @@ export default function Success(props: PageProps) {
            href={allRemainingBookings ? "/bookings/recurring" : "/bookings/upcoming"}
            data-testid="back-to-bookings"
            className="hover:bg-subtle text-subtle hover:text-default mt-2 inline-flex px-1 py-2 text-sm transition dark:hover:bg-transparent">
-            <Icon name="chevron-left" className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
+            <ChevronLeftIcon className="h-5 w-5 rtl:rotate-180" /> {t("back_to_bookings")}
          </Link>
        </div>
      )}
@@ -536,12 +543,12 @@ export default function Success(props: PageProps) {
                          isCancelled ? "bg-error" : ""
                        )}>
                        {!giphyImage && !needsConfirmation && !isAwaitingPayment && isReschedulable && (
-                          <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
+                          <CheckIcon className="h-5 w-5 text-green-600 dark:text-green-400" />
                        )}
                        {(needsConfirmation || isAwaitingPayment) && isReschedulable && (
-                          <Icon name="calendar" className="text-emphasis h-5 w-5" />
+                          <CalendarIcon className="text-emphasis h-5 w-5" />
                        )}
-                        {isCancelled && <Icon name="x" className="h-5 w-5 text-red-600 dark:text-red-200" />}
+                        {isCancelled && <XIcon className="h-5 w-5 text-red-600 dark:text-red-200" />}
                      </div>
                    </div>
                    <div className="mb-8 mt-6 text-center last:mb-0">
@@ -1172,7 +1179,7 @@ const RescheduledToLink = ({ rescheduledToUid }: { rescheduledToUid: string }) =
          <Link href={`/booking/${rescheduledToUid}`}>
            <div className="flex items-center gap-1">
              {t("view_booking")}
-              <Icon name="external-link" className="h-4 w-4" />
+              <ExternalLinkIcon className="h-4 w-4" />
            </div>
          </Link>
        </span>
@@ -1198,7 +1205,7 @@ const DisplayLocation = ({
      className={classNames("text-default flex items-center gap-2", className)}
      rel="noreferrer">
      {providerName || "Link"}
-      <Icon name="external-link" className="text-default inline h-4 w-4" />
+      <ExternalLinkIcon className="text-default inline h-4 w-4" />
    </a>
  ) : (
    <p className={className}>{locationToDisplay}</p>
@@ -1,6 +1,7 @@
 "use client";

-import { ColumnFilterType, DataTableProvider, type SystemFilterSegment } from "@calcom/features/data-table";
+import { ColumnFilterType, type SystemFilterSegment } from "@calcom/features/data-table";
+import { DataTableProvider } from "~/data-table/DataTableProvider";
 import { useSegments } from "~/data-table/hooks/useSegments";
 import FeatureOptInBannerWrapper from "~/feature-opt-in/components/FeatureOptInBannerWrapper";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -7,7 +7,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowLeftIcon, RotateCwIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import type { ICalendarSwitchProps } from "@calcom/ui/components/calendar-switch";

@@ -100,12 +100,12 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
      </label>
      {!!props.destination && (
        <span className="bg-subtle text-default ml-8 inline-flex items-center gap-1 rounded-md px-2 py-1 text-sm font-normal sm:ml-4">
-          <Icon name="arrow-left" className="h-4 w-4" />
+          <ArrowLeftIcon className="h-4 w-4" />
          {t("adding_events_to")}
        </span>
      )}
      {mutation.isPending && (
-        <Icon name="rotate-cw" className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />
+        <RotateCwIcon className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />
      )}
    </div>
  );
@@ -20,7 +20,7 @@ import type {
  SegmentIdentifier,
  ActiveFilters,
  UseSegments,
-} from "./lib/types";
+} from "@calcom/features/data-table/lib/types";

 export type { ActiveFiltersValidatorState };
 export type { ActiveFiltersValidator } from "./contexts";
@@ -10,7 +10,7 @@ import { useEffect, useState, memo, useMemo } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Command, CommandList, CommandItem } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowDownIcon, ArrowUpIcon, CheckIcon, ChevronsUpDownIcon, EyeOffIcon } from "@coss/ui/icons";
 import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
 import {
  TableNew,
@@ -21,8 +21,8 @@ import {
  TableRow,
 } from "@calcom/ui/components/table";

-import { useColumnSizingVars } from "@calcom/features/data-table/hooks";
-import { useColumnResizing } from "@calcom/features/data-table/hooks/useColumnResizing";
+import { useColumnSizingVars } from "~/data-table/hooks/useColumnSizingVars";
+import { useColumnResizing } from "~/data-table/hooks/useColumnResizing";
 import type { SeparatorRow } from "@calcom/features/data-table/lib/separator";
 import { isSeparatorRow } from "@calcom/features/data-table/lib/separator";

@@ -481,11 +481,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
            }>
            {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
          </div>
-          {header.column.getIsSorted() === "asc" && <Icon name="arrow-up" className="h-4 w-4 shrink-0" />}
-          {header.column.getIsSorted() === "desc" && <Icon name="arrow-down" className="h-4 w-4 shrink-0" />}
+          {header.column.getIsSorted() === "asc" && <ArrowUpIcon className="h-4 w-4 shrink-0" />}
+          {header.column.getIsSorted() === "desc" && <ArrowDownIcon className="h-4 w-4 shrink-0" />}
          <div className="grow" />
-          <Icon
-            name="chevrons-up-down"
+          <ChevronsUpDownIcon
            className={classNames(
              "text-subtle h-4 w-4 shrink-0",
              !open && "opacity-0 group-hover:opacity-100"
@@ -507,10 +506,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
                      header.column.toggleSorting(false, true);
                    }
                  }}>
-                  <Icon name="arrow-up" className="h-4 w-4" />
+                  <ArrowUpIcon className="h-4 w-4" />
                  {t("asc")}
                  <div className="flex-1" />
-                  {header.column.getIsSorted() === "asc" && <Icon name="check" className="h-4 w-4" />}
+                  {header.column.getIsSorted() === "asc" && <CheckIcon className="h-4 w-4" />}
                </CommandItem>
                <CommandItem
                  className="flex cursor-pointer items-center gap-2 px-3 py-2"
@@ -521,10 +520,10 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
                      header.column.toggleSorting(true, true);
                    }
                  }}>
-                  <Icon name="arrow-down" className="h-4 w-4" />
+                  <ArrowDownIcon className="h-4 w-4" />
                  {t("desc")}
                  <div className="flex-1" />
-                  {header.column.getIsSorted() === "desc" && <Icon name="check" className="h-4 w-4" />}
+                  {header.column.getIsSorted() === "desc" && <CheckIcon className="h-4 w-4" />}
                </CommandItem>
              </>
            )}
@@ -535,7 +534,7 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
                  header.column.toggleVisibility(false);
                  setOpen(false);
                }}>
-                <Icon name="eye-off" className="h-4 w-4" />
+                <EyeOffIcon className="h-4 w-4" />
                {t("hide")}
              </CommandItem>
            )}
@@ -4,7 +4,7 @@ import { type Table } from "@tanstack/react-table";

 import { Pagination } from "@calcom/ui/components/pagination";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";

 interface DataTablePaginationProps<TData> {
  table: Table<TData>;
@@ -10,7 +10,7 @@ import classNames from "@calcom/ui/classNames";
 import { Button, type ButtonProps } from "@calcom/ui/components/button";
 import { FilterSearchField } from "@calcom/ui/components/form";

-import { useColumnFilters, useDataTable } from "@calcom/features/data-table/hooks";
+import { useColumnFilters, useDataTable } from "~/data-table/hooks";

 interface DataTableToolbarProps extends ComponentPropsWithoutRef<"div"> {
  children: React.ReactNode;
@@ -4,9 +4,9 @@ import type { Row, VisibilityState } from "@tanstack/react-table";
 import { noop } from "lodash";
 import { useEffect, useRef } from "react";

-import { useColumnFilters } from "@calcom/features/data-table/hooks/useColumnFilters";
-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
-import { useFetchMoreOnBottomReached } from "@calcom/features/data-table/hooks/useFetchMoreOnBottomReached";
+import { useColumnFilters } from "~/data-table/hooks/useColumnFilters";
+import { useDataTable } from "~/data-table/hooks/useDataTable";
+import { useFetchMoreOnBottomReached } from "~/data-table/hooks/useFetchMoreOnBottomReached";
 import type { DataTablePropsFromWrapper } from "./DataTable";
 import { DataTable } from "./DataTable";
 import { DataTablePagination } from "./DataTablePagination";
@@ -2,7 +2,7 @@

 import { type Table } from "@tanstack/react-table";

-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";
 import { ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { DateRangeFilter } from "./DateRangeFilter";
 import { FilterPopover } from "./FilterPopover";
@@ -7,11 +7,11 @@ import { forwardRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Command, CommandInput, CommandList, CommandEmpty, CommandItem } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
+import { EyeOffIcon, PlusIcon } from "@coss/ui/icons";
 import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
 import { Tooltip } from "@calcom/ui/components/tooltip";

-import { useDataTable, useFilterableColumns } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterableColumns } from "~/data-table/hooks";

 export interface AddFilterButtonProps<TData> {
  table: Table<TData>;
@@ -55,7 +55,7 @@ function AddFilterButtonComponent<TData>(
            <PopoverTrigger asChild>
              <Button ref={ref} color="secondary" data-testid="add-filter-button" className="h-full">
                <span className="sr-only">{t("filter")}</span>
-                <Icon name="plus" />
+                <PlusIcon />
              </Button>
            </PopoverTrigger>
          </Tooltip>
@@ -81,7 +81,7 @@ function AddFilterButtonComponent<TData>(
                    className="flex items-center justify-between rounded-none px-4 py-2"
                    data-testid={`add-filter-item-${column.id}`}>
                    <span>{startCase(column.title)}</span>
-                    {showHiddenIndicator && <Icon name="eye-off" className="h-4 w-4 opacity-50" />}
+                    {showHiddenIndicator && <EyeOffIcon className="h-4 w-4 opacity-50" />}
                  </CommandItem>
                );
              })}
@@ -14,9 +14,9 @@ import {
  CommandSeparator,
  CommandGroup,
 } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";

-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import type {
  FacetedValue,
  FilterableColumn as _FilterableColumn,
@@ -141,7 +141,7 @@ export function BaseSelectFilterOptions<T extends Extract<FilterType, "ms" | "ss
                    isOptionSelected(filterValue, optionValue) ? "bg-primary-default" : "border opacity-50"
                  )}>
                  {isOptionSelected(filterValue, optionValue) && (
-                    <Icon name="check" className="text-primary-foreground h-4 w-4" />
+                    <CheckIcon className="text-primary-foreground h-4 w-4" />
                  )}
                </div>
                {optionLabel}
@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Tooltip } from "@calcom/ui/components/tooltip";

-import { useDataTable } from "@calcom/features/data-table/hooks/useDataTable";
+import { useDataTable } from "~/data-table/hooks/useDataTable";

 export const ClearFiltersButton = ({ exclude }: { exclude?: string[] }) => {
  const { t } = useLocale();
@@ -16,8 +16,8 @@ import {
  CommandItem,
  CommandSeparator,
 } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverTrigger, PopoverContent } from "@calcom/ui/components/popover";
+import { CheckIcon } from "@coss/ui/icons";

 export interface ColumnVisiblityProps<TData> {
  table: Table<TData>;
@@ -66,7 +66,7 @@ function ColumnVisibilityButtonComponent<TData>(
                        "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
                        isVisible ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
                      )}>
-                      <Icon name="check" className={classNames("h-4 w-4", !isVisible && "invisible")} />
+                      <CheckIcon className={classNames("h-4 w-4", !isVisible && "invisible")} />
                    </div>
                    {column.columnDef.header}
                  </CommandItem>
@@ -16,10 +16,10 @@ import {
  CommandSeparator,
 } from "@calcom/ui/components/command";
 import { DateRangePicker } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
+import { CheckIcon } from "@coss/ui/icons";

-import { useDataTable, useFilterValue } from "@calcom/features/data-table/hooks";
+import { useDataTable, useFilterValue } from "~/data-table/hooks";
 import {
  CUSTOM_PRESET,
  CUSTOM_PRESET_VALUE,
@@ -236,7 +236,7 @@ export const DateRangeFilter = ({
                    updateDateRangeFromPreset(option.value);
                  }}>
                  <span className="capitalize">{t(option.labelKey, option.i18nOptions)}</span>
-                  {selectedPreset.value === option.value && <Icon name="check" />}
+                  {selectedPreset.value === option.value && <CheckIcon />}
                </CommandItem>
              ))}
            </CommandList>
@@ -2,7 +2,7 @@

 import { type Table } from "@tanstack/react-table";

-import { useDisplayedFilterCount } from "@calcom/features/data-table/hooks";
+import { useDisplayedFilterCount } from "~/data-table/hooks";
 import { ActiveFilters } from "./ActiveFilters";
 import { AddFilterButton } from "./AddFilterButton";

@@ -6,7 +6,7 @@ import { Button } from "@calcom/ui/components/button";
 import type { IconName } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";

-import { useFilterValue } from "@calcom/features/data-table/hooks";
+import { useFilterValue } from "~/data-table/hooks";
 import {
  type FilterableColumn,
  type FilterValue,
@@ -1,6 +1,6 @@
 "use client";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZMultiSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, NumberInput } from "@calcom/ui/components/form";

-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZNumberFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -2,7 +2,7 @@

 import type { FilterType } from "@calcom/types/data-table";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZSingleSelectFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import { BaseSelectFilterOptions } from "./BaseSelectFilterOptions";
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Select, Input } from "@calcom/ui/components/form";

-import { useFilterValue, useDataTable } from "@calcom/features/data-table/hooks";
+import { useFilterValue, useDataTable } from "~/data-table/hooks";
 import type { FilterableColumn } from "@calcom/features/data-table/lib/types";
 import { ZTextFilterValue, ColumnFilterType } from "@calcom/features/data-table/lib/types";
 import type { FilterType } from "@calcom/types/data-table";
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from "react";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";

 export function useFilterPopoverOpen(columnId: string) {
  const { filterToOpen } = useDataTable();
@@ -3,7 +3,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Dialog, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { FilterSegmentOutput } from "@calcom/features/data-table/lib/types";

 export function DeleteSegmentDialog({
@@ -9,7 +9,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/co
 import { Form, TextField } from "@calcom/ui/components/form";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type { CombinedFilterSegment } from "@calcom/features/data-table/lib/types";

 type FormValues = {
@@ -1,5 +1,5 @@
 import { checkAdminOrOwner } from "@calcom/features/auth/lib/checkAdminOrOwner";
-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";
 import type {
  CombinedFilterSegment,
  FilterSegmentOutput,
@@ -19,7 +19,7 @@ import { Form, Input, Label, Select, Switch } from "@calcom/ui/components/form";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { showToast } from "@calcom/ui/components/toast";

-import { useDataTable } from "@calcom/features/data-table/hooks";
+import { useDataTable } from "~/data-table/hooks";

 interface FormValues {
  name: string;
@@ -3,7 +3,7 @@
 import debounce from "lodash/debounce";
 import { createContext, useContext, useCallback, useMemo, useEffect } from "react";

-import type { FilterValue, ActiveFilters } from "../lib/types";
+import type { FilterValue, ActiveFilters } from "@calcom/features/data-table/lib/types";
 import { useDataTableSegment } from "./DataTableSegmentContext";
 import { useDataTableState } from "./DataTableStateContext";

@@ -9,8 +9,8 @@ import type {
  CombinedFilterSegment,
  SegmentIdentifier,
  UseSegments,
-} from "../lib/types";
-import { SYSTEM_SEGMENT_PREFIX } from "../lib/types";
+} from "@calcom/features/data-table/lib/types";
+import { SYSTEM_SEGMENT_PREFIX } from "@calcom/features/data-table/lib/types";
 import { useDataTableState } from "./DataTableStateContext";

 export type DataTableSegmentContextType = {
--- a/Show More
+++ b/Show More