diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
index 704789d8db..0a8af24122 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
@@ -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 */}
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
index da7c58be9d..348d50a487 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
@@ -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">
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
index 1f0f4bc486..8b6b8d344b 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
@@ -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"),
     },
diff --git a/apps/web/app/(use-page-wrapper)/auth/error/page.tsx b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx
index b19626fcba..b6289012d8 100644
--- a/apps/web/app/(use-page-wrapper)/auth/error/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/auth/error/page.tsx
@@ -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">
diff --git a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx b/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
index f7231895f5..cf58fe0667 100644
--- a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
@@ -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>
     </>
diff --git a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx b/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
index 2bc0756255..1d0480fe2b 100644
--- a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
+++ b/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
@@ -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"),
     },
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
index 866311d574..2a7128d6ca 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
@@ -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>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
index 5c815f82aa..676bd0fb0a 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
@@ -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>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
index 373a9de136..0f0009d2dc 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
@@ -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">
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index 00084c28ec..a0076649be 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/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>
diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
index 9a7b247eb2..5e530ddcb8 100644
--- a/apps/web/components/EnterprisePage.tsx
+++ b/apps/web/components/EnterprisePage.tsx
@@ -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"),
     },
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index 030798a63a..ca85f883b1 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -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>
diff --git a/apps/web/components/apps/alby/Setup.tsx b/apps/web/components/apps/alby/Setup.tsx
index 4d009286e2..2b581d6345 100644
--- a/apps/web/components/apps/alby/Setup.tsx
+++ b/apps/web/components/apps/alby/Setup.tsx
@@ -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>
diff --git a/apps/web/components/apps/btcpayserver/Setup.tsx b/apps/web/components/apps/btcpayserver/Setup.tsx
index 194c537964..557097d549 100644
--- a/apps/web/components/apps/btcpayserver/Setup.tsx
+++ b/apps/web/components/apps/btcpayserver/Setup.tsx
@@ -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")}
                         </>
                       ) : (
diff --git a/apps/web/components/apps/hitpay/Setup.tsx b/apps/web/components/apps/hitpay/Setup.tsx
index f2d3b96c2b..c0162cc2cb 100644
--- a/apps/web/components/apps/hitpay/Setup.tsx
+++ b/apps/web/components/apps/hitpay/Setup.tsx
@@ -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>
 
diff --git a/apps/web/components/apps/ics-feedcalendar/Setup.tsx b/apps/web/components/apps/ics-feedcalendar/Setup.tsx
index 74c950c2ea..3b3cc8dd48 100644
--- a/apps/web/components/apps/ics-feedcalendar/Setup.tsx
+++ b/apps/web/components/apps/ics-feedcalendar/Setup.tsx
@@ -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 && (
diff --git a/apps/web/components/apps/make/Setup.tsx b/apps/web/components/apps/make/Setup.tsx
index f51599ce3d..6914156500 100644
--- a/apps/web/components/apps/make/Setup.tsx
+++ b/apps/web/components/apps/make/Setup.tsx
@@ -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>
diff --git a/apps/web/components/apps/paypal/Setup.tsx b/apps/web/components/apps/paypal/Setup.tsx
index e915b1bf23..4feb59bc10 100644
--- a/apps/web/components/apps/paypal/Setup.tsx
+++ b/apps/web/components/apps/paypal/Setup.tsx
@@ -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">
diff --git a/apps/web/components/apps/routing-forms/Header.tsx b/apps/web/components/apps/routing-forms/Header.tsx
index 6aa28c2fc1..f301ac73c4 100644
--- a/apps/web/components/apps/routing-forms/Header.tsx
+++ b/apps/web/components/apps/routing-forms/Header.tsx
@@ -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" />,
             },
           ]}
         />
diff --git a/apps/web/components/apps/wipemycalother/confirmDialog.tsx b/apps/web/components/apps/wipemycalother/confirmDialog.tsx
index f179edee33..ba71617fbc 100644
--- a/apps/web/components/apps/wipemycalother/confirmDialog.tsx
+++ b/apps/web/components/apps/wipemycalother/confirmDialog.tsx
@@ -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" />
diff --git a/apps/web/components/booking/CancelBooking.tsx b/apps/web/components/booking/CancelBooking.tsx
index 8b03a7c75c..104aa55595 100644
--- a/apps/web/components/booking/CancelBooking.tsx
+++ b/apps/web/components/booking/CancelBooking.tsx
@@ -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>
diff --git a/apps/web/components/dialog/AddGuestsDialog.tsx b/apps/web/components/dialog/AddGuestsDialog.tsx
index 3ef7f7b8be..59886f4e78 100644
--- a/apps/web/components/dialog/AddGuestsDialog.tsx
+++ b/apps/web/components/dialog/AddGuestsDialog.tsx
@@ -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>
diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 4ce3de8e4d..fb93f63f6f 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -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>
             )}
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 37a3cba4b3..9b95ebdc15 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -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")} />
diff --git a/apps/web/components/dialog/ReassignDialog.tsx b/apps/web/components/dialog/ReassignDialog.tsx
index 0314e869e9..c626ce6c08 100644
--- a/apps/web/components/dialog/ReassignDialog.tsx
+++ b/apps/web/components/dialog/ReassignDialog.tsx
@@ -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>
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 092ba0fab8..8414185d42 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -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")} />
diff --git a/apps/web/components/getting-started/components/AppConnectionItem.tsx b/apps/web/components/getting-started/components/AppConnectionItem.tsx
index 81731873bd..0b90734f39 100644
--- a/apps/web/components/getting-started/components/AppConnectionItem.tsx
+++ b/apps/web/components/getting-started/components/AppConnectionItem.tsx
@@ -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>
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 0fbad2a581..3043aec93e 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -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">
diff --git a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
index 06faf2c0ec..e5f2952571 100644
--- a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
+++ b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
@@ -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>
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 717751c4d8..21e2b6738f 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -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" : ""}
diff --git a/apps/web/components/setup/LicenseSelection.tsx b/apps/web/components/setup/LicenseSelection.tsx
index 5250018464..96a6a0a568 100644
--- a/apps/web/components/setup/LicenseSelection.tsx
+++ b/apps/web/components/setup/LicenseSelection.tsx
@@ -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" : ""}
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 2c05494511..1fce8e1e87 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -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>
             )}
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index d680a0afc0..81e319088d 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -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" />
                 ) : (
                   <></>
                 )}
diff --git a/apps/web/components/ui/form/DatePicker.tsx b/apps/web/components/ui/form/DatePicker.tsx
index 002ad80ae0..e7144def2f 100644
--- a/apps/web/components/ui/form/DatePicker.tsx
+++ b/apps/web/components/ui/form/DatePicker.tsx
@@ -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}
diff --git a/apps/web/modules/apps/apps-view.tsx b/apps/web/modules/apps/apps-view.tsx
index 3f9d1f625d..8a211b67e9 100644
--- a/apps/web/modules/apps/apps-view.tsx
+++ b/apps/web/modules/apps/apps-view.tsx
@@ -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"
diff --git a/apps/web/modules/apps/categories/categories-view.tsx b/apps/web/modules/apps/categories/categories-view.tsx
index d7d89e0fc8..3c241b44d7 100644
--- a/apps/web/modules/apps/categories/categories-view.tsx
+++ b/apps/web/modules/apps/categories/categories-view.tsx
@@ -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>
diff --git a/apps/web/modules/apps/components/AdminAppsList.tsx b/apps/web/modules/apps/components/AdminAppsList.tsx
index e1afc0d243..e661a4c347 100644
--- a/apps/web/modules/apps/components/AdminAppsList.tsx
+++ b/apps/web/modules/apps/components/AdminAppsList.tsx
@@ -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>
             )}
 
diff --git a/apps/web/modules/apps/components/AllApps.tsx b/apps/web/modules/apps/components/AllApps.tsx
index 61d1426d4a..206805ca47 100644
--- a/apps/web/modules/apps/components/AllApps.tsx
+++ b/apps/web/modules/apps/components/AllApps.tsx
@@ -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>
       )}
diff --git a/apps/web/modules/apps/components/Categories.tsx b/apps/web/modules/apps/components/Categories.tsx
index 153df2489f..e7722e3788 100644
--- a/apps/web/modules/apps/components/Categories.tsx
+++ b/apps/web/modules/apps/components/Categories.tsx
@@ -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>
diff --git a/apps/web/modules/apps/components/Slider.tsx b/apps/web/modules/apps/components/Slider.tsx
index bad9f0f78b..c72bb3a4eb 100644
--- a/apps/web/modules/apps/components/Slider.tsx
+++ b/apps/web/modules/apps/components/Slider.tsx
@@ -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>
diff --git a/apps/web/modules/auth/logout-view.tsx b/apps/web/modules/auth/logout-view.tsx
index 502b709d9c..476e21df47 100644
--- a/apps/web/modules/auth/logout-view.tsx
+++ b/apps/web/modules/auth/logout-view.tsx
@@ -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">
diff --git a/apps/web/modules/auth/oauth2/authorize-view.tsx b/apps/web/modules/auth/oauth2/authorize-view.tsx
index 01a61eb853..93330ef03f 100644
--- a/apps/web/modules/auth/oauth2/authorize-view.tsx
+++ b/apps/web/modules/auth/oauth2/authorize-view.tsx
@@ -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">
diff --git a/apps/web/modules/auth/platform/authorize-view.tsx b/apps/web/modules/auth/platform/authorize-view.tsx
index 3b3e5bedd5..9e6ca0b1fd 100644
--- a/apps/web/modules/auth/platform/authorize-view.tsx
+++ b/apps/web/modules/auth/platform/authorize-view.tsx
@@ -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">
diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx
index d75bab6ba6..e8d539a479 100644
--- a/apps/web/modules/auth/verify-view.tsx
+++ b/apps/web/modules/auth/verify-view.tsx
@@ -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
diff --git a/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx b/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx
index 74e8c48cf3..e7722d9274 100644
--- a/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx
+++ b/apps/web/modules/blocklist/components/BlocklistEntryDetailsSheet.tsx
@@ -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>
                         );
diff --git a/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx b/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx
index 64f530743d..50f61a2722 100644
--- a/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx
+++ b/apps/web/modules/blocklist/components/BookingReportDetailsModal.tsx
@@ -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" />,
                       },
                     ]}
                   />
diff --git a/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx b/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx
index dcee31db5a..a5630d16f1 100644
--- a/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx
+++ b/apps/web/modules/blocklist/components/CreateBlocklistEntryModal.tsx
@@ -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 (
diff --git a/apps/web/modules/bookings/components/AvailableTimes.tsx b/apps/web/modules/bookings/components/AvailableTimes.tsx
index 2d606daf5b..5f495ad47e 100644
--- a/apps/web/modules/bookings/components/AvailableTimes.tsx
+++ b/apps/web/modules/bookings/components/AvailableTimes.tsx
@@ -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>
diff --git a/apps/web/modules/bookings/components/BookingCalendarContainer.tsx b/apps/web/modules/bookings/components/BookingCalendarContainer.tsx
index 66f4cd086e..09f4a084f3 100644
--- a/apps/web/modules/bookings/components/BookingCalendarContainer.tsx
+++ b/apps/web/modules/bookings/components/BookingCalendarContainer.tsx
@@ -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} />
diff --git a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
index 11e1c0309f..ee9bdfc607 100644
--- a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
+++ b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
@@ -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";
@@ -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>
       )}
diff --git a/apps/web/modules/bookings/components/BookingSuccessCard.tsx b/apps/web/modules/bookings/components/BookingSuccessCard.tsx
index 557bee1f74..baac3864ae 100644
--- a/apps/web/modules/bookings/components/BookingSuccessCard.tsx
+++ b/apps/web/modules/bookings/components/BookingSuccessCard.tsx
@@ -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">
diff --git a/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx b/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx
index 1f6cfb7527..07edd2e9a3 100644
--- a/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx
+++ b/apps/web/modules/bookings/components/DecoyBookingSuccessCard.tsx
@@ -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">
diff --git a/apps/web/modules/bookings/components/DryRunMessage.tsx b/apps/web/modules/bookings/components/DryRunMessage.tsx
index c0ec6b6378..e6b9ff9d28 100644
--- a/apps/web/modules/bookings/components/DryRunMessage.tsx
+++ b/apps/web/modules/bookings/components/DryRunMessage.tsx
@@ -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")}
diff --git a/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx b/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx
index 8280c2255c..128718505b 100644
--- a/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx
+++ b/apps/web/modules/bookings/components/HavingTroubleFindingTime.tsx
@@ -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>
   );
diff --git a/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx b/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx
index 315a6cc688..75e867f03c 100644
--- a/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx
+++ b/apps/web/modules/bookings/components/SlotSelectionModalHeader.tsx
@@ -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
diff --git a/apps/web/modules/bookings/components/VerifyCodeDialog.tsx b/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
index 36e1042a25..cc7bddac84 100644
--- a/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
+++ b/apps/web/modules/bookings/components/VerifyCodeDialog.tsx
@@ -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>
diff --git a/apps/web/modules/bookings/components/ViewToggleButton.tsx b/apps/web/modules/bookings/components/ViewToggleButton.tsx
index baf80abb28..1ee291acea 100644
--- a/apps/web/modules/bookings/components/ViewToggleButton.tsx
+++ b/apps/web/modules/bookings/components/ViewToggleButton.tsx
@@ -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" />,
           },
         ]}
       />
diff --git a/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx b/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx
index c7f6af874b..1e349ee231 100644
--- a/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/apps/web/modules/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -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"
diff --git a/apps/web/modules/bookings/components/event-meta/Duration.tsx b/apps/web/modules/bookings/components/event-meta/Duration.tsx
index 0e174cc303..8d51789bb2 100644
--- a/apps/web/modules/bookings/components/event-meta/Duration.tsx
+++ b/apps/web/modules/bookings/components/event-meta/Duration.tsx
@@ -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>
       )}
diff --git a/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx b/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx
index 2b31bceee7..a9424dee57 100644
--- a/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx
+++ b/apps/web/modules/bookings/components/event-meta/PriceIcon.tsx
@@ -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} />;
 }
diff --git a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
index 83e5d1799d..559191f3ff 100644
--- a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
+++ b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
@@ -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")}
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index e77a8bf0e6..0effd86916 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -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>
diff --git a/apps/web/modules/calendars/components/CalendarSwitch.tsx b/apps/web/modules/calendars/components/CalendarSwitch.tsx
index f545d127d3..82b7d28836 100644
--- a/apps/web/modules/calendars/components/CalendarSwitch.tsx
+++ b/apps/web/modules/calendars/components/CalendarSwitch.tsx
@@ -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>
   );
diff --git a/apps/web/modules/data-table/components/DataTable.tsx b/apps/web/modules/data-table/components/DataTable.tsx
index 7d56e956a4..e59f491f0e 100644
--- a/apps/web/modules/data-table/components/DataTable.tsx
+++ b/apps/web/modules/data-table/components/DataTable.tsx
@@ -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,
@@ -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>
             )}
diff --git a/apps/web/modules/data-table/components/filters/AddFilterButton.tsx b/apps/web/modules/data-table/components/filters/AddFilterButton.tsx
index 11767ba1b7..40f22f9335 100644
--- a/apps/web/modules/data-table/components/filters/AddFilterButton.tsx
+++ b/apps/web/modules/data-table/components/filters/AddFilterButton.tsx
@@ -7,7 +7,7 @@ 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";
 
@@ -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>
                 );
               })}
diff --git a/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx b/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx
index cbdc2cfc18..35aafd226e 100644
--- a/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx
+++ b/apps/web/modules/data-table/components/filters/BaseSelectFilterOptions.tsx
@@ -14,7 +14,7 @@ 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 type {
@@ -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}
diff --git a/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx b/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx
index 19aa46c99a..edb7c052fe 100644
--- a/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx
+++ b/apps/web/modules/data-table/components/filters/ColumnVisibilityButton.tsx
@@ -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>
diff --git a/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx b/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx
index 6816213cce..d0b410b1fc 100644
--- a/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx
+++ b/apps/web/modules/data-table/components/filters/DateRangeFilter.tsx
@@ -16,8 +16,8 @@ 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 {
@@ -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>
diff --git a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
index ff1cd860de..369d7cae53 100644
--- a/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
+++ b/apps/web/modules/ee/dsync/components/GroupNameCell.tsx
@@ -5,8 +5,8 @@ import { trpc } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Badge } from "@calcom/ui/components/badge";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { PlusIcon, XIcon } from "@coss/ui/icons";
 
 interface GroupNameCellProps {
   groupNames: string[];
@@ -78,7 +78,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
           <div className="flex min-w-0 items-center gap-2">
             <p className="min-w-0 wrap-break-word">{name}</p>
             <div className="hover:bg-emphasis shrink-0 rounded p-1">
-              <Icon name="x" className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
+              <XIcon className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
             </div>
           </div>
         </Badge>
@@ -111,7 +111,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
             <p>{t("add_group_name")}</p>
           )}
           <div className={classNames("rounded p-1", showTextInput && "hover:bg-emphasis ml-2")}>
-            <Icon name="plus" className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
+            <PlusIcon className="h-4 w-4 stroke-[3px]" onClick={() => addGroupName(newGroupName)} />
           </div>
         </div>
       </Badge>
diff --git a/apps/web/modules/ee/organizations/admin-api.tsx b/apps/web/modules/ee/organizations/admin-api.tsx
index 300d3ae0c3..c1b646ea67 100644
--- a/apps/web/modules/ee/organizations/admin-api.tsx
+++ b/apps/web/modules/ee/organizations/admin-api.tsx
@@ -4,7 +4,7 @@ import LicenseRequired from "~/ee/common/components/LicenseRequired";
 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 { FolderIcon, SparklesIcon, TerminalIcon } from "@coss/ui/icons";
 
 import { UpgradeTip } from "~/shell/UpgradeTip";
 
@@ -13,17 +13,17 @@ export const AdminAPIView = () => {
 
   const features = [
     {
-      icon: <Icon name="terminal" className="h-5 w-5 text-pink-500" />,
+      icon: <TerminalIcon className="h-5 w-5 text-pink-500" />,
       title: t("admin_api"),
       description: t("leverage_our_api"),
     },
     {
-      icon: <Icon name="folder" className="h-5 w-5 text-red-500" />,
+      icon: <FolderIcon className="h-5 w-5 text-red-500" />,
       title: `SCIM & ${t("directory_sync")}`,
       description: t("directory_sync_description"),
     },
     {
-      icon: <Icon name="sparkles" className="h-5 w-5 text-blue-500" />,
+      icon: <SparklesIcon className="h-5 w-5 text-blue-500" />,
       title: "Cal.ai",
       description: t("use_cal_ai_to_make_call_description"),
     },
diff --git a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
index e026472d1c..8bae9b02b9 100644
--- a/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
+++ b/apps/web/modules/ee/organizations/attributes/attributes-list-view.tsx
@@ -17,7 +17,7 @@ import {
   DropdownMenuItem,
 } from "@calcom/ui/components/dropdown";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { TagsIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { revalidateAttributesList } from "@calcom/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/actions";
 
@@ -179,7 +179,7 @@ function OrganizationAttributesPage({
         ) : (
           <div className="flex w-full flex-col items-center justify-center p-14">
             <div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
-              <Icon name="tags" />
+              <TagsIcon />
             </div>
             <h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
               {t("add_attributes")}
diff --git a/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx b/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx
index 1781f3e211..de1cd5af4d 100644
--- a/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/apps/web/modules/ee/organizations/components/AboutOrganizationForm.tsx
@@ -11,7 +11,7 @@ import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { PlusIcon } from "@coss/ui/icons";
 
 export const AboutOrganizationForm = () => {
   const { t } = useLocale();
@@ -50,7 +50,7 @@ export const AboutOrganizationForm = () => {
                 <div className="flex items-center">
                   <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={value}
                     size="lg"
diff --git a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
index 2fbb2f3a91..e9b00e86e4 100644
--- a/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
+++ b/apps/web/modules/ee/organizations/new/_components/PaymentStatusView.tsx
@@ -7,7 +7,7 @@ import { useOnboarding } from "@calcom/web/modules/ee/organizations/lib/onboardi
 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 { CheckIcon, XIcon } from "@coss/ui/icons";
 
 const PaymentStatusView = () => {
   const { t } = useLocale();
@@ -36,7 +36,7 @@ const PaymentStatusView = () => {
     return (
       <div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
         <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-          <Icon name="x" className="h-6 w-6 text-red-600" />
+          <XIcon className="h-6 w-6 text-red-600" />
         </div>
         <div className="text-center">
           <h1 className="font-cal text-emphasis text-2xl">{t("payment_failed")}</h1>
@@ -52,7 +52,7 @@ const PaymentStatusView = () => {
   return (
     <div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
       <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-        <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>
       <div className="text-center">
         <h1 className="font-cal text-emphasis text-2xl">{t("payment_successful")}</h1>
diff --git a/apps/web/modules/ee/organizations/profile.tsx b/apps/web/modules/ee/organizations/profile.tsx
index 65faa54271..4ef0c1b17b 100644
--- a/apps/web/modules/ee/organizations/profile.tsx
+++ b/apps/web/modules/ee/organizations/profile.tsx
@@ -24,8 +24,8 @@ import { Editor } from "@calcom/ui/components/editor";
 import { Form } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { BannerUploader, ImageUploader } from "@calcom/ui/components/image-uploader";
+import { CopyIcon, PlusIcon } from "@coss/ui/icons";
 // if I include this in the above barrel import, I get a runtime error that the component is not exported.
 import { OrgBanner } from "@calcom/ui/components/organization-banner";
 import {
@@ -293,7 +293,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
                   <Avatar
                     alt="calVideoLogo"
                     imageSrc={value}
-                    fallback={<Icon name="plus" className="text-subtle h-6 w-6" />}
+                    fallback={<PlusIcon className="text-subtle h-6 w-6" />}
                     size="lg"
                   />
                   <div>
@@ -453,7 +453,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
                       type="button"
                       aria-label="copy organization id"
                       onClick={() => handleCopy(value.toString())}>
-                      <Icon name="copy" className="ml-1 h-4 w-4" />
+                      <CopyIcon className="ml-1 h-4 w-4" />
                     </Button>
                   </Tooltip>
                 }
diff --git a/apps/web/modules/ee/sso/components/ConnectionInfo.tsx b/apps/web/modules/ee/sso/components/ConnectionInfo.tsx
index 54aa01e372..5c878fa9c0 100644
--- a/apps/web/modules/ee/sso/components/ConnectionInfo.tsx
+++ b/apps/web/modules/ee/sso/components/ConnectionInfo.tsx
@@ -8,7 +8,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogTrigger, ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ClipboardIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -102,7 +102,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -124,7 +124,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
@@ -160,7 +160,7 @@ const OIDCInfo = ({ callbackUrl }: { callbackUrl: string | null }) => {
               }}
               type="button"
               className="rounded-l-none py-[19px] text-base ">
-              <Icon name="clipboard" className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
+              <ClipboardIcon className="text-muted h-5 w-5 ltr:mr-2 rtl:ml-2" />
               {t("copy")}
             </Button>
           </Tooltip>
diff --git a/apps/web/modules/ee/support/components/IntercomContactForm.tsx b/apps/web/modules/ee/support/components/IntercomContactForm.tsx
index 46a2da72b8..313d2e282c 100644
--- a/apps/web/modules/ee/support/components/IntercomContactForm.tsx
+++ b/apps/web/modules/ee/support/components/IntercomContactForm.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Label, TextArea } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon, MessageCircleIcon, SendIcon } from "@coss/ui/icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -118,7 +118,7 @@ export const IntercomContactForm = () => {
           <Button
             onClick={() => setIsOpen(true)}
             className="bg-subtle text-emphasis flex h-12 w-12 items-center justify-center rounded-full border-none">
-            <Icon name="message-circle" className="h-6 w-6" />
+            <MessageCircleIcon className="h-6 w-6" />
           </Button>
         </PopoverTrigger>
 
@@ -174,12 +174,12 @@ export const IntercomContactForm = () => {
                     <div className="flex w-full justify-center">
                       {isSubmitting ? (
                         <div className="flex items-center">
-                          <Icon name="loader" className="mr-2 h-4 w-4 animate-spin rounded-full" />
+                          <LoaderIcon className="mr-2 h-4 w-4 animate-spin rounded-full" />
                           {t("sending")}
                         </div>
                       ) : (
                         <>
-                          <Icon name="send" className="mr-2 h-4 w-4" />
+                          <SendIcon className="mr-2 h-4 w-4" />
                           {t("send_message")}
                         </>
                       )}
diff --git a/apps/web/modules/ee/teams/components/EventTypesList.tsx b/apps/web/modules/ee/teams/components/EventTypesList.tsx
index 88406c3387..ff21babd30 100644
--- a/apps/web/modules/ee/teams/components/EventTypesList.tsx
+++ b/apps/web/modules/ee/teams/components/EventTypesList.tsx
@@ -16,7 +16,7 @@ import {
   CommandItem,
   CommandList,
 } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -196,7 +196,7 @@ const ListItem = ({ onSelect, text, isSelected }: ListItemProps) => {
           "border-subtle ml-auto flex h-4 w-4 items-center justify-center rounded-sm border",
           isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
         )}>
-        <Icon name="check" className={classNames("h-4 w-4")} />
+        <CheckIcon className={classNames("h-4 w-4")} />
       </div>
     </CommandItem>
   );
diff --git a/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx b/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx
index f01c4543f0..0e214f1b32 100644
--- a/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx
+++ b/apps/web/modules/ee/teams/components/InternalNotePresetsView.tsx
@@ -12,8 +12,8 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Form, Input, SettingsToggle } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { CornerDownRightIcon, TrashIcon } from "@coss/ui/icons";
 
 interface ProfileViewProps {
   team: RouterOutputs["viewer"]["teams"]["get"];
@@ -141,11 +141,11 @@ const InternalNotePresetsView = ({ team }: ProfileViewProps) => {
                           variant="icon"
                           onClick={() => remove(index)}
                           disabled={fields.length === 1}>
-                          <Icon name="trash" className="h-4 w-5" />
+                          <TrashIcon className="h-4 w-5" />
                         </Button>
                       </div>
                       <div className="flex items-center gap-2">
-                        <Icon name="corner-down-right" className="h-4 w-4" />
+                        <CornerDownRightIcon className="h-4 w-4" />
                         <Controller
                           name={`presets.${index}.cancellationReason`}
                           control={form.control}
diff --git a/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx b/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
index 983e477421..6e3c00eb50 100644
--- a/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
+++ b/apps/web/modules/ee/teams/components/MemberInvitationModal.tsx
@@ -26,7 +26,7 @@ import { Label } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { Select } from "@calcom/ui/components/form";
 import { ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { BuildingIcon, UserIcon, UsersIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTeamsList } from "@calcom/web/app/(use-page-wrapper)/(main-nav)/teams/actions";
 
@@ -121,15 +121,15 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
       {
         value: "INDIVIDUAL",
         label: t("invite_team_individual_segment"),
-        iconLeft: <Icon name="user" />,
+        iconLeft: <UserIcon />,
       },
-      { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <Icon name="users" /> },
+      { value: "BULK", label: t("invite_team_bulk_segment"), iconLeft: <UsersIcon /> },
     ];
     if (canSeeOrganization) {
       array.unshift({
         value: "ORGANIZATION",
         label: t("organization"),
-        iconLeft: <Icon name="building" />,
+        iconLeft: <BuildingIcon />,
       });
     }
     return array;
diff --git a/apps/web/modules/ee/teams/components/TeamList.tsx b/apps/web/modules/ee/teams/components/TeamList.tsx
index 32465177b7..a5bf8ec50d 100644
--- a/apps/web/modules/ee/teams/components/TeamList.tsx
+++ b/apps/web/modules/ee/teams/components/TeamList.tsx
@@ -9,7 +9,14 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { Card } from "@calcom/ui/components/card";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  BuildingIcon,
+  ChartLineIcon,
+  PaintbrushIcon,
+  PencilIcon,
+  UserPlusIcon,
+  UsersIcon,
+} from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { revalidateTeamsList } from "@calcom/web/app/(use-page-wrapper)/(main-nav)/teams/actions";
 
@@ -69,7 +76,7 @@ export default function TeamList(props: Props) {
               <div className="bg-subtle p-4" key={team.id}>
                 <div className="grid-col-1 grid gap-2 md:grid-cols-3">
                   <Card
-                    icon={<Icon name="building" className="h-5 w-5 text-red-700" />}
+                    icon={<BuildingIcon className="h-5 w-5 text-red-700" />}
                     variant="basic"
                     title={props.teams.length === 1 ? t("you_have_one_team") : t("You have a lot of teams")}
                     description={
@@ -84,7 +91,7 @@ export default function TeamList(props: Props) {
                     }}
                   />
                   <Card
-                    icon={<Icon name="paintbrush" className="h-5 w-5 text-orange-700" />}
+                    icon={<PaintbrushIcon className="h-5 w-5 text-orange-700" />}
                     variant="basic"
                     title={t("Get a clean subdomain")}
                     description={t(
@@ -96,7 +103,7 @@ export default function TeamList(props: Props) {
                     }}
                   />
                   <Card
-                    icon={<Icon name="chart-line" className="h-5 w-5 text-green-700" />}
+                    icon={<ChartLineIcon className="h-5 w-5 text-green-700" />}
                     variant="basic"
                     title={t("Admin tools and analytics")}
                     description={t(
@@ -134,7 +141,7 @@ export default function TeamList(props: Props) {
                   <h3 className="text-emphasis mb-4 text-sm font-semibold">{t("recommended_next_steps")}</h3>
                   <div className="grid-col-1 grid gap-2 md:grid-cols-3">
                     <Card
-                      icon={<Icon name="user-plus" className="h-5 w-5 text-green-700" />}
+                      icon={<UserPlusIcon className="h-5 w-5 text-green-700" />}
                       variant="basic"
                       title={t("invite_team_member")}
                       description={t("meetings_are_better_with_the_right")}
@@ -144,7 +151,7 @@ export default function TeamList(props: Props) {
                       }}
                     />
                     <Card
-                      icon={<Icon name="users" className="h-5 w-5 text-orange-700" />}
+                      icon={<UsersIcon className="h-5 w-5 text-orange-700" />}
                       variant="basic"
                       title={t("collective_or_roundrobin")}
                       description={t("book_your_team_members")}
@@ -154,7 +161,7 @@ export default function TeamList(props: Props) {
                       }}
                     />
                     <Card
-                      icon={<Icon name="pencil" className="h-5 w-5 text-purple-700" />}
+                      icon={<PencilIcon className="h-5 w-5 text-purple-700" />}
                       variant="basic"
                       title={t("appearance")}
                       description={t("appearance_description")}
diff --git a/apps/web/modules/ee/teams/components/TeamsListing.tsx b/apps/web/modules/ee/teams/components/TeamsListing.tsx
index a0a83f4e49..bdb3eab907 100644
--- a/apps/web/modules/ee/teams/components/TeamsListing.tsx
+++ b/apps/web/modules/ee/teams/components/TeamsListing.tsx
@@ -10,7 +10,15 @@ import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  EyeOffIcon,
+  InfoIcon,
+  MailIcon,
+  RefreshCcwIcon,
+  UserPlusIcon,
+  UsersIcon,
+  VideoIcon,
+} from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import SkeletonLoaderTeamList from "~/ee/teams/components/SkeletonloaderTeamList";
@@ -60,32 +68,32 @@ export function TeamsListing({
 
   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("collective_scheduling"),
       description: t("make_it_easy_to_book"),
     },
     {
-      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("round_robin"),
       description: t("find_the_best_person"),
     },
     {
-      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("fixed_round_robin"),
       description: t("add_one_fixed_attendee"),
     },
     {
-      icon: <Icon name="mail" className="h-5 w-5 text-orange-500" />,
+      icon: <MailIcon className="h-5 w-5 text-orange-500" />,
       title: t("sms_attendee_action"),
       description: t("send_reminder_sms"),
     },
     {
-      icon: <Icon name="video" className="h-5 w-5 text-purple-500" />,
+      icon: <VideoIcon className="h-5 w-5 text-purple-500" />,
       title: `Cal Video ${t("recordings_title")}`,
       description: t("upgrade_to_access_recordings_description"),
     },
     {
-      icon: <Icon name="eye-off" className="h-5 w-5 text-indigo-500" />,
+      icon: <EyeOffIcon className="h-5 w-5 text-indigo-500" />,
       title: t("disable_cal_branding", { appName: APP_NAME }),
       description: t("disable_cal_branding_description", { appName: APP_NAME }),
     },
@@ -175,7 +183,7 @@ export function TeamsListing({
       )}
 
       <p className="text-subtle mb-8 mt-4 flex w-full items-center gap-1 text-sm md:justify-center md:text-center">
-        <Icon className="hidden sm:block" name="info" /> {t("tip_username_plus")}
+        <InfoIcon className="hidden sm:block" /> {t("tip_username_plus")}
       </p>
     </>
   );
diff --git a/apps/web/modules/ee/teams/views/team-profile-view.tsx b/apps/web/modules/ee/teams/views/team-profile-view.tsx
index 1d0ce78c13..71b79947c8 100644
--- a/apps/web/modules/ee/teams/views/team-profile-view.tsx
+++ b/apps/web/modules/ee/teams/views/team-profile-view.tsx
@@ -32,8 +32,8 @@ import { Editor } from "@calcom/ui/components/editor";
 import { Form } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { CopyIcon } from "@coss/ui/icons";
 import {
   SkeletonButton,
   SkeletonContainer,
@@ -445,7 +445,7 @@ const TeamProfileForm = ({ team, teamId }: TeamProfileFormProps) => {
                   type="button"
                   aria-label="copy team id"
                   onClick={() => handleCopy(teamId.toString())}>
-                  <Icon name="copy" className="ml-1 h-4 w-4" />
+                  <CopyIcon className="ml-1 h-4 w-4" />
                 </Button>
               </Tooltip>
             }
diff --git a/apps/web/modules/ee/users/components/UsersTable.tsx b/apps/web/modules/ee/users/components/UsersTable.tsx
index 036b3f2f82..b0a8ed09bf 100644
--- a/apps/web/modules/ee/users/components/UsersTable.tsx
+++ b/apps/web/modules/ee/users/components/UsersTable.tsx
@@ -20,7 +20,7 @@ import {
   ConfirmationDialogContent,
 } from "@calcom/ui/components/dialog";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { BuildingIcon, LockIcon } from "@coss/ui/icons";
 import { DropdownActions, Table } from "@calcom/ui/components/table";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -209,11 +209,11 @@ function UsersTableBare() {
                         <span>/{user.username}</span>
                         {user.profiles[0]?.username && (
                           <span className="flex items-center gap-1">
-                            <Icon name="building" className="text-subtle size-5" />
+                            <BuildingIcon className="text-subtle size-5" />
                             <span>{user.profiles[0]?.username}</span>
                           </span>
                         )}
-                        {user.locked && <Icon name="lock" />}
+                        {user.locked && <LockIcon />}
                         <br />
                       </div>
                       <span className="break-all">{user.email}</span>
diff --git a/apps/web/modules/ee/workflows/components/AddActionDialog.tsx b/apps/web/modules/ee/workflows/components/AddActionDialog.tsx
index 43db82e54e..0a9db533a7 100644
--- a/apps/web/modules/ee/workflows/components/AddActionDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/AddActionDialog.tsx
@@ -20,7 +20,7 @@ import { CheckboxField } from "@calcom/ui/components/form";
 import { Form } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
 import { Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 interface IAddActionDialog {
@@ -230,7 +230,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                     <Label>{t("sender_id")}</Label>
                     <Tooltip content={t("sender_id_info")}>
                       <span>
-                        <Icon name="info" className="mb-2 ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
+                        <InfoIcon className="mb-2 ml-2 mr-1 mt-0.5 h-4 w-4 text-gray-500" />
                       </span>
                     </Tooltip>
                   </div>
diff --git a/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx b/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx
index 9f3f7ae18c..6f1829b83b 100644
--- a/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx
+++ b/apps/web/modules/ee/workflows/components/CallDetailsSheet.tsx
@@ -4,7 +4,6 @@ import type { CallDetailsAction, CallDetailsState } from "@calcom/features/ee/wo
 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 {
   Sheet,
   SheetContent,
@@ -13,6 +12,7 @@ import {
   SheetFooter,
   SheetClose,
 } from "@calcom/ui/components/sheet";
+import { UserIcon } from "@coss/ui/icons";
 
 interface CallDetailsSheetProps {
   state: CallDetailsState;
@@ -150,7 +150,7 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
                     return (
                       <div key={index} className="stack-y-1">
                         <div className="flex items-center gap-2">
-                          <Icon name="user" className={isAgent ? "text-info" : "text-success"} />
+                          <UserIcon className={isAgent ? "text-info" : "text-success"} />
                           <span className={`text-sm font-medium ${isAgent ? "text-info" : "text-success"}`}>
                             {isAgent ? t("agent") : t("user")}
                           </span>
diff --git a/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx b/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx
index 41acf38caf..4cccd0c97b 100644
--- a/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/apps/web/modules/ee/workflows/components/SkeletonLoaderList.tsx
@@ -1,5 +1,5 @@
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { BellIcon, LinkIcon } from "@coss/ui/icons";
 
 function SkeletonLoader() {
   return (
@@ -21,9 +21,9 @@ function SkeletonItem() {
           <div className="flex flex-col stack-y-2">
             <SkeletonText className="h-4 w-16 sm:w-24" />
             <div className="flex">
-              <Icon name="bell" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
+              <BellIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
-              <Icon name="link" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
+              <LinkIcon className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText className="h-4 w-28 sm:w-36" />
             </div>
           </div>
diff --git a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
index 0320b527b7..5d52e6899f 100644
--- a/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/TestPhoneCallDialog.tsx
@@ -10,7 +10,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { PhoneIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 interface TestPhoneCallDialogProps {
@@ -99,7 +99,7 @@ export function TestPhoneCallDialog({
             onClick={handleTestCall}
             loading={testCallMutation.isPending}
             disabled={!testPhoneNumber}>
-            <Icon name="phone" className="mr-2 h-4 w-4" />
+            <PhoneIcon className="mr-2 h-4 w-4" />
             {t("make_test_call")}
           </Button>
         </DialogFooter>
diff --git a/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx b/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx
index 1087583dba..5aa472c101 100644
--- a/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx
+++ b/apps/web/modules/ee/workflows/components/TimeTimeUnitInput.tsx
@@ -3,8 +3,8 @@ import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { TimeUnit } from "@calcom/prisma/enums";
-import { Icon } from "@calcom/ui/components/icon";
 import { TextField } from "@calcom/ui/components/form";
+import { ChevronDownIcon, ChevronUpIcon } from "@coss/ui/icons";
 import {
   Dropdown,
   DropdownItem,
@@ -38,7 +38,7 @@ const TimeUnitAddonSuffix = ({
         <button className="flex items-center">
           <div className="mr-1 w-3/5">{timeUnit ? timeUnitOptions[timeUnit] : "undefined"}</div>
           <div className="w-1/4 pt-1">
-            {isDropdownOpen ? <Icon name="chevron-up" /> : <Icon name="chevron-down" />}
+            {isDropdownOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
           </div>
         </button>
       </DropdownMenuTrigger>
diff --git a/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx b/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx
index 18f8967154..7167f9a96b 100644
--- a/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/VoiceSelectionDialog.tsx
@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent, DialogHeader } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
+import { PauseIcon, PlayIcon, UserIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 type Voice = {
@@ -89,14 +89,14 @@ function VoiceSelectionContent({
               onClick={() => handlePlayVoice(row.original.preview_audio_url, row.original.voice_id)}
               className="rounded-full">
               {playingVoiceId === row.original.voice_id ? (
-                <Icon name="pause" className="text-default h-3 w-3" />
+                <PauseIcon className="text-default h-3 w-3" />
               ) : (
-                <Icon name="play" className="text-default h-3 w-3" />
+                <PlayIcon className="text-default h-3 w-3" />
               )}
             </Button>
             <div className="flex items-center gap-2">
               <div className="bg-subtle flex h-10 w-10 items-center justify-center rounded-full">
-                <Icon name="user" className="text-default h-5 w-5" />
+                <UserIcon className="text-default h-5 w-5" />
               </div>
               <span className="text-emphasis font-medium">{row.original.voice_name}</span>
             </div>
diff --git a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
index 1c2e0f7c49..f6056b188b 100644
--- a/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/WebCallDialog.tsx
@@ -12,6 +12,14 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { DialogContent, DialogFooter } from "@calcom/ui/components/dialog";
 import { Icon } from "@calcom/ui/components/icon";
+import {
+  LoaderIcon,
+  MessageCircleIcon,
+  PhoneIcon,
+  PhoneOffIcon,
+  TrashIcon,
+  TriangleAlertIcon,
+} from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -260,15 +268,15 @@ export function WebCallDialog({
   const getStatusIcon = () => {
     switch (callStatus) {
       case "connecting":
-        return <Icon name="loader" className="h-4 w-4 animate-spin rounded-full" />;
+        return <LoaderIcon className="h-4 w-4 animate-spin rounded-full" />;
       case "active":
-        return <Icon name="phone" className="text-success h-4 w-4" />;
+        return <PhoneIcon className="text-success h-4 w-4" />;
       case "ended":
-        return <Icon name="phone-off" className="text-muted h-4 w-4" />;
+        return <PhoneOffIcon className="text-muted h-4 w-4" />;
       case "error":
-        return <Icon name="triangle-alert" className="text-error h-4 w-4" />;
+        return <TriangleAlertIcon className="text-error h-4 w-4" />;
       default:
-        return <Icon name="phone" className="text-subtle h-4 w-4" />;
+        return <PhoneIcon className="text-subtle h-4 w-4" />;
     }
   };
 
@@ -396,7 +404,7 @@ export function WebCallDialog({
                 variant="icon"
                 onClick={() => setTranscript([])}
                 disabled={callStatus === "active"}>
-                <Icon name="trash" className="h-4 w-4" />
+                <TrashIcon className="h-4 w-4" />
               </Button>
             )}
           </div>
@@ -405,7 +413,7 @@ export function WebCallDialog({
             {transcript.length === 0 ? (
               <div className="flex h-40 items-center justify-center text-center">
                 <div>
-                  <Icon name="message-circle" className="text-subtle mx-auto h-8 w-8" />
+                  <MessageCircleIcon className="text-subtle mx-auto h-8 w-8" />
                   <p className="text-subtle mt-2 text-sm">
                     {callStatus === "idle"
                       ? t("start_call_to_see_conversation")
@@ -441,7 +449,7 @@ export function WebCallDialog({
         {error && callStatus === "error" && (
           <div className="border-error bg-error/10 rounded-lg p-3">
             <div className="flex items-center gap-2">
-              <Icon name="triangle-alert" className="text-error h-6 w-6" />
+              <TriangleAlertIcon className="text-error h-6 w-6" />
               <span className="text-error text-sm">{error}</span>
             </div>
           </div>
@@ -465,7 +473,7 @@ export function WebCallDialog({
                   onClick={handleStartCall}
                   loading={createWebCallMutation.isPending || callStatus === "connecting"}
                   disabled={!hasCredits || createWebCallMutation.isPending || callStatus === "connecting"}>
-                  <Icon name="phone" className="mr-2 h-4 w-4" />
+                  <PhoneIcon className="mr-2 h-4 w-4" />
                   {callStatus === "connecting" ? t("connecting") : t("start_web_call")}
                 </Button>
               </Tooltip>
@@ -475,7 +483,7 @@ export function WebCallDialog({
                 color="destructive"
                 onClick={handleEndCall}
                 disabled={callStatus !== "active"}>
-                <Icon name="phone-off" className="mr-2 h-4 w-4" />
+                <PhoneOffIcon className="mr-2 h-4 w-4" />
                 {t("end_call")}
               </Button>
             )}
diff --git a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
index 6318da5527..f564e5490a 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -1,29 +1,27 @@
-import { useSearchParams } from "next/navigation";
-import type { Dispatch, SetStateAction } from "react";
-import { useState, useEffect } from "react";
-import type { UseFormReturn } from "react-hook-form";
-
-import { useAgentsData } from "@calcom/web/modules/ee/workflows/hooks/useAgentsData";
 import {
   isCalAIAction,
-  isSMSAction,
   isFormTrigger,
+  isSMSAction,
 } from "@calcom/features/ee/workflows/lib/actionHelperFunctions";
 import { ALLOWED_FORM_WORKFLOW_ACTIONS } from "@calcom/features/ee/workflows/lib/constants";
 import emailReminderTemplate from "@calcom/features/ee/workflows/lib/reminders/templates/emailReminderTemplate";
 import type { FormValues } from "@calcom/features/ee/workflows/lib/types";
 import type { WorkflowPermissions } from "@calcom/features/workflows/repositories/WorkflowPermissionsRepository";
-import { SENDER_ID, SENDER_NAME, SCANNING_WORKFLOW_STEPS } from "@calcom/lib/constants";
+import { SCANNING_WORKFLOW_STEPS, SENDER_ID, SENDER_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getTimeFormatStringFromUserTimeFormat } from "@calcom/lib/timeFormat";
-import { WorkflowActions } from "@calcom/prisma/enums";
-import { WorkflowTemplates } from "@calcom/prisma/enums";
-import { trpc, type RouterOutputs } from "@calcom/trpc/react";
+import { WorkflowActions, WorkflowTemplates } from "@calcom/prisma/enums";
+import { type RouterOutputs, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { FormCard, FormCardBody } from "@calcom/ui/components/card";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { useHasPaidPlan, useHasActiveTeamPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
+import { useAgentsData } from "@calcom/web/modules/ee/workflows/hooks/useAgentsData";
+import { ArrowRightIcon, ZapIcon } from "@coss/ui/icons";
+import { useSearchParams } from "next/navigation";
+import type { Dispatch, SetStateAction } from "react";
+import { useEffect, useState } from "react";
+import type { UseFormReturn } from "react-hook-form";
 
 import { AddActionDialog } from "./AddActionDialog";
 import WorkflowStepContainer from "./WorkflowStepContainer";
@@ -197,7 +195,7 @@ export default function WorkflowDetailsPage(props: Props) {
           label={
             <div className="flex items-center gap-2 pt-1 pb-2">
               <div className="border-subtle text-subtle ml-1 rounded-lg border p-1">
-                <Icon name="zap" size="16" />
+                <ZapIcon size={16} />
               </div>
               <div className="text-sm font-medium leading-none">{t("trigger")}</div>
             </div>
@@ -239,7 +237,7 @@ export default function WorkflowDetailsPage(props: Props) {
                     label={
                       <div className="flex items-center gap-2 pt-1 pb-2">
                         <div className="border-subtle text-subtle rounded-lg border p-1">
-                          <Icon name="arrow-right" size="16" />
+                          <ArrowRightIcon size={16} />
                         </div>
                         <div className="text-sm font-medium leading-none">{t("action")}</div>
                       </div>
diff --git a/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx b/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx
index 6b392a1d4d..81b72241c7 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowListPage.tsx
@@ -16,7 +16,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { Icon } from "@calcom/ui/components/icon";
+import { LinkIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import Link from "next/link";
@@ -137,7 +137,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               {/*active on all badge */}
                               {workflow.isActiveOnAll ? (
                                 <div>
-                                  <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                  <LinkIcon className="mr-1.5 inline h-3 w-3" />
                                   {workflow.isOrg ? t("active_on_all_teams") : t("active_on_all_event_types")}
                                 </div>
                               ) : workflow.activeOn && workflow.activeOn.length > 0 ? (
@@ -147,7 +147,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                     .filter((wf) => (workflow.teamId ? wf.eventType.parentId === null : true))
                                     .map((activeOn, key) => <p key={key}>{activeOn.eventType.title}</p>)}>
                                   <div>
-                                    <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                    <LinkIcon className="mr-1.5 inline h-3 w-3" />
                                     {t("active_on_event_types", {
                                       count: workflow.activeOn.filter((wf) =>
                                         workflow.teamId ? wf.eventType.parentId === null : true
@@ -162,7 +162,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                     <p key={key}>{activeOn.team.name}</p>
                                   ))}>
                                   <div>
-                                    <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                    <LinkIcon className="mr-1.5 inline h-3 w-3" />
                                     {t("active_on_teams", {
                                       count: workflow.activeOnTeams?.length,
                                     })}
@@ -171,7 +171,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               ) : (
                                 // active on no teams or event types
                                 <div>
-                                  <Icon name="link" className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+                                  <LinkIcon className="mr-1.5 inline h-3 w-3" />
                                   {workflow.isOrg ? t("no_active_teams") : t("no_active_event_types")}
                                 </div>
                               )}
diff --git a/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx b/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
index b550845160..150b7a89fc 100644
--- a/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/apps/web/modules/ee/workflows/components/WorkflowStepContainer.tsx
@@ -67,7 +67,7 @@ import { TextField } from "@calcom/ui/components/form";
 import { Select } from "@calcom/ui/components/form";
 import { MultiSelectCheckbox } from "@calcom/ui/components/form";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CircleHelpIcon, InfoIcon, PhoneIcon } from "@coss/ui/icons";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 import { useHasPaidPlan, useHasActiveTeamPlan } from "@calcom/web/modules/billing/hooks/useHasPaidPlan";
@@ -688,7 +688,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           )}
           {!!timeSectionText && steps.some((s) => isSMSAction(s.action)) && (
             <div className="mt-1 flex text-gray-500">
-              <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
+              <InfoIcon className="mr-1 mt-0.5 h-4 w-4" />
               <p className="text-sm">{t("testing_sms_workflow_info_message")}</p>
             </div>
           )}
@@ -835,7 +835,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         {...form.register(`steps.${step.stepNumber - 1}.sender`)}
                       />
                       <div className="mt-1.5 flex items-center gap-1">
-                        <Icon name="info" size="10" className="text-gray-500" />
+                        <InfoIcon size={10} className="text-gray-500" />
                         <div className="text-subtle text-xs">{t("sender_id_info")}</div>
                       </div>
                     </div>
@@ -910,7 +910,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   <h3 className="text-emphasis text-base font-medium">{t("cal_ai_agent")}</h3>
                   {arePhoneNumbersActive.length > 0 ? (
                     <div className="flex items-center gap-2">
-                      <Icon name="phone" className="text-emphasis h-4 w-4" />
+                      <PhoneIcon className="text-emphasis h-4 w-4" />
                       <span className="text-emphasis text-sm">
                         {formatPhoneNumber(arePhoneNumbersActive[0].phoneNumber)}
                       </span>
@@ -1437,7 +1437,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="ml-1 mt-2">
                   <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
                     <div className="text-subtle ml-1 flex items-center gap-2">
-                      <Icon name="circle-help" className="h-3 w-3" />
+                      <CircleHelpIcon className="h-3 w-3" />
                       <p className="text-left text-xs">
                         {isFormTrigger(trigger)
                           ? t("using_form_responses_as_variables")
@@ -1676,7 +1676,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               ).length > 0 && (
                 <div className="bg-cal-muted rounded-lg p-3">
                   <div className="flex items-center gap-2">
-                    <Icon name="phone" className="text-emphasis h-4 w-4" />
+                    <PhoneIcon className="text-emphasis h-4 w-4" />
                     <span className="text-emphasis text-sm font-medium">
                       {formatPhoneNumber(
                         getActivePhoneNumbers(
@@ -1737,7 +1737,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     <>
                       <div className="bg-attention rounded-lg p-3">
                         <div className="flex items-start gap-2">
-                          <Icon name="info" className="text-attention mt-0.5 h-4 w-4" />
+                          <InfoIcon className="text-attention mt-0.5 h-4 w-4" />
                           <div className="stack-y-2">
                             <p className="text-attention text-sm font-medium">{t("this_action_will_also")}</p>
                             <ul className="text-attention stack-y-1 list-inside list-disc text-sm">
@@ -1752,7 +1752,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       {relevantPhoneNumbers.map((phone) => (
                         <div key={phone.phoneNumber} className="bg-cal-muted rounded-lg p-3">
                           <div className="flex items-center gap-2">
-                            <Icon name="phone" className="text-emphasis h-4 w-4" />
+                            <PhoneIcon className="text-emphasis h-4 w-4" />
                             <span className="text-emphasis text-sm font-medium">
                               {formatPhoneNumber(phone.phoneNumber)}
                             </span>
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
index 3abebcfe01..0f3d6b3c7e 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
@@ -9,7 +9,7 @@ import { Button } from "@calcom/ui/components/button";
 import { Dialog } from "@calcom/ui/components/dialog";
 import { DialogContent, DialogHeader, DialogFooter as BaseDialogFooter } from "@calcom/ui/components/dialog";
 import { Form, Label, Switch, TextField } 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";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -86,7 +86,7 @@ export function ImportNumberDialog({
                     <span className="flex items-center gap-1">
                       {t("phone_number")}
                       <Tooltip content={t("phone_number_info_tooltip")}>
-                        <Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
+                        <InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
                       </Tooltip>
                     </span>
                   }
@@ -111,7 +111,7 @@ export function ImportNumberDialog({
                     <span className="flex items-center gap-1">
                       {t("termination_uri")}
                       <Tooltip content={t("termination_uri_info_tooltip")}>
-                        <Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
+                        <InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
                       </Tooltip>
                     </span>
                   }
@@ -144,7 +144,7 @@ export function ImportNumberDialog({
                           <span className="flex items-center gap-1">
                             {t("sip_trunk_username")}
                             <Tooltip content={t("sip_trunk_username_info_tooltip")}>
-                              <Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
+                              <InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
                             </Tooltip>
                           </span>
                         }
@@ -169,7 +169,7 @@ export function ImportNumberDialog({
                           <span className="flex items-center gap-1">
                             {t("sip_trunk_password")}
                             <Tooltip content={t("sip_trunk_password_info_tooltip")}>
-                              <Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
+                              <InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
                             </Tooltip>
                           </span>
                         }
@@ -194,7 +194,7 @@ export function ImportNumberDialog({
                           <span className="flex items-center gap-1">
                             {t("nickname")}
                             <Tooltip content={t("nickname_info_tooltip")}>
-                              <Icon name="info" className="text-muted h-4 w-4 cursor-pointer" />
+                              <InfoIcon className="text-muted h-4 w-4 cursor-pointer" />
                             </Tooltip>
                           </span>
                         }
@@ -213,7 +213,7 @@ export function ImportNumberDialog({
             {/* Having trouble importing section */}
             <div className="rounded-lg border p-2">
               <div className="flex items-start gap-3">
-                <Icon name="info" className="text-subtle mt-0.5 h-5 w-5 shrink-0" />
+                <InfoIcon className="text-subtle mt-0.5 h-5 w-5 shrink-0" />
                 <div className="flex-1">
                   <p className="text-emphasis text-sm font-medium">{t("having_trouble_importing")}</p>
                   <p className="text-subtle mt-1 text-sm leading-tight">
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/forms/VoiceSelector.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/forms/VoiceSelector.tsx
index f01306d39b..a0195f3d06 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/forms/VoiceSelector.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/forms/VoiceSelector.tsx
@@ -3,7 +3,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { UserIcon } from "@coss/ui/icons";
 
 interface VoiceSelectorProps {
   selectedVoiceId?: string;
@@ -24,7 +24,7 @@ export function VoiceSelector({ selectedVoiceId, onVoiceDialogOpen, disabled = f
         onClick={onVoiceDialogOpen}
         disabled={disabled}
         className="w-full justify-start">
-        <Icon name="user" className="mr-2 h-4 w-4" />
+        <UserIcon className="mr-2 h-4 w-4" />
         {selectedVoiceId ? <span className="text-sm">{selectedVoiceId}</span> : t("select_voice")}
       </Button>
     </div>
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
index 238f32e4e9..fca3204ff5 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 import { Label, Select } from "@calcom/ui/components/form";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon, PhoneIncomingIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { VoiceSelectionDialog } from "../../../VoiceSelectionDialog";
@@ -91,7 +91,7 @@ export function IncomingCallsTab({
       <div className="border-subtle rounded-xl border p-8">
         <div className="stack-y-6 flex flex-col items-center text-center">
           <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
-            <Icon name="info" className="text-subtle h-8 w-8" />
+            <InfoIcon className="text-subtle h-8 w-8" />
           </div>
           <div className="stack-y-2">
             <h3 className="text-emphasis text-lg font-semibold">{t("setup_incoming_agent")}</h3>
@@ -107,7 +107,7 @@ export function IncomingCallsTab({
       <div className="border-subtle rounded-xl border p-8">
         <div className="stack-y-6 flex flex-col items-center text-center">
           <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
-            <Icon name="phone-incoming" className="text-subtle h-8 w-8" />
+            <PhoneIncomingIcon className="text-subtle h-8 w-8" />
           </div>
           <div className="stack-y-2">
             <h3 className="text-emphasis text-lg font-semibold">{t("setup_inbound_agent")}</h3>
diff --git a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
index 480f572970..2716b09b93 100644
--- a/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
+++ b/apps/web/modules/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
@@ -20,7 +20,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon, PhoneIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { WebCallDialog } from "@calcom/web/modules/ee/workflows/components/WebCallDialog";
 
@@ -131,7 +131,7 @@ export function PhoneNumberTab({
           {updateAgentMutation.isPending && (
             <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/50">
               <div className="flex items-center gap-2 text-sm text-gray-600">
-                <Icon name="loader" className="h-4 w-4 animate-spin" />
+                <LoaderIcon className="h-4 w-4 animate-spin" />
                 {t("updating")}...
               </div>
             </div>
@@ -279,7 +279,7 @@ export function PhoneNumberTab({
       <div className="border-subtle rounded-xl border p-8">
         <div className="stack-y-6 flex flex-col items-center text-center">
           <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
-            <Icon name="phone" className="text-subtle h-8 w-8" />
+            <PhoneIcon className="text-subtle h-8 w-8" />
           </div>
           <div className="stack-y-2">
             <h3 className="text-emphasis text-lg font-semibold">{t("no_phone_numbers")}</h3>
diff --git a/apps/web/modules/ee/workflows/views/WorkflowPage.tsx b/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
index 72f230c39b..c85ef06e55 100644
--- a/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
+++ b/apps/web/modules/ee/workflows/views/WorkflowPage.tsx
@@ -34,7 +34,7 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import type { MultiSelectCheckboxesOptionType as Option } from "@calcom/ui/components/form";
 import { Form, Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { PencilIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -476,7 +476,7 @@ function WorkflowPage({
                       disabled={isPending}
                       onClick={() => setIsEditingName(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">{t("edit")}</span>
                     </Button>
diff --git a/apps/web/modules/embed/components/Embed.tsx b/apps/web/modules/embed/components/Embed.tsx
index 2b4760d9f8..5c76a8ed8f 100644
--- a/apps/web/modules/embed/components/Embed.tsx
+++ b/apps/web/modules/embed/components/Embed.tsx
@@ -38,7 +38,7 @@ import { Select, ColorPicker } from "@calcom/ui/components/form";
 import { Label } 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 { ArrowLeftIcon, SunIcon } from "@coss/ui/icons";
 import { HorizontalTabs } from "@calcom/ui/components/navigation";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -190,7 +190,7 @@ const ThemeSelectControl = ({
 }: ControlProps<{ value: EmbedTheme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <Icon name="sun" className="text-subtle mr-2 h-4 w-4" />
+      <SunIcon className="text-subtle mr-2 h-4 w-4" />
       {children}
     </components.Control>
   );
@@ -954,7 +954,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
             className="text-emphasis mb-2.5 flex items-center text-xl font-semibold leading-5"
             id="modal-title">
             <button className="h-6 w-6" onClick={gotoEmbedTypeSelectionState}>
-              <Icon name="arrow-left" className="mr-4 w-4" />
+              <ArrowLeftIcon className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
diff --git a/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx b/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx
index 54eee476aa..1ce9f2ff6d 100644
--- a/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx
+++ b/apps/web/modules/event-types/components/EditWeightsForAllTeamMembers.tsx
@@ -10,7 +10,7 @@ import type { AttributesQueryValue } from "@calcom/lib/raqb/types";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button, buttonClasses } from "@calcom/ui/components/button";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChevronDownIcon, InfoIcon, SearchIcon, UploadIcon } from "@coss/ui/icons";
 import {
   Sheet,
   SheetBody,
@@ -272,7 +272,7 @@ export const EditWeightsForAllTeamMembers = ({
             <SheetBody className="mt-4 flex h-full flex-col stack-y-6 p-1">
               <div className="flex justify-start gap-2">
                 <label className={buttonClasses({ color: "secondary" })}>
-                  <Icon name="upload" className="mr-2 h-4 w-4" />
+                  <UploadIcon className="mr-2 h-4 w-4" />
                   <input type="file" accept=".csv" className="hidden" onChange={handleUploadCsv} />
                   {t("upload")}
                 </label>
@@ -285,7 +285,7 @@ export const EditWeightsForAllTeamMembers = ({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value.toLowerCase())}
                 addOnLeading={
-                  <Icon name="search" className="text-subtle h-4 w-4" aria-hidden="true" focusable="false" />
+                  <SearchIcon className="text-subtle h-4 w-4" />
                 }
               />
 
@@ -304,10 +304,10 @@ export const EditWeightsForAllTeamMembers = ({
                     className="flex w-full items-center justify-between rounded-md border bg-red-50 p-3 text-sm text-red-900"
                     onClick={() => setIsErrorsExpanded(!isErrorsExpanded)}>
                     <div className="flex items-center space-x-2">
-                      <Icon name="info" className="h-4 w-4" />
+                      <InfoIcon className="h-4 w-4" />
                       <span>{t("csv_upload_errors", { count: uploadErrors.length })}</span>
                     </div>
-                    <Icon name="chevron-down" className="h-4 w-4" />
+                    <ChevronDownIcon className="h-4 w-4" />
                   </button>
                   {isErrorsExpanded && (
                     <div className="mt-2 stack-y-2">
diff --git a/apps/web/modules/event-types/components/EventTypeLayout.tsx b/apps/web/modules/event-types/components/EventTypeLayout.tsx
index 864fbc38d0..2d88380e44 100644
--- a/apps/web/modules/event-types/components/EventTypeLayout.tsx
+++ b/apps/web/modules/event-types/components/EventTypeLayout.tsx
@@ -25,7 +25,7 @@ import {
 } from "@calcom/ui/components/dropdown";
 import { Label } from "@calcom/ui/components/form";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon } from "@coss/ui/icons";
 import { HorizontalTabs, VerticalTabs } from "@calcom/ui/components/navigation";
 import type { VerticalTabItemProps } from "@calcom/ui/components/navigation";
 import { Skeleton } from "@calcom/ui/components/skeleton";
@@ -292,7 +292,7 @@ function EventTypeSingleLayout({
       <Suspense
         fallback={
           <div className="flex h-64 items-center justify-center">
-            <Icon name="loader" className="h-5 w-5 animate-spin" />
+            <LoaderIcon className="h-5 w-5 animate-spin" />
           </div>
         }>
         <div className="flex flex-col xl:flex-row xl:space-x-6">
diff --git a/apps/web/modules/event-types/components/SkeletonLoader.tsx b/apps/web/modules/event-types/components/SkeletonLoader.tsx
index 2e3361444d..7e97cfab9d 100644
--- a/apps/web/modules/event-types/components/SkeletonLoader.tsx
+++ b/apps/web/modules/event-types/components/SkeletonLoader.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "@calcom/ui/components/icon";
+import { ClockIcon, SearchIcon, UserIcon } from "@coss/ui/icons";
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
 
 function SkeletonLoader() {
@@ -56,7 +56,7 @@ export function SearchSkeletonLoader() {
     <div className="max-w-64 mb-4">
       <div className="bg-default border-default flex h-8 items-center gap-1 rounded-[10px] border px-3 py-2">
         <div className="flex items-center justify-center">
-          <Icon name="search" className="text-subtle h-4 w-4" />
+          <SearchIcon className="text-subtle h-4 w-4" />
         </div>
         <SkeletonText className="max-w-56 h-4 w-full" />
       </div>
@@ -88,11 +88,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <Icon name="clock" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
+              <ClockIcon className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <Icon name="user" className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
+              <UserIcon className="text-subtle mr-1.5 mt-0.5 inline h-4 w-4" />
               <SkeletonText className="h-4 w-12" />
             </li>
           </ul>
diff --git a/apps/web/modules/event-types/components/locations/HostLocations.tsx b/apps/web/modules/event-types/components/locations/HostLocations.tsx
index aca7ecdec6..86de74e4d5 100644
--- a/apps/web/modules/event-types/components/locations/HostLocations.tsx
+++ b/apps/web/modules/event-types/components/locations/HostLocations.tsx
@@ -27,7 +27,7 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/components/dialog";
 import { Label, TextField, Select, SettingsToggle } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon, TriangleAlertIcon } from "@coss/ui/icons";
 import { Skeleton } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 
@@ -328,7 +328,7 @@ const HostLocationRow = ({
         <div className="flex items-center gap-2">
           {currentLocation && !hasAppInstalled && (
             <Badge variant="orange" className="whitespace-nowrap">
-              <Icon name="triangle-alert" className="mr-1 h-3 w-3" />
+              <TriangleAlertIcon className="mr-1 h-3 w-3" />
               {t("app_not_installed")}
             </Badge>
           )}
@@ -689,7 +689,7 @@ const HostList = ({
       <div ref={containerRef} className="border-subtle max-h-96 overflow-y-auto rounded-md border">
         {isLoading ? (
           <div className="flex items-center justify-center py-8">
-            <Icon name="loader" className="text-subtle h-5 w-5 animate-spin" />
+            <LoaderIcon className="text-subtle h-5 w-5 animate-spin" />
           </div>
         ) : (
           <>
@@ -705,7 +705,7 @@ const HostList = ({
             ))}
             {isFetchingNextPage && (
               <div className="flex items-center justify-center py-4">
-                <Icon name="loader" className="text-subtle h-4 w-4 animate-spin" />
+                <LoaderIcon className="text-subtle h-4 w-4 animate-spin" />
               </div>
             )}
           </>
diff --git a/apps/web/modules/event-types/components/locations/Locations.tsx b/apps/web/modules/event-types/components/locations/Locations.tsx
index 5907be54ff..359c946558 100644
--- a/apps/web/modules/event-types/components/locations/Locations.tsx
+++ b/apps/web/modules/event-types/components/locations/Locations.tsx
@@ -18,7 +18,7 @@ import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon, CornerDownRightIcon, XIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import CalVideoSettings from "./CalVideoSettings";
@@ -242,8 +242,7 @@ const Locations: React.FC<LocationsProps> = ({
                     }}
                     aria-label={t("remove")}>
                     <div className="h-4 w-4">
-                      <Icon
-                        name="x"
+                      <XIcon
                         className={classNames(
                           "hover:text-emphasis text-subtle h-4 w-4",
                           customClassNames?.removeLocationIcon
@@ -268,7 +267,7 @@ const Locations: React.FC<LocationsProps> = ({
                   <div className="w-full">
                     <div className="flex gap-2">
                       <div className="flex items-center justify-center">
-                        <Icon name="corner-down-right" className="h-4 w-4" />
+                        <CornerDownRightIcon className="h-4 w-4" />
                       </div>
                       <LocationInput
                         data-testid={`${eventLocationType.type}-location-input`}
@@ -374,7 +373,7 @@ const Locations: React.FC<LocationsProps> = ({
         ) && (
           <div className="text-default flex items-center text-sm">
             <div className="mr-1.5 h-3 w-3">
-              <Icon name="check" className="h-3 w-3" />
+              <CheckIcon className="h-3 w-3" />
             </div>
             <p className="text-default text-sm">
               <ServerTrans
diff --git a/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx b/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
index 2458794aeb..2e7e6da820 100644
--- a/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/advanced/EventAdvancedTab.tsx
@@ -63,7 +63,7 @@ import {
   SettingsToggle,
   Select,
 } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon, PencilIcon } from "@coss/ui/icons";
 
 import type { CustomEventTypeModalClassNames } from "./CustomEventTypeModal";
 import CustomEventTypeModal from "./CustomEventTypeModal";
@@ -226,7 +226,7 @@ const destinationCalendarComponents = {
                   aria-label="edit custom name"
                   className="hover:stroke-3 hover:text-emphasis py-0! -mr-1.5 min-w-fit px-1.5 hover:bg-transparent"
                   onClick={() => setShowEventNameTip((old) => !old)}>
-                  <Icon name="pencil" className="h-4 w-4" />
+                  <PencilIcon className="h-4 w-4" />
                 </Button>
               }
             />
@@ -240,10 +240,7 @@ const destinationCalendarComponents = {
                 label={
                   <>
                     {t("display_add_to_calendar_organizer")}
-                    <Icon
-                      name="info"
-                      className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md"
-                    />
+                    <InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
                   </>
                 }
                 checked={useEventTypeDestinationCalendarEmail}
diff --git a/apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx b/apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx
index b97e74e9ad..1b86a8f06f 100644
--- a/apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx
+++ b/apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx
@@ -29,7 +29,7 @@ import {
   InputField,
   Label,
 } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowDownIcon, ArrowUpIcon, MailIcon, PhoneIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { fieldTypesConfigMap } from "@calcom/features/form-builder/fieldTypes";
@@ -171,12 +171,12 @@ export const FormBuilder = function FormBuilder({
                 {
                   value: "email",
                   label: "Email",
-                  iconLeft: <Icon name="mail" className="h-4 w-4" />,
+                  iconLeft: <MailIcon className="h-4 w-4" />,
                 },
                 {
                   value: "phone",
                   label: "Phone",
-                  iconLeft: <Icon name="phone" className="h-4 w-4" />,
+                  iconLeft: <PhoneIcon className="h-4 w-4" />,
                 },
               ]}
               onValueChange={(value) => {
@@ -283,7 +283,7 @@ export const FormBuilder = function FormBuilder({
                         type="button"
                         className="bg-default text-muted hover:text-emphasis disabled:hover:text-muted border-subtle hover:border-emphasis invisible absolute -left-[12px] -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index - 1)}>
-                        <Icon name="arrow-up" className="h-5 w-5" />
+                        <ArrowUpIcon className="h-5 w-5" />
                       </button>
                     )}
                     {index < fields.length - 1 && (
@@ -291,7 +291,7 @@ export const FormBuilder = function FormBuilder({
                         type="button"
                         className="bg-default text-muted hover:border-emphasis border-subtle hover:text-emphasis disabled:hover:text-muted invisible absolute -left-[12px] -ml-4 mt-8 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all hover:shadow disabled:hover:border-inherit disabled:hover:shadow-none group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex"
                         onClick={() => swap(index, index + 1)}>
-                        <Icon name="arrow-down" className="h-5 w-5" />
+                        <ArrowDownIcon className="h-5 w-5" />
                       </button>
                     )}
                   </>
diff --git a/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx b/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx
index c94955df2f..c716a940e5 100644
--- a/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx
+++ b/apps/web/modules/event-types/components/tabs/ai/AIEventController.tsx
@@ -20,7 +20,7 @@ import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Label } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { SettingsToggle } 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";
 
 type AIEventControllerProps = {
@@ -90,7 +90,7 @@ const ErrorMessage = ({ fieldName, message }: { fieldName: string; message: stri
   const { t } = useLocale();
   return (
     <div data-testid={`error-message-${fieldName}`} className="mt-2 flex items-center text-sm text-red-700 ">
-      <Icon name="info" className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+      <InfoIcon className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
       <p>{t(message || "invalid_input")}</p>
     </div>
   );
diff --git a/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx b/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
index bb696c09d5..5c5777ed56 100644
--- a/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/assignment/EventTeamAssignmentTab.tsx
@@ -13,7 +13,7 @@ import { RRTimestampBasis, SchedulingType } from "@calcom/prisma/enums";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Label, Select, SettingsToggle } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import type { AddMembersWithSwitchCustomClassNames } from "@calcom/web/modules/event-types/components/AddMembersWithSwitch";
@@ -539,7 +539,7 @@ const RoundRobinHosts = ({
                       type="button"
                       onClick={() => handleRemoveGroup(group.id)}
                       className="text-subtle hover:text-default rounded p-1">
-                      <Icon name="x" className="h-4 w-4" />
+                      <XIcon className="h-4 w-4" />
                     </button>
                   </div>
                   <AddMembersWithSwitchComponent groupId={group.id} />
diff --git a/apps/web/modules/event-types/components/tabs/availability/EventAvailabilityTab.tsx b/apps/web/modules/event-types/components/tabs/availability/EventAvailabilityTab.tsx
index 44efe31ff3..fb1756fd01 100644
--- a/apps/web/modules/event-types/components/tabs/availability/EventAvailabilityTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/availability/EventAvailabilityTab.tsx
@@ -31,8 +31,8 @@ import { Button } from "@calcom/ui/components/button";
 import { Label } from "@calcom/ui/components/form";
 import { Select } from "@calcom/ui/components/form";
 import { SettingsToggle } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Spinner } from "@calcom/ui/components/icon";
+import { GlobeIcon, UserIcon } from "@coss/ui/icons";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
@@ -263,7 +263,7 @@ const EventTypeScheduleDetails = memo(
         <div className="bg-cal-muted border-subtle flex flex-col items-center gap-2 rounded-b-md border p-6 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-2">
             <span className="text-default flex items-center justify-center text-center text-sm sm:justify-start">
-              <Icon name="globe" className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
+              <GlobeIcon className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
               {scheduleQueryData?.timeZone || <SkeletonText className="block h-5 w-32" />}
             </span>
           </div>
@@ -393,8 +393,7 @@ const EventTypeRestrictionScheduleDetails = memo(
                 "text-default flex items-center justify-center text-sm sm:justify-start",
                 useBookerTimezone && "text-muted line-through"
               )}>
-              <Icon
-                name="globe"
+              <GlobeIcon
                 className={classNames("h-3.5 w-3.5 ltr:mr-2 rtl:ml-2", useBookerTimezone && "text-muted")}
               />
               {scheduleQueryData?.timeZone || <SkeletonText className="block h-5 w-32" />}
@@ -680,7 +679,7 @@ const TeamMemberSchedule = ({
     <>
       <div className={classNames("flex w-full items-center", customClassNames?.labelContainer)}>
         {!isPlatform && <Avatar size="sm" imageSrc={avatar} alt={label || ""} />}
-        {isPlatform && <Icon name="user" className={classNames("h-4 w-4", customClassNames?.labelAvatar)} />}
+        {isPlatform && <UserIcon className={classNames("h-4 w-4", customClassNames?.labelAvatar)} />}
         <p className={classNames("text-emphasis my-auto ms-3 text-sm", customClassNames?.label)}>{label}</p>
       </div>
       <div className="flex w-full flex-col pt-2">
diff --git a/apps/web/modules/event-types/components/tabs/workflows/EventWorkflowsTab.tsx b/apps/web/modules/event-types/components/tabs/workflows/EventWorkflowsTab.tsx
index 85114652df..7d73b5d04e 100644
--- a/apps/web/modules/event-types/components/tabs/workflows/EventWorkflowsTab.tsx
+++ b/apps/web/modules/event-types/components/tabs/workflows/EventWorkflowsTab.tsx
@@ -18,7 +18,7 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LockIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import { revalidateEventTypeEditPage } from "@calcom/web/app/(use-page-wrapper)/event-types/[type]/actions";
@@ -154,7 +154,7 @@ const WorkflowListItem = (props: ItemProps) => {
           }>
           <div className="flex items-center ltr:mr-2 rtl:ml-2">
             {workflow.readOnly && props.isChildrenManagedEventType && (
-              <Icon name="lock" className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
+              <LockIcon className="text-subtle h-4 w-4 ltr:mr-2 rtl:ml-2" />
             )}
             <Switch
               checked={isActive}
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 680260a10f..6169ea2c7d 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -34,7 +34,7 @@ import {
 } from "@calcom/ui/components/dropdown";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 import { Label, Switch, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { SearchIcon } from "@coss/ui/icons";
 import { HorizontalTabs } from "@calcom/ui/components/navigation";
 import { Skeleton } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
@@ -928,7 +928,7 @@ const CTA = ({ profileOptions }: { profileOptions: ProfileOption[] }) => {
     <div className="flex items-center gap-4">
       <TextField
         className="max-w-64"
-        addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
+        addOnLeading={<SearchIcon className="text-subtle h-4 w-4" />}
         containerClassName="max-w-64 focus:ring-offset-0!"
         type="search"
         value={searchTerm}
diff --git a/apps/web/modules/feature-opt-in/components/FeaturesSettings.tsx b/apps/web/modules/feature-opt-in/components/FeaturesSettings.tsx
index 466e7b0d69..8f5a7383e2 100644
--- a/apps/web/modules/feature-opt-in/components/FeaturesSettings.tsx
+++ b/apps/web/modules/feature-opt-in/components/FeaturesSettings.tsx
@@ -5,8 +5,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Alert } from "@calcom/ui/components/alert";
 import { SettingsToggle, ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { CircleAlertIcon, CircleCheckIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import type { ReactElement } from "react";
 import { useMemo } from "react";
@@ -105,14 +105,14 @@ function FeatureItem({
             {blockedWarning && (
               <Tooltip side="top" content={blockedWarning}>
                 <span>
-                  <Icon name="circle-alert" className="text-error ml-1 h-4 w-4" />
+                  <CircleAlertIcon className="text-error ml-1 h-4 w-4" />
                 </span>
               </Tooltip>
             )}
             {enabledViaAutoOptInFlag && (
               <Tooltip side="top" content={t("enabled_via_auto_opt_in")}>
                 <span>
-                  <Icon name="circle-check" className="text-success ml-1 h-4 w-4" />
+                  <CircleCheckIcon className="text-success ml-1 h-4 w-4" />
                 </span>
               </Tooltip>
             )}
diff --git a/apps/web/modules/filters/components/TeamsFilter.tsx b/apps/web/modules/filters/components/TeamsFilter.tsx
index 1a8abe294a..444702a003 100644
--- a/apps/web/modules/filters/components/TeamsFilter.tsx
+++ b/apps/web/modules/filters/components/TeamsFilter.tsx
@@ -11,8 +11,8 @@ import { Avatar } from "@calcom/ui/components/avatar";
 import { VerticalDivider } from "@calcom/ui/components/divider";
 import { Divider } from "@calcom/ui/components/divider";
 import { FilterSearchField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { AnimatedPopover } from "@calcom/ui/components/popover";
+import { LayersIcon, UserIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import { filterQuerySchema } from "@calcom/features/filters/lib/getTeamsFiltersFromQuery";
@@ -83,7 +83,7 @@ export const TeamsFilter = ({
 
           <FilterCheckboxField
             id="all"
-            icon={<Icon name="layers" className="h-4 w-4" />}
+            icon={<LayersIcon className="h-4 w-4" />}
             checked={!query.teamIds && !isUserInQuery}
             onChange={removeAllQueryParams}
             label={t("all")}
@@ -91,7 +91,7 @@ export const TeamsFilter = ({
 
           <FilterCheckboxField
             id="yours"
-            icon={<Icon name="user" className="h-4 w-4" />}
+            icon={<UserIcon className="h-4 w-4" />}
             checked={!!isUserInQuery}
             onChange={(e) => {
               if (e.target.checked) {
diff --git a/apps/web/modules/form-builder/components/Components.tsx b/apps/web/modules/form-builder/components/Components.tsx
index 2e0efcd029..bb20266769 100644
--- a/apps/web/modules/form-builder/components/Components.tsx
+++ b/apps/web/modules/form-builder/components/Components.tsx
@@ -13,9 +13,9 @@ import { AddressInput } from "@calcom/ui/components/address";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Label, CheckboxField, EmailField, InputField, Checkbox } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { RadioGroup, RadioField } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { XIcon } from "@coss/ui/icons";
 
 import { ComponentForField } from "./FormBuilderField";
 import { propsTypes } from "@calcom/features/form-builder/propsTypes";
@@ -277,7 +277,7 @@ export const Components: Record<FieldType, Component> = {
                         !readOnly ? (
                           <Tooltip content="Remove email">
                             <button className="m-1" type="button">
-                              <Icon name="x" width={12} className="text-default" />
+                              <XIcon size={12} className="text-default" />
                             </button>
                           </Tooltip>
                         ) : null
diff --git a/apps/web/modules/form-builder/components/FormBuilderField.tsx b/apps/web/modules/form-builder/components/FormBuilderField.tsx
index d75f0b4379..0934b6ffd5 100644
--- a/apps/web/modules/form-builder/components/FormBuilderField.tsx
+++ b/apps/web/modules/form-builder/components/FormBuilderField.tsx
@@ -8,7 +8,7 @@ import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import classNames from "@calcom/ui/classNames";
 import { InfoBadge } from "@calcom/ui/components/badge";
 import { Label } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon } from "@coss/ui/icons";
 
 import { Components, isValidValueProp } from "./Components";
 import { fieldTypesConfigMap } from "@calcom/features/form-builder/fieldTypes";
@@ -125,7 +125,7 @@ export const FormBuilderField = ({
                     <div
                       data-testid={`error-message-${field.name}`}
                       className="mt-2 flex items-center text-sm text-red-700 ">
-                      <Icon name="info" className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
+                      <InfoIcon className="h-3 w-3 ltr:mr-2 rtl:ml-2" />
                       <p>{t(message || "invalid_input")}</p>
                     </div>
                   );
diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index c4401f06d2..216795abb6 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -16,7 +16,7 @@ import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { StepCard } from "@calcom/ui/components/card";
 import { Steps } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon } from "@coss/ui/icons";
 
 import { ConnectedCalendars } from "@components/getting-started/steps-views/ConnectCalendars";
 import { ConnectedVideoStep } from "@components/getting-started/steps-views/ConnectedVideoStep";
@@ -176,7 +176,7 @@ const OnboardingPage = (props: PageProps) => {
               <Steps maxSteps={steps.length} currentStep={currentStepIndex + 1} navigateToStep={goToStep} />
             </div>
             <StepCard>
-              <Suspense fallback={<Icon name="loader" />}>
+              <Suspense fallback={<LoaderIcon />}>
                 {currentStep === "user-settings" && (
                   <UserSettings nextStep={goToNextStep} hideUsername={from === "signup"} user={user} />
                 )}
diff --git a/apps/web/modules/insights/components/BookingAtCell.tsx b/apps/web/modules/insights/components/BookingAtCell.tsx
index a52a8d624d..b139047a78 100644
--- a/apps/web/modules/insights/components/BookingAtCell.tsx
+++ b/apps/web/modules/insights/components/BookingAtCell.tsx
@@ -13,7 +13,7 @@ import {
   HoverCardTrigger,
   HoverCardPortal,
 } from "@calcom/ui/components/hover-card";
-import { Icon } from "@calcom/ui/components/icon";
+import { CopyIcon } from "@coss/ui/icons";
 
 import type { RoutingFormTableRow } from "@calcom/web/modules/insights/lib/types";
 import { BookingStatusBadge } from "./BookingStatusBadge";
@@ -52,7 +52,7 @@ export function BookingAtCell({ row, rowId }: { row: RoutingFormTableRow; rowId:
                       e.stopPropagation();
                       copyToClipboard(row.bookingUserEmail ?? "");
                     }}>
-                    <Icon name="copy" />
+                    <CopyIcon />
                   </button>
                 </p>
               </div>
diff --git a/apps/web/modules/insights/components/booking/TimezoneBadge.tsx b/apps/web/modules/insights/components/booking/TimezoneBadge.tsx
index ce2f8f0669..cb0f67fa9f 100644
--- a/apps/web/modules/insights/components/booking/TimezoneBadge.tsx
+++ b/apps/web/modules/insights/components/booking/TimezoneBadge.tsx
@@ -6,8 +6,8 @@ import { useDataTable } from "@calcom/features/data-table";
 import NoSSR from "@calcom/lib/components/NoSSR";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { CURRENT_TIMEZONE } from "@calcom/lib/timezoneConstants";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { InfoIcon } from "@coss/ui/icons";
 
 const TimezoneBadgeContent = () => {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ const TimezoneBadgeContent = () => {
 
   return (
     <Tooltip content={timezoneData.tooltipContent}>
-      <Icon name="info" data-testid="timezone-mismatch-badge" className="text-subtle" />
+      <InfoIcon data-testid="timezone-mismatch-badge" className="text-subtle" />
     </Tooltip>
   );
 };
diff --git a/apps/web/modules/insights/components/filters/DateTargetSelector.tsx b/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
index 369d85b71e..114e1732d6 100644
--- a/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
+++ b/apps/web/modules/insights/components/filters/DateTargetSelector.tsx
@@ -3,8 +3,8 @@ import { useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Command, CommandList, CommandItem } 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 type DateTarget = "startTime" | "createdAt";
 
@@ -66,7 +66,7 @@ export const DateTargetSelector = ({ value, onChange }: DateTargetSelectorProps)
                   <div className="text-muted-foreground text-sm">{option.description}</div>
                 </div>
                 {selectedOption.value === option.value && (
-                  <Icon name="check" className="text-primary-foreground h-4 w-4" />
+                  <CheckIcon className="text-primary-foreground h-4 w-4" />
                 )}
               </CommandItem>
             ))}
diff --git a/apps/web/modules/insights/components/filters/OrgTeamsFilter.tsx b/apps/web/modules/insights/components/filters/OrgTeamsFilter.tsx
index 4853ae3555..a84fb77489 100644
--- a/apps/web/modules/insights/components/filters/OrgTeamsFilter.tsx
+++ b/apps/web/modules/insights/components/filters/OrgTeamsFilter.tsx
@@ -8,8 +8,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Divider } from "@calcom/ui/components/divider";
 import { FilterSearchField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { AnimatedPopover } from "@calcom/ui/components/popover";
+import { LayersIcon } from "@coss/ui/icons";
 
 import { useInsightsOrgTeams } from "../../hooks/useInsightsOrgTeams";
 
@@ -97,7 +97,7 @@ export const OrgTeamsFilter = () => {
           <FilterCheckboxField
             id="all"
             testId="org-teams-filter-item"
-            icon={<Icon name="layers" className="h-4 w-4" />}
+            icon={<LayersIcon className="h-4 w-4" />}
             checked={orgTeamsType === "org"}
             onChange={(e) => {
               if (e.target.checked) {
diff --git a/apps/web/modules/integration-attribute-sync/components/FieldMappingBuilder.tsx b/apps/web/modules/integration-attribute-sync/components/FieldMappingBuilder.tsx
index 37ef592333..a46ea7ae46 100644
--- a/apps/web/modules/integration-attribute-sync/components/FieldMappingBuilder.tsx
+++ b/apps/web/modules/integration-attribute-sync/components/FieldMappingBuilder.tsx
@@ -1,7 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Input, Select, Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowRightIcon, LinkIcon } from "@coss/ui/icons";
 
 import { getDefaultFieldMapping } from "@calcom/features/ee/integration-attribute-sync/lib/fieldMappingHelpers";
 import type {
@@ -72,7 +72,7 @@ const MappingRow = ({ mapping, onChange, onRemove, attributeOptions, isLoading,
           />
         </div>
 
-        <Icon name="arrow-right" className="text-subtle h-4 w-4" />
+        <ArrowRightIcon className="text-subtle h-4 w-4" />
 
         <div className="flex-1" style={{ minWidth: "200px" }}>
           <Select
@@ -155,7 +155,7 @@ export const FieldMappingBuilder = ({
     <div className="bg-default border-subtle rounded-2xl border p-2">
       <div className="ml-2 flex items-center gap-0.5">
         <div className="border-subtle rounded-lg border p-1">
-          <Icon name="link" className="text-subtle h-4 w-4" />
+          <LinkIcon className="text-subtle h-4 w-4" />
         </div>
         <span className="text-emphasis ml-2 text-sm font-medium">{t("attribute_sync_field_mappings")}</span>
       </div>
diff --git a/apps/web/modules/integration-attribute-sync/components/IntegrationAttributeSyncCard.tsx b/apps/web/modules/integration-attribute-sync/components/IntegrationAttributeSyncCard.tsx
index 555e9f7d3e..76cb6f1e45 100644
--- a/apps/web/modules/integration-attribute-sync/components/IntegrationAttributeSyncCard.tsx
+++ b/apps/web/modules/integration-attribute-sync/components/IntegrationAttributeSyncCard.tsx
@@ -8,7 +8,7 @@ import { Button } from "@calcom/ui/components/button";
 import { FormCard, FormCardBody } from "@calcom/ui/components/card";
 import { ConfirmationDialogContent } from "@calcom/ui/components/dialog";
 import { SelectField, Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { KeyIcon } from "@coss/ui/icons";
 
 import {
   type IntegrationAttributeSync,
@@ -161,7 +161,7 @@ const IntegrationAttributeSyncCard = (props: IIntegrationAttributeSyncCardProps)
               <div className="bg-default border-subtle rounded-2xl border p-2">
                 <div className="ml-2 flex items-center gap-0.5">
                   <div className="border-subtle rounded-lg border p-1">
-                    <Icon name="key" className="text-subtle h-4 w-4" />
+                    <KeyIcon className="text-subtle h-4 w-4" />
                   </div>
                   <span className="text-emphasis ml-2 text-sm font-medium">
                     {t("attribute_sync_credential")}
diff --git a/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx b/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
index 0d13a19b29..7fbbc286de 100644
--- a/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
+++ b/apps/web/modules/integration-attribute-sync/components/RuleBuilder.tsx
@@ -4,7 +4,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { Attribute } from "@calcom/app-store/routing-forms/types/types";
 import { Button } from "@calcom/ui/components/button";
 import { Input, Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { FilterIcon } from "@coss/ui/icons";
 
 import {
   formatConditionValue,
@@ -450,7 +450,7 @@ export const RuleBuilder = ({
     <div className="bg-default border-subtle rounded-2xl border p-2">
       <div className="ml-2 flex items-center gap-0.5">
         <div className="border-subtle rounded-lg border p-1">
-          <Icon name="filter" className="text-subtle h-4 w-4" />
+          <FilterIcon className="text-subtle h-4 w-4" />
         </div>
         <span className="text-emphasis ml-2 text-sm font-medium">
           {t("attribute_sync_user_filter_rules")}
diff --git a/apps/web/modules/onboarding/components/EmailInviteForm.tsx b/apps/web/modules/onboarding/components/EmailInviteForm.tsx
index 6e0344349f..f372fc0d54 100644
--- a/apps/web/modules/onboarding/components/EmailInviteForm.tsx
+++ b/apps/web/modules/onboarding/components/EmailInviteForm.tsx
@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Label, TextField, Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 
 import type { InviteRole } from "../store/onboarding-store";
 
@@ -98,7 +98,7 @@ export function EmailInviteForm({
                 className="h-7 w-7"
                 disabled={fields.length === 1}
                 onClick={() => remove(index)}>
-                <Icon name="x" className="h-4 w-4" />
+                <XIcon className="h-4 w-4" />
               </Button>
             </div>
           ))}
diff --git a/apps/web/modules/onboarding/components/InviteOptions.tsx b/apps/web/modules/onboarding/components/InviteOptions.tsx
index 3ef587a9af..70f29a77e6 100644
--- a/apps/web/modules/onboarding/components/InviteOptions.tsx
+++ b/apps/web/modules/onboarding/components/InviteOptions.tsx
@@ -3,7 +3,7 @@
 import { useFlags } from "@calcom/web/modules/feature-flags/hooks/useFlags";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { LinkIcon, MailIcon, UploadIcon } from "@coss/ui/icons";
 
 const GoogleIcon = () => (
   <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -68,7 +68,7 @@ export const InviteOptions = ({
           onClick={onInviteViaEmail}
           disabled={isSubmitting}>
           <div className="flex items-center gap-1">
-            <Icon name="mail" className="h-4 w-4" />
+            <MailIcon className="h-4 w-4" />
             <span>{t("invite_via_email")}</span>
           </div>
         </Button>
@@ -80,7 +80,7 @@ export const InviteOptions = ({
             onClick={onUploadCSV}
             disabled={isSubmitting}>
             <div className="flex items-center gap-1">
-              <Icon name="upload" className="h-4 w-4" />
+              <UploadIcon className="h-4 w-4" />
               <span>{t("upload_csv_file")}</span>
             </div>
           </Button>
@@ -93,7 +93,7 @@ export const InviteOptions = ({
             onClick={onCopyInviteLink}
             disabled>
             <div className="flex items-center gap-1">
-              <Icon name="link" className="h-4 w-4" />
+              <LinkIcon className="h-4 w-4" />
               <span>{t("copy_invite_link")}</span>
             </div>
           </Button>
diff --git a/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx b/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
index fa8ac03d8b..1d42b3b922 100644
--- a/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-continuation-prompt.tsx
@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 
 import { useOnboardingStore } from "../store/onboarding-store";
 
@@ -68,7 +68,7 @@ export const OnboardingContinuationPrompt = () => {
         <button
           onClick={() => setIsVisible(false)}
           className="text-muted hover:text-emphasis absolute right-2 top-2 rounded-md p-1 transition-colors">
-          <Icon name="x" className="h-4 w-4" />
+          <XIcon className="h-4 w-4" />
         </button>
 
         <div className="mb-3 pr-6">
diff --git a/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
index 25c989353d..f20447978f 100644
--- a/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-migrate-members-browser-view.tsx
@@ -7,7 +7,15 @@ import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomain
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  EllipsisVerticalIcon,
+  LockIcon,
+  RotateCwIcon,
+  UserPlusIcon,
+} from "@coss/ui/icons";
 
 type MigratedMember = {
   email: string;
@@ -59,15 +67,15 @@ export const OnboardingMigrateMembersBrowserView = ({
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
         {/* Navigation buttons */}
         <div className="flex shrink-0 items-center gap-4 opacity-50">
-          <Icon name="arrow-left" className="text-subtle h-4 w-4" />
-          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
-          <Icon name="rotate-cw" className="text-subtle h-4 w-4" />
+          <ArrowLeftIcon className="text-subtle h-4 w-4" />
+          <ArrowRightIcon className="text-subtle h-4 w-4" />
+          <RotateCwIcon className="text-subtle h-4 w-4" />
         </div>
         <div className="bg-cal-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
-          <Icon name="lock" className="text-subtle h-4 w-4" />
+          <LockIcon className="text-subtle h-4 w-4" />
           <p className="text-default truncate text-sm font-medium leading-tight">{displayUrl}/members</p>
         </div>
-        <Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
+        <EllipsisVerticalIcon className="text-subtle h-4 w-4" />
       </div>
 
       {/* Content */}
@@ -159,7 +167,7 @@ export const OnboardingMigrateMembersBrowserView = ({
                           </div>
                           <p className="text-muted text-xs font-medium leading-tight">{member.email}</p>
                         </div>
-                        <Icon name="check" className="text-emphasis h-5 w-5" />
+                        <CheckIcon className="text-emphasis h-5 w-5" />
                       </div>
                     </div>
                   ))}
@@ -167,7 +175,7 @@ export const OnboardingMigrateMembersBrowserView = ({
               ) : (
                 <div className="flex flex-col items-center justify-center gap-3 px-5 py-12">
                   <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-full">
-                    <Icon name="user-plus" className="text-subtle h-8 w-8" />
+                    <UserPlusIcon className="text-subtle h-8 w-8" />
                   </div>
                   <div className="flex flex-col gap-1 text-center">
                     <p className="text-default truncate text-sm font-semibold leading-tight">
diff --git a/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
index 7be5f24145..eaa0df770f 100644
--- a/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-migrate-teams-browser-view.tsx
@@ -7,7 +7,15 @@ import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomain
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  EllipsisVerticalIcon,
+  LockIcon,
+  RotateCwIcon,
+  UsersIcon,
+} from "@coss/ui/icons";
 
 type OnboardingMigrateTeamsBrowserViewProps = {
   teams: Array<{ id: number; name: string; slug: string | null; isSelected?: boolean }>;
@@ -52,15 +60,15 @@ export const OnboardingMigrateTeamsBrowserView = ({
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
         {/* Navigation buttons */}
         <div className="flex shrink-0 items-center gap-4 opacity-50">
-          <Icon name="arrow-left" className="text-subtle h-4 w-4" />
-          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
-          <Icon name="rotate-cw" className="text-subtle h-4 w-4" />
+          <ArrowLeftIcon className="text-subtle h-4 w-4" />
+          <ArrowRightIcon className="text-subtle h-4 w-4" />
+          <RotateCwIcon className="text-subtle h-4 w-4" />
         </div>
         <div className="bg-cal-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
-          <Icon name="lock" className="text-subtle h-4 w-4" />
+          <LockIcon className="text-subtle h-4 w-4" />
           <p className="text-default truncate text-sm font-medium leading-tight">{displayUrl}/teams</p>
         </div>
-        <Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
+        <EllipsisVerticalIcon className="text-subtle h-4 w-4" />
       </div>
 
       {/* Content */}
@@ -158,9 +166,9 @@ export const OnboardingMigrateTeamsBrowserView = ({
                           </p>
                         </div>
                         {team.isSelected ? (
-                          <Icon name="check" className="text-emphasis h-5 w-5" />
+                          <CheckIcon className="text-emphasis h-5 w-5" />
                         ) : (
-                          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
+                          <ArrowRightIcon className="text-subtle h-4 w-4" />
                         )}
                       </div>
                     </div>
@@ -169,7 +177,7 @@ export const OnboardingMigrateTeamsBrowserView = ({
               ) : (
                 <div className="flex flex-col items-center justify-center gap-3 px-5 py-12">
                   <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-full">
-                    <Icon name="users" className="text-subtle h-8 w-8" />
+                    <UsersIcon className="text-subtle h-8 w-8" />
                   </div>
                   <div className="flex flex-col gap-1 text-center">
                     <p className="text-default truncate text-sm font-semibold leading-tight">
diff --git a/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
index 4a2c19743a..b90492a6d8 100644
--- a/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
+++ b/apps/web/modules/onboarding/components/onboarding-teams-browser-view.tsx
@@ -7,7 +7,15 @@ import { subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomain
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  CheckIcon,
+  EllipsisVerticalIcon,
+  LockIcon,
+  RotateCwIcon,
+  UsersIcon,
+} from "@coss/ui/icons";
 
 type OnboardingTeamsBrowserViewProps = {
   teams: Array<{ name: string; slug?: string | null; isMigrated?: boolean }>;
@@ -53,15 +61,15 @@ export const OnboardingTeamsBrowserView = ({
       <div className="border-subtle bg-default flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b p-3">
         {/* Navigation buttons */}
         <div className="flex shrink-0 items-center gap-4 opacity-50">
-          <Icon name="arrow-left" className="text-subtle h-4 w-4" />
-          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
-          <Icon name="rotate-cw" className="text-subtle h-4 w-4" />
+          <ArrowLeftIcon className="text-subtle h-4 w-4" />
+          <ArrowRightIcon className="text-subtle h-4 w-4" />
+          <RotateCwIcon className="text-subtle h-4 w-4" />
         </div>
         <div className="bg-cal-muted flex w-full min-w-0 items-center gap-2 rounded-[32px] px-3 py-2">
-          <Icon name="lock" className="text-subtle h-4 w-4" />
+          <LockIcon className="text-subtle h-4 w-4" />
           <p className="text-default truncate text-sm font-medium leading-tight">{displayUrl}/teams</p>
         </div>
-        <Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
+        <EllipsisVerticalIcon className="text-subtle h-4 w-4" />
       </div>
 
       {/* Content */}
@@ -155,9 +163,9 @@ export const OnboardingTeamsBrowserView = ({
                           </p>
                         </div>
                         {team.isMigrated ? (
-                          <Icon name="check" className="text-emphasis h-5 w-5" />
+                          <CheckIcon className="text-emphasis h-5 w-5" />
                         ) : (
-                          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
+                          <ArrowRightIcon className="text-subtle h-4 w-4" />
                         )}
                       </div>
                     </div>
@@ -165,7 +173,7 @@ export const OnboardingTeamsBrowserView = ({
               ) : (
                 <div className="flex flex-col items-center justify-center gap-3 px-5 py-12">
                   <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-full">
-                    <Icon name="users" className="text-subtle h-8 w-8" />
+                    <UsersIcon className="text-subtle h-8 w-8" />
                   </div>
                   <div className="flex flex-col gap-1 text-center">
                     <p className="text-default truncate text-sm font-semibold leading-tight">
diff --git a/apps/web/modules/onboarding/organization/details/validated-organization-slug.tsx b/apps/web/modules/onboarding/organization/details/validated-organization-slug.tsx
index 71d17a234e..10111e2540 100644
--- a/apps/web/modules/onboarding/organization/details/validated-organization-slug.tsx
+++ b/apps/web/modules/onboarding/organization/details/validated-organization-slug.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 
 import classNames from "@calcom/ui/classNames";
 import { Label, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon } from "@coss/ui/icons";
 
 import { checkSlugAvailability } from "./action/check-slug-availability";
 
@@ -84,7 +84,7 @@ export function ValidatedOrganizationSlug({
         addOnSuffix={
           <div className="flex items-center gap-2">
             {validationState === "checking" && (
-              <Icon name="loader" className="text-subtle h-3 w-3 animate-spin" />
+              <LoaderIcon className="text-subtle h-3 w-3 animate-spin" />
             )}
             <span className="text-subtle text-sm">.cal.com</span>
           </div>
diff --git a/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx b/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
index e05909ecda..9c7f9bba92 100644
--- a/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
+++ b/apps/web/modules/onboarding/organization/invite/csv-upload-modal.tsx
@@ -6,8 +6,8 @@ import React, { useRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { Logo } from "@calcom/ui/components/logo";
+import { DownloadIcon, FileTextIcon, UploadIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { useOnboardingStore, type Invite } from "../../store/onboarding-store";
@@ -157,7 +157,7 @@ export const OrganizationCSVUploadModal = ({ isOpen, onClose }: OrganizationCSVU
               {selectedFile ? (
                 <div className="flex flex-col items-center gap-3">
                   <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
-                    <Icon name="file-text" className="text-emphasis" style={{ width: 32, height: 32 }} />
+                    <FileTextIcon className="text-emphasis" size={32} />
                   </div>
                   <div className="flex flex-col items-center gap-1">
                     <p className="text-emphasis text-sm font-medium">{selectedFile.name}</p>
@@ -167,11 +167,7 @@ export const OrganizationCSVUploadModal = ({ isOpen, onClose }: OrganizationCSVU
               ) : (
                 <div className="flex flex-col items-center gap-3">
                   <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
-                    <Icon
-                      name="upload"
-                      className="text-emphasis opacity-70"
-                      style={{ width: 32, height: 32 }}
-                    />
+                    <UploadIcon className="text-emphasis opacity-70" size={32} />
                   </div>
                   <p className="text-subtle text-center text-sm">{t("upload_csv_subtitle")}</p>
                 </div>
@@ -187,7 +183,7 @@ export const OrganizationCSVUploadModal = ({ isOpen, onClose }: OrganizationCSVU
           <div className="mb-2 flex flex-col gap-3">
             <div className="bg-cal-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
               <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
-                <Icon name="download" className="text-emphasis" style={{ width: 16, height: 16 }} />
+                <DownloadIcon className="text-emphasis" size={16} />
               </div>
               <div className="flex-1">
                 <p className="text-emphasis text-sm font-medium">{t("need_template")}</p>
@@ -200,7 +196,7 @@ export const OrganizationCSVUploadModal = ({ isOpen, onClose }: OrganizationCSVU
 
             <div className="bg-cal-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
               <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
-                <Icon name="upload" className="text-emphasis" style={{ width: 16, height: 16 }} />
+                <UploadIcon className="text-emphasis" size={16} />
               </div>
               <div className="flex-1">
                 <p className="text-emphasis text-sm font-medium">{t("upload_your_file")}</p>
diff --git a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
index 445a4ecab0..b41896f263 100644
--- a/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
+++ b/apps/web/modules/onboarding/organization/teams/organization-teams-view.tsx
@@ -11,7 +11,7 @@ import slugify from "@calcom/lib/slugify";
 import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Form, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 
 import { OnboardingCard } from "../../components/OnboardingCard";
 import { OnboardingLayout } from "../../components/OnboardingLayout";
@@ -200,7 +200,7 @@ export const OrganizationTeamsView = ({ userEmail }: OrganizationTeamsViewProps)
                           });
                           remove(index);
                         }}>
-                        <Icon name="x" className="h-4 w-4" />
+                        <XIcon className="h-4 w-4" />
                       </Button>
                     </div>
                   ))}
diff --git a/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
index 4dc493623f..d59fa531b0 100644
--- a/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
+++ b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
@@ -8,7 +8,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import classNames from "@calcom/ui/classNames";
 import { Label, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { LoaderIcon } from "@coss/ui/icons";
 
 import { checkTeamSlugAvailability } from "./action/check-team-slug-availability";
 
@@ -100,7 +100,7 @@ export function ValidatedTeamSlug({ value, onChange, onValidationChange }: Valid
         addOnLeading={urlPrefix}
         addOnSuffix={
           validationState === "checking" ? (
-            <Icon name="loader" className="text-subtle h-3 w-3 animate-spin" />
+            <LoaderIcon className="text-subtle h-3 w-3 animate-spin" />
           ) : undefined
         }
         className={classNames(validationState === "taken" ? "border-error" : "")}
diff --git a/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
index 40bbd6cbd1..d33dfdd093 100644
--- a/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
+++ b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
@@ -6,8 +6,8 @@ import React, { useRef, useState } from "react";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { Logo } from "@calcom/ui/components/logo";
+import { DownloadIcon, FileTextIcon, UploadIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { useOnboardingStore, type Invite } from "../../store/onboarding-store";
@@ -156,7 +156,7 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
               {selectedFile ? (
                 <div className="flex flex-col items-center gap-3">
                   <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
-                    <Icon name="file-text" className="text-emphasis" style={{ width: 32, height: 32 }} />
+                    <FileTextIcon className="text-emphasis" size={32} />
                   </div>
                   <div className="flex flex-col items-center gap-1">
                     <p className="text-emphasis text-sm font-medium">{selectedFile.name}</p>
@@ -166,11 +166,7 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
               ) : (
                 <div className="flex flex-col items-center gap-3">
                   <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
-                    <Icon
-                      name="upload"
-                      className="text-emphasis opacity-70"
-                      style={{ width: 32, height: 32 }}
-                    />
+                    <UploadIcon className="text-emphasis opacity-70" size={32} />
                   </div>
                   <p className="text-subtle text-center text-sm">{t("upload_csv_subtitle")}</p>
                 </div>
@@ -187,7 +183,7 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
             {/* Download template */}
             <div className="bg-cal-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
               <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
-                <Icon name="download" className="text-emphasis" style={{ width: 16, height: 16 }} />
+                <DownloadIcon className="text-emphasis" size={16} />
               </div>
               <div className="flex-1">
                 <p className="text-emphasis text-sm font-medium">{t("need_template")}</p>
@@ -201,7 +197,7 @@ export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
             {/* File upload */}
             <div className="bg-cal-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
               <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
-                <Icon name="upload" className="text-emphasis" style={{ width: 16, height: 16 }} />
+                <UploadIcon className="text-emphasis" size={16} />
               </div>
               <div className="flex-1">
                 <p className="text-emphasis text-sm font-medium">{t("upload_your_file")}</p>
diff --git a/apps/web/modules/settings/billing/components/BillingCredits.tsx b/apps/web/modules/settings/billing/components/BillingCredits.tsx
index 62ab5be13b..cde0eb3607 100644
--- a/apps/web/modules/settings/billing/components/BillingCredits.tsx
+++ b/apps/web/modules/settings/billing/components/BillingCredits.tsx
@@ -16,8 +16,8 @@ import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
 import { Select } from "@calcom/ui/components/form";
 import { TextField, Label, InputError } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { ProgressBar } from "@calcom/ui/components/progress-bar";
+import { InfoIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -246,7 +246,7 @@ export default function BillingCredits() {
                       {numberFormatter.format(creditsData.credits.additionalCredits)}
                     </p>
                     <Tooltip content={t("view_additional_credits_expense_tip")}>
-                      <Icon name="info" className="w-3 h-3 text-emphasis" />
+                      <InfoIcon className="text-emphasis h-3 w-3" />
                     </Tooltip>
                   </div>
                 </div>
diff --git a/apps/web/modules/settings/my-account/holidays-view.tsx b/apps/web/modules/settings/my-account/holidays-view.tsx
index b946fe7a8c..9a365c329a 100644
--- a/apps/web/modules/settings/my-account/holidays-view.tsx
+++ b/apps/web/modules/settings/my-account/holidays-view.tsx
@@ -12,8 +12,8 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { Select } from "@calcom/ui/components/form";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui/components/skeleton";
+import { CalendarIcon, TriangleAlertIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import { OutOfOfficeToggleGroup } from "~/settings/outOfOffice/OutOfOfficeToggleGroup";
@@ -148,7 +148,7 @@ function ConflictWarning({
   return (
     <div className="bg-semantic-attention-subtle rounded-md px-3 py-2">
       <div className="flex items-center gap-2">
-        <Icon name="triangle-alert" className="text-semantic-attention h-4 w-4 shrink-0" />
+        <TriangleAlertIcon className="text-semantic-attention h-4 w-4 shrink-0" />
         <p className="text-emphasis text-sm font-medium">
           {t("holiday_booking_conflict_warning", { count: totalBookings })}:
         </p>
@@ -316,7 +316,7 @@ export function HolidaysView() {
           ) : (
             <div className="bg-default flex flex-col items-center rounded-md py-14 text-center">
               <div className="bg-emphasis mb-4 flex h-16 w-16 items-center justify-center rounded-full">
-                <Icon name="calendar" className="text-default h-8 w-8" />
+                <CalendarIcon className="text-default h-8 w-8" />
               </div>
               <h4 className="text-emphasis mb-1 font-medium">{t("no_holidays_selected")}</h4>
               <p className="text-subtle text-sm">{t("select_country_to_see_holidays")}</p>
diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index 9163f779da..4ecaa8d251 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -34,8 +34,8 @@ import { Form } from "@calcom/ui/components/form";
 import { PasswordField } from "@calcom/ui/components/form";
 import { Label } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { InfoIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { DisplayInfo } from "@calcom/web/modules/users/components/UserTable/EditSheet/DisplayInfo";
 
@@ -660,7 +660,7 @@ const ProfileForm = ({
         </div>
         {extraField}
         <p className="text-subtle mt-1 flex gap-1 text-sm">
-          <Icon name="info" className="mt-0.5 shrink-0" />
+          <InfoIcon className="mt-0.5 shrink-0" />
           <span className="flex-1">{t("tip_username_plus")}</span>
         </p>
         <div className="mt-6">
diff --git a/apps/web/modules/settings/oauth/OAuthClientsList.tsx b/apps/web/modules/settings/oauth/OAuthClientsList.tsx
index 8f158e3053..18d2606374 100644
--- a/apps/web/modules/settings/oauth/OAuthClientsList.tsx
+++ b/apps/web/modules/settings/oauth/OAuthClientsList.tsx
@@ -6,7 +6,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Badge } from "@calcom/ui/components/badge";
-import { Icon } from "@calcom/ui/components/icon";
+import { ChevronRightIcon, KeyIcon } from "@coss/ui/icons";
 
 import type { OAuthClientDetails } from "./view/OAuthClientDetailsDialog";
 
@@ -55,7 +55,7 @@ export const OAuthClientsList = ({
             <Avatar
               alt={client.name}
               imageSrc={client.logo || undefined}
-              fallback={<Icon name="key" className="text-subtle h-6 w-6" />}
+              fallback={<KeyIcon className="text-subtle h-6 w-6" />}
               size="md"
             />
             <div>
@@ -65,7 +65,7 @@ export const OAuthClientsList = ({
           </div>
           <div className="flex items-center gap-4">
             {showStatus && client.status ? getStatusBadge(client.status, t) : null}
-            <Icon name="chevron-right" className="text-subtle h-5 w-5" />
+            <ChevronRightIcon className="text-subtle h-5 w-5" />
           </div>
         </div>
       ))}
diff --git a/apps/web/modules/settings/oauth/view/OAuthClientFormFields.tsx b/apps/web/modules/settings/oauth/view/OAuthClientFormFields.tsx
index 4d144050f6..260138a4f3 100644
--- a/apps/web/modules/settings/oauth/view/OAuthClientFormFields.tsx
+++ b/apps/web/modules/settings/oauth/view/OAuthClientFormFields.tsx
@@ -8,8 +8,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Label, Switch, TextArea, TextField } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { InfoIcon, KeyIcon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import type { OAuthClientCreateFormValues } from "../create/OAuthClientCreateModal";
@@ -78,7 +78,7 @@ export const OAuthClientFormFields = ({
           {t("purpose")}
           <Tooltip content={t("purpose_tooltip")}>
             <span>
-              <Icon name="info" className="text-subtle h-4 w-4" />
+              <InfoIcon className="text-subtle h-4 w-4" />
             </span>
           </Tooltip>
         </Label>
@@ -107,7 +107,7 @@ export const OAuthClientFormFields = ({
             {t("website_url")}
             <Tooltip content={t("website_url_tooltip")}>
               <span>
-                <Icon name="info" className="text-subtle h-4 w-4" />
+                <InfoIcon className="text-subtle h-4 w-4" />
               </span>
             </Tooltip>
           </span>
@@ -137,7 +137,7 @@ export const OAuthClientFormFields = ({
           <div className="flex items-center gap-4">
             <Avatar
               alt={t("logo")}
-              fallback={<Icon name="key" className="text-subtle h-6 w-6" />}
+              fallback={<KeyIcon className="text-subtle h-6 w-6" />}
               imageSrc={logo}
               size="lg"
             />
diff --git a/apps/web/modules/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/apps/web/modules/settings/outOfOffice/OutOfOfficeEntriesList.tsx
index 0c4fe5855d..85be831f47 100644
--- a/apps/web/modules/settings/outOfOffice/OutOfOfficeEntriesList.tsx
+++ b/apps/web/modules/settings/outOfOffice/OutOfOfficeEntriesList.tsx
@@ -34,8 +34,8 @@ import { trpc } from "@calcom/trpc/react";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
-import { Icon } from "@calcom/ui/components/icon";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
+import { ClockIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -423,7 +423,7 @@ function OutOfOfficeEntriesListContent({
                       <div className="w-12" />
                     </div>
                     <div className="dark:bg-darkgray-50 text-inverted relative z-0 flex h-[70px] w-[70px] items-center justify-center rounded-3xl border-2 border-[#e5e7eb] bg-white">
-                      <Icon name="clock" size={28} className="text-black" />
+                      <ClockIcon size={28} className="text-black" />
                       <div className="dark:bg-darkgray-50 absolute right-4 top-5 h-[12px] w-[12px] rotate-56 bg-white text-lg font-bold" />
                       <span className="absolute right-4 top-3 font-sans text-sm font-extrabold text-black">
                         z
diff --git a/apps/web/modules/settings/security/compliance/ComplianceDocumentCard.tsx b/apps/web/modules/settings/security/compliance/ComplianceDocumentCard.tsx
index cbb948e8e8..9ee070f6b2 100644
--- a/apps/web/modules/settings/security/compliance/ComplianceDocumentCard.tsx
+++ b/apps/web/modules/settings/security/compliance/ComplianceDocumentCard.tsx
@@ -3,8 +3,8 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
 import { Button } from "@calcom/ui/components/button";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { FileTextIcon } from "@coss/ui/icons";
 
 import type { ComplianceDocument } from "./compliance-documents";
 
@@ -38,7 +38,7 @@ export function ComplianceDocumentCard({ document, hasAccess }: ComplianceDocume
       )}>
       <div className="flex items-center gap-3">
         <div className="bg-subtle flex h-10 w-10 items-center justify-center rounded-lg">
-          <Icon name="file-text" className="text-default h-5 w-5" />
+          <FileTextIcon className="text-default h-5 w-5" />
         </div>
         <div>
           <p className="text-emphasis text-sm font-medium">{t(document.name)}</p>
diff --git a/apps/web/modules/shell/Kbar.tsx b/apps/web/modules/shell/Kbar.tsx
index 1abb7a276a..2eca0b2f70 100644
--- a/apps/web/modules/shell/Kbar.tsx
+++ b/apps/web/modules/shell/Kbar.tsx
@@ -5,8 +5,15 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 import { trpc } from "@calcom/trpc/react";
-import { Icon } from "@calcom/ui/components/icon";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CommandIcon,
+  CornerDownLeftIcon,
+  ExternalLinkIcon,
+  SearchIcon,
+} from "@coss/ui/icons";
 import type { Action } from "kbar";
 import {
   KBarAnimator,
@@ -317,7 +324,7 @@ const KBarRoot = ({ children }: { children: ReactNode }): JSX.Element => {
 
 function CommandKey(): JSX.Element {
   if (isMac) {
-    return <Icon name="command" className="h-3 w-3" />;
+    return <CommandIcon className="h-3 w-3" />;
   }
   return <>CTRL</>;
 }
@@ -330,7 +337,7 @@ const KBarContent = (): JSX.Element => {
       <KBarPositioner className="overflow-scroll">
         <KBarAnimator className="z-10 w-full max-w-(--breakpoint-sm) overflow-hidden rounded-md bg-default shadow-lg">
           <div className="flex items-center justify-center border-subtle border-b">
-            <Icon name="search" className="mx-3 h-4 w-4 text-default" />
+            <SearchIcon className="mx-3 h-4 w-4 text-default" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
               className="w-full rounded-sm border-0 bg-default px-0 py-2.5 text-default placeholder:text-subtle focus:ring-0 focus-visible:outline-none"
@@ -338,9 +345,9 @@ const KBarContent = (): JSX.Element => {
           </div>
           <RenderResults />
           <div className="hidden items-center space-x-1 border-subtle border-t px-2 py-1.5 text-subtle text-xs sm:flex">
-            <Icon name="arrow-up" className="h-4 w-4" />
-            <Icon name="arrow-down" className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
-            <Icon name="corner-down-left" className="h-4 w-4" />
+            <ArrowUpIcon className="h-4 w-4" />
+            <ArrowDownIcon className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
+            <CornerDownLeftIcon className="h-4 w-4" />
             <span className="pr-2">{t("open")}</span>
             <CommandKey />
             <span className="pr-1">+ K </span>
@@ -373,7 +380,7 @@ const KBarTrigger = (): JSX.Element | null => {
         color="minimal"
         onClick={query.toggle}
         className="todesktop:hover:!bg-transparent group flex rounded-md px-3 py-2 font-medium text-default text-sm transition hover:bg-subtle lg:px-2 lg:hover:bg-emphasis lg:hover:text-emphasis">
-        <Icon name="search" className="h-4 w-4 shrink-0 text-inherit" />
+        <SearchIcon className="h-4 w-4 shrink-0 text-inherit" />
       </button>
     </Tooltip>
   );
@@ -449,7 +456,7 @@ function NoResultsFound({ searchQuery }: { searchQuery: string }): JSX.Element {
         target="_blank"
         rel="noopener noreferrer"
         className="flex items-center justify-center gap-2 text-emphasis text-sm transition hover:text-default">
-        <Icon name="external-link" className="h-4 w-4" />
+        <ExternalLinkIcon className="h-4 w-4" />
         {t("kbar_search_help_desk_prefix")} <span className="underline">&quot;{searchQuery}&quot;</span>{" "}
         {t("kbar_search_help_desk_suffix")}
       </a>
diff --git a/apps/web/modules/shell/SideBar.tsx b/apps/web/modules/shell/SideBar.tsx
index fdda366c27..93c2d567eb 100644
--- a/apps/web/modules/shell/SideBar.tsx
+++ b/apps/web/modules/shell/SideBar.tsx
@@ -16,6 +16,7 @@ import { Avatar } from "@calcom/ui/components/avatar";
 import { Credits } from "@calcom/ui/components/credits";
 import { ButtonOrLink } from "@calcom/ui/components/dropdown";
 import { Icon } from "@calcom/ui/components/icon";
+import { ArrowLeftIcon, ArrowRightIcon } from "@coss/ui/icons";
 import { Logo } from "@calcom/ui/components/logo";
 import { SkeletonText } from "@calcom/ui/components/skeleton";
 import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -117,13 +118,13 @@ export function SideBar({ bannersHeight, user }: SideBarProps) {
                 color="minimal"
                 onClick={() => window.history.back()}
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <Icon name="arrow-left" className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0" />
+                <ArrowLeftIcon className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0" />
               </button>
               <button
                 color="minimal"
                 onClick={() => window.history.forward()}
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
-                <Icon name="arrow-right" className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0" />
+                <ArrowRightIcon className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0" />
               </button>
               {!!user?.org && (
                 <div data-testid="user-dropdown-trigger" className="flex items-center">
diff --git a/apps/web/modules/shell/TopNav.tsx b/apps/web/modules/shell/TopNav.tsx
index 716c9813c6..c34248fc2b 100644
--- a/apps/web/modules/shell/TopNav.tsx
+++ b/apps/web/modules/shell/TopNav.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { useIsStandalone } from "@calcom/lib/hooks/useIsStandalone";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
+import { SettingsIcon } from "@coss/ui/icons";
 import { Logo } from "@calcom/ui/components/logo";
 
 import { KBarTrigger } from "./Kbar";
@@ -35,7 +35,7 @@ function TopNav() {
           <button className="hover:bg-cal-muted hover:text-subtle text-muted rounded-full p-1 transition focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
             <span className="sr-only">{t("settings")}</span>
             <Link href="/settings/my-account/profile">
-              <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
+              <SettingsIcon className="text-default h-4 w-4" />
             </Link>
           </button>
           <UserDropdown small />
diff --git a/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx b/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
index fe454857c9..5daae05c92 100644
--- a/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
+++ b/apps/web/modules/shell/components/WelcomeToCalcomModal.tsx
@@ -4,8 +4,8 @@ import { APP_NAME } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { Logo } from "@calcom/ui/components/logo";
+import { CheckIcon, UserIcon } from "@coss/ui/icons";
 
 import { useWelcomeToCalcomModal } from "../hooks/useWelcomeToCalcomModal";
 
@@ -73,11 +73,7 @@ export function WelcomeToCalcomModal() {
                   top: "50%",
                   transform: "translate(-50%, -50%)",
                 }}>
-                <Icon
-                  name="user"
-                  className="text-emphasis opacity-70"
-                  style={{ width: LARGE.icon, height: LARGE.icon }}
-                />
+                <UserIcon className="text-emphasis opacity-70" size={LARGE.icon} />
               </div>
             </div>
           </div>
@@ -92,7 +88,7 @@ export function WelcomeToCalcomModal() {
           <div className="mb-2 flex flex-col gap-3">
             {features.map((feature) => (
               <div key={feature} className="flex items-start gap-2">
-                <Icon name="check" className="text-muted mt-0.5 h-4 w-4 shrink-0" />
+                <CheckIcon className="text-muted mt-0.5 h-4 w-4 shrink-0" />
                 <span className="text-default text-sm font-medium leading-tight">{t(feature)}</span>
               </div>
             ))}
diff --git a/apps/web/modules/shell/user-dropdown/ProfileDropdown.tsx b/apps/web/modules/shell/user-dropdown/ProfileDropdown.tsx
index ead4898ff0..0d63f96dd5 100644
--- a/apps/web/modules/shell/user-dropdown/ProfileDropdown.tsx
+++ b/apps/web/modules/shell/user-dropdown/ProfileDropdown.tsx
@@ -14,7 +14,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@coss/ui/icons";
 
 export function ProfileDropdown() {
   const { update, data: sessionData } = useSession();
@@ -54,11 +54,11 @@ export function ProfileDropdown() {
             <span className="block w-20 overflow-hidden text-ellipsis whitespace-nowrap">
               {currentOption.label}
             </span>
-            <Icon
-              name={menuOpen ? "chevron-up" : "chevron-down"}
-              className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
-              aria-hidden="true"
-            />
+            {menuOpen ? (
+              <ChevronUpIcon className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4" />
+            ) : (
+              <ChevronDownIcon className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4" />
+            )}
           </span>
         </button>
       </DropdownMenuTrigger>
@@ -96,7 +96,7 @@ export function ProfileDropdown() {
                     <span className="ml-2">{option.label}</span>
                   </span>
                   {isSelected ? (
-                    <Icon name="check" className="ml-2 inline h-4 w-4" aria-hidden="true" />
+                    <CheckIcon className="ml-2 inline h-4 w-4" />
                   ) : null}
                 </DropdownItem>
               </DropdownMenuItem>
diff --git a/apps/web/modules/shell/user-dropdown/UserDropdown.tsx b/apps/web/modules/shell/user-dropdown/UserDropdown.tsx
index 0cbbca102e..f62c0ee819 100644
--- a/apps/web/modules/shell/user-dropdown/UserDropdown.tsx
+++ b/apps/web/modules/shell/user-dropdown/UserDropdown.tsx
@@ -4,7 +4,18 @@ import { useUserAgentData } from "@calcom/lib/hooks/useUserAgentData";
 import useMeQuery from "@calcom/trpc/react/hooks/useMeQuery";
 import classNames from "@calcom/ui/classNames";
 import { Avatar } from "@calcom/ui/components/avatar";
-import { Icon } from "@calcom/ui/components/icon";
+import {
+  BlocksIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  CircleHelpIcon,
+  DownloadIcon,
+  LogOutIcon,
+  MapIcon,
+  MoonIcon,
+  SettingsIcon,
+  UserIcon,
+} from "@coss/ui/icons";
 import { useGetUserAttributes } from "@calcom/web/components/settings/platform/hooks/useGetUserAttributes";
 import FreshChatProvider from "@calcom/web/modules/ee/support/lib/freshchat/FreshChatProvider";
 import {
@@ -166,11 +177,17 @@ export function UserDropdown({ small }: UserDropdownProps) {
                 {isPending ? "Loading..." : (user?.name ?? "Nameless User")}
               </span>
             </span>
-            <Icon
-              name={menuOpen ? "chevron-up" : "chevron-down"}
-              className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
-              aria-hidden="true"
-            />
+            {menuOpen ? (
+              <ChevronUpIcon
+                className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
+                aria-hidden="true"
+              />
+            ) : (
+              <ChevronDownIcon
+                className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
+                aria-hidden="true"
+              />
+            )}
           </span>
         )}
       </MenuTrigger>
@@ -180,15 +197,15 @@ export function UserDropdown({ small }: UserDropdownProps) {
           {!isPlatformPages && (
             <>
               <MenuItem render={<Link href="/settings/my-account/profile" />}>
-                <Icon name="user" />
+                <UserIcon />
                 {t("my_profile")}
               </MenuItem>
               <MenuItem render={<Link href="/settings/my-account/general" />}>
-                <Icon name="settings" />
+                <SettingsIcon />
                 {t("my_settings")}
               </MenuItem>
               <MenuItem render={<Link href="/settings/my-account/out-of-office" />}>
-                <Icon name="moon" />
+                <MoonIcon />
                 {t("out_of_office")}
               </MenuItem>
               <MenuSeparator />
@@ -196,29 +213,29 @@ export function UserDropdown({ small }: UserDropdownProps) {
           )}
 
           <MenuItem render={<a href={ROADMAP} target="_blank" rel="noreferrer" />}>
-            <Icon name="map" />
+            <MapIcon />
             {t("visit_roadmap")}
           </MenuItem>
           <MenuItem onClick={handleHelpClick}>
-            <Icon name="circle-help" />
+            <CircleHelpIcon />
             {t("help")}
           </MenuItem>
           {!isPlatformPages && isMobile && os === "ios" && (
             <MenuItem render={<a href={DOWNLOAD_LINKS.ios} target="_blank" rel="noreferrer" />}>
-              <Icon name="download" />
+              <DownloadIcon />
               {t("download_app")}
             </MenuItem>
           )}
           {!isPlatformPages && isMobile && os === "android" && (
             <MenuItem render={<a href={DOWNLOAD_LINKS.android} target="_blank" rel="noreferrer" />}>
-              <Icon name="download" />
+              <DownloadIcon />
               {t("download_app")}
             </MenuItem>
           )}
           {!isPlatformPages && !isMobile && (
             <MenuSub>
               <MenuSubTrigger>
-                <Icon name="download" />
+                <DownloadIcon />
                 {t("download_app")}
               </MenuSubTrigger>
               <MenuSubPopup>
@@ -278,7 +295,7 @@ export function UserDropdown({ small }: UserDropdownProps) {
 
           {!isPlatformPages && isPlatformUser && (
             <MenuItem render={<Link href="/settings/platform" />} className="todesktop:hidden hidden lg:flex">
-              <Icon name="blocks" />
+              <BlocksIcon />
               {t("platform")}
             </MenuItem>
           )}
@@ -289,7 +306,7 @@ export function UserDropdown({ small }: UserDropdownProps) {
             onClick={() => {
               signOut({ callbackUrl: "/auth/logout" });
             }}>
-            <Icon name="log-out" />
+            <LogOutIcon />
             {t("sign_out")}
           </MenuItem>
         </MenuPopup>
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index 579b42317f..26f6313011 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -49,6 +49,7 @@ import { Alert } from "@calcom/ui/components/alert";
 import { Button } from "@calcom/ui/components/button";
 import { PasswordField, CheckboxField, TextField, Form, SelectField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
+import { InfoIcon, ShieldCheckIcon, StarIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 
 import type { getServerSideProps } from "@lib/signup/getServerSideProps";
@@ -155,12 +156,12 @@ function UsernameField({
           <div className="text-sm ">
             {usernameTaken ? (
               <div className="text-error flex items-center">
-                <Icon name="info" className="mr-1 inline-block h-4 w-4" />
+                <InfoIcon className="mr-1 inline-block h-4 w-4" />
                 <p>{t("already_in_use_error")}</p>
               </div>
             ) : premium ? (
               <div data-testid="premium-username-warning" className="flex items-center">
-                <Icon name="star" className="mr-1 inline-block h-4 w-4" />
+                <StarIcon className="mr-1 inline-block h-4 w-4" />
                 <p>
                   {t("premium_username", {
                     price: getPremiumPlanPriceValue(),
@@ -593,7 +594,7 @@ export default function Signup({
                           ? "opacity-50"
                           : ""
                       )}>
-                      <Icon name="shield-check" className="mr-2 h-5 w-5" />
+                      <ShieldCheckIcon className="mr-2 h-5 w-5" />
                       {t("create_account_with_saml")}
                     </Button>
                   ) : (
diff --git a/apps/web/modules/troubleshooter/components/TroubleshooterSidebar.tsx b/apps/web/modules/troubleshooter/components/TroubleshooterSidebar.tsx
index f7b5d0716c..f4cd78529b 100644
--- a/apps/web/modules/troubleshooter/components/TroubleshooterSidebar.tsx
+++ b/apps/web/modules/troubleshooter/components/TroubleshooterSidebar.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Icon } from "@calcom/ui/components/icon";
 import { Skeleton } from "@calcom/ui/components/skeleton";
+import { ArrowLeftIcon } from "@coss/ui/icons";
 
 import { CalendarToggleContainer } from "./CalendarToggleContainer";
 import { EventScheduleItem } from "./EventScheduleItem";
@@ -13,10 +13,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
     <Link
       href="/availability"
       className="hover:bg-subtle group-hover:text-default text-emphasis group flex h-6 max-h-6 w-full flex-row items-center rounded-md px-3 py-2 transition">
-      <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"
diff --git a/apps/web/modules/users/components/UserTable/BulkActions/EventTypesList.tsx b/apps/web/modules/users/components/UserTable/BulkActions/EventTypesList.tsx
index da168f88af..abfd9fc50e 100644
--- a/apps/web/modules/users/components/UserTable/BulkActions/EventTypesList.tsx
+++ b/apps/web/modules/users/components/UserTable/BulkActions/EventTypesList.tsx
@@ -17,9 +17,9 @@ import {
   CommandItem,
   CommandList,
 } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { showToast } from "@calcom/ui/components/toast";
+import { CheckIcon } from "@coss/ui/icons";
 
 import type { UserTableUser } from "../types";
 
@@ -256,7 +256,7 @@ const ListItem = ({ onSelect, text, isSelected, isTeam }: ListItemProps) => {
           "border-subtle ml-auto flex h-4 w-4 items-center justify-center rounded-sm border",
           isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
         )}>
-        <Icon name="check" className={classNames("h-4 w-4")} />
+        <CheckIcon className={classNames("h-4 w-4")} />
       </div>
     </CommandItem>
   );
diff --git a/apps/web/modules/users/components/UserTable/BulkActions/MassAssignAttributes.tsx b/apps/web/modules/users/components/UserTable/BulkActions/MassAssignAttributes.tsx
index 7089a04da6..5d92698e40 100644
--- a/apps/web/modules/users/components/UserTable/BulkActions/MassAssignAttributes.tsx
+++ b/apps/web/modules/users/components/UserTable/BulkActions/MassAssignAttributes.tsx
@@ -19,9 +19,9 @@ import {
   CommandList,
 } from "@calcom/ui/components/command";
 import { Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { showToast } from "@calcom/ui/components/toast";
+import { CheckIcon, ChevronRightIcon } from "@coss/ui/icons";
 
 import type { UserTableUser } from "../types";
 
@@ -138,7 +138,7 @@ function SelectedAttributeToAssign() {
                       "ml-auto flex h-4 w-4 items-center justify-center rounded-sm border"
                     )}>
                     {selectedAttributeOptions?.includes(option.id) ? (
-                      <Icon name="check" className={classNames("h-4 w-4")} />
+                      <CheckIcon className={classNames("h-4 w-4")} />
                     ) : null}
                   </div>
                 </CommandItem>
@@ -195,7 +195,7 @@ function Content({ showMultiSelectWarning }: { showMultiSelectWarning: boolean }
                     <span>{option.name}</span>
                     <div
                       className={classNames("ml-auto flex h-4 w-4 items-center justify-center rounded-sm")}>
-                      <Icon name="chevron-right" className={classNames("h-4 w-4")} />
+                      <ChevronRightIcon className={classNames("h-4 w-4")} />
                     </div>
                   </CommandItem>
                 );
diff --git a/apps/web/modules/users/components/UserTable/BulkActions/TeamList.tsx b/apps/web/modules/users/components/UserTable/BulkActions/TeamList.tsx
index 7f341f60a5..0ca29d5655 100644
--- a/apps/web/modules/users/components/UserTable/BulkActions/TeamList.tsx
+++ b/apps/web/modules/users/components/UserTable/BulkActions/TeamList.tsx
@@ -15,9 +15,9 @@ import {
   CommandItem,
   CommandList,
 } from "@calcom/ui/components/command";
-import { Icon } from "@calcom/ui/components/icon";
 import { Popover, PopoverContent, PopoverTrigger } from "@calcom/ui/components/popover";
 import { showToast } from "@calcom/ui/components/toast";
+import { CheckIcon } from "@coss/ui/icons";
 
 import type { UserTableUser } from "../types";
 
@@ -128,7 +128,7 @@ export function TeamListBulkAction({ table }: Props) {
                             "border-subtle ml-auto flex h-4 w-4 items-center justify-center rounded-sm border",
                             isSelected ? "text-emphasis" : "opacity-50 [&_svg]:invisible"
                           )}>
-                          <Icon name="check" className={classNames("h-4 w-4")} />
+                          <CheckIcon className={classNames("h-4 w-4")} />
                         </div>
                       </CommandItem>
                     );
diff --git a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
index 4fef528f17..dd0a43cd91 100644
--- a/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-ended-single-view.tsx
@@ -4,8 +4,8 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Icon } from "@calcom/ui/components/icon";
 import { Button } from "@calcom/ui/components/button";
+import { CalendarIcon, XIcon } from "@coss/ui/icons";
 
 import type { getServerSideProps } from "@lib/video/meeting-ended/[uid]/getServerSideProps";
 
@@ -29,7 +29,7 @@ export default function MeetingUnavailable(props: PageProps) {
                 aria-labelledby="modal-headline">
                 <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-headline">
@@ -41,7 +41,7 @@ export default function MeetingUnavailable(props: PageProps) {
                       {props.booking.title}
                     </h2>
                     <p className="text-subtle text-center">
-                      <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
+                      <CalendarIcon className="-mt-1 mr-1 inline-block h-4 w-4" />
                       {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
                     </p>
                   </div>
diff --git a/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
index 4bd07adc86..9e4ce4ceb7 100644
--- a/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-meeting-not-started-single-view.tsx
@@ -4,8 +4,8 @@ import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { detectBrowserTimeFormat } from "@calcom/lib/timeFormat";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
-import { Icon } from "@calcom/ui/components/icon";
 import { Button } from "@calcom/ui/components/button";
+import { CalendarIcon } from "@coss/ui/icons";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import type { getServerSideProps } from "@lib/video/meeting-not-started/[uid]/getServerSideProps";
@@ -24,7 +24,7 @@ export default function MeetingNotStarted(props: PageProps) {
             <>
               <h2 className="mb-2 text-center font-medium">{props.booking.title}</h2>
               <p className="text-subtle text-center">
-                <Icon name="calendar" className="-mt-1 mr-1 inline-block h-4 w-4" />
+                <CalendarIcon className="-mt-1 mr-1 inline-block h-4 w-4" />
                 {dayjs(props.booking.startTime).format(`${detectBrowserTimeFormat}, dddd DD MMMM YYYY`)}
               </p>
             </>
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index c2924ff7ca..5197393359 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -17,7 +17,7 @@ import { Badge } from "@calcom/ui/components/badge";
 import { Button } from "@calcom/ui/components/button";
 import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
 import { Input } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CalendarDaysIcon, ChevronRightIcon } from "@coss/ui/icons";
 import type { DailyCall } from "@daily-co/daily-js";
 import DailyIframe from "@daily-co/daily-js";
 import { DailyProvider, useDailyEvent } from "@daily-co/daily-react";
@@ -451,7 +451,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
           <div className="flex items-center justify-between rounded-lg border border-subtle p-3">
             <div className="flex items-center gap-3">
               <div className="flex h-10 w-10 items-center justify-center rounded-md bg-subtle">
-                <Icon name="calendar-days" className="h-5 w-5 text-default" />
+                <CalendarDaysIcon className="h-5 w-5 text-default" />
               </div>
               <div>
                 <p className="font-semibold text-emphasis text-sm">{bookingTitle}</p>
@@ -595,8 +595,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
           aria-label={`${open ? "close" : "open"} booking description sidebar`}
           className="h-20 w-6 rounded-r-md border border-gray-300/20 border-l-0 bg-black/60 text-white shadow-sm backdrop-blur-lg"
           onClick={() => setOpen(!open)}>
-          <Icon
-            name="chevron-right"
+          <ChevronRightIcon
             aria-hidden
             className={classNames(open && "rotate-180", "w-5 transition-all duration-300 ease-in-out")}
           />
diff --git a/apps/web/modules/webhooks/components/WebhookListItem.tsx b/apps/web/modules/webhooks/components/WebhookListItem.tsx
index 656b9d0adc..4a62b1d7c8 100644
--- a/apps/web/modules/webhooks/components/WebhookListItem.tsx
+++ b/apps/web/modules/webhooks/components/WebhookListItem.tsx
@@ -19,9 +19,9 @@ import {
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
 import { Switch } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import { ExternalLinkIcon } from "@coss/ui/icons";
 import { revalidateEventTypeEditPage } from "@calcom/web/app/(use-page-wrapper)/event-types/[type]/actions";
 import { revalidateWebhooksList } from "@calcom/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/(with-loader)/actions";
 
@@ -101,7 +101,7 @@ export default function WebhookListItem(props: {
               href={getWebhookVersionDocsUrl(webhook.version)}
               target="_blank"
               className="text-subtle hover:text-emphasis ml-1 flex items-center">
-              <Icon name="external-link" className="h-4 w-4" />
+              <ExternalLinkIcon className="h-4 w-4" />
             </Link>
           </Tooltip>
         </div>
diff --git a/apps/web/modules/webhooks/views/webhook-edit-view.tsx b/apps/web/modules/webhooks/views/webhook-edit-view.tsx
index 490d16a578..3973541c3c 100644
--- a/apps/web/modules/webhooks/views/webhook-edit-view.tsx
+++ b/apps/web/modules/webhooks/views/webhook-edit-view.tsx
@@ -16,7 +16,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { WebhookTriggerEvents } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
 import { Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ExternalLinkIcon } from "@coss/ui/icons";
 import { SkeletonContainer } from "@calcom/ui/components/skeleton";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -105,7 +105,7 @@ export function EditWebhookView({ webhook }: { webhook?: WebhookProps }) {
                   href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
                   target="_blank"
                   className="text-subtle hover:text-emphasis flex items-center">
-                  <Icon name="external-link" className="h-4 w-4" />
+                  <ExternalLinkIcon className="h-4 w-4" />
                 </Link>
               </Tooltip>
             </div>
diff --git a/apps/web/modules/webhooks/views/webhook-new-view.tsx b/apps/web/modules/webhooks/views/webhook-new-view.tsx
index bccf105eb1..3d9b18473e 100644
--- a/apps/web/modules/webhooks/views/webhook-new-view.tsx
+++ b/apps/web/modules/webhooks/views/webhook-new-view.tsx
@@ -17,7 +17,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import { Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { ExternalLinkIcon } from "@coss/ui/icons";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 import { revalidateWebhooksList } from "@calcom/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/(with-loader)/actions";
@@ -122,7 +122,7 @@ export const NewWebhookView = ({ webhooks, installedApps }: Props) => {
                   href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
                   target="_blank"
                   className="text-subtle hover:text-emphasis flex items-center">
-                  <Icon name="external-link" className="h-4 w-4" />
+                  <ExternalLinkIcon className="h-4 w-4" />
                 </Link>
               </Tooltip>
             </div>
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index acf398de63..850ce9e9a8 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -2637,6 +2637,7 @@
   "email_verified": "Email verified",
   "select_user": "Select user",
   "select_event_type": "Select event type",
+  "select_field_type": "Select field type",
   "select_date_range": "Select date range",
   "popular_events": "Popular events",
   "no_event_types_found": "No event types found",
diff --git a/packages/app-store/AppDependencyComponent.test.tsx b/packages/app-store/AppDependencyComponent.test.tsx
index b72ced4616..33f10e2264 100644
--- a/packages/app-store/AppDependencyComponent.test.tsx
+++ b/packages/app-store/AppDependencyComponent.test.tsx
@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import { vi } from "vitest";
-
 import { AppDependencyComponent } from "./AppDependencyComponent";
 
 // Type for dependency data
@@ -28,24 +27,16 @@ vi.mock("@calcom/lib/hooks/useLocale", () => ({
   }),
 }));
 
-// Mock constants and UI components
+// Mock constants
 vi.mock("@calcom/lib/constants", () => ({
   WEBAPP_URL: "http://localhost:3000",
 }));
 
-vi.mock("@calcom/ui/components/icon", () => ({
-  Icon: ({ name, className }: { name: string; className?: string }) => (
-    <svg data-testid={`${name}-icon`} className={className}>
-      {name}
-    </svg>
-  ),
-}));
-
 describe("AppDependencyComponent", () => {
   // Factory function to reduce duplication
   const createMockDependency = (overrides: Partial<MockDependency> = {}): MockDependency => ({
     name: "Google Calendar",
-    slug: "google-calendar", 
+    slug: "google-calendar",
     installed: true,
     ...overrides,
   });
@@ -57,34 +48,28 @@ describe("AppDependencyComponent", () => {
   it("shows success indicators when dependencies are met", () => {
     const dependency = createMockDependency({ installed: true });
     const { container } = render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={[dependency]}
-      />
+      <AppDependencyComponent appName="Google Meet" dependencyData={[dependency]} />
     );
 
     expect(container.firstChild).toHaveClass("bg-subtle");
     expect(screen.getByTestId("check-icon")).toBeInTheDocument();
     expect(screen.getByText("Google Calendar is connected")).toBeInTheDocument();
-    expect(screen.getByText("Google Meet requires a connected Google Calendar account"))
-      .toBeInTheDocument();
+    expect(screen.getByText("Google Meet requires a connected Google Calendar account")).toBeInTheDocument();
   });
 
   it("shows error indicators and connect link when dependencies are not met", () => {
     const dependency = createMockDependency({ installed: false });
     const { container } = render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={[dependency]}
-      />
+      <AppDependencyComponent appName="Google Meet" dependencyData={[dependency]} />
     );
 
     expect(container.firstChild).toHaveClass("bg-error");
     expect(screen.getByTestId("circle-x-icon")).toBeInTheDocument();
-    expect(screen.getByRole("link", { name: /connect google calendar/i }))
-      .toHaveAttribute("href", expect.stringContaining("/apps/google-calendar"));
-    expect(screen.getByText("Google Meet requires a connected Google Calendar account"))
-      .toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /connect google calendar/i })).toHaveAttribute(
+      "href",
+      expect.stringContaining("/apps/google-calendar")
+    );
+    expect(screen.getByText("Google Meet requires a connected Google Calendar account")).toBeInTheDocument();
   });
 
   it("shows mixed states when some dependencies are unmet", () => {
@@ -94,10 +79,7 @@ describe("AppDependencyComponent", () => {
     ];
 
     const { container } = render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={dependencies}
-      />
+      <AppDependencyComponent appName="Google Meet" dependencyData={dependencies} />
     );
 
     expect(container.firstChild).toHaveClass("bg-error");
@@ -112,10 +94,7 @@ describe("AppDependencyComponent", () => {
     ];
 
     const { container } = render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={dependencies}
-      />
+      <AppDependencyComponent appName="Google Meet" dependencyData={dependencies} />
     );
 
     expect(container.firstChild).toHaveClass("bg-subtle");
@@ -125,9 +104,7 @@ describe("AppDependencyComponent", () => {
   });
 
   it("handles empty dependency data gracefully", () => {
-    const { container } = render(
-      <AppDependencyComponent appName="Google Meet" dependencyData={undefined} />
-    );
+    const { container } = render(<AppDependencyComponent appName="Google Meet" dependencyData={undefined} />);
 
     expect(container.firstChild).toHaveClass("bg-subtle");
     expect(screen.queryByTestId("check-icon")).not.toBeInTheDocument();
@@ -135,9 +112,7 @@ describe("AppDependencyComponent", () => {
   });
 
   it("handles empty dependency array gracefully", () => {
-    const { container } = render(
-      <AppDependencyComponent appName="Google Meet" dependencyData={[]} />
-    );
+    const { container } = render(<AppDependencyComponent appName="Google Meet" dependencyData={[]} />);
 
     expect(container.firstChild).toHaveClass("bg-subtle");
     expect(screen.queryByTestId("check-icon")).not.toBeInTheDocument();
@@ -145,15 +120,12 @@ describe("AppDependencyComponent", () => {
   });
 
   it("treats truthy non-boolean values as installed", () => {
-    const dependency = createMockDependency({ 
-      installed: "yes" as unknown as boolean 
+    const dependency = createMockDependency({
+      installed: "yes" as unknown as boolean,
     });
 
     const { container } = render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={[dependency]}
-      />
+      <AppDependencyComponent appName="Google Meet" dependencyData={[dependency]} />
     );
 
     expect(container.firstChild).toHaveClass("bg-subtle");
@@ -163,15 +135,8 @@ describe("AppDependencyComponent", () => {
 
   it("displays requirement message consistently", () => {
     const dependency = createMockDependency({ installed: true });
-    render(
-      <AppDependencyComponent
-        appName="Google Meet"
-        dependencyData={[dependency]}
-      />
-    );
+    render(<AppDependencyComponent appName="Google Meet" dependencyData={[dependency]} />);
 
-    expect(
-      screen.getByText("Google Meet requires a connected Google Calendar account")
-    ).toBeInTheDocument();
+    expect(screen.getByText("Google Meet requires a connected Google Calendar account")).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/packages/app-store/AppDependencyComponent.tsx b/packages/app-store/AppDependencyComponent.tsx
index ede6a0ec23..850ab051ce 100644
--- a/packages/app-store/AppDependencyComponent.tsx
+++ b/packages/app-store/AppDependencyComponent.tsx
@@ -1,11 +1,10 @@
 "use client";
 
-import Link from "next/link";
-
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
-import { Icon } from "@calcom/ui/components/icon";
+import { ArrowRightIcon, CheckIcon, CircleXIcon } from "@coss/ui/icons";
+import Link from "next/link";
 
 export const AppDependencyComponent = ({
   appName,
@@ -19,18 +18,14 @@ export const AppDependencyComponent = ({
   const hasUnmetDependencies = dependencyData ? dependencyData.some((dep) => !dep.installed) : false;
 
   return (
-    <div
-      className={classNames(
-        "rounded-md px-4 py-3",
-        hasUnmetDependencies ? "bg-error" : "bg-subtle"
-      )}>
+    <div className={classNames("rounded-md px-4 py-3", hasUnmetDependencies ? "bg-error" : "bg-subtle")}>
       {dependencyData &&
         dependencyData.map((dependency) => {
           return dependency.installed ? (
             <div className="items-start space-x-2.5">
               <div className="flex items-start">
                 <div>
-                  <Icon name="check" className="mr-2 mt-1 font-semibold" />
+                  <CheckIcon className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -54,7 +49,7 @@ export const AppDependencyComponent = ({
             <div className="items-start space-x-2.5">
               <div className="text-error flex items-start">
                 <div>
-                  <Icon name="circle-x" className="mr-2 mt-1 font-semibold" />
+                  <CircleXIcon className="mr-2 mt-1 font-semibold" />
                 </div>
                 <div>
                   <span className="font-semibold">
@@ -73,7 +68,7 @@ export const AppDependencyComponent = ({
                           <span className="mr-1">
                             {t("connect_app", { dependencyName: dependency.name })}
                           </span>
-                          <Icon name="arrow-right" />
+                          <ArrowRightIcon />
                         </Link>
                       </>
                     </div>
diff --git a/packages/coss-ui/package.json b/packages/coss-ui/package.json
index 235af2d599..7e5a9ff65b 100644
--- a/packages/coss-ui/package.json
+++ b/packages/coss-ui/package.json
@@ -2,12 +2,22 @@
   "name": "@coss/ui",
   "private": true,
   "version": "0.0.0",
+  "sideEffects": ["./src/styles/globals.css"],
   "exports": {
     "./styles.css": "./src/styles/globals.css",
+    "./icons": "./src/icons.tsx",
     "./lib/*": "./src/lib/*.ts",
     "./components/*": "./src/components/*.tsx",
     "./hooks/*": "./src/hooks/*.ts"
   },
+  "typesVersions": {
+    "*": {
+      "icons": ["./src/icons.tsx"],
+      "lib/*": ["./src/lib/*.ts"],
+      "components/*": ["./src/components/*.tsx"],
+      "hooks/*": ["./src/hooks/*.ts"]
+    }
+  },
   "scripts": {
     "lint": "biome lint src",
     "lint:fix": "biome lint --write src",
diff --git a/packages/coss-ui/src/icons.tsx b/packages/coss-ui/src/icons.tsx
new file mode 100644
index 0000000000..de095cc235
--- /dev/null
+++ b/packages/coss-ui/src/icons.tsx
@@ -0,0 +1,324 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  ActivityIcon as LucideActivityIcon,
+  ArrowDownIcon as LucideArrowDownIcon,
+  ArrowLeftIcon as LucideArrowLeftIcon,
+  ArrowRightIcon as LucideArrowRightIcon,
+  ArrowUpIcon as LucideArrowUpIcon,
+  ArrowUpRightIcon as LucideArrowUpRightIcon,
+  AsteriskIcon as LucideAsteriskIcon,
+  AtomIcon as LucideAtomIcon,
+  AtSignIcon as LucideAtSignIcon,
+  BadgeCheckIcon as LucideBadgeCheckIcon,
+  BanIcon as LucideBanIcon,
+  BellIcon as LucideBellIcon,
+  BinaryIcon as LucideBinaryIcon,
+  BlocksIcon as LucideBlocksIcon,
+  BoldIcon as LucideBoldIcon,
+  BookIcon as LucideBookIcon,
+  BookmarkIcon as LucideBookmarkIcon,
+  BookOpenCheckIcon as LucideBookOpenCheckIcon,
+  BookOpenIcon as LucideBookOpenIcon,
+  BookUserIcon as LucideBookUserIcon,
+  BuildingIcon as LucideBuildingIcon,
+  CalendarCheck2Icon as LucideCalendarCheck2Icon,
+  CalendarDaysIcon as LucideCalendarDaysIcon,
+  CalendarHeartIcon as LucideCalendarHeartIcon,
+  CalendarIcon as LucideCalendarIcon,
+  CalendarRangeIcon as LucideCalendarRangeIcon,
+  CalendarSearchIcon as LucideCalendarSearchIcon,
+  CalendarX2Icon as LucideCalendarX2Icon,
+  ChartBarIcon as LucideChartBarIcon,
+  ChartLineIcon as LucideChartLineIcon,
+  CheckCheckIcon as LucideCheckCheckIcon,
+  CheckIcon as LucideCheckIcon,
+  ChevronDownIcon as LucideChevronDownIcon,
+  ChevronLeftIcon as LucideChevronLeftIcon,
+  ChevronRightIcon as LucideChevronRightIcon,
+  ChevronsDownUpIcon as LucideChevronsDownUpIcon,
+  ChevronsLeftIcon as LucideChevronsLeftIcon,
+  ChevronsRightIcon as LucideChevronsRightIcon,
+  ChevronsUpDownIcon as LucideChevronsUpDownIcon,
+  ChevronUpIcon as LucideChevronUpIcon,
+  CircleAlertIcon as LucideCircleAlertIcon,
+  CircleArrowUpIcon as LucideCircleArrowUpIcon,
+  CircleCheckBigIcon as LucideCircleCheckBigIcon,
+  CircleCheckIcon as LucideCircleCheckIcon,
+  CircleHelpIcon as LucideCircleHelpIcon,
+  CircleIcon as LucideCircleIcon,
+  CirclePlusIcon as LucideCirclePlusIcon,
+  CircleXIcon as LucideCircleXIcon,
+  ClipboardCheckIcon as LucideClipboardCheckIcon,
+  ClipboardIcon as LucideClipboardIcon,
+  ClockIcon as LucideClockIcon,
+  CodeIcon as LucideCodeIcon,
+  Columns3Icon as LucideColumns3Icon,
+  CommandIcon as LucideCommandIcon,
+  ContactIcon as LucideContactIcon,
+  CopyIcon as LucideCopyIcon,
+  CornerDownLeftIcon as LucideCornerDownLeftIcon,
+  CornerDownRightIcon as LucideCornerDownRightIcon,
+  CreditCardIcon as LucideCreditCardIcon,
+  DiscIcon as LucideDiscIcon,
+  DotIcon as LucideDotIcon,
+  DownloadIcon as LucideDownloadIcon,
+  EllipsisIcon as LucideEllipsisIcon,
+  EllipsisVerticalIcon as LucideEllipsisVerticalIcon,
+  ExternalLinkIcon as LucideExternalLinkIcon,
+  EyeIcon as LucideEyeIcon,
+  EyeOffIcon as LucideEyeOffIcon,
+  FileDownIcon as LucideFileDownIcon,
+  FileIcon as LucideFileIcon,
+  FileTextIcon as LucideFileTextIcon,
+  FilterIcon as LucideFilterIcon,
+  FingerprintIcon as LucideFingerprintIcon,
+  FlagIcon as LucideFlagIcon,
+  FolderIcon as LucideFolderIcon,
+  GiftIcon as LucideGiftIcon,
+  GitMergeIcon as LucideGitMergeIcon,
+  GlobeIcon as LucideGlobeIcon,
+  Grid3x3Icon as LucideGrid3x3Icon,
+  HandshakeIcon as LucideHandshakeIcon,
+  InfoIcon as LucideInfoIcon,
+  ItalicIcon as LucideItalicIcon,
+  KeyIcon as LucideKeyIcon,
+  LayersIcon as LucideLayersIcon,
+  LayoutDashboardIcon as LucideLayoutDashboardIcon,
+  Link2Icon as LucideLink2Icon,
+  LinkIcon as LucideLinkIcon,
+  ListFilterIcon as LucideListFilterIcon,
+  LoaderIcon as LucideLoaderIcon,
+  LockIcon as LucideLockIcon,
+  LockOpenIcon as LucideLockOpenIcon,
+  LogOutIcon as LucideLogOutIcon,
+  MailIcon as LucideMailIcon,
+  MailOpenIcon as LucideMailOpenIcon,
+  MapIcon as LucideMapIcon,
+  MapPinIcon as LucideMapPinIcon,
+  MenuIcon as LucideMenuIcon,
+  MessageCircleIcon as LucideMessageCircleIcon,
+  MessagesSquareIcon as LucideMessagesSquareIcon,
+  MicIcon as LucideMicIcon,
+  MicOffIcon as LucideMicOffIcon,
+  MonitorIcon as LucideMonitorIcon,
+  MoonIcon as LucideMoonIcon,
+  PaintbrushIcon as LucidePaintbrushIcon,
+  PaperclipIcon as LucidePaperclipIcon,
+  PauseIcon as LucidePauseIcon,
+  PencilIcon as LucidePencilIcon,
+  PhoneCallIcon as LucidePhoneCallIcon,
+  PhoneIcon as LucidePhoneIcon,
+  PhoneIncomingIcon as LucidePhoneIncomingIcon,
+  PhoneOffIcon as LucidePhoneOffIcon,
+  PhoneOutgoingIcon as LucidePhoneOutgoingIcon,
+  PlayIcon as LucidePlayIcon,
+  PlusIcon as LucidePlusIcon,
+  RefreshCcwIcon as LucideRefreshCcwIcon,
+  RefreshCwIcon as LucideRefreshCwIcon,
+  RepeatIcon as LucideRepeatIcon,
+  RocketIcon as LucideRocketIcon,
+  RotateCcwIcon as LucideRotateCcwIcon,
+  RotateCwIcon as LucideRotateCwIcon,
+  SearchIcon as LucideSearchIcon,
+  SendIcon as LucideSendIcon,
+  SettingsIcon as LucideSettingsIcon,
+  Share2Icon as LucideShare2Icon,
+  ShieldCheckIcon as LucideShieldCheckIcon,
+  ShieldIcon as LucideShieldIcon,
+  ShuffleIcon as LucideShuffleIcon,
+  SlidersHorizontalIcon as LucideSlidersHorizontalIcon,
+  SlidersVerticalIcon as LucideSlidersVerticalIcon,
+  SmartphoneIcon as LucideSmartphoneIcon,
+  SparklesIcon as LucideSparklesIcon,
+  SplitIcon as LucideSplitIcon,
+  SquareCheckIcon as LucideSquareCheckIcon,
+  SquarePenIcon as LucideSquarePenIcon,
+  StarIcon as LucideStarIcon,
+  SunIcon as LucideSunIcon,
+  SunriseIcon as LucideSunriseIcon,
+  SunsetIcon as LucideSunsetIcon,
+  TagsIcon as LucideTagsIcon,
+  TerminalIcon as LucideTerminalIcon,
+  Trash2Icon as LucideTrash2Icon,
+  TrashIcon as LucideTrashIcon,
+  TriangleAlertIcon as LucideTriangleAlertIcon,
+  UploadIcon as LucideUploadIcon,
+  UserCheckIcon as LucideUserCheckIcon,
+  UserIcon as LucideUserIcon,
+  UserPlusIcon as LucideUserPlusIcon,
+  UsersIcon as LucideUsersIcon,
+  UserXIcon as LucideUserXIcon,
+  VenetianMaskIcon as LucideVenetianMaskIcon,
+  VideoIcon as LucideVideoIcon,
+  WaypointsIcon as LucideWaypointsIcon,
+  WebhookIcon as LucideWebhookIcon,
+  XIcon as LucideXIcon,
+  ZapIcon as LucideZapIcon,
+} from "lucide-react";
+
+export interface IconProps {
+  size?: number;
+  className?: string;
+  onClick?: () => void;
+}
+
+function createIcon(Icon: LucideIcon, testId: string) {
+  return function WrappedIcon({ size, className, onClick }: IconProps) {
+    return <Icon size={size} className={className} onClick={onClick} data-testid={testId} />;
+  };
+}
+
+export const ActivityIcon = createIcon(LucideActivityIcon, "activity-icon");
+export const ArrowDownIcon = createIcon(LucideArrowDownIcon, "arrow-down-icon");
+export const ArrowLeftIcon = createIcon(LucideArrowLeftIcon, "arrow-left-icon");
+export const ArrowRightIcon = createIcon(LucideArrowRightIcon, "arrow-right-icon");
+export const ArrowUpRightIcon = createIcon(LucideArrowUpRightIcon, "arrow-up-right-icon");
+export const ArrowUpIcon = createIcon(LucideArrowUpIcon, "arrow-up-icon");
+export const AsteriskIcon = createIcon(LucideAsteriskIcon, "asterisk-icon");
+export const AtSignIcon = createIcon(LucideAtSignIcon, "at-sign-icon");
+export const AtomIcon = createIcon(LucideAtomIcon, "atom-icon");
+export const BadgeCheckIcon = createIcon(LucideBadgeCheckIcon, "badge-check-icon");
+export const BanIcon = createIcon(LucideBanIcon, "ban-icon");
+export const BellIcon = createIcon(LucideBellIcon, "bell-icon");
+export const BinaryIcon = createIcon(LucideBinaryIcon, "binary-icon");
+export const BlocksIcon = createIcon(LucideBlocksIcon, "blocks-icon");
+export const BoldIcon = createIcon(LucideBoldIcon, "bold-icon");
+export const BookOpenCheckIcon = createIcon(LucideBookOpenCheckIcon, "book-open-check-icon");
+export const BookOpenIcon = createIcon(LucideBookOpenIcon, "book-open-icon");
+export const BookUserIcon = createIcon(LucideBookUserIcon, "book-user-icon");
+export const BookIcon = createIcon(LucideBookIcon, "book-icon");
+export const BookmarkIcon = createIcon(LucideBookmarkIcon, "bookmark-icon");
+export const BuildingIcon = createIcon(LucideBuildingIcon, "building-icon");
+export const CalendarCheck2Icon = createIcon(LucideCalendarCheck2Icon, "calendar-check-2-icon");
+export const CalendarDaysIcon = createIcon(LucideCalendarDaysIcon, "calendar-days-icon");
+export const CalendarHeartIcon = createIcon(LucideCalendarHeartIcon, "calendar-heart-icon");
+export const CalendarRangeIcon = createIcon(LucideCalendarRangeIcon, "calendar-range-icon");
+export const CalendarSearchIcon = createIcon(LucideCalendarSearchIcon, "calendar-search-icon");
+export const CalendarX2Icon = createIcon(LucideCalendarX2Icon, "calendar-x-2-icon");
+export const CalendarIcon = createIcon(LucideCalendarIcon, "calendar-icon");
+export const ChartBarIcon = createIcon(LucideChartBarIcon, "chart-bar-icon");
+export const ChartLineIcon = createIcon(LucideChartLineIcon, "chart-line-icon");
+export const CheckCheckIcon = createIcon(LucideCheckCheckIcon, "check-check-icon");
+export const CheckIcon = createIcon(LucideCheckIcon, "check-icon");
+export const ChevronDownIcon = createIcon(LucideChevronDownIcon, "chevron-down-icon");
+export const ChevronLeftIcon = createIcon(LucideChevronLeftIcon, "chevron-left-icon");
+export const ChevronRightIcon = createIcon(LucideChevronRightIcon, "chevron-right-icon");
+export const ChevronUpIcon = createIcon(LucideChevronUpIcon, "chevron-up-icon");
+export const ChevronsDownUpIcon = createIcon(LucideChevronsDownUpIcon, "chevrons-down-up-icon");
+export const ChevronsLeftIcon = createIcon(LucideChevronsLeftIcon, "chevrons-left-icon");
+export const ChevronsRightIcon = createIcon(LucideChevronsRightIcon, "chevrons-right-icon");
+export const ChevronsUpDownIcon = createIcon(LucideChevronsUpDownIcon, "chevrons-up-down-icon");
+export const CircleAlertIcon = createIcon(LucideCircleAlertIcon, "circle-alert-icon");
+export const CircleArrowUpIcon = createIcon(LucideCircleArrowUpIcon, "circle-arrow-up-icon");
+export const CircleCheckBigIcon = createIcon(LucideCircleCheckBigIcon, "circle-check-big-icon");
+export const CircleCheckIcon = createIcon(LucideCircleCheckIcon, "circle-check-icon");
+export const CircleHelpIcon = createIcon(LucideCircleHelpIcon, "circle-help-icon");
+export const CirclePlusIcon = createIcon(LucideCirclePlusIcon, "circle-plus-icon");
+export const CircleXIcon = createIcon(LucideCircleXIcon, "circle-x-icon");
+export const CircleIcon = createIcon(LucideCircleIcon, "circle-icon");
+export const ClipboardCheckIcon = createIcon(LucideClipboardCheckIcon, "clipboard-check-icon");
+export const ClipboardIcon = createIcon(LucideClipboardIcon, "clipboard-icon");
+export const ClockIcon = createIcon(LucideClockIcon, "clock-icon");
+export const CodeIcon = createIcon(LucideCodeIcon, "code-icon");
+export const Columns3Icon = createIcon(LucideColumns3Icon, "columns-3-icon");
+export const CommandIcon = createIcon(LucideCommandIcon, "command-icon");
+export const ContactIcon = createIcon(LucideContactIcon, "contact-icon");
+export const CopyIcon = createIcon(LucideCopyIcon, "copy-icon");
+export const CornerDownLeftIcon = createIcon(LucideCornerDownLeftIcon, "corner-down-left-icon");
+export const CornerDownRightIcon = createIcon(LucideCornerDownRightIcon, "corner-down-right-icon");
+export const CreditCardIcon = createIcon(LucideCreditCardIcon, "credit-card-icon");
+export const DiscIcon = createIcon(LucideDiscIcon, "disc-icon");
+export const DotIcon = createIcon(LucideDotIcon, "dot-icon");
+export const DownloadIcon = createIcon(LucideDownloadIcon, "download-icon");
+export const EllipsisVerticalIcon = createIcon(LucideEllipsisVerticalIcon, "ellipsis-vertical-icon");
+export const EllipsisIcon = createIcon(LucideEllipsisIcon, "ellipsis-icon");
+export const ExternalLinkIcon = createIcon(LucideExternalLinkIcon, "external-link-icon");
+export const EyeOffIcon = createIcon(LucideEyeOffIcon, "eye-off-icon");
+export const EyeIcon = createIcon(LucideEyeIcon, "eye-icon");
+export const FileDownIcon = createIcon(LucideFileDownIcon, "file-down-icon");
+export const FileTextIcon = createIcon(LucideFileTextIcon, "file-text-icon");
+export const FileIcon = createIcon(LucideFileIcon, "file-icon");
+export const FilterIcon = createIcon(LucideFilterIcon, "filter-icon");
+export const FingerprintIcon = createIcon(LucideFingerprintIcon, "fingerprint-icon");
+export const FlagIcon = createIcon(LucideFlagIcon, "flag-icon");
+export const FolderIcon = createIcon(LucideFolderIcon, "folder-icon");
+export const GiftIcon = createIcon(LucideGiftIcon, "gift-icon");
+export const GitMergeIcon = createIcon(LucideGitMergeIcon, "git-merge-icon");
+export const GlobeIcon = createIcon(LucideGlobeIcon, "globe-icon");
+export const Grid3x3Icon = createIcon(LucideGrid3x3Icon, "grid-3x3-icon");
+export const HandshakeIcon = createIcon(LucideHandshakeIcon, "handshake-icon");
+export const InfoIcon = createIcon(LucideInfoIcon, "info-icon");
+export const ItalicIcon = createIcon(LucideItalicIcon, "italic-icon");
+export const KeyIcon = createIcon(LucideKeyIcon, "key-icon");
+export const LayersIcon = createIcon(LucideLayersIcon, "layers-icon");
+export const LayoutDashboardIcon = createIcon(LucideLayoutDashboardIcon, "layout-dashboard-icon");
+export const Link2Icon = createIcon(LucideLink2Icon, "link-2-icon");
+export const LinkIcon = createIcon(LucideLinkIcon, "link-icon");
+export const ListFilterIcon = createIcon(LucideListFilterIcon, "list-filter-icon");
+export const LoaderIcon = createIcon(LucideLoaderIcon, "loader-icon");
+export const LockOpenIcon = createIcon(LucideLockOpenIcon, "lock-open-icon");
+export const LockIcon = createIcon(LucideLockIcon, "lock-icon");
+export const LogOutIcon = createIcon(LucideLogOutIcon, "log-out-icon");
+export const MailOpenIcon = createIcon(LucideMailOpenIcon, "mail-open-icon");
+export const MailIcon = createIcon(LucideMailIcon, "mail-icon");
+export const MapPinIcon = createIcon(LucideMapPinIcon, "map-pin-icon");
+export const MapIcon = createIcon(LucideMapIcon, "map-icon");
+export const MenuIcon = createIcon(LucideMenuIcon, "menu-icon");
+export const MessageCircleIcon = createIcon(LucideMessageCircleIcon, "message-circle-icon");
+export const MessagesSquareIcon = createIcon(LucideMessagesSquareIcon, "messages-square-icon");
+export const MicOffIcon = createIcon(LucideMicOffIcon, "mic-off-icon");
+export const MicIcon = createIcon(LucideMicIcon, "mic-icon");
+export const MonitorIcon = createIcon(LucideMonitorIcon, "monitor-icon");
+export const MoonIcon = createIcon(LucideMoonIcon, "moon-icon");
+export const PaintbrushIcon = createIcon(LucidePaintbrushIcon, "paintbrush-icon");
+export const PaperclipIcon = createIcon(LucidePaperclipIcon, "paperclip-icon");
+export const PauseIcon = createIcon(LucidePauseIcon, "pause-icon");
+export const PencilIcon = createIcon(LucidePencilIcon, "pencil-icon");
+export const PhoneCallIcon = createIcon(LucidePhoneCallIcon, "phone-call-icon");
+export const PhoneIncomingIcon = createIcon(LucidePhoneIncomingIcon, "phone-incoming-icon");
+export const PhoneOffIcon = createIcon(LucidePhoneOffIcon, "phone-off-icon");
+export const PhoneOutgoingIcon = createIcon(LucidePhoneOutgoingIcon, "phone-outgoing-icon");
+export const PhoneIcon = createIcon(LucidePhoneIcon, "phone-icon");
+export const PlayIcon = createIcon(LucidePlayIcon, "play-icon");
+export const PlusIcon = createIcon(LucidePlusIcon, "plus-icon");
+export const RefreshCcwIcon = createIcon(LucideRefreshCcwIcon, "refresh-ccw-icon");
+export const RefreshCwIcon = createIcon(LucideRefreshCwIcon, "refresh-cw-icon");
+export const RepeatIcon = createIcon(LucideRepeatIcon, "repeat-icon");
+export const RocketIcon = createIcon(LucideRocketIcon, "rocket-icon");
+export const RotateCcwIcon = createIcon(LucideRotateCcwIcon, "rotate-ccw-icon");
+export const RotateCwIcon = createIcon(LucideRotateCwIcon, "rotate-cw-icon");
+export const SearchIcon = createIcon(LucideSearchIcon, "search-icon");
+export const SendIcon = createIcon(LucideSendIcon, "send-icon");
+export const SettingsIcon = createIcon(LucideSettingsIcon, "settings-icon");
+export const Share2Icon = createIcon(LucideShare2Icon, "share-2-icon");
+export const ShieldCheckIcon = createIcon(LucideShieldCheckIcon, "shield-check-icon");
+export const ShieldIcon = createIcon(LucideShieldIcon, "shield-icon");
+export const ShuffleIcon = createIcon(LucideShuffleIcon, "shuffle-icon");
+export const SlidersHorizontalIcon = createIcon(LucideSlidersHorizontalIcon, "sliders-horizontal-icon");
+export const SlidersVerticalIcon = createIcon(LucideSlidersVerticalIcon, "sliders-vertical-icon");
+export const SmartphoneIcon = createIcon(LucideSmartphoneIcon, "smartphone-icon");
+export const SparklesIcon = createIcon(LucideSparklesIcon, "sparkles-icon");
+export const SplitIcon = createIcon(LucideSplitIcon, "split-icon");
+export const SquareCheckIcon = createIcon(LucideSquareCheckIcon, "square-check-icon");
+export const SquarePenIcon = createIcon(LucideSquarePenIcon, "square-pen-icon");
+export const StarIcon = createIcon(LucideStarIcon, "star-icon");
+export const SunIcon = createIcon(LucideSunIcon, "sun-icon");
+export const SunriseIcon = createIcon(LucideSunriseIcon, "sunrise-icon");
+export const SunsetIcon = createIcon(LucideSunsetIcon, "sunset-icon");
+export const TagsIcon = createIcon(LucideTagsIcon, "tags-icon");
+export const TerminalIcon = createIcon(LucideTerminalIcon, "terminal-icon");
+export const Trash2Icon = createIcon(LucideTrash2Icon, "trash-2-icon");
+export const TrashIcon = createIcon(LucideTrashIcon, "trash-icon");
+export const TriangleAlertIcon = createIcon(LucideTriangleAlertIcon, "triangle-alert-icon");
+export const UploadIcon = createIcon(LucideUploadIcon, "upload-icon");
+export const UserCheckIcon = createIcon(LucideUserCheckIcon, "user-check-icon");
+export const UserPlusIcon = createIcon(LucideUserPlusIcon, "user-plus-icon");
+export const UserXIcon = createIcon(LucideUserXIcon, "user-x-icon");
+export const UserIcon = createIcon(LucideUserIcon, "user-icon");
+export const UsersIcon = createIcon(LucideUsersIcon, "users-icon");
+export const VenetianMaskIcon = createIcon(LucideVenetianMaskIcon, "venetian-mask-icon");
+export const VideoIcon = createIcon(LucideVideoIcon, "video-icon");
+export const WaypointsIcon = createIcon(LucideWaypointsIcon, "waypoints-icon");
+export const WebhookIcon = createIcon(LucideWebhookIcon, "webhook-icon");
+export const XIcon = createIcon(LucideXIcon, "x-icon");
+export const ZapIcon = createIcon(LucideZapIcon, "zap-icon");
diff --git a/packages/features/bookings/components/Header.tsx b/packages/features/bookings/components/Header.tsx
index 4373fcd38d..860dbef616 100644
--- a/packages/features/bookings/components/Header.tsx
+++ b/packages/features/bookings/components/Header.tsx
@@ -13,7 +13,7 @@ import { BookerLayouts } from "@calcom/prisma/zod-utils";
 import { Button } from "@calcom/ui/components/button";
 import { ButtonGroup } from "@calcom/ui/components/buttonGroup";
 import { ToggleGroup } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CalendarIcon, Columns3Icon, Grid3x3Icon } from "@coss/ui/icons";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 import { TimeFormatToggle } from "@calcom/features/bookings/components/TimeFormatToggle";
@@ -195,7 +195,7 @@ const LayoutToggle = ({
         value: BookerLayouts.MONTH_VIEW,
         label: (
           <>
-            <Icon name="calendar" width="16" height="16" />
+            <CalendarIcon className="h-4 w-4" />
             <span className="sr-only">${t("switch_monthly")}</span>
           </>
         ),
@@ -205,7 +205,7 @@ const LayoutToggle = ({
         value: BookerLayouts.WEEK_VIEW,
         label: (
           <>
-            <Icon name="grid-3x3" width="16" height="16" />
+            <Grid3x3Icon className="h-4 w-4" />
             <span className="sr-only">${t("switch_weekly")}</span>
           </>
         ),
@@ -215,7 +215,7 @@ const LayoutToggle = ({
         value: BookerLayouts.COLUMN_VIEW,
         label: (
           <>
-            <Icon name="columns-3" width="16" height="16" />
+            <Columns3Icon className="h-4 w-4" />
             <span className="sr-only">${t("switch_columnview")}</span>
           </>
         ),
diff --git a/packages/features/bookings/components/event-meta/PayIcon.tsx b/packages/features/bookings/components/event-meta/PayIcon.tsx
index a5ba9eab05..8f7e494245 100644
--- a/packages/features/bookings/components/event-meta/PayIcon.tsx
+++ b/packages/features/bookings/components/event-meta/PayIcon.tsx
@@ -1,6 +1,6 @@
-import { Icon } from "@calcom/ui/components/icon";
+import { CreditCardIcon, ZapIcon } from "@coss/ui/icons";
 
 export function PayIcon(props: { currency: string; className?: string }) {
   const { className, currency } = props;
-  return <Icon name={currency !== "BTC" ? "credit-card" : "zap"} className={className} />;
+  return currency !== "BTC" ? <CreditCardIcon className={className} /> : <ZapIcon className={className} />;
 }
diff --git a/packages/features/calendars/components/DestinationCalendarSelector.tsx b/packages/features/calendars/components/DestinationCalendarSelector.tsx
index 20a08a5d1b..41deed0302 100644
--- a/packages/features/calendars/components/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/components/DestinationCalendarSelector.tsx
@@ -4,7 +4,7 @@ import type { App } from "@calcom/types/App";
 import type { IntegrationCalendar } from "@calcom/types/Calendar";
 import { Badge } from "@calcom/ui/components/badge";
 import { Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
+import { CheckIcon } from "@coss/ui/icons";
 import classNames from "classnames";
 import { useEffect, useState } from "react";
 import type { OptionProps, SingleValueProps } from "react-select";
@@ -87,7 +87,7 @@ export const OptionComponent = ({ ...props }: OptionProps<Option>) => {
     <components.Option {...props}>
       <div className="flex">
         <span className="mr-auto">{label}</span>
-        {props.isSelected && <Icon name="check" className="ml-2 h-4 w-4" />}
+        {props.isSelected && <CheckIcon className="ml-2 h-4 w-4" />}
       </div>
     </components.Option>
   );
diff --git a/packages/features/form/components/LocationSelect.tsx b/packages/features/form/components/LocationSelect.tsx
index 26cd71783e..ae35282599 100644
--- a/packages/features/form/components/LocationSelect.tsx
+++ b/packages/features/form/components/LocationSelect.tsx
@@ -5,8 +5,8 @@ import type { EventLocationType } from "@calcom/app-store/locations";
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import invertLogoOnDark from "@calcom/lib/invertLogoOnDark";
 import { Select } from "@calcom/ui/components/form";
-import { Icon } from "@calcom/ui/components/icon";
 import classNames from "@calcom/ui/classNames";
+import { LinkIcon, MapIcon, MapPinIcon, PhoneIcon, VideoIcon } from "@coss/ui/icons";
 
 export type LocationSelectCustomClassNames = {
   optionIcon?: string;
@@ -47,19 +47,19 @@ const OptionWithIcon = ({
   const getIconFromValue = (value: string) => {
     switch (value) {
       case "phone":
-        return <Icon name="phone" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <PhoneIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       case "userPhone":
-        return <Icon name="phone" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <PhoneIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       case "inPerson":
-        return <Icon name="map-pin" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <MapPinIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       case "attendeeInPerson":
-        return <Icon name="map-pin" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <MapPinIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       case "link":
-        return <Icon name="link" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <LinkIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       case "somewhereElse":
-        return <Icon name="map" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <MapIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
       default:
-        return <Icon name="video" className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
+        return <VideoIcon className={classNames("h-3.5 w-3.5", customClassNames?.optionIcon)} />;
     }
   };
 
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 9d3bf70ef1..746d694197 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -17,8 +17,8 @@ import {
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
 import { ConfirmationDialogContent } from "@calcom/ui/components/dialog";
-import { Icon } from "@calcom/ui/components/icon";
 import { showToast } from "@calcom/ui/components/toast";
+import { GlobeIcon } from "@coss/ui/icons";
 
 interface Schedule {
   id: number;
@@ -94,7 +94,7 @@ export function ScheduleListItem({
               ))}
             {(schedule.timeZone || displayOptions?.timeZone) && (
               <span className="my-1 flex items-center first-letter:text-xs">
-                <Icon name="globe" className="h-3.5 w-3.5" />
+                <GlobeIcon className="h-3.5 w-3.5" />
                 &nbsp;{schedule.timeZone ?? displayOptions?.timeZone}
               </span>
             )}
diff --git a/packages/features/settings/appDir/SettingsHeader.tsx b/packages/features/settings/appDir/SettingsHeader.tsx
index 17e59f3da3..9e4e538d81 100644
--- a/packages/features/settings/appDir/SettingsHeader.tsx
+++ b/packages/features/settings/appDir/SettingsHeader.tsx
@@ -3,8 +3,8 @@
 import React, { Suspense } from "react";
 
 import classNames from "@calcom/ui/classNames";
-import { Icon } from "@calcom/ui/components/icon";
 import { Button } from "@calcom/ui/components/button";
+import { LoaderIcon } from "@coss/ui/icons";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 type HeaderPropsBase = {
@@ -79,7 +79,7 @@ export default function Header({
           <div className={classNames("shrink-0", ctaClassName)}>{CTA}</div>
         </div>
       </header>
-      <Suspense fallback={<Icon name="loader" className="mx-auto my-5 animate-spin" />}>{children}</Suspense>
+      <Suspense fallback={<LoaderIcon className="mx-auto my-5 animate-spin" />}>{children}</Suspense>
     </div>
   );
 }
diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx
index 245742a5ff..db098a3958 100644
--- a/packages/platform/atoms/src/components/ui/dialog.tsx
+++ b/packages/platform/atoms/src/components/ui/dialog.tsx
@@ -6,7 +6,7 @@ ensuring that we don't have issues with atoms.
 import * as DialogPrimitives from "@radix-ui/react-dialog-atoms";
 import * as React from "react";
 
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 
 import { cn } from "../../lib/utils";
 
@@ -66,7 +66,7 @@ const DialogContent = React.forwardRef<
           {...props}>
           {children}
           <DialogPrimitives.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-            <Icon name="x" className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </DialogPrimitives.Close>
         </DialogPrimitives.Content>
diff --git a/packages/platform/atoms/src/components/ui/toast.tsx b/packages/platform/atoms/src/components/ui/toast.tsx
index fc8cc9f764..7d5bc9caf7 100644
--- a/packages/platform/atoms/src/components/ui/toast.tsx
+++ b/packages/platform/atoms/src/components/ui/toast.tsx
@@ -9,7 +9,7 @@ import type {
 } from "react";
 import { forwardRef } from "react";
 
-import { Icon } from "@calcom/ui/components/icon";
+import { XIcon } from "@coss/ui/icons";
 
 import { cn } from "../../lib/utils";
 
@@ -83,7 +83,7 @@ const ToastClose = forwardRef<
     )}
     toast-close=""
     {...props}>
-    <Icon name="x" className="h-4 w-4" />
+    <XIcon className="h-4 w-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/packages/ui/components/address/MultiEmail.tsx b/packages/ui/components/address/MultiEmail.tsx
index e1d39d2f5a..422c5208e6 100644
--- a/packages/ui/components/address/MultiEmail.tsx
+++ b/packages/ui/components/address/MultiEmail.tsx
@@ -1,8 +1,7 @@
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
+import { XIcon } from "@coss/ui/icons";
 import { Button } from "../button";
 import { EmailField } from "../form";
-import { Icon } from "../icon";
 import { Tooltip } from "../tooltip";
 
 interface MultiEmailProps {
@@ -49,7 +48,7 @@ function MultiEmail({ value, readOnly, label, setValue, placeholder }: MultiEmai
                     !readOnly ? (
                       <Tooltip content="Remove email">
                         <button className="m-1" type="button">
-                          <Icon name="x" width={12} className="text-default" />
+                          <XIcon size={12} className="text-default" />
                         </button>
                       </Tooltip>
                     ) : null
diff --git a/packages/ui/components/app-list-card/AppListCard.tsx b/packages/ui/components/app-list-card/AppListCard.tsx
index cbdca3b86b..cd872808c0 100644
--- a/packages/ui/components/app-list-card/AppListCard.tsx
+++ b/packages/ui/components/app-list-card/AppListCard.tsx
@@ -1,15 +1,13 @@
 "use client";
 
-import type { ReactNode } from "react";
-
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { CredentialOwner } from "@calcom/types/CredentialOwner";
 import classNames from "@calcom/ui/classNames";
-
+import { CircleAlertIcon } from "@coss/ui/icons";
+import type { ReactNode } from "react";
 import { Avatar } from "../avatar/Avatar";
 import { Badge } from "../badge/Badge";
-import { Icon } from "../icon/Icon";
 import { ListItemText } from "../list/List";
 
 type ShouldHighlight =
@@ -91,7 +89,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
           </ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <Icon name="circle-alert" className="h-8 w-8 shrink-0 text-red-500 sm:h-4 sm:w-4" />
+              <CircleAlertIcon className="h-8 w-8 shrink-0 text-red-500 sm:h-4 sm:w-4" />
               <ListItemText component="p" className="whitespace-pre-wrap wrap-break-word text-red-500">
                 {t("invalid_credential", { appName: title })}
               </ListItemText>
diff --git a/packages/ui/components/arrow-button/ArrowButton.tsx b/packages/ui/components/arrow-button/ArrowButton.tsx
index 01719d5e2c..16d776976a 100644
--- a/packages/ui/components/arrow-button/ArrowButton.tsx
+++ b/packages/ui/components/arrow-button/ArrowButton.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../icon";
+import { ArrowDownIcon, ArrowUpIcon } from "@coss/ui/icons";
 
 export type ArrowButtonProps = {
   arrowDirection: "up" | "down";
@@ -12,13 +12,13 @@ export function ArrowButton(props: ArrowButtonProps) {
         <button
           className="bg-default text-muted hover:text-emphasis border-default hover:border-emphasis invisible absolute left-0 -ml-4 -mt-4 mb-4 hidden h-6 w-6 scale-0 items-center justify-center rounded-md border p-1 transition-all group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
           onClick={props.onClick}>
-          <Icon name="arrow-up" className="h-5 w-5" />
+          <ArrowUpIcon className="h-5 w-5" />
         </button>
       ) : (
         <button
           className="bg-default text-muted border-default hover:text-emphasis hover:border-emphasis invisible absolute left-0 -ml-4 mt-8 hidden h-6 w-6  scale-0 items-center justify-center rounded-md border p-1 transition-all  group-hover:visible group-hover:scale-100 sm:ml-0 sm:flex lg:left-3"
           onClick={props.onClick}>
-          <Icon name="arrow-down" className="h-5 w-5" />
+          <ArrowDownIcon className="h-5 w-5" />
         </button>
       )}
     </>
diff --git a/packages/ui/components/badge/InfoBadge.tsx b/packages/ui/components/badge/InfoBadge.tsx
index 4ee79ad47b..387a275703 100644
--- a/packages/ui/components/badge/InfoBadge.tsx
+++ b/packages/ui/components/badge/InfoBadge.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../icon";
+import { InfoIcon } from "@coss/ui/icons";
 import { Tooltip } from "../tooltip/Tooltip";
 
 export function InfoBadge({ content }: { content: string }) {
@@ -6,7 +6,7 @@ export function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span aria-label={content}>
-          <Icon name="info" className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
+          <InfoIcon className="text-subtle relative left-1 right-1 top-px mt-px h-4 w-4" />
         </span>
       </Tooltip>
     </>
diff --git a/packages/ui/components/button/SplitButton.tsx b/packages/ui/components/button/SplitButton.tsx
index 7fe50b8178..81c363eff3 100644
--- a/packages/ui/components/button/SplitButton.tsx
+++ b/packages/ui/components/button/SplitButton.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import { ChevronDownIcon } from "@coss/ui/icons";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import type { ReactNode } from "react";
 import { forwardRef } from "react";
-
 import { Icon } from "../icon";
 import type { ButtonBaseProps, ButtonProps } from "./Button";
 import { Button, buttonClasses } from "./Button";
@@ -51,7 +51,7 @@ export const SplitButton = forwardRef<HTMLButtonElement, SplitButtonProps>(funct
               size: mainButtonProps.size,
               className: "rounded-l-none px-2",
             })}>
-            <Icon name="chevron-down" className="h-4 w-4" />
+            <ChevronDownIcon className="h-4 w-4" />
           </button>
         </DropdownMenuPrimitive.Trigger>
 
diff --git a/packages/ui/components/calendar-switch/CalendarSwitch.tsx b/packages/ui/components/calendar-switch/CalendarSwitch.tsx
index 919a9dc537..c03c0d745d 100644
--- a/packages/ui/components/calendar-switch/CalendarSwitch.tsx
+++ b/packages/ui/components/calendar-switch/CalendarSwitch.tsx
@@ -1,9 +1,8 @@
 "use client";
 
-import type { ReactNode } from "react";
 import classNames from "@calcom/ui/classNames";
-
-import { Icon } from "../icon";
+import { ArrowLeftIcon, RotateCwIcon } from "@coss/ui/icons";
+import type { ReactNode } from "react";
 
 export type ICalendarSwitchProps = {
   title: string;
@@ -46,11 +45,11 @@ export function CalendarSwitchComponent(
       </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" />
           {translations.spanText}
         </span>
       )}
-      {isLoading && <Icon name="rotate-cw" className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
+      {isLoading && <RotateCwIcon className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
     </div>
   );
 }
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 0656d42837..8436dc656f 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -1,10 +1,8 @@
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import type { PropsWithChildren, ReactElement } from "react";
-import React from "react";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { Icon } from "../icon";
+import { CheckIcon, CircleAlertIcon } from "@coss/ui/icons";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import type React from "react";
+import type { PropsWithChildren, ReactElement } from "react";
 import { DialogClose, DialogContent } from "./Dialog";
 
 type ConfirmBtnType =
@@ -20,9 +18,7 @@ export type ConfirmationDialogContentProps = {
   variety?: "danger" | "warning" | "success";
 } & ConfirmBtnType;
 
-export function ConfirmationDialogContent(
-  props: PropsWithChildren<ConfirmationDialogContentProps>
-) {
+export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
   return (
     <DialogContent type="creation">
       <ConfirmationContent {...props} />
@@ -30,9 +26,7 @@ export function ConfirmationDialogContent(
   );
 }
 
-export const ConfirmationContent = (
-  props: PropsWithChildren<ConfirmationDialogContentProps>
-) => {
+export const ConfirmationContent = (props: PropsWithChildren<ConfirmationDialogContentProps>) => {
   const { t } = useLocale();
   const {
     title,
@@ -53,20 +47,17 @@ export const ConfirmationContent = (
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="bg-error mx-auto rounded-full p-2 text-center">
-                <Icon
-                  name="circle-alert"
-                  className="h-5 w-5 text-red-600 dark:text-red-100"
-                />
+                <CircleAlertIcon className="h-5 w-5 text-red-600 dark:text-red-100" />
               </div>
             )}
             {variety === "warning" && (
               <div className="bg-attention mx-auto rounded-full p-2 text-center">
-                <Icon name="circle-alert" className="h-5 w-5 text-orange-600" />
+                <CircleAlertIcon className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="bg-cal-success mx-auto rounded-full p-2 text-center">
-                <Icon name="check" className="h-5 w-5 text-green-600" />
+                <CheckIcon className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>
@@ -88,8 +79,7 @@ export const ConfirmationContent = (
             color="primary"
             loading={isPending}
             onClick={(e) => onConfirm && onConfirm(e)}
-            data-testid="dialog-confirmation"
-          >
+            data-testid="dialog-confirmation">
             {isPending ? loadingText : confirmBtnText}
           </DialogClose>
         )}
diff --git a/packages/ui/components/editable-heading/EditableHeading.tsx b/packages/ui/components/editable-heading/EditableHeading.tsx
index 076e51b883..a012edf468 100644
--- a/packages/ui/components/editable-heading/EditableHeading.tsx
+++ b/packages/ui/components/editable-heading/EditableHeading.tsx
@@ -1,11 +1,10 @@
 "use client";
 
+import { PencilIcon } from "@coss/ui/icons";
 import classNames from "classnames";
 import { useState } from "react";
 import type { ControllerRenderProps } from "react-hook-form";
 
-import { Icon } from "../icon";
-
 export const EditableHeading = function EditableHeading({
   value,
   onChange,
@@ -27,8 +26,7 @@ export const EditableHeading = function EditableHeading({
             className={classNames(
               "whitespace-pre text-xl tracking-normal w-full truncate cursor-pointer",
               isEditing && "text-transparent"
-            )}
-          >
+            )}>
             {value}
           </span>
 
@@ -55,7 +53,7 @@ export const EditableHeading = function EditableHeading({
             onChange={(e) => onChange?.(e.target.value)}
           />
           {!isEditing && isReady && !disabled && (
-            <Icon name="pencil" className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-4 w-4" />
+            <PencilIcon className="text-subtle group-hover:text-subtle -mt-px ml-1 inline h-4 w-4" />
           )}
         </label>
       </div>
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index d0aa33fc26..ac870d61f6 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -6,7 +6,7 @@ import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
 import classNames from "../../../classNames";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
 import { Input } from "../../form";
-import { Icon } from "../../icon";
+import { ChevronDownIcon } from "@coss/ui/icons";
 
 interface IAddVariablesDropdown {
   addVariable: (variable: string) => void;
@@ -108,13 +108,13 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
             <>
               <div className="hidden sm:flex">
                 {t("add_variable")}
-                <Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
+                <ChevronDownIcon className="ml-1 mt-[2px] h-4 w-4" />
               </div>
               <div className="block sm:hidden">
                 {props.addVariableButtonTop ? (
                   <div className="flex">
                     {t("add_variable")}
-                    <Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
+                    <ChevronDownIcon className="ml-1 mt-[2px] h-4 w-4" />
                   </div>
                 ) : (
                   "+"
@@ -124,7 +124,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
           ) : (
             <div className="flex">
               {t("add_variable")}
-              <Icon name="chevron-down" className="ml-1 mt-[2px] h-4 w-4" />
+              <ChevronDownIcon className="ml-1 mt-[2px] h-4 w-4" />
             </div>
           )}
         </div>
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
index aea5cb558e..c71267678e 100644
--- a/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.tsx
@@ -29,7 +29,7 @@ import { createPortal } from "react-dom";
 
 import { Button } from "../../button";
 import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../dropdown";
-import { Icon } from "../../icon";
+import { ChevronDownIcon } from "@coss/ui/icons";
 import type { TextEditorProps } from "../types";
 import { AddVariablesDropdown } from "./AddVariablesDropdown";
 
@@ -466,7 +466,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
                   <span className="text text-default hidden sm:flex">
                     {blockTypeToBlockName[blockType as keyof BlockType]}
                   </span>
-                  <Icon name="chevron-down" className="text-default ml-2 h-4 w-4" />
+                  <ChevronDownIcon className="text-default ml-2 h-4 w-4" />
                 </>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="flex flex-col gap-1">
diff --git a/packages/ui/components/file-uploader/FileUploader.tsx b/packages/ui/components/file-uploader/FileUploader.tsx
index 5bad46bd9d..ef021a3cb5 100644
--- a/packages/ui/components/file-uploader/FileUploader.tsx
+++ b/packages/ui/components/file-uploader/FileUploader.tsx
@@ -1,10 +1,9 @@
 "use client";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { UploadIcon } from "@coss/ui/icons";
 import { useCallback, useState } from "react";
 import { z } from "zod";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
 import { Button } from "../button";
 import { Input, Label } from "../form";
 import { Icon } from "../icon";
@@ -67,7 +66,7 @@ export const formatFileSize = (bytes: number): string => {
   const k = 1024;
   const sizes = ["Bytes", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
 };
 
 export default function FileUploader({
@@ -206,7 +205,7 @@ export default function FileUploader({
             className={`mb-0 inline-flex cursor-pointer items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
               disabled ? "cursor-not-allowed opacity-50" : ""
             }`}>
-            <Icon name="upload" className="h-4 w-4" />
+            <UploadIcon className="h-4 w-4" />
             {buttonText}
           </Label>
           <div className="flex items-center">
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index e1422dd601..2bf577d43b 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -1,10 +1,9 @@
+import classNames from "@calcom/ui/classNames";
+import { CheckIcon } from "@coss/ui/icons";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { useId } from "@radix-ui/react-id";
 import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
-import classNames from "@calcom/ui/classNames";
-
-import { Icon } from "../../icon";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
@@ -32,7 +31,7 @@ const Checkbox = React.forwardRef<
     )}
     {...props}>
     <CheckboxPrimitive.Indicator className={classNames("flex items-center justify-center text-current")}>
-      <Icon name="check" className="h-4 w-4" />
+      <CheckIcon className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/packages/ui/components/form/date-range-picker/Calendar.tsx b/packages/ui/components/form/date-range-picker/Calendar.tsx
index fc0e81b560..afcd5b4d89 100644
--- a/packages/ui/components/form/date-range-picker/Calendar.tsx
+++ b/packages/ui/components/form/date-range-picker/Calendar.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-
 import dayjs from "@calcom/dayjs";
 import cn from "@calcom/ui/classNames";
-
+import { ChevronLeftIcon, ChevronRightIcon } from "@coss/ui/icons";
+import type * as React from "react";
+import { DayPicker } from "react-day-picker";
 import { buttonClasses } from "../../button/Button";
-import { Icon } from "../../icon";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
@@ -63,8 +61,8 @@ function Calendar({
             </span>
           </div>
         ),
-        IconLeft: () => <Icon name="chevron-left" className="h-4 w-4 stroke-2" />,
-        IconRight: () => <Icon name="chevron-right" className="h-4 w-4 stroke-2" />,
+        IconLeft: () => <ChevronLeftIcon className="h-4 w-4 stroke-2" />,
+        IconRight: () => <ChevronRightIcon className="h-4 w-4 stroke-2" />,
       }}
       {...props}
     />
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 88a5bbd734..db7e511751 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -1,60 +1,58 @@
 "use client";
 
-import type { ReactNode } from "react";
-import React, { forwardRef, useCallback, useId, useState } from "react";
-import { useFormContext } from "react-hook-form";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
-
+import { EyeIcon, EyeOffIcon, SearchIcon } from "@coss/ui/icons";
+import type React from "react";
+import type { ReactNode } from "react";
+import { forwardRef, useCallback, useId, useState } from "react";
+import { useFormContext } from "react-hook-form";
 import { Alert } from "../../alert";
-import { Icon } from "../../icon";
 import { Tooltip } from "../../tooltip";
 import { Input, InputField, inputStyles } from "../inputs/TextField";
 import { Label } from "./Label";
 import type { InputFieldProps } from "./types";
 
-export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
-  props,
-  ref
-) {
-  const { t } = useLocale();
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const toggleIsPasswordVisible = useCallback(
-    () => setIsPasswordVisible(!isPasswordVisible),
-    [isPasswordVisible, setIsPasswordVisible]
-  );
-  const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
+export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(
+  function PasswordField(props, ref) {
+    const { t } = useLocale();
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const toggleIsPasswordVisible = useCallback(
+      () => setIsPasswordVisible(!isPasswordVisible),
+      [isPasswordVisible, setIsPasswordVisible]
+    );
+    const textLabel = isPasswordVisible ? t("hide_password") : t("show_password");
 
-  return (
-    <InputField
-      type={isPasswordVisible ? "text" : "password"}
-      placeholder={props.placeholder || "•••••••••••••"}
-      ref={ref}
-      {...props}
-      className={classNames(
-        "addon-wrapper mb-0 ltr:border-r-0 ltr:pr-10 rtl:border-l-0 rtl:pl-10",
-        props.className
-      )}
-      addOnSuffix={
-        <Tooltip content={textLabel}>
-          <button
-            className="text-emphasis h-9"
-            tabIndex={-1}
-            type="button"
-            onClick={() => toggleIsPasswordVisible()}>
-            {isPasswordVisible ? (
-              <Icon name="eye-off" className="h-4 w-4 stroke-[2.5px]" />
-            ) : (
-              <Icon name="eye" className="h-4 w-4 stroke-[2.5px]" />
-            )}
-            <span className="sr-only">{textLabel}</span>
-          </button>
-        </Tooltip>
-      }
-    />
-  );
-});
+    return (
+      <InputField
+        type={isPasswordVisible ? "text" : "password"}
+        placeholder={props.placeholder || "•••••••••••••"}
+        ref={ref}
+        {...props}
+        className={classNames(
+          "addon-wrapper mb-0 ltr:border-r-0 ltr:pr-10 rtl:border-l-0 rtl:pl-10",
+          props.className
+        )}
+        addOnSuffix={
+          <Tooltip content={textLabel}>
+            <button
+              className="text-emphasis h-9"
+              tabIndex={-1}
+              type="button"
+              onClick={() => toggleIsPasswordVisible()}>
+              {isPasswordVisible ? (
+                <EyeOffIcon className="h-4 w-4 stroke-[2.5px]" />
+              ) : (
+                <EyeIcon className="h-4 w-4 stroke-[2.5px]" />
+              )}
+              <span className="sr-only">{textLabel}</span>
+            </button>
+          </Tooltip>
+        }
+      />
+    );
+  }
+);
 
 export const EmailInput = forwardRef<HTMLInputElement, InputFieldProps>(function EmailInput(props, ref) {
   return (
@@ -104,41 +102,40 @@ type TextAreaFieldProps = {
     labelProps?: React.ComponentProps<typeof Label>;
   };
 
-export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(function TextField(
-  props,
-  ref
-) {
-  const id = useId();
-  const { t: _t } = useLocale();
-  const t = props.t || _t;
-  const methods = useFormContext();
-  const {
-    label = t(props.name as string),
-    labelProps,
-    /** Prevents displaying untranslated placeholder keys */
-    placeholder = t(`${props.name}_placeholder`) !== `${props.name}_placeholder`
-      ? `${props.name}_placeholder`
-      : "",
-    ...passThrough
-  } = props;
-  return (
-    <div>
-      {!!props.name && (
-        <Label htmlFor={id} {...labelProps}>
-          {label}
-        </Label>
-      )}
-      <TextArea ref={ref} placeholder={placeholder} {...passThrough} />
-      {methods?.formState?.errors[props.name]?.message && (
-        <Alert
-          className="mt-1"
-          severity="error"
-          message={<>{methods.formState.errors[props.name]?.message}</>}
-        />
-      )}
-    </div>
-  );
-});
+export const TextAreaField = forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(
+  function TextField(props, ref) {
+    const id = useId();
+    const { t: _t } = useLocale();
+    const t = props.t || _t;
+    const methods = useFormContext();
+    const {
+      label = t(props.name as string),
+      labelProps,
+      /** Prevents displaying untranslated placeholder keys */
+      placeholder = t(`${props.name}_placeholder`) !== `${props.name}_placeholder`
+        ? `${props.name}_placeholder`
+        : "",
+      ...passThrough
+    } = props;
+    return (
+      <div>
+        {!!props.name && (
+          <Label htmlFor={id} {...labelProps}>
+            {label}
+          </Label>
+        )}
+        <TextArea ref={ref} placeholder={placeholder} {...passThrough} />
+        {methods?.formState?.errors[props.name]?.message && (
+          <Alert
+            className="mt-1"
+            severity="error"
+            message={<>{methods.formState.errors[props.name]?.message}</>}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export const NumberInput = forwardRef<HTMLInputElement, InputFieldProps>(function NumberInput(props, ref) {
   return (
@@ -154,17 +151,16 @@ export const NumberInput = forwardRef<HTMLInputElement, InputFieldProps>(functio
   );
 });
 
-export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(function PasswordField(
-  props,
-  ref
-) {
-  return (
-    <InputField
-      ref={ref}
-      addOnLeading={<Icon name="search" className="h-4 w-4 stroke-[2.5px]" data-testid="search-icon" />}
-      placeholder="Search"
-      containerClassName="mt-1"
-      {...props}
-    />
-  );
-});
+export const FilterSearchField = forwardRef<HTMLInputElement, InputFieldProps>(
+  function PasswordField(props, ref) {
+    return (
+      <InputField
+        ref={ref}
+        addOnLeading={<SearchIcon className="h-4 w-4 stroke-[2.5px]" data-testid="search-icon" />}
+        placeholder="Search"
+        containerClassName="mt-1"
+        {...props}
+      />
+    );
+  }
+);
diff --git a/packages/ui/components/form/inputs/InputError.tsx b/packages/ui/components/form/inputs/InputError.tsx
index b2015324b7..da227a6e06 100644
--- a/packages/ui/components/form/inputs/InputError.tsx
+++ b/packages/ui/components/form/inputs/InputError.tsx
@@ -1,4 +1,4 @@
-import { Icon } from "../../icon";
+import { InfoIcon } from "@coss/ui/icons";
 
 type InputErrorProp = {
   message: string;
@@ -7,7 +7,7 @@ type InputErrorProp = {
 export const InputError = ({ message }: InputErrorProp) => (
   <div data-testid="field-error" className="text-error mt-2 flex items-center gap-x-2 text-sm">
     <div>
-      <Icon name="info" className="h-3 w-3" />
+      <InfoIcon className="h-3 w-3" />
     </div>
     <p>{message}</p>
   </div>
diff --git a/packages/ui/components/form/inputs/MultiOptionInput.tsx b/packages/ui/components/form/inputs/MultiOptionInput.tsx
index ad41d8c80c..f9cf15558b 100644
--- a/packages/ui/components/form/inputs/MultiOptionInput.tsx
+++ b/packages/ui/components/form/inputs/MultiOptionInput.tsx
@@ -12,7 +12,7 @@ import { v4 as uuidv4 } from "uuid";
 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 { ArrowDownIcon, ArrowUpIcon, XIcon } from "@coss/ui/icons";
 
 export interface Option {
   label: string;
@@ -239,7 +239,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
                           onClick={() => handleRemoveOption(index)}
                           aria-label="Remove option"
                           disabled={disabled}>
-                          <Icon name="x" className="h-4 w-4" />
+                          <XIcon className="h-4 w-4" />
                         </button>
                       ) : null
                     }
@@ -265,7 +265,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
                         onClick={() => handleRemoveOption(index)}
                         aria-label="Remove option"
                         disabled={disabled}>
-                        <Icon name="x" className="h-4 w-4" />
+                        <XIcon className="h-4 w-4" />
                       </button>
                     ) : null
                   }
@@ -282,7 +282,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
                     "bg-default text-muted hover:text-emphasis invisible flex h-6 w-6 items-center justify-center rounded-t-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible",
                     index === 0 ? "cursor-not-allowed opacity-30" : "cursor-pointer"
                   )}>
-                  <Icon name="arrow-up" className="h-3 w-3" />
+                  <ArrowUpIcon className="h-3 w-3" />
                 </button>
                 <button
                   type="button"
@@ -292,7 +292,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
                     "bg-default text-muted hover:text-emphasis invisible -mt-px flex h-6 w-6 items-center justify-center rounded-b-md border p-1 transition-all hover:border-transparent hover:shadow group-hover:visible",
                     index === options.length - 1 ? "cursor-not-allowed opacity-30" : "cursor-pointer"
                   )}>
-                  <Icon name="arrow-down" className="h-3 w-3" />
+                  <ArrowDownIcon className="h-3 w-3" />
                 </button>
               </div>
             )}
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index 088a8e89f0..64e7b3145a 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import { cva } from "class-variance-authority";
-import React, { forwardRef, useId, useState } from "react";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import classNames from "@calcom/ui/classNames";
-
+import { InfoIcon } from "@coss/ui/icons";
+import { cva } from "class-variance-authority";
+import type React from "react";
+import { forwardRef, useId, useState } from "react";
 import { Icon } from "../../icon";
 import { HintsOrErrors } from "./HintOrErrors";
 import { Label } from "./Label";
@@ -61,11 +61,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
     <input
       {...props}
       ref={ref}
-      className={classNames(
-        inputStyles({ size }),
-        isFullWidth && "w-full",
-        className
-      )}
+      className={classNames(inputStyles({ size }), isFullWidth && "w-full", className)}
     />
   );
 });
@@ -91,189 +87,170 @@ const Addon = ({
     onClick={onClickAddon && onClickAddon}
     className={classNames(
       "flex shrink-0 items-center justify-center whitespace-nowrap",
-      onClickAddon &&
-        "pointer-events-auto cursor-pointer disabled:hover:cursor-not-allowed",
+      onClickAddon && "pointer-events-auto cursor-pointer disabled:hover:cursor-not-allowed",
       className
-    )}
-  >
+    )}>
     <span
       className={classNames(
         "text-sm font-medium leading-none",
         error ? "text-error" : "text-muted peer-disabled:opacity-50"
-      )}
-    >
+      )}>
       {children}
     </span>
   </div>
 );
 
-export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
-  function InputField(props, ref) {
-    const id = useId();
-    const { t: _t, isLocaleReady, i18n } = useLocale();
-    const t = props.t || _t;
-    const name = props.name || "";
-    const {
-      label = t(name),
-      labelProps,
-      labelClassName,
-      disabled,
-      LockedIcon,
-      placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`)
-        ? t(`${name}_placeholder`)
-        : "",
-      className,
-      addOnLeading,
-      addOnSuffix,
-      addOnClassname,
-      inputIsFullWidth,
-      hint,
-      type,
-      hintErrors,
-      labelSrOnly,
-      noLabel,
-      containerClassName,
-      readOnly,
-      showAsteriskIndicator,
-      onClickAddon,
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function InputField(props, ref) {
+  const id = useId();
+  const { t: _t, isLocaleReady, i18n } = useLocale();
+  const t = props.t || _t;
+  const name = props.name || "";
+  const {
+    label = t(name),
+    labelProps,
+    labelClassName,
+    disabled,
+    LockedIcon,
+    placeholder = isLocaleReady && i18n.exists(`${name}_placeholder`) ? t(`${name}_placeholder`) : "",
+    className,
+    addOnLeading,
+    addOnSuffix,
+    addOnClassname,
+    inputIsFullWidth,
+    hint,
+    type,
+    hintErrors,
+    labelSrOnly,
+    noLabel,
+    containerClassName,
+    readOnly,
+    showAsteriskIndicator,
+    onClickAddon,
 
-      t: __t,
-      dataTestid,
-      size,
-      ...passThrough
-    } = props;
+    t: __t,
+    dataTestid,
+    size,
+    ...passThrough
+  } = props;
 
-    const [inputValue, setInputValue] = useState<string>("");
+  const [inputValue, setInputValue] = useState<string>("");
 
-    const handleFocusInput = (e: React.MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement?.querySelector("input")?.focus();
-    };
+  const handleFocusInput = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.currentTarget.parentElement?.querySelector("input")?.focus();
+  };
 
-    return (
-      <div className={classNames(containerClassName)}>
-        {!!name && !noLabel && (
-          <Label
-            htmlFor={id}
-            {...labelProps}
-            className={classNames(
-              labelClassName,
-              labelSrOnly && "sr-only",
-              props.error && "text-error"
-            )}
-          >
-            {label}
-            {showAsteriskIndicator && !readOnly && passThrough.required ? (
-              <span className="text-default ml-1 font-medium">*</span>
-            ) : null}
-            {LockedIcon}
-          </Label>
-        )}
-        {addOnLeading || addOnSuffix ? (
-          <div
-            dir="ltr"
-            className={classNames(
-              inputStyles({ size }),
-              "group relative mb-1 flex min-w-0 items-center gap-1",
-              "focus-within:shadow-outline-gray-focused focus-within:border-emphasis",
-              "[&:has(:disabled)]:bg-subtle [&:has(:disabled)]:hover:border-default [&:has(:disabled)]:cursor-not-allowed",
-              inputIsFullWidth && "w-full"
-            )}
-          >
-            {addOnLeading && (
-              <Addon
-                size={size ?? "md"}
-                position="start"
-                className={classNames(addOnClassname)}
-                onClickAddon={handleFocusInput}
-              >
-                {addOnLeading}
-              </Addon>
-            )}
-            <input
-              data-testid={dataTestid ? `${dataTestid}-input` : "input-field"}
-              id={id}
-              type={type}
-              placeholder={placeholder}
-              className={classNames(
-                "w-full min-w-0 truncate border-0 bg-transparent focus:outline-none focus:ring-0",
-                "text-default rounded-lg text-sm font-medium leading-none",
-                "placeholder:text-muted disabled:cursor-not-allowed disabled:bg-transparent",
-                addOnLeading && "rounded-none pl-0.5 pr-0",
-                addOnSuffix && "pl-0",
-                className
-              )}
-              {...passThrough}
-              {...(type == "search" && {
-                onChange: (e) => {
-                  setInputValue(e.target.value);
-                  props.onChange?.(e);
-                },
-                value: inputValue,
-              })}
-              disabled={readOnly || disabled}
-              ref={ref}
-            />
-            {addOnSuffix && (
-              <Addon
-                size={size ?? "md"}
-                position="end"
-                onClickAddon={(e) => {
-                  handleFocusInput(e);
-                  onClickAddon?.(e);
-                }}
-                className={classNames(addOnClassname)}
-              >
-                {addOnSuffix}
-              </Addon>
-            )}
-            {type === "search" && inputValue?.toString().length > 0 && (
-              <Icon
-                name="x"
-                className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
-                onClick={(e) => {
-                  setInputValue("");
-                  props.onChange?.(
-                    e as unknown as React.ChangeEvent<HTMLInputElement>
-                  );
-                }}
-              />
-            )}
-          </div>
-        ) : (
-          <Input
+  return (
+    <div className={classNames(containerClassName)}>
+      {!!name && !noLabel && (
+        <Label
+          htmlFor={id}
+          {...labelProps}
+          className={classNames(labelClassName, labelSrOnly && "sr-only", props.error && "text-error")}>
+          {label}
+          {showAsteriskIndicator && !readOnly && passThrough.required ? (
+            <span className="text-default ml-1 font-medium">*</span>
+          ) : null}
+          {LockedIcon}
+        </Label>
+      )}
+      {addOnLeading || addOnSuffix ? (
+        <div
+          dir="ltr"
+          className={classNames(
+            inputStyles({ size }),
+            "group relative mb-1 flex min-w-0 items-center gap-1",
+            "focus-within:shadow-outline-gray-focused focus-within:border-emphasis",
+            "[&:has(:disabled)]:bg-subtle [&:has(:disabled)]:hover:border-default [&:has(:disabled)]:cursor-not-allowed",
+            inputIsFullWidth && "w-full"
+          )}>
+          {addOnLeading && (
+            <Addon
+              size={size ?? "md"}
+              position="start"
+              className={classNames(addOnClassname)}
+              onClickAddon={handleFocusInput}>
+              {addOnLeading}
+            </Addon>
+          )}
+          <input
+            data-testid={dataTestid ? `${dataTestid}-input` : "input-field"}
             id={id}
             type={type}
             placeholder={placeholder}
-            size={size}
             className={classNames(
-              "w-full min-w-0 truncate focus:outline-none focus:ring-0",
+              "w-full min-w-0 truncate border-0 bg-transparent focus:outline-none focus:ring-0",
               "text-default rounded-lg text-sm font-medium leading-none",
-              "placeholder:text-muted disabled:cursor-not-allowed",
+              "placeholder:text-muted disabled:cursor-not-allowed disabled:bg-transparent",
               addOnLeading && "rounded-none pl-0.5 pr-0",
-              addOnSuffix && !addOnLeading && "pl-0.5",
+              addOnSuffix && "pl-0",
               className
             )}
             {...passThrough}
-            readOnly={readOnly}
-            ref={ref}
-            isFullWidth={inputIsFullWidth}
+            {...(type == "search" && {
+              onChange: (e) => {
+                setInputValue(e.target.value);
+                props.onChange?.(e);
+              },
+              value: inputValue,
+            })}
             disabled={readOnly || disabled}
+            ref={ref}
           />
-        )}
-        <HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
-        {hint && (
-          <div className="text-muted mt-2 flex items-center text-sm">
-            <Icon name="info" className="text-muted h-4 w-4 mr-1" />
-            {hint}
-          </div>
-        )}
-      </div>
-    );
-  }
-);
+          {addOnSuffix && (
+            <Addon
+              size={size ?? "md"}
+              position="end"
+              onClickAddon={(e) => {
+                handleFocusInput(e);
+                onClickAddon?.(e);
+              }}
+              className={classNames(addOnClassname)}>
+              {addOnSuffix}
+            </Addon>
+          )}
+          {type === "search" && inputValue?.toString().length > 0 && (
+            <Icon
+              name="x"
+              className="text-subtle absolute top-2.5 h-4 w-4 cursor-pointer ltr:right-2 rtl:left-2"
+              onClick={(e) => {
+                setInputValue("");
+                props.onChange?.(e as unknown as React.ChangeEvent<HTMLInputElement>);
+              }}
+            />
+          )}
+        </div>
+      ) : (
+        <Input
+          id={id}
+          type={type}
+          placeholder={placeholder}
+          size={size}
+          className={classNames(
+            "w-full min-w-0 truncate focus:outline-none focus:ring-0",
+            "text-default rounded-lg text-sm font-medium leading-none",
+            "placeholder:text-muted disabled:cursor-not-allowed",
+            addOnLeading && "rounded-none pl-0.5 pr-0",
+            addOnSuffix && !addOnLeading && "pl-0.5",
+            className
+          )}
+          {...passThrough}
+          readOnly={readOnly}
+          ref={ref}
+          isFullWidth={inputIsFullWidth}
+          disabled={readOnly || disabled}
+        />
+      )}
+      <HintsOrErrors hintErrors={hintErrors} fieldName={name} t={t} />
+      {hint && (
+        <div className="text-muted mt-2 flex items-center text-sm">
+          <InfoIcon className="text-muted h-4 w-4 mr-1" />
+          {hint}
+        </div>
+      )}
+    </div>
+  );
+});
 
-export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(
-  function TextField(props, ref) {
-    return <InputField ref={ref} {...props} />;
-  }
-);
+export const TextField = forwardRef<HTMLInputElement, InputFieldProps>(function TextField(props, ref) {
+  return <InputField ref={ref} {...props} />;
+});
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index 8c82c1f0ab..581e485baf 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -4,7 +4,7 @@ import { components as reactSelectComponents } from "react-select";
 import classNames from "@calcom/ui/classNames";
 
 import { Badge, CreditsBadge, UpgradeTeamsBadge } from "../../badge";
-import { Icon } from "../../icon";
+import { CheckIcon } from "@coss/ui/icons";
 import type { SelectProps } from "./types";
 
 export const InputComponent = <
@@ -76,7 +76,7 @@ export const OptionComponent = <
         ) : (
           <></>
         )}
-        {props.isSelected && <Icon name="check" className="ml-2 h-4 w-4" />}
+        {props.isSelected && <CheckIcon className="ml-2 h-4 w-4" />}
       </div>
     </reactSelectComponents.Option>
   );
diff --git a/packages/ui/components/popover/MeetingTimeInTimezones.tsx b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
index 2d71c87076..21865f9551 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -1,5 +1,3 @@
-import * as Popover from "@radix-ui/react-popover";
-
 import {
   formatTime,
   isNextDayInTimezone,
@@ -7,8 +5,8 @@ import {
   isSupportedTimeZone,
   sortByTimezone,
 } from "@calcom/lib/dayjs";
-
-import { Icon } from "../icon";
+import { GlobeIcon } from "@coss/ui/icons";
+import * as Popover from "@radix-ui/react-popover";
 
 type Attendee = {
   id: number;
@@ -68,7 +66,7 @@ const MeetingTimeInTimezones = ({
       <Popover.Trigger
         onClick={preventBubbling}
         className="popover-button text-emphasis hover:bg-emphasis focus:bg-emphasis invisible ml-2 inline-flex h-5 w-5 items-center justify-center rounded-sm transition-colors group-hover:visible">
-        <Icon name="globe" className="h-3.5 w-3.5" />
+        <GlobeIcon className="h-3.5 w-3.5" />
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
diff --git a/packages/ui/components/toast/ProgressToast.tsx b/packages/ui/components/toast/ProgressToast.tsx
index 4ecaf3c350..7781fb996b 100644
--- a/packages/ui/components/toast/ProgressToast.tsx
+++ b/packages/ui/components/toast/ProgressToast.tsx
@@ -1,10 +1,8 @@
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { FileDownIcon, XIcon } from "@coss/ui/icons";
 import * as React from "react";
 import { toast } from "sonner";
 
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { Icon } from "../icon";
-
 type ProgressToastProps = {
   message?: string;
   progress: number;
@@ -20,11 +18,11 @@ export const ProgressToast = ({ message, progress, onClose, toastId }: ProgressT
     <div className="animate-fade-in-up bg-subtle shadow-elevation-low border-subtle stack-y-2 mb-2 flex h-auto flex-col rounded-lg border px-3 py-2.5 text-sm font-semibold md:max-w-sm">
       <div className="flex items-center gap-2">
         <span className="mt-0.5">
-          <Icon name="file-down" className="h-4 w-4" />
+          <FileDownIcon className="h-4 w-4" />
         </span>
         <p className="m-0 w-full text-left">{message || defaultMessage}</p>
         <button onClick={() => onClose(toastId)} aria-label={t("close")}>
-          <Icon name="x" className="h-4 w-4 hover:cursor-pointer" />
+          <XIcon className="h-4 w-4 hover:cursor-pointer" />
         </button>
       </div>
       <div className="h-2 w-full overflow-hidden rounded-full">
diff --git a/packages/ui/components/toast/showToast.tsx b/packages/ui/components/toast/showToast.tsx
index 5dc6e3394b..be9c1dc5d5 100644
--- a/packages/ui/components/toast/showToast.tsx
+++ b/packages/ui/components/toast/showToast.tsx
@@ -1,9 +1,8 @@
+import { CheckIcon, InfoIcon, XIcon } from "@coss/ui/icons";
 import classNames from "classnames";
 import type { ExternalToast } from "sonner";
 import { toast } from "sonner";
 
-import { Icon } from "../icon";
-
 type IToast = {
   message: string;
   toastId: string | number;
@@ -17,7 +16,7 @@ export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
     )}
     onClick={() => onClose(toastId)}>
     <span>
-      <Icon name="check" className="size-4" />
+      <CheckIcon className="size-4" />
     </span>
     <div className="flex items-center">
       <p data-testid="toast-success" className="m-0 w-full text-left">
@@ -25,7 +24,7 @@ export const SuccessToast = ({ message, onClose, toastId }: IToast) => (
       </p>
     </div>
     <span>
-      <Icon name="x" className="size-4 hover:cursor-pointer" />
+      <XIcon className="size-4 hover:cursor-pointer" />
     </span>
   </button>
 );
@@ -37,7 +36,7 @@ export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
     )}
     onClick={() => onClose(toastId)}>
     <span>
-      <Icon name="info" className="text-semantic-error  size-4" />
+      <InfoIcon className="text-semantic-error  size-4" />
     </span>
     <div className="flex items-center">
       <p data-testid="toast-error" className="m-0 w-full text-left">
@@ -45,7 +44,7 @@ export const ErrorToast = ({ message, onClose, toastId }: IToast) => (
       </p>
     </div>
     <span>
-      <Icon name="x" className="text-semantic-error size-4 hover:cursor-pointer" />
+      <XIcon className="text-semantic-error size-4 hover:cursor-pointer" />
     </span>
   </button>
 );
@@ -57,7 +56,7 @@ export const WarningToast = ({ message, onClose, toastId }: IToast) => (
     )}
     onClick={() => onClose(toastId)}>
     <span>
-      <Icon name="info" className="text-semantic-attention size-4" />
+      <InfoIcon className="text-semantic-attention size-4" />
     </span>
     <div className="flex items-center">
       <p data-testid="toast-warning" className="m-0 w-full text-left">
@@ -65,7 +64,7 @@ export const WarningToast = ({ message, onClose, toastId }: IToast) => (
       </p>
     </div>
     <span>
-      <Icon name="x" className="text-semantic-attention size-4 hover:cursor-pointer" />
+      <XIcon className="text-semantic-attention size-4 hover:cursor-pointer" />
     </span>
   </button>
 );