feather icons and inter (#3366)

apps/web/components/AddToHomescreen.tsx

@@ -1,7 +1,7 @@
-import { XIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
-import { useLocale } from "@lib/hooks/useLocale";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 export default function AddToHomescreen() {
   const { t } = useLocale();
@@ -40,7 +40,7 @@ export default function AddToHomescreen() {
                 type="button"
                 className="-mr-1 flex rounded-md p-2 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-white">
                 <span className="sr-only">{t("dismiss")}</span>
-                <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                <Icon.X className="h-6 w-6 text-white" aria-hidden="true" />
               </button>
             </div>
           </div>

apps/web/components/AdditionalCalendarSelector.tsx

@@ -73,7 +73,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
               },
             }}
             isSearchable={false}
-            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 font-medium text-gray-700 sm:text-sm"
+            className="mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm font-medium text-gray-700"
             isLoading={isLoading}
             components={{ Option: ImageOption }}
           />

apps/web/components/App.tsx

@@ -1,14 +1,3 @@
-import {
-  BookOpenIcon,
-  CheckIcon,
-  DocumentTextIcon,
-  ExternalLinkIcon,
-  FlagIcon,
-  MailIcon,
-  PlusIcon,
-  ShieldCheckIcon,
-} from "@heroicons/react/outline";
-import { ChevronLeftIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 
@@ -19,6 +8,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { App as AppType } from "@calcom/types/App";
 import { Button, SkeletonButton } from "@calcom/ui";
+import { Icon } from "@calcom/ui/Icon";
 import LicenseRequired from "@ee/components/LicenseRequired";
 
 import Shell from "@components/Shell";
@@ -94,7 +84,7 @@ const Component = ({
       <div className="bg-gray-50 px-8">
         <Link href="/apps">
           <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-            <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
+            <Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
           </a>
         </Link>
         <div className="items-center justify-between py-4 sm:flex sm:py-8">
@@ -119,7 +109,7 @@ const Component = ({
             {!isLoading ? (
               isGlobal || (installedAppCount > 0 && allowedMultipleInstalls) ? (
                 <div className="flex space-x-3">
-                  <Button StartIcon={CheckIcon} color="secondary" disabled>
+                  <Button StartIcon={Icon.Check} color="secondary" disabled>
                     {installedAppCount > 0
                       ? t("active_install", { count: installedAppCount })
                       : t("globally_install")}
@@ -138,7 +128,7 @@ const Component = ({
                           };
                         }
                         return (
-                          <Button StartIcon={PlusIcon} {...props} data-testid="install-app-button">
+                          <Button StartIcon={Icon.Plus} {...props} data-testid="install-app-button">
                             {t("add_another")}
                           </Button>
                         );
@@ -182,8 +172,6 @@ const Component = ({
             )}
           </div>
         </div>
-        {/* reintroduce once we show permissions and features
-  <NavTabs tabs={tabs} linkProps={{ shallow: true }} /> */}
       </div>
 
       <div className="justify-between px-8 py-10 md:flex">
@@ -223,7 +211,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={docs}>
-                  <BookOpenIcon className="mr-1 -mt-1 inline h-4 w-4" />
+                  <Icon.BookOpen className="mr-1 -mt-1 inline h-4 w-4" />
                   {t("documentation")}
                 </a>
               </li>
@@ -235,7 +223,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={website}>
-                  <ExternalLinkIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.ExternalLink className="mr-1 -mt-px inline h-4 w-4" />
                   {website.replace("https://", "")}
                 </a>
               </li>
@@ -247,7 +235,8 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={"mailto:" + email}>
-                  <MailIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.Mail className="mr-1 -mt-px inline h-4 w-4" />
+
                   {email}
                 </a>
               </li>
@@ -259,7 +248,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={tos}>
-                  <DocumentTextIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.File className="mr-1 -mt-px inline h-4 w-4" />
                   {t("terms_of_service")}
                 </a>
               </li>
@@ -271,7 +260,7 @@ const Component = ({
                   rel="noreferrer"
                   className="text-blue-500 no-underline hover:underline"
                   href={privacy}>
-                  <ShieldCheckIcon className="mr-1 -mt-px inline h-4 w-4" />
+                  <Icon.Shield className="mr-1 -mt-px inline h-4 w-4" />
                   {t("privacy_policy")}
                 </a>
               </li>
@@ -284,7 +273,7 @@ const Component = ({
             published by Cal.com. If you encounter inappropriate content or behaviour please report it.
           </small>
           <a className="mt-2 block text-xs text-red-500" href="mailto:help@cal.com">
-            <FlagIcon className="inline h-3 w-3" /> Report App
+            <Icon.Flag className="inline h-3 w-3" /> Report App
           </a>
         </div>
       </div>

apps/web/components/DestinationCalendarSelector.tsx

@@ -99,7 +99,7 @@ const DestinationCalendarSelector = ({
         }}
         isSearchable={false}
         className={classNames(
-          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm",
+          "mt-1 mb-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm",
           !hidePlaceholder && "font-medium"
         )}
         onChange={(option) => {

apps/web/components/Embed.tsx

@@ -1,4 +1,3 @@
-import { ArrowLeftIcon, ChevronRightIcon, CodeIcon, EyeIcon, SunIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { useRouter } from "next/router";
@@ -9,8 +8,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { EventType } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Button, Switch } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
 
 import { EMBED_LIB_URL, WEBAPP_URL } from "@lib/config/constants";
@@ -452,7 +453,7 @@ const tabs = [
   {
     name: "HTML",
     tabName: "embed-code",
-    icon: CodeIcon,
+    icon: Icon.Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -474,7 +475,8 @@ const tabs = [
             data-testid="embed-code"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-code"
-            className="h-[calc(100%-50px)]"
+            className="h-[calc(100%-50px)] font-mono"
+            style={{ resize: "none", overflow: "auto" }}
             readOnly
             value={
               `<!-- Cal ${embedType} embed code begins -->\n` +
@@ -502,7 +504,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
   {
     name: "React",
     tabName: "embed-react",
-    icon: CodeIcon,
+    icon: Icon.Code,
     type: "code",
     Component: forwardRef<
       HTMLTextAreaElement | HTMLIFrameElement | null,
@@ -522,8 +524,9 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ
             data-testid="embed-react"
             ref={ref as typeof ref & MutableRefObject<HTMLTextAreaElement>}
             name="embed-react"
-            className="h-[calc(100%-50px)]"
+            className="h-[calc(100%-50px)] font-mono"
             readOnly
+            style={{ resize: "none", overflow: "auto" }}
             value={`/* First make sure that you have installed the package */
 
 /* If you are using yarn */
@@ -541,7 +544,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "react", embedType, calLink, prev
   {
     name: "Preview",
     tabName: "embed-preview",
-    icon: EyeIcon,
+    icon: Icon.Eye,
     type: "iframe",
     Component: forwardRef<
       HTMLIFrameElement | HTMLTextAreaElement | null,
@@ -577,7 +580,7 @@ Cal("init", {origin:"${WEBAPP_URL}"});
 const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => {
   return (
     <components.Control {...props}>
-      <SunIcon className="h-[32px] w-[32px] text-gray-500" />
+      <Icon.Sun className="ml-2 h-4 w-4 text-gray-500" />
       {children}
     </components.Control>
   );
@@ -596,10 +599,10 @@ const ChooseEmbedTypesDialogContent = () => {
           <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
         </div>
       </div>
-      <div className="flex">
+      <div className="flex items-start">
         {embeds.map((embed, index) => (
           <button
-            className="mr-2 w-1/3 p-3 text-left hover:rounded-md hover:border hover:bg-neutral-100"
+            className="mr-2 w-1/3 border border-transparent p-3 text-left hover:rounded-md hover:border-gray-200 hover:bg-neutral-100"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -804,7 +807,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                   },
                 });
               }}>
-              <ArrowLeftIcon className="mr-4 w-4" />
+              <Icon.ArrowLeft className="mr-4 w-4" />
             </button>
             {embed.title}
           </h3>
@@ -823,7 +826,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                     ? "Floating Popup Customization"
                     : "Element Click Customization"}
                 </div>
-                <ChevronRightIcon
+                <Icon.ChevronRight
                   className={`${
                     isEmbedCustomizationOpen ? "rotate-90 transform" : ""
                   } ml-auto h-5 w-5 text-neutral-500`}
@@ -854,7 +857,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       }}
                       addOnLeading={<InputLeading>W</InputLeading>}
                     />
-                    <span className="p-2">x</span>
+                    <span className="p-2">×</span>
                     <TextField
                       labelProps={{ className: "hidden" }}
                       name="height"
@@ -1001,7 +1004,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
               onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
               <CollapsibleTrigger className="flex w-full" type="button">
                 <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
-                <ChevronRightIcon
+                <Icon.ChevronRight
                   className={`${
                     isBookingCustomizationOpen ? "rotate-90 transform" : ""
                   } ml-auto h-5 w-5 text-neutral-500`}
@@ -1132,13 +1135,15 @@ export const EmbedDialog = () => {
 
 export const EmbedButton = ({
   eventTypeId,
+  StartIcon,
+  children,
   className = "",
-  dark,
   ...props
 }: {
   eventTypeId: EventType["id"];
+  StartIcon?: SVGComponent;
+  children?: React.ReactNode;
   className: string;
-  dark?: boolean;
 }) => {
   const { t } = useLocale();
   const router = useRouter();
@@ -1163,14 +1168,14 @@ export const EmbedButton = ({
     <Button
       type="button"
       color="minimal"
+      StartIcon={StartIcon}
       size="sm"
       className={className}
       {...props}
       data-test-eventtype-id={eventTypeId}
       data-testid="event-type-embed"
       onClick={() => openEmbedModal()}>
-      <CodeIcon className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")} />
-      {t("Embed")}
+      {children}
     </Button>
   );
 };

apps/web/components/Kbar.tsx

@@ -1,5 +1,3 @@
-import { SwitchVerticalIcon } from "@heroicons/react/outline";
-import { SearchIcon } from "@heroicons/react/solid";
 import {
   KBarProvider,
   KBarPortal,
@@ -11,11 +9,11 @@ import {
   useKBar,
 } from "kbar";
 import { useRouter } from "next/router";
-import { Command, CornerDownLeft } from "react-feather";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { isMac } from "@calcom/lib/isMac";
 import { Tooltip } from "@calcom/ui";
+import { Icon } from "@calcom/ui/Icon";
 
 type shortcutArrayType = {
   shortcuts?: string[];
@@ -200,15 +198,16 @@ export const KBarContent = () => {
       <KBarPositioner>
         <KBarAnimator className="z-10 w-full max-w-screen-sm overflow-hidden rounded-sm bg-white shadow-lg">
           <div className="flex items-center justify-center border-b">
-            <SearchIcon className="mx-3 h-4 w-4 text-gray-500" />
+            <Icon.Search className="mx-3 h-4 w-4 text-gray-500" />
             <KBarSearch className="w-full rounded-sm py-2.5 focus-visible:outline-none" />
           </div>
           <RenderResults />
           <div className="hidden items-center space-x-1 border-t px-2 py-1.5 text-xs text-gray-500 sm:flex">
-            <SwitchVerticalIcon className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
-            <CornerDownLeft className="h-4 w-4" />
+            <Icon.ArrowUp className="h-4 w-4" />
+            <Icon.ArrowDown className="h-4 w-4" /> <span className="pr-2">{t("navigate")}</span>
+            <Icon.CornerDownLeft className="h-4 w-4" />
             <span className="pr-2">{t("open")}</span>
-            {isMac ? <Command className="h-3 w-3" /> : "CTRL"}
+            {isMac ? <Icon.Command className="h-3 w-3" /> : "CTRL"}
             <span className="pr-1">+ K </span>
             <span className="pr-2">{t("close")}</span>
           </div>
@@ -228,7 +227,7 @@ export const KBarTrigger = () => {
           color="minimal"
           onClick={query.toggle}
           className="group flex text-sm font-medium text-neutral-500  hover:text-neutral-900">
-          <SearchIcon className="h-5 w-5 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
+          <Icon.Search className="h-4 w-4 flex-shrink-0 text-neutral-400 group-hover:text-neutral-500" />
         </button>
       </Tooltip>
     </>

apps/web/components/NavTabs.tsx

@@ -77,7 +77,7 @@ const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
                     <tab.icon
                       className={classNames(
                         isCurrent ? "text-neutral-900" : "text-gray-400 group-hover:text-gray-500",
-                        "-ml-0.5 hidden h-5 w-5 ltr:mr-2 rtl:ml-2 sm:inline-block"
+                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
                       )}
                       aria-hidden="true"
                     />

apps/web/components/SettingsShell.tsx

@@ -1,13 +1,7 @@
-import {
-  CreditCardIcon,
-  KeyIcon,
-  LockClosedIcon,
-  UserGroupIcon,
-  UserIcon,
-  CodeIcon,
-} from "@heroicons/react/solid";
 import React, { ComponentProps } from "react";
 
+import { Icon } from "@calcom/ui/Icon";
+
 import ErrorBoundary from "@lib/ErrorBoundary";
 
 import NavTabs from "./NavTabs";
@@ -17,32 +11,32 @@ const tabs = [
   {
     name: "profile",
     href: "/settings/profile",
-    icon: UserIcon,
+    icon: Icon.User,
   },
   {
     name: "teams",
     href: "/settings/teams",
-    icon: UserGroupIcon,
+    icon: Icon.Users,
   },
   {
     name: "security",
     href: "/settings/security",
-    icon: KeyIcon,
+    icon: Icon.Key,
   },
   {
     name: "developer",
     href: "/settings/developer",
-    icon: CodeIcon,
+    icon: Icon.Terminal,
   },
   {
     name: "billing",
     href: "/settings/billing",
-    icon: CreditCardIcon,
+    icon: Icon.CreditCard,
   },
   {
     name: "admin",
     href: "/settings/admin",
-    icon: LockClosedIcon,
+    icon: Icon.Lock,
     adminRequired: true,
   },
 ];

apps/web/components/Shell.tsx

@@ -1,19 +1,3 @@
-import { SelectorIcon } from "@heroicons/react/outline";
-import {
-  ArrowLeftIcon,
-  CalendarIcon,
-  ClockIcon,
-  CogIcon,
-  CollectionIcon,
-  ExternalLinkIcon,
-  LightningBoltIcon,
-  LinkIcon,
-  LogoutIcon,
-  MapIcon,
-  MoonIcon,
-  QuestionMarkCircleIcon,
-  ViewGridIcon,
-} from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { SessionContextValue, signOut, useSession } from "next-auth/react";
 import Link from "next/link";
@@ -33,6 +17,7 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { CollectionIcon, Icon } from "@calcom/ui/Icon";
 import LicenseBanner from "@ee/components/LicenseBanner";
 import TrialBanner from "@ee/components/TrialBanner";
 import HelpMenuItem from "@ee/components/support/HelpMenuItem";
@@ -134,19 +119,19 @@ const Layout = ({
     {
       name: t("event_types_page_title"),
       href: "/event-types",
-      icon: LinkIcon,
+      icon: Icon.Link,
       current: router.asPath.startsWith("/event-types"),
     },
     {
       name: t("bookings"),
       href: "/bookings/upcoming",
-      icon: CalendarIcon,
+      icon: Icon.Calendar,
       current: router.asPath.startsWith("/bookings"),
     },
     {
       name: t("availability"),
       href: "/availability",
-      icon: ClockIcon,
+      icon: Icon.Clock,
       current: router.asPath.startsWith("/availability"),
     },
     routingForms
@@ -160,14 +145,14 @@ const Layout = ({
     {
       name: t("workflows"),
       href: "/workflows",
-      icon: LightningBoltIcon,
+      icon: Icon.Zap,
       current: router.asPath.startsWith("/workflows"),
       pro: true,
     },
     {
       name: t("apps"),
       href: "/apps",
-      icon: ViewGridIcon,
+      icon: Icon.Grid,
       current: router.asPath.startsWith("/apps") && !router.asPath.startsWith("/apps/routing_forms/"),
       child: [
         {
@@ -185,7 +170,7 @@ const Layout = ({
     {
       name: t("settings"),
       href: "/settings/profile",
-      icon: CogIcon,
+      icon: Icon.Settings,
       current: router.asPath.startsWith("/settings"),
     },
   ];
@@ -240,14 +225,14 @@ const Layout = ({
                                 item.current
                                   ? "bg-neutral-100 text-neutral-900"
                                   : "text-neutral-500 hover:bg-gray-50 hover:text-neutral-900",
-                                "group flex items-center rounded-sm px-2 py-2 text-sm font-medium"
+                                "group flex items-center justify-center rounded-sm py-2.5 px-2.5 text-sm font-medium sm:justify-start"
                               )}>
                               <item.icon
                                 className={classNames(
                                   item.current
-                                    ? "text-neutral-500"
-                                    : "text-neutral-400 group-hover:text-neutral-500",
-                                  "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                                    ? "text-neutral-900"
+                                    : "text-neutral-400 group-hover:text-neutral-900",
+                                  "h-4 w-4 flex-shrink-0 md:ltr:mr-2 md:rtl:ml-3"
                                 )}
                                 aria-hidden="true"
                               />
@@ -285,9 +270,7 @@ const Layout = ({
                   </nav>
                 </div>
                 <TrialBanner />
-                <div
-                  className="rounded-sm pt-2 pb-2 pl-3 pr-2 hover:bg-gray-100 lg:mx-2 lg:pl-2"
-                  data-testid="user-dropdown-trigger">
+                <div data-testid="user-dropdown-trigger">
                   <span className="hidden lg:inline">
                     <UserDropdown />
                   </span>
@@ -333,7 +316,7 @@ const Layout = ({
                     <span className="sr-only">{t("settings")}</span>
                     <Link href="/settings/profile">
                       <a>
-                        <CogIcon className="h-6 w-6" aria-hidden="true" />
+                        <Icon.Settings className="h-4 w-4" aria-hidden="true" />
                       </a>
                     </Link>
                   </button>
@@ -351,7 +334,7 @@ const Layout = ({
                 <div className="mx-3 mb-8 sm:mx-8">
                   <Button
                     onClick={() => router.push(props.backPath as string)}
-                    StartIcon={ArrowLeftIcon}
+                    StartIcon={Icon.ArrowLeft}
                     color="secondary">
                     Back
                   </Button>
@@ -408,13 +391,13 @@ const Layout = ({
                             item.current ? "text-gray-900" : "text-neutral-400 hover:text-gray-700",
                             itemIdx === 0 ? "rounded-l-lg" : "",
                             itemIdx === navigation.length - 1 ? "rounded-r-lg" : "",
-                            "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs font-medium hover:bg-gray-50 focus:z-10 sm:text-sm"
+                            "group relative min-w-0 flex-1 overflow-hidden bg-white py-2 px-2 text-center text-xs text-sm font-medium hover:bg-gray-50 focus:z-10"
                           )}
                           aria-current={item.current ? "page" : undefined}>
                           <item.icon
                             className={classNames(
                               item.current ? "text-gray-900" : "text-gray-400 group-hover:text-gray-500",
-                              "mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center"
+                              "mx-auto mb-1 block h-4 w-4 flex-shrink-0 text-center"
                             )}
                             aria-hidden="true"
                           />
@@ -526,11 +509,11 @@ function UserDropdown({ small }: { small?: boolean }) {
   return (
     <Dropdown open={menuOpen} onOpenChange={() => setHelpOpen(false)}>
       <DropdownMenuTrigger asChild onClick={() => setMenuOpen(true)}>
-        <button className="group flex w-full cursor-pointer appearance-none items-center text-left">
+        <button className="group flex w-full cursor-pointer appearance-none items-center rounded-full p-2 text-left hover:bg-gray-100 sm:pl-3 md:rounded-none lg:pl-2">
           <span
             className={classNames(
-              small ? "h-8 w-8" : "h-10 w-10",
-              "relative flex-shrink-0 rounded-full bg-gray-300  ltr:mr-3 rtl:ml-3"
+              small ? "h-8 w-8" : "h-9 w-9 ltr:mr-2 rtl:ml-3",
+              "relative flex-shrink-0 rounded-full bg-gray-300 "
             )}>
             {
               // eslint-disable-next-line @next/next/no-img-element
@@ -561,8 +544,8 @@ function UserDropdown({ small }: { small?: boolean }) {
                     : "No public page"}
                 </span>
               </span>
-              <SelectorIcon
-                className="h-5 w-5 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
+              <Icon.MoreVertical
+                className="h-4 w-4 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
                 aria-hidden="true"
               />
             </span>
@@ -580,13 +563,13 @@ function UserDropdown({ small }: { small?: boolean }) {
                   mutation.mutate({ away: !user?.away });
                   utils.invalidateQueries("viewer.me");
                 }}
-                className="flex min-w-max cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-                <MoonIcon
+                className="flex min-w-max cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <Icon.Moon
                   className={classNames(
                     user.away
                       ? "text-purple-500 group-hover:text-purple-700"
                       : "text-gray-500 group-hover:text-gray-700",
-                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                    "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-3"
                   )}
                   aria-hidden="true"
                 />
@@ -601,7 +584,7 @@ function UserDropdown({ small }: { small?: boolean }) {
                   rel="noopener noreferrer"
                   href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
                   className="flex items-center px-4 py-2 text-sm text-gray-700">
-                  <ExternalLinkIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" />{" "}
+                  <Icon.ExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
                   {t("view_public_page")}
                 </a>
               </DropdownMenuItem>
@@ -612,33 +595,8 @@ function UserDropdown({ small }: { small?: boolean }) {
                 href={JOIN_SLACK}
                 target="_blank"
                 rel="noreferrer"
-                className="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
-                <svg
-                  viewBox="0 0 2447.6 2452.5"
-                  className={classNames(
-                    "text-gray-500 group-hover:text-gray-700",
-                    "mt-0.5 h-4 w-4 flex-shrink-0 ltr:mr-4 rtl:ml-4"
-                  )}
-                  xmlns="http://www.w3.org/2000/svg">
-                  <g clipRule="evenodd" fillRule="evenodd">
-                    <path
-                      d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z"
-                      fill="currentColor"
-                    />
-                    <path
-                      d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0"
-                      fill="currentColor"
-                    />
-                  </g>
-                </svg>
+                className="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900">
+                <Icon.Slack strokeWidth={1.5} className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" />{" "}
                 {t("join_our_slack")}
               </a>
             </DropdownMenuItem>
@@ -648,17 +606,17 @@ function UserDropdown({ small }: { small?: boolean }) {
                 rel="noopener noreferrer"
                 href={ROADMAP}
                 className="flex items-center px-4 py-2 text-sm text-gray-700">
-                <MapIcon className="h-5 w-5 text-gray-500 ltr:mr-3 rtl:ml-3" /> {t("visit_roadmap")}
+                <Icon.Map className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-3" /> {t("visit_roadmap")}
               </a>
             </DropdownMenuItem>
 
             <button
-              className="flex w-full px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-gray-100 hover:text-gray-900"
+              className="flex w-full items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
               onClick={() => setHelpOpen(true)}>
-              <QuestionMarkCircleIcon
+              <Icon.HelpCircle
                 className={classNames(
                   "text-gray-500 group-hover:text-neutral-500",
-                  "h-5 w-5 flex-shrink-0 ltr:mr-3"
+                  "h-4 w-4 flex-shrink-0 ltr:mr-2"
                 )}
                 aria-hidden="true"
               />
@@ -670,11 +628,11 @@ function UserDropdown({ small }: { small?: boolean }) {
             <DropdownMenuItem>
               <a
                 onClick={() => signOut({ callbackUrl: "/auth/logout" })}
-                className="flex cursor-pointer px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
-                <LogoutIcon
+                className="flex cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900">
+                <Icon.LogOut
                   className={classNames(
                     "text-gray-500 group-hover:text-gray-700",
-                    "h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                    "h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-3"
                   )}
                   aria-hidden="true"
                 />

apps/web/components/UpgradeToProDialog.tsx

@@ -1,10 +1,9 @@
-import { InformationCircleIcon } from "@heroicons/react/outline";
 import { Trans } from "next-i18next";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent } from "@calcom/ui/Dialog";
-
-import { useLocale } from "@lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 export function UpgradeToProDialog({
   modalOpen,
@@ -20,7 +19,7 @@ export function UpgradeToProDialog({
     <Dialog open={modalOpen}>
       <DialogContent>
         <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-yellow-100">
-          <InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
+          <Icon.AlertTriangle className="h-6 w-6 text-yellow-400" aria-hidden="true" />
         </div>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="mt-3 sm:mt-0 sm:text-left">
@@ -43,7 +42,7 @@ export function UpgradeToProDialog({
         </div>
         <div className="mt-5 gap-x-2 sm:mt-4 sm:flex sm:flex-row-reverse">
           <DialogClose asChild>
-            <Button className="btn-wide table-cell text-center" onClick={() => setModalOpen(false)}>
+            <Button className="table-cell w-full text-center" onClick={() => setModalOpen(false)}>
               {t("dismiss")}
             </Button>
           </DialogClose>

apps/web/components/apps/Slider.tsx

@@ -1,9 +1,10 @@
 import Glide, { Options } from "@glidejs/glide";
 import "@glidejs/glide/dist/css/glide.core.min.css";
 import "@glidejs/glide/dist/css/glide.theme.min.css";
-import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid";
 import { useEffect, useRef } from "react";
 
+import { Icon } from "@calcom/ui/Icon";
+
 const Slider = <T extends string | unknown>({
   title = "",
   className = "",
@@ -51,10 +52,10 @@ const Slider = <T extends string | unknown>({
           )}
           <div className="glide__arrows ml-auto" data-glide-el="controls">
             <button data-glide-dir="<" className="mr-4">
-              <ArrowLeftIcon className="h-5 w-5 text-gray-600 hover:text-black" />
+              <Icon.ArrowLeft className="h-5 w-5 text-gray-600 hover:text-black" />
             </button>
             <button data-glide-dir=">">
-              <ArrowRightIcon className="h-5 w-5 text-gray-600 hover:text-black" />
+              <Icon.ArrowRight className="h-5 w-5 text-gray-600 hover:text-black" />
             </button>
           </div>
         </div>

apps/web/components/availability/NewScheduleButton.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 
@@ -7,6 +6,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
@@ -41,7 +41,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
   return (
     <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
       <DialogTrigger asChild>
-        <Button data-testid={name} StartIcon={PlusIcon}>
+        <Button data-testid={name} StartIcon={Icon.Plus}>
           {t("new_schedule_btn")}
         </Button>
       </DialogTrigger>

apps/web/components/availability/Schedule.tsx

@@ -1,5 +1,3 @@
-import { PlusIcon, TrashIcon } from "@heroicons/react/outline";
-import { DuplicateIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
@@ -9,6 +7,7 @@ import dayjs, { Dayjs, ConfigType } from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import Dropdown, { DropdownMenuContent } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { defaultDayRange } from "@lib/availability";
@@ -231,13 +230,13 @@ export const DayRanges = ({
     <div className="space-y-2">
       {fields.map((field, index) => (
         <div key={field.id} className="flex items-center rtl:space-x-reverse">
-          <div className="flex flex-grow sm:flex-grow-0">
+          <div className="flex flex-grow space-x-1 sm:flex-grow-0">
             <TimeRangeField name={`${name}.${index}`} />
             <Button
+              type="button"
               size="icon"
               color="minimal"
-              StartIcon={TrashIcon}
-              type="button"
+              StartIcon={Icon.Trash}
               onClick={() => remove(index)}
             />
           </div>
@@ -249,7 +248,7 @@ export const DayRanges = ({
                   type="button"
                   color="minimal"
                   size="icon"
-                  StartIcon={PlusIcon}
+                  StartIcon={Icon.Plus}
                   onClick={handleAppend}
                 />
               </Tooltip>
@@ -259,7 +258,7 @@ export const DayRanges = ({
                     type="button"
                     color="minimal"
                     size="icon"
-                    StartIcon={DuplicateIcon}
+                    StartIcon={Icon.Copy}
                     onClick={handleAppend}
                   />
                 </Tooltip>

apps/web/components/availability/ScheduleListItem.tsx

@@ -1,4 +1,3 @@
-import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import { Fragment } from "react";
 
@@ -8,6 +7,7 @@ import { Availability } from "@calcom/prisma/client";
 import { inferQueryOutput } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 
 export function ScheduleListItem({
   schedule,
@@ -47,7 +47,7 @@ export function ScheduleListItem({
         </div>
         <Dropdown>
           <DropdownMenuTrigger className="group mr-5 h-10 w-10 border border-transparent p-0 text-neutral-500 hover:border-gray-200">
-            <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+            <Icon.MoreHorizontal className="h-5 w-5 group-hover:text-gray-800" />
           </DropdownMenuTrigger>
           <DropdownMenuContent>
             <DropdownMenuItem>
@@ -61,7 +61,7 @@ export function ScheduleListItem({
                 type="button"
                 color="warn"
                 className="w-full font-normal"
-                StartIcon={isDeleting ? undefined : TrashIcon}
+                StartIcon={isDeleting ? undefined : Icon.Trash}
                 loading={isDeleting}>
                 {isDeleting ? t("deleting") : t("delete_schedule")}
               </Button>

apps/web/components/booking/BookingListItem.tsx

@@ -1,13 +1,3 @@
-import {
-  BanIcon,
-  CheckIcon,
-  ClockIcon,
-  LocationMarkerIcon,
-  PaperAirplaneIcon,
-  PencilAltIcon,
-  XIcon,
-} from "@heroicons/react/outline";
-import { RefreshIcon } from "@heroicons/react/solid";
 import { BookingStatus } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -21,6 +11,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
 
@@ -101,7 +92,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: BanIcon,
+      icon: Icon.Slash,
       disabled: mutation.isLoading,
     },
     {
@@ -113,7 +104,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         mutation.mutate(true);
       },
-      icon: CheckIcon,
+      icon: Icon.Check,
       disabled: mutation.isLoading,
       color: "primary",
     },
@@ -133,22 +124,22 @@ function BookingListItem(booking: BookingItemProps) {
           ? "?allRemainingBookings=true"
           : ""
       }`,
-      icon: XIcon,
+      icon: Icon.X,
     },
     {
       id: "edit_booking",
       label: t("edit_booking"),
-      icon: PencilAltIcon,
+      icon: Icon.Edit,
       actions: [
         {
           id: "reschedule",
-          icon: ClockIcon,
+          icon: Icon.Clock,
           label: t("reschedule_booking"),
           href: `/reschedule/${booking.uid}`,
         },
         {
           id: "reschedule_request",
-          icon: PaperAirplaneIcon,
+          icon: Icon.Send,
           iconClassName: "rotate-45 w-[18px] -ml-[2px]",
           label: t("send_reschedule_request"),
           onClick: () => {
@@ -161,7 +152,7 @@ function BookingListItem(booking: BookingItemProps) {
           onClick: () => {
             setIsOpenLocationDialog(true);
           },
-          icon: LocationMarkerIcon,
+          icon: Icon.MapPin,
         },
       ],
     },
@@ -174,7 +165,7 @@ function BookingListItem(booking: BookingItemProps) {
   const RequestSentMessage = () => {
     return (
       <div className="ml-1 mr-8 flex text-gray-500" data-testid="request_reschedule_sent">
-        <PaperAirplaneIcon className="-mt-[1px] w-4 rotate-45" />
+        <Icon.Send className="-mt-[1px] w-4 rotate-45" />
         <p className="ml-2 ">{t("reschedule_request_sent")}</p>
       </div>
     );
@@ -319,7 +310,7 @@ function BookingListItem(booking: BookingItemProps) {
                           <p key={key}>{aDate}</p>
                         ))}>
                         <div className="text-gray-600 dark:text-white">
-                          <RefreshIcon className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <Icon.RefreshCcw className="float-left mr-1 mt-[2px] inline-block h-4 w-4 text-gray-400" />
                           <p className="pl-[21px]">
                             {booking.status === BookingStatus.ACCEPTED
                               ? `${t("event_remaining", {

apps/web/components/booking/CancelBooking.tsx

@@ -1,10 +1,10 @@
-import { XIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { RecurringEvent } from "@calcom/types/Calendar";
 import { Button } from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import useTheme from "@lib/hooks/useTheme";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
@@ -39,7 +39,7 @@ export default function CancelBooking(props: Props) {
       {error && (
         <div>
           <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-            <XIcon className="h-6 w-6 text-red-600" />
+            <Icon.X className="h-6 w-6 text-red-600" />
           </div>
           <div className="mt-3 text-center sm:mt-5">
             <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/components/booking/TimeOptions.tsx

@@ -53,7 +53,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
         id="timeZone"
         value={selectedTimeZone}
         onChange={(tz: ITimezoneOption) => setSelectedTimeZone(tz.value)}
-        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 focus:ring-black sm:text-sm"
+        className="focus:border-brand mt-1 mb-2 block w-full rounded-md border-gray-300 text-sm focus:ring-black"
       />
     </div>
   ) : null;

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -1,22 +1,8 @@
 // Get router variables
-import {
-  ArrowLeftIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-  ClipboardCheckIcon,
-  ClockIcon,
-  CreditCardIcon,
-  GlobeIcon,
-  InformationCircleIcon,
-  LocationMarkerIcon,
-  RefreshIcon,
-  VideoCameraIcon,
-} from "@heroicons/react/solid";
 import { EventType } from "@prisma/client";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useContracts } from "contexts/contractsContext";
 import { TFunction } from "next-i18next";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
@@ -37,6 +23,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { getRecurringFreq } from "@calcom/lib/recurringStrings";
 import { localStorage } from "@calcom/lib/webstorage";
 import { trpc } from "@calcom/trpc/react";
+import { Icon } from "@calcom/ui/Icon";
 import DatePicker from "@calcom/ui/booker/DatePicker";
 
 import { timeZone as localStorageTimeZone } from "@lib/clock";
@@ -97,7 +84,7 @@ const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   return (
     <div className="flex h-full flex-col justify-end">
       <button title={t("profile")} onClick={() => router.replace(`${WEBSITE_URL}/${slug}`)}>
-        <ArrowLeftIcon className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
+        <Icon.ArrowLeft className="h-4 w-4 text-black transition-opacity hover:cursor-pointer dark:text-white" />
         <p className="sr-only">Go Back</p>
       </button>
     </div>
@@ -270,12 +257,12 @@ function TimezoneDropdown({
     <Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
       <Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
         <p className="text-gray-600 dark:text-white">
-          <GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+          <Icon.Globe className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
           {timeZone}
           {isTimeOptionsOpen ? (
-            <ChevronUpIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+            <Icon.ChevronUp className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
           ) : (
-            <ChevronDownIcon className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+            <Icon.ChevronDown className="ml-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
           )}
         </p>
       </Collapsible.Trigger>
@@ -439,13 +426,13 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     <div className="flex flex-col space-y-4">
                       {eventType?.description && (
                         <p className="text-gray-600 dark:text-white">
-                          <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          <Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                           {eventType.description}
                         </p>
                       )}
                       {eventType?.requiresConfirmation && (
                         <p className="text-gray-600 dark:text-white">
-                          <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                          <Icon.CheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                           {t("requires_confirmation")}
                         </p>
                       )}
@@ -454,9 +441,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                           {Object.values(AppStoreLocationType).includes(
                             eventType.locations[0].type as unknown as AppStoreLocationType
                           ) ? (
-                            <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                            <Icon.Video className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                           ) : (
-                            <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                            <Icon.MapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                           )}
 
                           {locationKeyToString(eventType.locations[0], t)}
@@ -465,7 +452,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                       {eventType.locations.length > 1 && (
                         <div className="flex-warp flex text-gray-600 dark:text-white">
                           <div className="mr-[10px] ml-[2px] -mt-1 ">
-                            <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                            <Icon.MapPin className="inline-block h-4 w-4 text-gray-400" />
                           </div>
                           <p>
                             {eventType.locations.map((el, i, arr) => {
@@ -482,12 +469,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                         </div>
                       )}
                       <p className="text-gray-600 dark:text-white">
-                        <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                        <Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                         {eventType.length} {t("minutes")}
                       </p>
                       {eventType.price > 0 && (
                         <div className="text-gray-600 dark:text-white">
-                          <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
+                          <Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 dark:text-gray-400" />
                           <IntlProvider locale="en">
                             <FormattedNumber
                               value={eventType.price / 100.0}
@@ -499,7 +486,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                       )}
                       {!rescheduleUid && eventType.recurringEvent && (
                         <div className="text-gray-600 dark:text-white">
-                          <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                          <Icon.RefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                           <div className="ml-[27px]">
                             <p className="mb-1 -ml-2 inline px-2 py-1">
                               {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -508,7 +495,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                               type="number"
                               min="1"
                               max={eventType.recurringEvent.count}
-                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                              className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
                               defaultValue={eventType.recurringEvent.count}
                               onChange={(event) => {
                                 setRecurringEventCount(parseInt(event?.target.value));
@@ -579,7 +566,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   {eventType?.description && (
                     <div className="flex text-gray-600 dark:text-white">
                       <div>
-                        <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       </div>
                       <p>{eventType.description}</p>
                     </div>
@@ -587,7 +574,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   {eventType?.requiresConfirmation && (
                     <div className="flex text-gray-600 dark:text-white">
                       <div>
-                        <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.CheckSquare className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       </div>
                       {t("requires_confirmation")}
                     </div>
@@ -597,9 +584,9 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                       {Object.values(AppStoreLocationType).includes(
                         eventType.locations[0].type as unknown as AppStoreLocationType
                       ) ? (
-                        <VideoCameraIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.Video className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       ) : (
-                        <LocationMarkerIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        <Icon.MapPin className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       )}
 
                       {locationKeyToString(eventType.locations[0], t)}
@@ -608,7 +595,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   {eventType.locations.length > 1 && (
                     <div className="flex-warp flex text-gray-600 dark:text-white">
                       <div className="mr-[10px] ml-[2px] -mt-1 ">
-                        <LocationMarkerIcon className="inline-block h-4 w-4 text-gray-400" />
+                        <Icon.MapPin className="inline-block h-4 w-4 text-gray-400" />
                       </div>
                       <p>
                         {eventType.locations.map((el, i, arr) => {
@@ -625,12 +612,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                     </div>
                   )}
                   <p className="text-gray-600 dark:text-white">
-                    <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                    <Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                     {eventType.length} {t("minutes")}
                   </p>
                   {!rescheduleUid && eventType.recurringEvent && (
                     <div className="text-gray-600 dark:text-white">
-                      <RefreshIcon className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                      <Icon.RefreshCcw className="float-left mr-[10px] mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                       <div className="ml-[27px]">
                         <p className="mb-1 -ml-2 inline px-2 py-1">
                           {getRecurringFreq({ t, recurringEvent: eventType.recurringEvent })}
@@ -639,7 +626,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                           type="number"
                           min="1"
                           max={eventType.recurringEvent.count}
-                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                          className="w-15 h-7 rounded-sm border-gray-300 bg-white text-sm text-gray-600 [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white"
                           defaultValue={eventType.recurringEvent.count}
                           onChange={(event) => {
                             setRecurringEventCount(parseInt(event?.target.value));
@@ -655,7 +642,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
                   )}
                   {eventType.price > 0 && (
                     <p className="-ml-2 px-2 py-1 text-gray-600 dark:text-white">
-                      <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                      <Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       <IntlProvider locale="en">
                         <FormattedNumber
                           value={eventType.price / 100.0}

apps/web/components/booking/pages/BookingPage.tsx

@@ -1,13 +1,3 @@
-import {
-  CalendarIcon,
-  ClockIcon,
-  CreditCardIcon,
-  ExclamationCircleIcon,
-  ExclamationIcon,
-  InformationCircleIcon,
-  ClipboardCheckIcon,
-  RefreshIcon,
-} from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType, WorkflowActions } from "@prisma/client";
 import { useContracts } from "contexts/contractsContext";
@@ -37,6 +27,7 @@ import { HttpError } from "@calcom/lib/http-error";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { createPaymentLink } from "@calcom/stripe/client";
 import { Button } from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
 
@@ -446,7 +437,7 @@ const BookingPage = ({
   const disableInput = !!rescheduleUid;
   const disabledExceptForOwner = disableInput && !loggedInIsOwner;
   const inputClassName =
-    "focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 sm:text-sm";
+    "focus:border-brand block w-full rounded-sm border-gray-300 focus:ring-black disabled:bg-gray-200 disabled:hover:cursor-not-allowed dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 disabled:dark:text-gray-500 text-sm";
 
   let isSmsReminderNumberNeeded = false;
 
@@ -534,23 +525,23 @@ const BookingPage = ({
               )}
               {eventType?.description && (
                 <p className="text-bookinglight mb-2 dark:text-white">
-                  <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  <Icon.Info className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                   {eventType.description}
                 </p>
               )}
               {eventType?.requiresConfirmation && (
                 <p className="text-bookinglight mb-2 dark:text-white">
-                  <ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                  <Icon.Clipboard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                   {t("requires_confirmation")}
                 </p>
               )}
               <p className="text-bookinglight mb-2 dark:text-white">
-                <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                <Icon.Clock className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                 {eventType.length} {t("minutes")}
               </p>
               {eventType.price > 0 && (
                 <p className="text-bookinglight mb-1 -ml-2 px-2 py-1 dark:text-white">
-                  <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
+                  <Icon.CreditCard className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
                   <IntlProvider locale="en">
                     <FormattedNumber
                       value={eventType.price / 100.0}
@@ -562,7 +553,7 @@ const BookingPage = ({
               )}
               {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
                 <div className="mb-3 text-gray-600 dark:text-white">
-                  <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                  <Icon.RefreshCw className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                   <p className="mb-1 -ml-2 inline px-2 py-1">
                     {getEveryFreqFor({
                       t,
@@ -573,7 +564,7 @@ const BookingPage = ({
                 </div>
               )}
               <div className="text-bookinghighlight mb-4 flex">
-                <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                <Icon.Calendar className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
                 <div className="-mt-1">
                   {(rescheduleUid || !eventType.recurringEvent?.freq) &&
                     parseDate(dayjs(date).tz(timeZone()), i18n)}
@@ -605,7 +596,7 @@ const BookingPage = ({
                     {t("former_time")}
                   </p>
                   <p className="text-gray-500 line-through dark:text-white">
-                    <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
+                    <Icon.Calendar className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                     {typeof booking.startTime === "string" && parseDate(dayjs(booking.startTime), i18n)}
                   </p>
                 </div>
@@ -650,7 +641,7 @@ const BookingPage = ({
                     />
                     {bookingForm.formState.errors.email && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.Info className="mr-2 h-3 w-3" />
                         <p>{t("email_validation_error")}</p>
                       </div>
                     )}
@@ -696,7 +687,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.phone && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.Info className="mr-2 h-3 w-3" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -854,7 +845,7 @@ const BookingPage = ({
                     </div>
                     {bookingForm.formState.errors.smsReminderNumber && (
                       <div className="mt-2 flex items-center text-sm text-red-700 ">
-                        <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                        <Icon.Info className="mr-2 h-3 w-3" />
                         <p>{t("invalid_number")}</p>
                       </div>
                     )}
@@ -922,7 +913,7 @@ function ErrorMessage({ error }: { error: unknown }) {
     <div data-testid="booking-fail" className="mt-2 border-l-4 border-yellow-400 bg-yellow-50 p-4">
       <div className="flex">
         <div className="flex-shrink-0">
-          <ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
+          <Icon.AlertTriangle className="h-5 w-5 text-yellow-400" aria-hidden="true" />
         </div>
         <div className="ltr:ml-3 rtl:mr-3">
           <p className="text-sm text-yellow-700">

apps/web/components/dialog/ConfirmationDialogContent.tsx

@@ -1,11 +1,10 @@
-import { ExclamationIcon } from "@heroicons/react/outline";
-import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren, ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/Button";
 import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 export type ConfirmationDialogContentProps = {
   confirmBtn?: ReactNode;
@@ -39,17 +38,17 @@ export default function ConfirmationDialogContent(props: PropsWithChildren<Confi
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-red-600" />
+                <Icon.AlertCircle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
               <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-orange-600" />
+                <Icon.AlertCircle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <CheckIcon className="h-5 w-5 text-green-600" />
+                <Icon.Check className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>

apps/web/components/dialog/DeleteStripeDialogContent.tsx

@@ -1,11 +1,10 @@
-import { ExclamationIcon } from "@heroicons/react/outline";
-import { CheckIcon } from "@heroicons/react/solid";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import React, { PropsWithChildren } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/Button";
 import { DialogClose, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 export type DeleteStripeDialogContentProps = {
   cancelAllBookingsBtnText?: string;
@@ -37,17 +36,17 @@ export default function DeleteStripeDialogContent(props: PropsWithChildren<Delet
           <div className="mt-0.5 ltr:mr-3">
             {variety === "danger" && (
               <div className="mx-auto rounded-full bg-red-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-red-600" />
+                <Icon.AlertTriangle className="h-5 w-5 text-red-600" />
               </div>
             )}
             {variety === "warning" && (
               <div className="mx-auto rounded-full bg-orange-100 p-2 text-center">
-                <ExclamationIcon className="h-5 w-5 text-orange-600" />
+                <Icon.AlertTriangle className="h-5 w-5 text-orange-600" />
               </div>
             )}
             {variety === "success" && (
               <div className="mx-auto rounded-full bg-green-100 p-2 text-center">
-                <CheckIcon className="h-5 w-5 text-green-600" />
+                <Icon.Check className="h-5 w-5 text-green-600" />
               </div>
             )}
           </div>

apps/web/components/dialog/EditLocationDialog.tsx

@@ -1,4 +1,3 @@
-import { LocationMarkerIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { isValidPhoneNumber } from "libphonenumber-js";
 import dynamic from "next/dynamic";
@@ -11,6 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -173,7 +173,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             {...locationFormMethods.register("locationLink")}
             required
             id="link"
-            className="block w-full rounded-sm border-gray-300 sm:text-sm"
+            className="block w-full rounded-sm border-gray-300 text-sm"
             defaultValue={
               defaultValues
                 ? defaultValues.find(
@@ -388,7 +388,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
         <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
           <div className="mb-4 sm:flex sm:items-start">
             <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-              <LocationMarkerIcon className="text-primary-600 h-6 w-6" />
+              <Icon.MapPin className="text-primary-600 h-6 w-6" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -460,7 +460,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
                             : locationOptions
                         }
                         isSearchable={false}
-                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+                        className="my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
                         onChange={(val) => {
                           if (val) {
                             locationFormMethods.setValue("locationType", val.value);

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,4 +1,3 @@
-import { ClockIcon } from "@heroicons/react/outline";
 import { RescheduleResponse } from "pages/api/book/request-reschedule";
 import React, { useState, Dispatch, SetStateAction } from "react";
 import { useMutation } from "react-query";
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import * as fetchWrapper from "@lib/core/http/fetch-wrapper";
@@ -58,7 +58,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
       <DialogContent>
         <div className="flex flex-row space-x-3">
           <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-            <ClockIcon className="m-auto h-6 w-6" />
+            <Icon.Clock className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
             <DialogHeader title={t("send_reschedule_request")} />

apps/web/components/eventtype/CreateEventType.tsx

@@ -1,4 +1,3 @@
-import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SchedulingType } from "@prisma/client";
 import { useSession } from "next-auth/react";
@@ -23,6 +22,7 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Form, InputLeading, TextAreaField, TextField } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
@@ -286,14 +286,14 @@ export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
         <Button
           onClick={() => props.openModal(props.options[0])}
           data-testid="new-event-type"
-          StartIcon={PlusIcon}
+          StartIcon={Icon.Plus}
           disabled={!props.canAddEvents}>
           {t("new_event_type_btn")}
         </Button>
       ) : (
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button EndIcon={ChevronDownIcon}>{t("new_event_type_btn")}</Button>
+            <Button EndIcon={Icon.ChevronDown}>{t("new_event_type_btn")}</Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
             <DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -1,11 +1,3 @@
-import {
-  ClipboardCheckIcon,
-  ClockIcon,
-  CreditCardIcon,
-  RefreshIcon,
-  UserIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
 import { Prisma, SchedulingType } from "@prisma/client";
 import { useMemo } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
@@ -13,6 +5,7 @@ import { FormattedNumber, IntlProvider } from "react-intl";
 import { parseRecurringEvent } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma/selects";
+import { Icon } from "@calcom/ui/Icon";
 
 import classNames from "@lib/classNames";
 
@@ -44,34 +37,34 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             {eventType.description.length > 100 && "..."}
           </h2>
         )}
-        <ul className="mt-2 flex flex-wrap sm:flex-nowrap">
-          <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-            <ClockIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
-            {eventType.length}m
+        <ul className="mt-2 flex flex-wrap space-x-1 sm:flex-nowrap ">
+          <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+            <Icon.Clock className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
+            {eventType.length} {t("minutes")}
           </li>
           {eventType.schedulingType ? (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-              <UsersIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+              <Icon.Users className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {eventType.schedulingType === SchedulingType.ROUND_ROBIN && t("round_robin")}
               {eventType.schedulingType === SchedulingType.COLLECTIVE && t("collective")}
             </li>
           ) : (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-              <UserIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+              <Icon.User className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("1_on_1")}
             </li>
           )}
           {recurringEvent?.count && recurringEvent.count > 0 && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-              <RefreshIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+              <Icon.RefreshCw className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("repeats_up_to", {
                 count: recurringEvent.count,
               })}
             </li>
           )}
           {eventType.price > 0 && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-              <CreditCardIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+              <Icon.CreditCard className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               <IntlProvider locale="en">
                 <FormattedNumber
                   value={eventType.price / 100.0}
@@ -82,8 +75,8 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
             </li>
           )}
           {eventType.requiresConfirmation && (
-            <li className="mr-4 mb-1 flex items-center whitespace-nowrap">
-              <ClipboardCheckIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+            <li className="mb-1 flex items-center whitespace-nowrap rounded-sm bg-gray-100 px-1 py-px text-xs text-gray-800">
+              <Icon.CheckSquare className="mr-1.5 inline h-3 w-3" aria-hidden="true" />
               {t("requires_confirmation")}
             </li>
           )}

apps/web/components/eventtype/RecurringEventController.tsx

@@ -82,7 +82,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                     defaultValue={recurringEventState.interval}
                     onChange={(event) => {
                       const newVal = {
@@ -97,7 +97,7 @@ export default function RecurringEventController({
                     options={recurringEventFreqOptions}
                     value={recurringEventFreqOptions[recurringEventState.freq]}
                     isSearchable={false}
-                    className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                    className="w-18 block min-w-0 rounded-sm text-sm"
                     onChange={(event) => {
                       const newVal = {
                         ...recurringEventState,
@@ -114,7 +114,7 @@ export default function RecurringEventController({
                     type="number"
                     min="1"
                     max="20"
-                    className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                    className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                     defaultValue={recurringEventState.count}
                     onChange={(event) => {
                       const newVal = {

apps/web/components/eventtype/SkeletonLoader.tsx

@@ -1,8 +1,7 @@
-import { LinkIcon } from "@heroicons/react/outline";
-import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon, UserIcon } from "@heroicons/react/solid";
 import React from "react";
 
 import { SkeletonAvatar, SkeletonContainer, SkeletonText } from "@calcom/ui";
+import { Icon } from "@calcom/ui/Icon";
 
 function SkeletonLoader() {
   return (
@@ -35,11 +34,11 @@ function SkeletonItem() {
         <div className="">
           <ul className="mt-2 flex space-x-4 rtl:space-x-reverse ">
             <li className="flex items-center whitespace-nowrap">
-              <ClockIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Icon.Clock className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText width="12" height="4" />
             </li>
             <li className="flex items-center whitespace-nowrap">
-              <UserIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
+              <Icon.User className="mt-0.5 mr-1.5 inline h-4 w-4 text-gray-200" />
               <SkeletonText width="16" height="4" />
             </li>
           </ul>
@@ -47,14 +46,14 @@ function SkeletonItem() {
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 sm:flex">
         <div className="flex justify-between rtl:space-x-reverse">
-          <div className="btn-icon appearance-none">
-            <ExternalLinkIcon className="h-5 w-5" />
+          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+            <Icon.ExternalLink className="h-5 w-5" />
           </div>
-          <div className="btn-icon appearance-none">
-            <LinkIcon className="h-5 w-5" />
+          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+            <Icon.Link className="h-5 w-5" />
           </div>
-          <div className="btn-icon appearance-none">
-            <DotsHorizontalIcon className="h-5 w-5" />
+          <div className="cursor-pointer appearance-none rounded-sm border border-transparent p-2 text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
+            <Icon.MoreHorizontal className="h-5 w-5" />
           </div>
         </div>
       </div>

apps/web/components/pages/eventtypes/CustomInputTypeForm.tsx

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

apps/web/components/security/ChangePasswordSection.tsx

@@ -74,7 +74,7 @@ const ChangePasswordSection = () => {
                   name="current_password"
                   id="current_password"
                   required
-                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 text-sm"
                   placeholder={t("your_old_password")}
                 />
               </div>
@@ -91,7 +91,7 @@ const ChangePasswordSection = () => {
                   value={newPassword}
                   required
                   onInput={(e) => setNewPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 text-sm"
                   placeholder={t("super_secure_new_password")}
                 />
               </div>

apps/web/components/security/DisableTwoFactorModal.tsx

@@ -70,7 +70,7 @@ const DisableTwoFactorAuthModal = ({ onDisable, onCancel }: DisableTwoFactorAuth
                 required
                 value={password}
                 onInput={(e) => setPassword(e.currentTarget.value)}
-                className="block w-full rounded-sm border-gray-300 sm:text-sm"
+                className="block w-full rounded-sm border-gray-300 text-sm"
               />
             </div>
 

apps/web/components/security/EnableTwoFactorModal.tsx

@@ -139,7 +139,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   required
                   value={password}
                   onInput={(e) => setPassword(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 text-sm"
                 />
               </div>
 
@@ -175,7 +175,7 @@ const EnableTwoFactorModal = ({ onEnable, onCancel }: EnableTwoFactorModalProps)
                   minLength={6}
                   inputMode="numeric"
                   onInput={(e) => setTotpCode(e.currentTarget.value)}
-                  className="block w-full rounded-sm border-gray-300 sm:text-sm"
+                  className="block w-full rounded-sm border-gray-300 text-sm"
                   autoComplete="one-time-code"
                 />
               </div>

apps/web/components/security/TwoFactorModalHeader.tsx

@@ -1,6 +1,7 @@
-import { ShieldCheckIcon } from "@heroicons/react/solid";
 import React from "react";
 
+import { ShieldCheckIcon } from "@calcom/ui/Icon";
+
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -90,7 +90,7 @@ export default function MemberChangeRoleModal(props: {
               value={role}
               onChange={(option) => option && setRole(option)}
               id="role"
-              className="mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
+              className="mt-1 block w-full rounded-md border-gray-300 text-sm"
             />
           </div>
           {errorMessage && (

apps/web/components/team/MemberInvitationModal.tsx

@@ -1,5 +1,3 @@
-import { UserIcon } from "@heroicons/react/outline";
-import { InformationCircleIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import React, { useState, SyntheticEvent, useMemo } from "react";
 
@@ -7,6 +5,7 @@ import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -75,7 +74,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
       <DialogContent>
         <div className="mb-4 sm:flex sm:items-start">
           <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-            <UserIcon className="text-brandcontrast h-6 w-6" />
+            <Icon.User className="text-brandcontrast h-6 w-6" />
           </div>
           <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
             <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -104,7 +103,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                 options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
                 id="role"
                 name="role"
-                className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
               />
             </div>
             <div className="relative flex items-start">
@@ -114,7 +113,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
                   name="sendInviteEmail"
                   defaultChecked
                   id="sendInviteEmail"
-                  className="rounded-sm border-gray-300 text-black sm:text-sm"
+                  className="rounded-sm border-gray-300 text-sm text-black"
                 />
               </div>
               <div className="text-sm ltr:ml-2 rtl:mr-2">
@@ -124,7 +123,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               </div>
             </div>
             <div className="flex flex-row rounded-sm bg-gray-50 px-3 py-2">
-              <InformationCircleIcon className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
+              <Icon.Info className="h-5 w-5 flex-shrink-0 fill-gray-400" aria-hidden="true" />
               <span className="ml-2 text-sm leading-tight text-gray-500">
                 Note: This will cost an extra seat ($12/m) on your subscription if this invitee does not have
                 a pro account.{" "}

apps/web/components/team/MemberListItem.tsx

@@ -1,5 +1,3 @@
-import { LockClosedIcon, PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
-import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
@@ -17,6 +15,7 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
@@ -101,7 +100,7 @@ export default function MemberListItem(props: Props) {
             {props.member.role && <TeamRole role={props.member.role} />}
           </div>
         </div>
-        <div className="flex">
+        <div className="flex space-x-2">
           <Tooltip side="top" content={t("team_view_user_availability")}>
             <Button
               // Disabled buttons don't trigger Tooltips
@@ -113,19 +112,19 @@ export default function MemberListItem(props: Props) {
               disabled={!props.member.accepted}
               onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
               color="minimal"
-              className="group hidden h-10 w-10 items-center justify-center border border-transparent px-0 py-0 text-neutral-400 hover:border-gray-200 hover:bg-white sm:flex">
-              <ClockIcon className="h-5 w-5 group-hover:text-gray-800" />
+              size="icon">
+              <Icon.Clock className="h-5 w-5 group-hover:text-gray-800" />
             </Button>
           </Tooltip>
           <Dropdown>
-            <DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 hover:bg-white">
-              <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+            <DropdownMenuTrigger asChild>
+              <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
             </DropdownMenuTrigger>
             <DropdownMenuContent>
               <DropdownMenuItem>
                 <Link href={"/" + props.member.username}>
                   <a target="_blank">
-                    <Button color="minimal" StartIcon={ExternalLinkIcon} className="w-full font-normal">
+                    <Button color="minimal" StartIcon={Icon.ExternalLink} className="w-full font-normal">
                       {t("view_public_page")}
                     </Button>
                   </a>
@@ -143,7 +142,7 @@ export default function MemberListItem(props: Props) {
                     <Button
                       onClick={() => setShowChangeMemberRoleModal(true)}
                       color="minimal"
-                      StartIcon={PencilIcon}
+                      StartIcon={Icon.Edit2}
                       className="w-full flex-shrink-0 font-normal">
                       {t("edit_role")}
                     </Button>
@@ -159,7 +158,7 @@ export default function MemberListItem(props: Props) {
                           <Button
                             onClick={() => setShowImpersonateModal(true)}
                             color="minimal"
-                            StartIcon={LockClosedIcon}
+                            StartIcon={Icon.Lock}
                             className="w-full flex-shrink-0 font-normal">
                             {t("impersonate")}
                           </Button>
@@ -175,7 +174,7 @@ export default function MemberListItem(props: Props) {
                             e.stopPropagation();
                           }}
                           color="warn"
-                          StartIcon={UserRemoveIcon}
+                          StartIcon={Icon.UserMinus}
                           className="w-full font-normal">
                           {t("remove_member")}
                         </Button>

apps/web/components/team/TeamCreateModal.tsx

@@ -1,4 +1,3 @@
-import { UsersIcon } from "@heroicons/react/outline";
 import { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -6,6 +5,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
 import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 interface Props {
   isOpen: boolean;
@@ -39,7 +39,7 @@ export default function TeamCreate(props: Props) {
         <DialogContent>
           <div className="mb-4 sm:flex sm:items-start">
             <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
-              <UsersIcon className="text-brandcontrast h-6 w-6" />
+              <Icon.Users className="text-brandcontrast h-6 w-6" />
             </div>
             <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
               <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -62,7 +62,7 @@ export default function TeamCreate(props: Props) {
                 id="name"
                 placeholder="Acme Inc."
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
               />
             </div>
             {errorMessage && <Alert severity="error" title={errorMessage} />}

apps/web/components/team/TeamListItem.tsx

@@ -1,13 +1,3 @@
-import { LogoutIcon } from "@heroicons/react/outline";
-import {
-  DotsHorizontalIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  CheckIcon,
-  XIcon,
-} from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 
@@ -22,6 +12,7 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import classNames from "@lib/classNames";
@@ -110,8 +101,8 @@ export default function TeamListItem(props: Props) {
               </div>
               <div className="block sm:hidden">
                 <Dropdown>
-                  <DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 ">
-                    <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                  <DropdownMenuTrigger asChild>
+                    <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
@@ -119,7 +110,7 @@ export default function TeamListItem(props: Props) {
                         color="minimal"
                         size="sm"
                         className="w-full rounded-none font-medium"
-                        StartIcon={CheckIcon}
+                        StartIcon={Icon.Check}
                         onClick={acceptInvite}>
                         {t("accept")}
                       </Button>
@@ -129,7 +120,7 @@ export default function TeamListItem(props: Props) {
                         color="warn"
                         size="sm"
                         className="w-full rounded-none font-medium"
-                        StartIcon={XIcon}
+                        StartIcon={Icon.X}
                         onClick={declineInvite}>
                         {t("reject")}
                       </Button>
@@ -140,7 +131,7 @@ export default function TeamListItem(props: Props) {
             </>
           )}
           {!isInvitee && (
-            <div className="flex rtl:space-x-reverse">
+            <div className="flex space-x-2 rtl:space-x-reverse">
               <TeamRole role={team.role} />
 
               <Tooltip side="top" content={t("copy_link_team")}>
@@ -153,12 +144,12 @@ export default function TeamListItem(props: Props) {
                   size="icon"
                   color="minimal"
                   type="button">
-                  <LinkIcon className="h-5 w-5 group-hover:text-gray-600" />
+                  <Icon.Link className="h-5 w-5 group-hover:text-gray-600" />
                 </Button>
               </Tooltip>
               <Dropdown>
-                <DropdownMenuTrigger className="group h-10 w-10 border border-transparent p-0 text-neutral-400 hover:border-gray-200 ">
-                  <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                <DropdownMenuTrigger asChild>
+                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {isAdmin && (
@@ -169,7 +160,7 @@ export default function TeamListItem(props: Props) {
                             color="minimal"
                             size="sm"
                             className="w-full rounded-none font-medium"
-                            StartIcon={PencilIcon}>
+                            StartIcon={Icon.Edit2}>
                             {t("edit_team")}
                           </Button>
                         </a>
@@ -183,7 +174,7 @@ export default function TeamListItem(props: Props) {
                           color="minimal"
                           size="sm"
                           className="w-full rounded-none font-medium"
-                          StartIcon={ExternalLinkIcon}>
+                          StartIcon={Icon.ExternalLink}>
                           {t("preview_team")}
                         </Button>
                       </a>
@@ -201,7 +192,7 @@ export default function TeamListItem(props: Props) {
                             color="warn"
                             size="sm"
                             className="w-full rounded-none font-medium"
-                            StartIcon={TrashIcon}>
+                            StartIcon={Icon.Trash}>
                             {t("disband_team")}
                           </Button>
                         </DialogTrigger>
@@ -227,7 +218,7 @@ export default function TeamListItem(props: Props) {
                             type="button"
                             color="warn"
                             size="lg"
-                            StartIcon={LogoutIcon}
+                            StartIcon={Icon.LogOut}
                             className="w-full rounded-none"
                             onClick={(e) => {
                               e.stopPropagation();

apps/web/components/team/TeamSettings.tsx

@@ -1,4 +1,3 @@
-import { HashtagIcon, InformationCircleIcon, LinkIcon, PhotographIcon } from "@heroicons/react/solid";
 import React, { useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -8,6 +7,7 @@ import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { TextField } from "@calcom/ui/form/fields";
 
 import ImageUploader from "@components/ImageUploader";
@@ -82,7 +82,7 @@ export default function TeamSettings(props: Props) {
             <div className="flex flex-col lg:flex-row">
               <div className="flex-grow space-y-6">
                 <SettingInputContainer
-                  Icon={LinkIcon}
+                  Icon={Icon.Link}
                   label="Team URL"
                   htmlFor="team-url"
                   Input={
@@ -100,7 +100,7 @@ export default function TeamSettings(props: Props) {
                   }
                 />
                 <SettingInputContainer
-                  Icon={HashtagIcon}
+                  Icon={Icon.Hash}
                   label="Team Name"
                   htmlFor="name"
                   Input={
@@ -111,7 +111,7 @@ export default function TeamSettings(props: Props) {
                       id="name"
                       placeholder={t("your_team_name")}
                       required
-                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
+                      className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
                       defaultValue={team?.name as string}
                     />
                   }
@@ -119,7 +119,7 @@ export default function TeamSettings(props: Props) {
                 <hr />
                 <div>
                   <SettingInputContainer
-                    Icon={InformationCircleIcon}
+                    Icon={Icon.Info}
                     label={t("about")}
                     htmlFor="about"
                     Input={
@@ -130,7 +130,7 @@ export default function TeamSettings(props: Props) {
                           name="about"
                           rows={3}
                           defaultValue={team?.bio as string}
-                          className="mt-1 block w-full rounded-sm border-gray-300 sm:text-sm"
+                          className="mt-1 block w-full rounded-sm border-gray-300 text-sm"
                         />
                         <p className="mt-2 text-sm text-gray-500">{t("team_description")}</p>
                       </>
@@ -139,7 +139,7 @@ export default function TeamSettings(props: Props) {
                 </div>
                 <div>
                   <SettingInputContainer
-                    Icon={PhotographIcon}
+                    Icon={Icon.Image}
                     label="Logo"
                     htmlFor="avatar"
                     Input={
@@ -151,7 +151,7 @@ export default function TeamSettings(props: Props) {
                             name="avatar"
                             id="avatar"
                             placeholder="URL"
-                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 sm:text-sm"
+                            className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm"
                             defaultValue={team?.logo ?? undefined}
                           />
                           <ImageUploader

apps/web/components/team/TeamSettingsRightSidebar.tsx

@@ -1,4 +1,3 @@
-import { ClockIcon, ExternalLinkIcon, LinkIcon, LogoutIcon, TrashIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
 import { TeamWithMembers } from "@calcom/lib/server/queries/teams";
 import { trpc } from "@calcom/trpc/react";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -66,11 +66,11 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
       <div className="space-y-1">
         <Link href={permalink} passHref={true}>
           <a target="_blank">
-            <LinkIconButton Icon={ExternalLinkIcon}>{t("preview")}</LinkIconButton>
+            <LinkIconButton Icon={Icon.ExternalLink}>{t("preview")}</LinkIconButton>
           </a>
         </Link>
         <LinkIconButton
-          Icon={LinkIcon}
+          Icon={Icon.Link}
           onClick={() => {
             navigator.clipboard.writeText(permalink);
             showToast("Copied to clipboard", "success");
@@ -84,7 +84,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                Icon={TrashIcon}>
+                Icon={Icon.Trash}>
                 {t("disband_team")}
               </LinkIconButton>
             </DialogTrigger>
@@ -100,7 +100,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
           <Dialog>
             <DialogTrigger asChild>
               <LinkIconButton
-                Icon={LogoutIcon}
+                Icon={Icon.LogOut}
                 onClick={(e) => {
                   e.stopPropagation();
                 }}>
@@ -120,7 +120,7 @@ export default function TeamSettingsRightSidebar(props: { team: TeamWithMembers;
       {props.team?.id && props.role !== MembershipRole.MEMBER && (
         <Link href={`/settings/teams/${props.team.id}/availability`}>
           <div className="mt-5 hidden space-y-1 sm:block">
-            <LinkIconButton Icon={ClockIcon}>View Availability</LinkIconButton>
+            <LinkIconButton Icon={Icon.Clock}>View Availability</LinkIconButton>
             <p className="mt-2 text-sm text-gray-500">See your team members availability at a glance.</p>
           </div>
         </Link>

apps/web/components/team/screens/Team.tsx

@@ -1,5 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/outline";
-import { ArrowLeftIcon } from "@heroicons/react/solid";
 import classnames from "classnames";
 import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
@@ -7,6 +5,7 @@ import React from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -38,7 +37,7 @@ const Team = ({ team }: TeamPageProps) => {
     return (
       <Link key={member.id} href={`/${member.username}`}>
         <div className={classes}>
-          <ArrowRightIcon
+          <Icon.ArrowRight
             className={classnames(
               "text-black dark:text-white",
               "absolute top-4 right-4",
@@ -85,7 +84,7 @@ const Team = ({ team }: TeamPageProps) => {
       <Members members={team.members} />
       {team.eventTypes.length > 0 && (
         <aside className="mt-8 text-center dark:text-white">
-          <Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={ArrowLeftIcon}>
+          <Button color="secondary" href={`/team/${team.slug}`} shallow={true} StartIcon={Icon.ArrowLeft}>
             {t("go_back")}
           </Button>
         </aside>

apps/web/components/ui/EditableHeading.tsx

@@ -1,6 +1,7 @@
-import { PencilIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 
+import { Icon } from "@calcom/ui/Icon";
+
 const EditableHeading = ({
   title,
   onChange,
@@ -24,7 +25,7 @@ const EditableHeading = ({
             {title}
           </h1>
           {!readOnly ? (
-            <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
+            <Icon.Edit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
           ) : null}
         </>
       ) : (

apps/web/components/ui/InfoBadge.tsx

@@ -1,5 +1,4 @@
-import { InformationCircleIcon } from "@heroicons/react/solid";
-
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 export default function InfoBadge({ content }: { content: string }) {
@@ -7,7 +6,7 @@ export default function InfoBadge({ content }: { content: string }) {
     <>
       <Tooltip side="top" content={content}>
         <span title={content}>
-          <InformationCircleIcon className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
+          <Icon.Info className="relative top-px left-1 right-1 mt-px h-4 w-4 text-gray-500" />
         </span>
       </Tooltip>
     </>

apps/web/components/ui/SettingInputContainer.tsx

@@ -5,7 +5,7 @@ export default function SettingInputContainer({
   htmlFor,
 }: {
   Input: React.ReactNode;
-  Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
+  Icon: (props: React.SVGProps<SVGSVGElement>) => JSX.Element | null;
   label: string;
   htmlFor?: string;
 }) {

apps/web/components/ui/TableActions.tsx

@@ -1,8 +1,8 @@
-import { ChevronDownIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
 import React, { FC } from "react";
 
 import Button from "@calcom/ui/Button";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 
 import { SVGComponent } from "@lib/types/SVGComponent";
 
@@ -37,8 +37,8 @@ const DropdownActions = ({
   return (
     <Dropdown>
       {!actionTrigger ? (
-        <DropdownMenuTrigger className="h-[38px] w-[38px] cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-          <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+        <DropdownMenuTrigger asChild>
+          <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
@@ -84,7 +84,7 @@ const TableActions: FC<Props> = ({ actions }) => {
               onClick={action.onClick || defaultAction}
               StartIcon={action.icon}
               startIconClassName={action.iconClassName}
-              {...(action?.actions ? { EndIcon: ChevronDownIcon } : null)}
+              {...(action?.actions ? { EndIcon: Icon.ChevronDown } : null)}
               disabled={action.disabled}
               color={action.color || "secondary"}>
               {action.label}

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon, ExternalLinkIcon, PencilAltIcon, StarIcon, XIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce } from "lodash";
 import { MutableRefObject, useCallback, useEffect, useState } from "react";
@@ -12,6 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Input, Label } from "@calcom/ui/form/fields";
 
 export enum UsernameChangeStatusEnum {
@@ -145,6 +145,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       <div className="flex flex-row">
         <Button
           type="button"
+          color="primary"
           className="mx-2"
           onClick={() => setOpenDialogSaveUsername(true)}
           data-testid={`update-username-btn-${index}`}>
@@ -152,7 +153,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         </Button>
         <Button
           type="button"
-          color="minimal"
+          color="secondary"
           className="mx-2"
           onClick={() => {
             if (currentUsername) {
@@ -223,8 +224,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                   premiumUsername ? "text-orange-500" : "",
                   usernameIsAvailable ? "" : ""
                 )}>
-                {premiumUsername ? <StarIcon className="mt-[4px] w-6" /> : <></>}
-                {!premiumUsername && usernameIsAvailable ? <CheckIcon className="mt-[4px] w-6" /> : <></>}
+                {premiumUsername ? <Icon.Star className="mt-[4px] w-6" /> : <></>}
+                {!premiumUsername && usernameIsAvailable ? <Icon.Check className="mt-[4px] w-6" /> : <></>}
               </span>
             </div>
           )}
@@ -250,17 +251,12 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
       )}
       <Dialog open={openDialogSaveUsername}>
         <DialogContent>
-          <DialogClose asChild>
-            <div className="fixed top-1 right-1 flex h-8 w-8 justify-center rounded-full hover:bg-gray-200">
-              <XIcon className="w-4" />
-            </div>
-          </DialogClose>
           <div style={{ display: "flex", flexDirection: "row" }}>
             <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <PencilAltIcon className="m-auto h-6 w-6" />
+              <Icon.Edit2 className="m-auto h-6 w-6" />
             </div>
             <div className="mb-4 w-full px-4 pt-1">
-              <DialogHeader title="Confirm username change" />
+              <DialogHeader title={t("confirm_username_change_dialog_title")} />
               {usernameChangeCondition && usernameChangeCondition !== UsernameChangeStatusEnum.NORMAL && (
                 <p className="-mt-4 mb-4 text-sm text-gray-800">
                   {usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE &&
@@ -297,7 +293,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 data-testid="go-to-billing"
                 href={`/api/integrations/stripepayment/subscription?intentUsername=${inputUsernameValue}`}>
                 <>
-                  {t("go_to_stripe_billing")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
+                  {t("go_to_stripe_billing")} <Icon.ExternalLink className="ml-1 h-4 w-4" />
                 </>
               </Button>
             )}

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon, PencilAltIcon, XIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce } from "lodash";
 import { MutableRefObject, useCallback, useEffect, useState } from "react";
@@ -10,6 +9,7 @@ import { trpc } from "@calcom/trpc/react";
 import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogHeader } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Input, Label } from "@calcom/ui/form/fields";
 
 interface ICustomUsernameProps {
@@ -137,7 +137,7 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-0 flex flex-row">
               <span className={classNames("mx-2 py-1")}>
-                {usernameIsAvailable ? <CheckIcon className="mt-[4px] w-6" /> : <></>}
+                {usernameIsAvailable ? <Icon.Check className="mt-[4px] w-6" /> : <></>}
               </span>
             </div>
           )}
@@ -155,14 +155,9 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
       )}
       <Dialog open={openDialogSaveUsername}>
         <DialogContent>
-          <DialogClose asChild>
-            <div className="fixed top-1 right-1 flex h-8 w-8 justify-center rounded-full hover:bg-gray-200">
-              <XIcon className="w-4" />
-            </div>
-          </DialogClose>
           <div style={{ display: "flex", flexDirection: "row" }}>
             <div className="xs:hidden flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
-              <PencilAltIcon className="m-auto h-6 w-6" />
+              <Icon.Edit2 className="m-auto h-6 w-6" />
             </div>
             <div className="mb-4 w-full px-4 pt-1">
               <DialogHeader title={t("confirm_username_change_dialog_title")} />

apps/web/components/ui/form/CheckedSelect.tsx

@@ -1,8 +1,8 @@
-import { CheckIcon, XIcon } from "@heroicons/react/outline";
 import React from "react";
 import { Props } from "react-select";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 import Avatar from "@components/ui/Avatar";
 import Select from "@components/ui/form/Select";
@@ -41,7 +41,7 @@ export const CheckedSelect = ({
             {label}
             {disabled && (
               <div className="flex-grow">
-                <CheckIcon className="float-right h-6 w-6 text-neutral-500" />
+                <Icon.Check className="float-right h-6 w-6 text-neutral-500" />
               </div>
             )}
           </div>
@@ -59,7 +59,7 @@ export const CheckedSelect = ({
             alt={option.label}
           />
           {option.label}
-          <XIcon
+          <Icon.X
             onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
             className="float-right mt-0.5 h-5 w-5 cursor-pointer text-neutral-500"
           />

apps/web/components/ui/form/DatePicker.tsx

@@ -1,9 +1,10 @@
-import { CalendarIcon } from "@heroicons/react/solid";
 import React from "react";
 import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
 
+import { Icon } from "@calcom/ui/Icon";
+
 import classNames from "@lib/classNames";
 
 type Props = {
@@ -18,11 +19,11 @@ export const DatePicker = ({ minDate, disabled, date, onDatesChange, className }
   return (
     <PrimitiveDatePicker
       className={classNames(
-        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 sm:text-sm",
+        "focus:ring-primary-500 focus:border-primary-500 rounded-sm border border-gray-300 p-1 pl-2 text-sm",
         className
       )}
       clearIcon={null}
-      calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
+      calendarIcon={<Icon.Calendar className="h-5 w-5 text-gray-500" />}
       value={date}
       minDate={minDate}
       disabled={disabled}

apps/web/components/ui/form/DateRangePicker.tsx

@@ -1,10 +1,11 @@
 // @see: https://github.com/wojtekmaj/react-daterange-picker/issues/91
-import { ArrowRightIcon, CalendarIcon } from "@heroicons/react/solid";
 import "@wojtekmaj/react-daterange-picker/dist/DateRangePicker.css";
 import PrimitiveDateRangePicker from "@wojtekmaj/react-daterange-picker/dist/entry.nostyle";
 import React from "react";
 import "react-calendar/dist/Calendar.css";
 
+import { Icon } from "@calcom/ui/Icon";
+
 type Props = {
   startDate: Date;
   endDate: Date;
@@ -14,10 +15,10 @@ type Props = {
 export const DateRangePicker = ({ startDate, endDate, onDatesChange }: Props) => {
   return (
     <PrimitiveDateRangePicker
-      className="rounded-sm border-gray-300 sm:text-sm"
+      className="rounded-sm border-gray-300 text-sm"
       clearIcon={null}
-      calendarIcon={<CalendarIcon className="h-5 w-5 text-gray-500" />}
-      rangeDivider={<ArrowRightIcon className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
+      calendarIcon={<Icon.Calendar className="h-5 w-5 text-gray-500" />}
+      rangeDivider={<Icon.ArrowRight className="h-4 w-4 text-gray-400 ltr:mr-2 rtl:ml-2" />}
       value={[startDate, endDate]}
       onChange={([startDate, endDate]) => {
         if (typeof onDatesChange === "function") onDatesChange({ startDate, endDate });

apps/web/components/ui/form/MinutesField.tsx

@@ -22,12 +22,12 @@ const MinutesField = forwardRef<HTMLInputElement, Props>(({ label, ...rest }, re
             ref={ref}
             type="number"
             className={classNames(
-              "block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm",
+              "block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm",
               rest.className
             )}
           />
           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-            <span className="text-gray-500 sm:text-sm" id="duration">
+            <span className="text-sm text-gray-500" id="duration">
               mins
             </span>
           </div>

apps/web/components/ui/form/radio-area/Select.tsx

@@ -1,7 +1,8 @@
-import { ChevronDownIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import React from "react";
 
+import { Icon } from "@calcom/ui/Icon";
+
 import classNames from "@lib/classNames";
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -34,11 +35,11 @@ export const Select = function RadioAreaSelect(props: RadioAreaSelectProps) {
         type="button"
         disabled={disabled}
         className={classNames(
-          "border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left sm:text-sm",
+          "border-1 focus:ring-primary-500 mb-1 block w-full cursor-pointer rounded-sm border border-gray-300 bg-white p-2 text-left text-sm",
           disabled && "cursor-default bg-gray-200 focus:ring-0 "
         )}>
         {getLabel(props.value) ?? placeholder}
-        <ChevronDownIcon className="float-right h-5 w-5 text-neutral-500" />
+        <Icon.ChevronDown className="float-right h-5 w-5 text-neutral-500" />
       </CollapsibleTrigger>
       <CollapsibleContent>
         <RadioAreaGroup className="space-y-2 text-sm" name={props.name} onChange={props.onChange}>

apps/web/components/webhook/WebhookListContainer.tsx

@@ -1,9 +1,9 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 import { QueryCell } from "@lib/QueryCell";
 
@@ -42,9 +42,9 @@ export default function WebhookListContainer(props: WebhookListContainerType) {
             subtitle={props.subtitle}
             actions={
               <Button
-                color="secondary"
+                color="minimal"
                 size="icon"
-                StartIcon={PlusIcon}
+                StartIcon={Icon.Plus}
                 onClick={() => setNewWebhookModal(true)}
                 data-testid="new_webhook"
               />

apps/web/components/webhook/WebhookListItem.tsx

@@ -1,9 +1,8 @@
-import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
-
 import classNames from "@calcom/lib/classNames";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -56,7 +55,7 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo
               onClick={() => props.onEditWebhook()}
               color="minimal"
               size="icon"
-              StartIcon={PencilAltIcon}
+              StartIcon={Icon.Edit2}
               className="ml-4 w-full self-center p-2"
             />
           </Tooltip>
@@ -69,7 +68,7 @@ export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhoo
                   }}
                   color="minimal"
                   size="icon"
-                  StartIcon={TrashIcon}
+                  StartIcon={Icon.Trash}
                   className="ml-2 w-full self-center p-2"
                 />
               </DialogTrigger>

apps/web/components/webhook/WebhookTestDisclosure.tsx

@@ -1,4 +1,3 @@
-import { ChevronRightIcon, SwitchHorizontalIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import { useWatch } from "react-hook-form";
@@ -7,6 +6,7 @@ import classNames from "@calcom/lib/classNames";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { InputGroupBox } from "@calcom/ui/form/fields";
 
 import { useLocale } from "@lib/hooks/useLocale";
@@ -25,7 +25,7 @@ export default function WebhookTestDisclosure() {
   return (
     <Collapsible open={open} onOpenChange={() => setOpen(!open)}>
       <CollapsibleTrigger type="button" className="flex w-full cursor-pointer">
-        <ChevronRightIcon className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
+        <Icon.ChevronRight className={`${open ? "rotate-90 transform" : ""} h-5 w-5 text-neutral-500`} />
         <span className="text-sm font-medium text-gray-700">{t("webhook_test")}</span>
       </CollapsibleTrigger>
       <CollapsibleContent>
@@ -33,7 +33,6 @@ export default function WebhookTestDisclosure() {
           <div className="flex justify-between bg-gray-50 p-2">
             <h3 className="self-center text-gray-700">{t("webhook_response")}</h3>
             <Button
-              StartIcon={SwitchHorizontalIcon}
               type="button"
               color="minimal"
               disabled={mutation.isLoading}

apps/web/ee/components/LicenseBanner.tsx

@@ -1,8 +1,7 @@
-import { XIcon } from "@heroicons/react/outline";
-import { BadgeCheckIcon } from "@heroicons/react/solid";
 import { Trans } from "react-i18next";
 
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon, BadgeCheckIcon } from "@calcom/ui/Icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -58,7 +57,7 @@ export default function LicenseBanner() {
                 <DialogTrigger asChild>
                   <button className="-mr-1 flex rounded-sm p-2 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-white">
                     <span className="sr-only">{t("dismiss")}</span>
-                    <XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+                    <Icon.X className="h-6 w-6 text-white" aria-hidden="true" />
                   </button>
                 </DialogTrigger>
                 <DialogContent />

apps/web/ee/components/LicenseRequired.tsx

@@ -1,9 +1,9 @@
-import { ExclamationIcon } from "@heroicons/react/solid";
 import { useSession } from "next-auth/react";
 import React, { AriaRole, ComponentType, FC, Fragment } from "react";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 type LicenseRequiredProps = {
   as?: keyof JSX.IntrinsicElements | "";
@@ -25,7 +25,7 @@ const LicenseRequired: FC<LicenseRequiredProps> = ({ children, as = "", ...rest
         children
       ) : (
         <EmptyScreen
-          Icon={ExclamationIcon}
+          Icon={Icon.AlertTriangle}
           headline="This is an enterprise feature"
           description={
             <>

apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx

@@ -1,4 +1,3 @@
-import { ClipboardCopyIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 
@@ -8,6 +7,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { DialogFooter } from "@calcom/ui/Dialog";
+import { ClipboardCopyIcon } from "@calcom/ui/Icon";
 import Switch from "@calcom/ui/Switch";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { Form, TextField } from "@calcom/ui/form/fields";

apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

@@ -1,10 +1,10 @@
-import { PlusIcon } from "@heroicons/react/outline";
 import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import ApiKeyDialogForm from "@ee/components/apiKeys/ApiKeyDialogForm";
 import ApiKeyListItem, { TApiKeys } from "@ee/components/apiKeys/ApiKeyListItem";
 
@@ -30,12 +30,7 @@ function ApiKeyListContainer() {
         title={t("api_keys")}
         subtitle={t("api_keys_subtitle")}
         actions={
-          <Button
-            color="secondary"
-            size="icon"
-            StartIcon={PlusIcon}
-            onClick={() => setNewApiKeyModal(true)}
-          />
+          <Button color="minimal" size="icon" StartIcon={Icon.Plus} onClick={() => setNewApiKeyModal(true)} />
         }
       />
       <LicenseRequired>

apps/web/ee/components/apiKeys/ApiKeyListItem.tsx

@@ -1,12 +1,10 @@
-import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
-import { ExclamationIcon } from "@heroicons/react/solid";
-
 import dayjs from "@calcom/dayjs";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { ListItem } from "@components/List";
@@ -48,7 +46,7 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
               )}>
               {neverExpires ? (
                 <div className="flex flex-row space-x-3 text-gray-500">
-                  <ExclamationIcon className="w-4" />
+                  <Icon.AlertTriangle className="w-4" />
                   {t("api_key_never_expires")}
                 </div>
               ) : (
@@ -65,7 +63,7 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
               onClick={() => props.onEditApiKey()}
               color="minimal"
               size="icon"
-              StartIcon={PencilAltIcon}
+              StartIcon={Icon.Edit2}
               className="ml-4 w-full self-center p-2"
             />
           </Tooltip>
@@ -78,7 +76,6 @@ export default function ApiKeyListItem(props: { apiKey: TApiKeys; onEditApiKey:
                   }}
                   color="minimal"
                   size="icon"
-                  StartIcon={TrashIcon}
                   className="ml-2 w-full self-center p-2"
                 />
               </DialogTrigger>

apps/web/ee/components/stripe/Payment.tsx

@@ -12,7 +12,7 @@ import { useLocale } from "@lib/hooks/useLocale";
 const CARD_OPTIONS: stripejs.StripeCardElementOptions = {
   iconStyle: "solid" as const,
   classes: {
-    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black sm:text-sm",
+    base: "block p-2 w-full border-solid border-2 border-gray-300 rounded-md dark:bg-black dark:text-white dark:border-black focus-within:ring-black focus-within:border-black text-sm",
   },
   style: {
     base: {

apps/web/ee/components/stripe/PaymentPage.tsx

@@ -1,4 +1,3 @@
-import { CreditCardIcon } from "@heroicons/react/solid";
 import { Elements } from "@stripe/react-stripe-js";
 import classNames from "classnames";
 import Head from "next/head";
@@ -9,6 +8,7 @@ import dayjs from "@calcom/dayjs";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import getStripe from "@calcom/stripe/client";
+import { Icon } from "@calcom/ui/Icon";
 import PaymentComponent from "@ee/components/stripe/Payment";
 import { PaymentPageProps } from "@ee/pages/payment/[uid]";
 
@@ -73,7 +73,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                    <CreditCardIcon className="h-8 w-8 text-green-600" />
+                    <Icon.CreditCard className="h-8 w-8 text-green-600" />
                   </div>
 
                   <div className="mt-3 text-center sm:mt-5">

apps/web/ee/components/support/HelpMenuItem.tsx

@@ -1,11 +1,11 @@
-import { ExternalLinkIcon, ExclamationIcon } from "@heroicons/react/solid";
 import { useState } from "react";
-import { HelpScout, useChat } from "react-live-chat-loader";
+import { useChat } from "react-live-chat-loader";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import classNames from "@lib/classNames";
 
@@ -51,7 +51,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
           rel="noreferrer">
           {t("support_documentation")}
-          <ExternalLinkIcon
+          <Icon.ExternalLink
             className={classNames(
               "text-neutral-400 group-hover:text-neutral-500",
               "ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
@@ -65,7 +65,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           className="flex w-full px-5 py-2 pr-4 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
           rel="noreferrer">
           {t("developer_documentation")}
-          <ExternalLinkIcon
+          <Icon.ExternalLink
             className={classNames(
               "text-neutral-400 group-hover:text-neutral-500",
               "ml-1 h-5 w-5 flex-shrink-0 ltr:mr-3"
@@ -86,7 +86,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
           name="comment"
           rows={3}
           onChange={(event) => setComment(event.target.value)}
-          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 sm:text-sm"
+          className="my-1 block  w-full rounded-sm border-gray-300 py-2 pb-2 text-sm"
         />
 
         <div className="my-3 flex justify-end">
@@ -189,7 +189,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         {mutation.isError && (
           <div className="mb-4 flex bg-red-100 p-4 text-sm text-red-700">
             <div className="flex-shrink-0">
-              <ExclamationIcon className="h-5 w-5" />
+              <Icon.AlertTriangle className="h-5 w-5" />
             </div>
             <div className="ml-3 flex-grow">
               <p className="font-medium">{t("feedback_error")}</p>

apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx

@@ -60,7 +60,7 @@ export default function TeamAvailabilityModal(props: Props) {
               value={selectedTimeZone}
               onChange={(timezone) => setSelectedTimeZone(timezone.value)}
               classNamePrefix="react-select"
-              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+              className="react-select-container mt-1 block w-full rounded-sm border border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
             />
           </div>
           <div>
@@ -73,7 +73,7 @@ export default function TeamAvailabilityModal(props: Props) {
               ]}
               isSearchable={false}
               classNamePrefix="react-select"
-              className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+              className="react-select-container focus:ring-primary-500 focus:border-primary-500 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
               value={{ value: frequency, label: `${frequency} minutes` }}
               onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
             />

apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx

@@ -80,7 +80,7 @@ export default function TeamAvailabilityScreen(props: Props) {
             value={selectedTimeZone}
             onChange={(timezone) => setSelectedTimeZone(timezone.value)}
             classNamePrefix="react-select"
-            className="react-select-container w-full rounded-sm border border-gray-300 sm:text-sm"
+            className="react-select-container w-full rounded-sm border border-gray-300 text-sm"
           />
         </div>
         <div className="hidden sm:block">
@@ -92,7 +92,7 @@ export default function TeamAvailabilityScreen(props: Props) {
               { value: 60, label: "60 minutes" },
             ]}
             isSearchable={false}
-            className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+            className="block w-full min-w-0 flex-1 rounded-sm border border-gray-300 text-sm"
             value={{ value: frequency, label: `${frequency} minutes` }}
             onChange={(newFrequency) => setFrequency(newFrequency?.value ?? 30)}
           />

apps/web/ee/components/workflows/AddActionDialog.tsx

@@ -74,7 +74,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
                     return (
                       <Select
                         isSearchable={false}
-                        className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                        className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                         defaultValue={actionOptions[0]}
                         onChange={(val) => {
                           if (val) {

apps/web/ee/components/workflows/NewWorkflowButton.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { WorkflowTriggerEvents, WorkflowActions, TimeUnit } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
@@ -12,6 +11,7 @@ import showToast from "@calcom/lib/notification";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import { Form, TextField } from "@calcom/ui/form/fields";
 import { TIME_UNIT, WORKFLOW_ACTIONS, WORKFLOW_TRIGGER_EVENTS } from "@ee/lib/workflows/constants";
 import {
@@ -86,7 +86,7 @@ export function NewWorkflowButton() {
   return (
     <Dialog name="new-workflow">
       <DialogTrigger asChild>
-        <Button StartIcon={PlusIcon}>{t("new_workflow_btn")}</Button>
+        <Button StartIcon={Icon.Plus}>{t("new_workflow_btn")}</Button>
       </DialogTrigger>
       <DialogContent>
         <div className="mb-4">
@@ -119,7 +119,7 @@ export function NewWorkflowButton() {
                   return (
                     <Select
                       isSearchable={false}
-                      className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                      className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                       onChange={(val) => {
                         if (val) {
                           form.setValue("trigger", val.value);
@@ -152,7 +152,7 @@ export function NewWorkflowButton() {
                     type="number"
                     min="1"
                     defaultValue={24}
-                    className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800 sm:text-sm"
+                    className="mr-5 block w-32 rounded-sm border-gray-300 px-3 py-2 text-sm marker:border focus:border-neutral-800 focus:outline-none focus:ring-1 focus:ring-neutral-800"
                     {...form.register("time", { valueAsNumber: true })}
                   />
                   <div className="w-28">
@@ -163,7 +163,7 @@ export function NewWorkflowButton() {
                         return (
                           <Select
                             isSearchable={false}
-                            className="block min-w-0 flex-1 rounded-sm sm:text-sm"
+                            className="block min-w-0 flex-1 rounded-sm text-sm"
                             onChange={(val) => {
                               if (val) {
                                 form.setValue("timeUnit", val.value);
@@ -190,7 +190,7 @@ export function NewWorkflowButton() {
                   return (
                     <Select
                       isSearchable={false}
-                      className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                      className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                       onChange={(val) => {
                         if (val) {
                           form.setValue("action", val.value);

apps/web/ee/components/workflows/WorkflowListPage.tsx

@@ -1,5 +1,3 @@
-import { LightningBoltIcon } from "@heroicons/react/outline";
-import { DotsHorizontalIcon, PencilIcon, TrashIcon, LinkIcon } from "@heroicons/react/solid";
 import Link from "next/link";
 import { useState } from "react";
 
@@ -11,6 +9,7 @@ import { Button, Tooltip } from "@calcom/ui";
 import { Dialog } from "@calcom/ui/Dialog";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 import { HttpError } from "@lib/core/http/error";
 
@@ -21,7 +20,7 @@ const CreateFirstWorkflowView = () => {
 
   return (
     <EmptyScreen
-      Icon={LightningBoltIcon}
+      Icon={Icon.Zap}
       headline={t("new_workflow_heading")}
       description={t("new_workflow_description")}
     />
@@ -88,7 +87,10 @@ export default function WorkflowListPage({ workflows }: Props) {
                             <span>{t(`${workflow.trigger.toLowerCase()}_trigger`)}</span>
                           </li>
                           <li className="mb-1 mr-4 flex min-w-[11rem] items-center whitespace-nowrap">
-                            <LinkIcon className="mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+                            <Icon.Link
+                              className="mr-1.5 inline h-4 w-4 text-neutral-400"
+                              aria-hidden="true"
+                            />
                             {workflow.activeOn && workflow.activeOn.length > 0 ? (
                               <Tooltip
                                 content={workflow.activeOn.map((activeOn, key) => (
@@ -104,11 +106,11 @@ export default function WorkflowListPage({ workflows }: Props) {
                       </div>
                     </a>
                   </Link>
-                  <div className="mr-5 flex flex-shrink-0">
+                  <div className="flex flex-shrink-0">
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       <Dropdown>
-                        <DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300">
-                          <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                        <DropdownMenuTrigger asChild>
+                          <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
                         </DropdownMenuTrigger>
                         <DropdownMenuContent>
                           <DropdownMenuItem>
@@ -118,7 +120,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                                 size="sm"
                                 color="minimal"
                                 className="w-full rounded-none"
-                                StartIcon={PencilIcon}>
+                                StartIcon={Icon.Edit2}>
                                 {t("edit")}
                               </Button>
                             </Link>
@@ -131,7 +133,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               }}
                               color="warn"
                               size="sm"
-                              StartIcon={TrashIcon}
+                              StartIcon={Icon.Trash}
                               className="w-full rounded-none">
                               {t("delete")}
                             </Button>

apps/web/ee/components/workflows/WorkflowStepContainer.tsx

@@ -1,4 +1,3 @@
-import { DotsHorizontalIcon, TrashIcon } from "@heroicons/react/solid";
 import {
   TimeUnit,
   WorkflowStep,
@@ -15,6 +14,7 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui";
 import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@calcom/ui/Dropdown";
+import { Icon } from "@calcom/ui/Icon";
 import Select from "@calcom/ui/form/Select";
 import { TextField, TextArea } from "@calcom/ui/form/fields";
 import {
@@ -294,7 +294,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     return (
                       <Select
                         isSearchable={false}
-                        className="mt-3 block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                        className="mt-3 block w-full min-w-0 flex-1 rounded-sm text-sm"
                         onChange={(val) => {
                           if (val) {
                             form.setValue(`steps.${step.stepNumber - 1}.template`, val.value);
@@ -395,8 +395,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
             </div>
             <div>
               <Dropdown>
-                <DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300">
-                  <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                <DropdownMenuTrigger asChild>
+                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.MoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
@@ -419,7 +419,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       }}
                       color="warn"
                       size="sm"
-                      StartIcon={TrashIcon}
+                      StartIcon={Icon.Trash}
                       className="w-full rounded-none">
                       {t("delete")}
                     </Button>

apps/web/ee/pages/workflows/[workflow].tsx

@@ -1,4 +1,3 @@
-import { PencilIcon } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { TimeUnit, WorkflowStep, WorkflowTriggerEvents } from "@prisma/client";
 import { isValidPhoneNumber } from "libphonenumber-js";
@@ -11,6 +10,7 @@ import { z } from "zod";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
+import { Icon } from "@calcom/ui/Icon";
 import Loader from "@calcom/ui/Loader";
 import LicenseRequired from "@ee/components/LicenseRequired";
 import WorkflowDetailsPage from "@ee/components/workflows/WorkflowDetailsPage";
@@ -127,7 +127,7 @@ function WorkflowPage() {
                     ? form.getValues("name")
                     : workflow?.name}
                 </h1>
-                <PencilIcon className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
+                <Icon.Edit2 className="ml-1 -mt-1 inline h-4 w-4 text-gray-700 group-hover:text-gray-500" />
               </>
             ) : (
               <div style={{ marginBottom: -11 }}>

apps/web/pages/404.tsx

@@ -1,11 +1,10 @@
-import { BookOpenIcon, CheckIcon, DocumentTextIcon } from "@heroicons/react/outline";
-import { ChevronRightIcon } from "@heroicons/react/solid";
 import { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 
 import { DOCS_URL, JOIN_SLACK, WEBSITE_URL } from "@calcom/lib/constants";
+import { Icon } from "@calcom/ui/Icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -23,13 +22,13 @@ export default function Custom404() {
     {
       title: t("documentation"),
       description: t("documentation_description"),
-      icon: DocumentTextIcon,
+      icon: Icon.FileText,
       href: DOCS_URL,
     },
     {
       title: t("blog"),
       description: t("blog_description"),
-      icon: BookOpenIcon,
+      icon: Icon.BookOpen,
       href: `${WEBSITE_URL}/blog`,
     },
   ];
@@ -78,7 +77,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                          <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
+                          <Icon.Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -93,7 +92,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("the_infrastructure_plan")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -105,7 +104,7 @@ export default function Custom404() {
                       <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                         <div className="flex-shrink-0">
                           <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-gray-50">
-                            <DocumentTextIcon className="h-6 w-6 text-gray-700" aria-hidden="true" />
+                            <Icon.FileText className="h-6 w-6 text-gray-700" aria-hidden="true" />
                           </span>
                         </div>
                         <div className="min-w-0 flex-1">
@@ -118,7 +117,7 @@ export default function Custom404() {
                           <p className="text-base text-gray-500">{t("prisma_studio_tip_description")}</p>
                         </div>
                         <div className="flex-shrink-0 self-center">
-                          <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                          <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                         </div>
                       </a>
                     </Link>
@@ -164,7 +163,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>
@@ -216,7 +215,7 @@ export default function Custom404() {
                         <a className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                           <div className="flex-shrink-0">
                             <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                              <CheckIcon className="h-6 w-6 text-green-500" aria-hidden="true" />
+                              <Icon.Check className="h-6 w-6 text-green-500" aria-hidden="true" />
                             </span>
                           </div>
                           <div className="min-w-0 flex-1">
@@ -233,7 +232,7 @@ export default function Custom404() {
                             </p>
                           </div>
                           <div className="flex-shrink-0 self-center">
-                            <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                            <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                           </div>
                         </a>
                       </Link>
@@ -261,7 +260,7 @@ export default function Custom404() {
                             <p className="text-base text-gray-500">{link.description}</p>
                           </div>
                           <div className="flex-shrink-0 self-center">
-                            <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                            <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                           </div>
                         </a>
                       </Link>
@@ -308,7 +307,7 @@ export default function Custom404() {
                         <p className="text-base text-gray-500">{t("join_our_community")}</p>
                       </div>
                       <div className="flex-shrink-0 self-center">
-                        <ChevronRightIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                        <Icon.ChevronRight className="h-5 w-5 text-gray-400" aria-hidden="true" />
                       </div>
                     </a>
                   </li>

apps/web/pages/[user].tsx

@@ -1,5 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/outline";
-import { BadgeCheckIcon } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
@@ -25,6 +23,7 @@ import defaultEvents, {
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma/selects/event-types";
+import { BadgeCheckIcon, Icon } from "@calcom/ui/Icon";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useTheme from "@lib/hooks/useTheme";
@@ -68,7 +67,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
           <li
             key={index}
             className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
-            <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+            <Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
             <Link href={getUsernameSlugLink({ users: props.users, slug: type.slug })}>
               <a className="flex justify-between px-6 py-4" data-testid="event-type-link">
                 <div className="flex-shrink">
@@ -163,7 +162,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
                   className="hover:border-brand group relative rounded-sm border border-neutral-200 bg-white hover:bg-gray-50 dark:border-neutral-700 dark:bg-gray-800 dark:hover:border-neutral-600">
-                  <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+                  <Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <Link
                     prefetch={false}

apps/web/pages/_document.tsx

@@ -23,6 +23,14 @@ class MyDocument extends Document<Props> {
           <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
           <meta name="msapplication-TileColor" content="#ff0000" />
           <meta name="theme-color" content="#ffffff" />
+          <link
+            rel="preload"
+            href="/fonts/Inter-roman.var.woff2"
+            as="font"
+            type="font/woff2"
+            crossOrigin="anonymous"
+          />
+          <link rel="preload" href="/fonts/cal.ttf" as="font" type="font/ttf" crossOrigin="anonymous" />
           {/* Define isEmbed here so that it can be shared with App(embed-iframe) as well as the following code to change background and hide body */}
           <script
             dangerouslySetInnerHTML={{

apps/web/pages/apps/categories/[category].tsx

@@ -1,4 +1,3 @@
-import { ChevronLeftIcon } from "@heroicons/react/solid";
 import { AppCategories } from "@prisma/client";
 import { GetStaticPropsContext, InferGetStaticPropsType } from "next";
 import Link from "next/link";
@@ -7,6 +6,7 @@ import { useRouter } from "next/router";
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma from "@calcom/prisma";
+import { Icon } from "@calcom/ui/Icon";
 
 import Shell from "@components/Shell";
 import AppCard from "@components/apps/AppCard";
@@ -22,7 +22,7 @@ export default function Apps({ apps }: InferGetStaticPropsType<typeof getStaticP
           <div className="mb-10 bg-gray-50 px-4 pb-2">
             <Link href="/apps">
               <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-                <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
+                <Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
               </a>
             </Link>
           </div>

apps/web/pages/apps/categories/index.tsx

@@ -1,9 +1,9 @@
-import { ChevronLeftIcon } from "@heroicons/react/outline";
 import { InferGetStaticPropsType } from "next";
 import Link from "next/link";
 
 import { getAppRegistry } from "@calcom/app-store/_appRegistry";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui/Icon";
 
 import Shell from "@components/Shell";
 import AppStoreCategories from "@components/apps/Categories";
@@ -17,7 +17,7 @@ export default function Apps({ categories }: InferGetStaticPropsType<typeof getS
         <div className="mb-10 bg-gray-50 px-4 pb-2">
           <Link href="/apps">
             <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-              <ChevronLeftIcon className="h-5 w-5" /> {t("browse_apps")}
+              <Icon.ChevronLeft className="h-5 w-5" /> {t("browse_apps")}
             </a>
           </Link>
         </div>

apps/web/pages/apps/installed.tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon, ViewGridIcon } from "@heroicons/react/solid";
 import Image from "next/image";
 import React from "react";
 
@@ -11,6 +10,7 @@ import type { App } from "@calcom/types/App";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 import { QueryCell } from "@lib/QueryCell";
 import classNames from "@lib/classNames";
@@ -241,12 +241,12 @@ export default function IntegrationsPage() {
               </>
             ) : (
               <EmptyScreen
-                Icon={ViewGridIcon}
+                Icon={Icon.Grid}
                 headline={t("empty_installed_apps_headline")}
                 description={
                   <>
                     <span className="mb-6 block">{t("empty_installed_apps_description")}</span>
-                    <Button href="/apps" EndIcon={ArrowRightIcon}>
+                    <Button href="/apps" EndIcon={Icon.ArrowRight}>
                       {t("empty_installed_apps_button")}
                     </Button>
                   </>

apps/web/pages/auth/error.tsx

@@ -1,9 +1,9 @@
-import { XIcon } from "@heroicons/react/outline";
 import { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { useLocale } from "@lib/hooks/useLocale";
 
@@ -20,7 +20,7 @@ export default function Error() {
     <AuthContainer title="" description="">
       <div>
         <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-          <XIcon className="h-6 w-6 text-red-600" />
+          <Icon.X className="h-6 w-6 text-red-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/pages/auth/forgot-password/[id].tsx

@@ -152,7 +152,7 @@ export default function Page({ resetPasswordRequest, csrfToken }: Props) {
                       type="password"
                       autoComplete="password"
                       required
-                      className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 focus:outline-none focus:ring-black sm:text-sm"
+                      className="focus:border-brand block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 text-sm placeholder-gray-400 focus:outline-none focus:ring-black"
                     />
                   </div>
                 </div>

apps/web/pages/auth/login.tsx

@@ -1,4 +1,3 @@
-import { ArrowLeftIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
 import { getCsrfToken, signIn } from "next-auth/react";
@@ -10,6 +9,7 @@ import { useForm } from "react-hook-form";
 import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { EmailField, Form, PasswordField } from "@calcom/ui/form/fields";
 
 import { ErrorCode, getSession } from "@lib/auth";
@@ -90,7 +90,7 @@ export default function Login({
         setTwoFactorRequired(false);
         form.setValue("totpCode", "");
       }}
-      StartIcon={ArrowLeftIcon}
+      StartIcon={Icon.ArrowLeft}
       color="minimal">
       {t("go_back")}
     </Button>

apps/web/pages/auth/logout.tsx

@@ -1,4 +1,3 @@
-import { CheckIcon } from "@heroicons/react/outline";
 import { GetServerSidePropsContext } from "next";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
@@ -8,6 +7,7 @@ import { useEffect } from "react";
 import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -33,7 +33,7 @@ export default function Logout(props: Props) {
     <AuthContainer title={t("logged_out")} description={t("youve_been_logged_out")}>
       <div className="mb-4">
         <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-          <CheckIcon className="h-6 w-6 text-green-600" />
+          <Icon.Check className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
           <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/pages/auth/signup.tsx

@@ -95,20 +95,20 @@ export default function Signup({ email }: Props) {
                     </span>
                   }
                   labelProps={{ className: "block text-sm font-medium text-gray-700" }}
-                  className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-black focus:ring-black sm:text-sm"
+                  className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 text-sm lowercase focus:border-black focus:ring-black"
                   {...register("username")}
                   required
                 />
                 <EmailField
                   {...register("email")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 bg-gray-100 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
                 />
                 <PasswordField
                   labelProps={{
                     className: "block text-sm font-medium text-gray-700",
                   }}
                   {...register("password")}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
                 />
                 <PasswordField
                   label={t("confirm_password")}
@@ -119,7 +119,7 @@ export default function Signup({ email }: Props) {
                     validate: (value) =>
                       value === methods.watch("password") || (t("error_password_mismatch") as string),
                   })}
-                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-black focus:outline-none focus:ring-black"
                 />
               </div>
               <div className="flex space-x-2 rtl:space-x-reverse">

apps/web/pages/availability/[schedule].tsx

@@ -1,4 +1,3 @@
-import { BadgeCheckIcon } from "@heroicons/react/solid";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { useState } from "react";
@@ -11,6 +10,7 @@ import showToast from "@calcom/lib/notification";
 import { stringOrNumber } from "@calcom/prisma/zod-utils";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import Button from "@calcom/ui/Button";
+import { BadgeCheckIcon } from "@calcom/ui/Icon";
 import Switch from "@calcom/ui/Switch";
 import { Form } from "@calcom/ui/form/fields";
 
@@ -102,7 +102,7 @@ export function AvailabilityForm(props: inferQueryOutput<"viewer.availability.sc
               render={({ field: { onChange, value } }) => (
                 <TimezoneSelect
                   value={value}
-                  className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 sm:text-sm"
+                  className="focus:border-brand mt-1 block w-full rounded-md border-gray-300 text-sm"
                   onChange={(timezone) => onChange(timezone.value)}
                 />
               )}

apps/web/pages/availability/index.tsx

@@ -1,9 +1,8 @@
-import { ClockIcon } from "@heroicons/react/outline";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { inferQueryOutput, trpc } from "@calcom/trpc/react";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 import { withQuery } from "@lib/QueryCell";
 import { HttpError } from "@lib/core/http/error";
@@ -32,7 +31,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
     <>
       {schedules.length === 0 ? (
         <EmptyScreen
-          Icon={ClockIcon}
+          Icon={Icon.Clock}
           headline={t("new_schedule_heading")}
           description={t("new_schedule_description")}
         />

apps/web/pages/bookings/[status].tsx

@@ -1,4 +1,3 @@
-import { CalendarIcon } from "@heroicons/react/outline";
 import { GetStaticPaths, GetStaticProps } from "next";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
@@ -10,6 +9,7 @@ import { inferQueryInput, inferQueryOutput, trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
 
@@ -126,7 +126,7 @@ export default function Bookings() {
               )}
               {query.status === "success" && isEmpty && (
                 <EmptyScreen
-                  Icon={CalendarIcon}
+                  Icon={Icon.Calendar}
                   headline={t("no_status_bookings_yet", { status: t(status).toLowerCase() })}
                   description={t("no_status_bookings_yet_description", {
                     status: t(status).toLowerCase(),

apps/web/pages/cancel/[uid].tsx

@@ -1,4 +1,3 @@
-import { CalendarIcon, XIcon, RefreshIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
@@ -13,6 +12,7 @@ import { parseRecurringEvent } from "@calcom/lib/isRecurringEvent";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import { Button } from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { TextField } from "@calcom/ui/form/fields";
 
 import { getSession } from "@lib/auth";
@@ -64,7 +64,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                 {error && (
                   <div>
                     <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                      <XIcon className="h-6 w-6 text-red-600" />
+                      <Icon.X className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">
@@ -77,7 +77,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                   <>
                     <div>
                       <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                        <XIcon className="h-6 w-6 text-red-600" />
+                        <Icon.X className="h-6 w-6 text-red-600" />
                       </div>
                       <div className="mt-3 sm:mt-5">
                         <h3
@@ -106,7 +106,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                             props.booking?.eventType.recurringEvent.freq &&
                             props.recurringInstances && (
                               <div className="text-center text-gray-500">
-                                <RefreshIcon className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                                <Icon.RefreshCcw className="mr-3 -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                                 <p className="mb-1 -ml-2 inline px-2 py-1">
                                   {getEveryFreqFor({
                                     t,
@@ -120,7 +120,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                             <div className="flex flex-row items-start justify-center space-x-3">
                               {props.booking?.eventType.recurringEvent && props.recurringInstances ? (
                                 <>
-                                  <CalendarIcon className="mt-2 ml-1 h-4 w-4" />
+                                  <Icon.Calendar className="mt-2 ml-1 h-4 w-4" />
                                   <div className="mb-1 inline py-1 text-left">
                                     <div className="">
                                       {dayjs(props.recurringInstances[0].startTime).format(
@@ -153,7 +153,7 @@ export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
                                 </>
                               ) : (
                                 <>
-                                  <CalendarIcon className="mt-1 mr-1 h-4 w-4" />
+                                  <Icon.Calendar className="mt-1 mr-1 h-4 w-4" />
                                   {dayjs(props.booking?.startTime).format(
                                     detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
                                   )}

apps/web/pages/cancel/success.tsx

@@ -1,10 +1,9 @@
-import { CheckIcon } from "@heroicons/react/outline";
-import { ArrowLeftIcon } from "@heroicons/react/solid";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
@@ -45,7 +44,7 @@ export default function CancelSuccess() {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                    <CheckIcon className="h-6 w-6 text-green-600" />
+                    <Icon.Check className="h-6 w-6 text-green-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -65,7 +64,7 @@ export default function CancelSuccess() {
                       <Button
                         data-testid="back-to-bookings"
                         href={isRecurringEvent ? "/bookings/recurring" : "/bookings/upcoming"}
-                        StartIcon={ArrowLeftIcon}>
+                        StartIcon={Icon.ArrowLeft}>
                         {t("back_to_bookings")}
                       </Button>
                     )}

apps/web/pages/event-types/[type].tsx

@@ -1,18 +1,3 @@
-import { GlobeAltIcon, PhoneIcon, XIcon } from "@heroicons/react/outline";
-import {
-  ChevronRightIcon,
-  ClockIcon,
-  DocumentDuplicateIcon,
-  DocumentIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  LocationMarkerIcon,
-  PencilIcon,
-  PlusIcon,
-  TrashIcon,
-  UserAddIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInput, MembershipRole, PeriodType, Prisma, SchedulingType } from "@prisma/client";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
@@ -42,6 +27,7 @@ import { RecurringEvent } from "@calcom/types/Calendar";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 import Switch from "@calcom/ui/Switch";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { Form } from "@calcom/ui/form/fields";
@@ -87,7 +73,6 @@ interface Token {
 }
 
 interface NFT extends Token {
-  // Some OpenSea NFTs have several contracts
   contracts: Array<Token>;
 }
 
@@ -175,7 +160,7 @@ const SuccessRedirectEdit = <T extends UseFormReturn<FormValues>>({
             }}
             readOnly={proUpgradeRequired}
             type="url"
-            className="block w-full rounded-sm border-gray-300 sm:text-sm"
+            className="block w-full rounded-sm border-gray-300 text-sm"
             placeholder={t("external_redirect_url")}
             defaultValue={eventType.successRedirectUrl || ""}
             {...formMethods.register("successRedirectUrl")}
@@ -226,7 +211,7 @@ const AvailabilitySelect = ({
             options={options}
             isSearchable={false}
             onChange={props.onChange}
-            className={classNames("block w-full min-w-0 flex-1 rounded-sm sm:text-sm", className)}
+            className={classNames("block w-full min-w-0 flex-1 rounded-sm text-sm", className)}
             value={value}
           />
         );
@@ -478,7 +463,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             <Select
               options={locationOptions}
               isSearchable={false}
-              className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+              className="block w-full min-w-0 flex-1 rounded-sm text-sm"
               onChange={(e) => {
                 if (e?.value) {
                   const newLocationType: LocationType = e.value;
@@ -507,7 +492,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                 <div className="flex justify-between">
                   {location.type === LocationType.InPerson && (
                     <div className="flex flex-grow items-center">
-                      <LocationMarkerIcon className="h-6 w-6" />
+                      <Icon.MapPin className="h-6 w-6" />
                       <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
                         {location.address}
                       </span>
@@ -515,7 +500,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   )}
                   {location.type === LocationType.Link && (
                     <div className="flex flex-grow items-center">
-                      <GlobeAltIcon className="h-6 w-6" />
+                      <Icon.Globe className="h-6 w-6" />
                       <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
                         {location.link}
                       </span>
@@ -523,7 +508,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   )}
                   {location.type === LocationType.UserPhone && (
                     <div className="flex flex-grow items-center">
-                      <PhoneIcon className="h-6 w-6" />
+                      <Icon.Phone className="h-6 w-6" />
                       <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
                         {location.hostPhoneNumber}
                       </span>
@@ -531,7 +516,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   )}
                   {location.type === LocationType.Phone && (
                     <div className="flex flex-grow items-center">
-                      <PhoneIcon className="h-6 w-6" />
+                      <Icon.Phone className="h-6 w-6" />
                       <span className="text-sm ltr:ml-2 rtl:mr-2">{t("phone_call")}</span>
                     </div>
                   )}
@@ -812,10 +797,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       }}
                       aria-label={t("edit")}
                       className="mr-1 p-1 text-gray-500 hover:text-gray-900">
-                      <PencilIcon className="h-4 w-4" />
+                      <Icon.Edit2 className="h-4 w-4" />
                     </button>
                     <button type="button" onClick={() => removeLocation(location)} aria-label={t("remove")}>
-                      <XIcon className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
+                      <Icon.X className="border-l-1 h-6 w-6 pl-1 text-gray-500 hover:text-gray-900 " />
                     </button>
                   </div>
                 </div>
@@ -828,7 +813,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     type="button"
                     className="flex rounded-sm py-2 hover:bg-gray-100"
                     onClick={() => setShowLocationModal(true)}>
-                    <PlusIcon className="mt-0.5 h-4 w-4 text-neutral-900" />
+                    <Icon.Plus className="mt-0.5 h-4 w-4 text-neutral-900" />
                     <span className="ml-1 text-sm font-medium text-neutral-700">{t("add_location")}</span>
                   </button>
                 </li>
@@ -897,7 +882,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           id="slug-label"
                           htmlFor="slug"
                           className="flex text-sm font-medium text-neutral-700">
-                          <LinkIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                          <Icon.Link className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                           {t("url")}
                         </label>
                       </div>
@@ -912,7 +897,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             id="slug"
                             aria-labelledby="slug-label"
                             required
-                            className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 sm:text-sm"
+                            className="block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-gray-300 text-sm"
                             defaultValue={eventType.slug}
                             {...formMethods.register("slug", {
                               setValueAs: (v) => slugify(v),
@@ -929,7 +914,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <MinutesField
                           label={
                             <>
-                              <ClockIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
+                              <Icon.Clock className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                               {t("duration")}
                             </>
                           }
@@ -952,7 +937,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <label
                           htmlFor="location"
                           className="mt-2.5 flex text-sm font-medium text-neutral-700">
-                          <LocationMarkerIcon className="mt-0.5 mb-4 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                          <Icon.MapPin className="mt-0.5 mb-4 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                           {t("location")}
                         </label>
                       </div>
@@ -971,7 +956,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <label
                           htmlFor="description"
                           className="mt-0 flex text-sm font-medium text-neutral-700">
-                          <DocumentIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                          <Icon.FileText className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                           {t("description")}
                         </label>
                       </div>
@@ -994,7 +979,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <label
                           htmlFor="availability"
                           className="mt-0 flex text-sm font-medium text-neutral-700">
-                          <ClockIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                          <Icon.Clock className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                           {t("availability")} <InfoBadge content={t("you_can_manage_your_schedules")} />
                         </label>
                       </div>
@@ -1021,7 +1006,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           <label
                             htmlFor="schedulingType"
                             className="mt-2 flex text-sm font-medium text-neutral-700">
-                            <UsersIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
+                            <Icon.Users className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                             {t("scheduling_type")}
                           </label>
                         </div>
@@ -1045,7 +1030,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       <div className="block sm:flex">
                         <div className="min-w-48 mb-4 sm:mb-0">
                           <label htmlFor="users" className="flex text-sm font-medium text-neutral-700">
-                            <UserAddIcon className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
+                            <Icon.UserPlus className="h-5 w-5 text-neutral-500 ltr:mr-2 rtl:ml-2" />{" "}
                             {t("attendees")}
                           </label>
                         </div>
@@ -1084,7 +1069,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         type="button"
                         data-testid="show-advanced-settings"
                         className="flex w-full">
-                        <ChevronRightIcon
+                        <Icon.ChevronRight
                           className={`${
                             advancedSettingsVisible ? "rotate-90 transform" : ""
                           } ml-auto h-5 w-5 text-neutral-500`}
@@ -1229,7 +1214,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                         {t("edit")}
                                       </Button>
                                       <button type="button" onClick={() => removeCustom(idx)}>
-                                        <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
+                                        <Icon.X className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
                                       </button>
                                     </div>
                                   </div>
@@ -1243,7 +1228,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                   }}
                                   color="secondary"
                                   type="button"
-                                  StartIcon={PlusIcon}>
+                                  StartIcon={Icon.Plus}>
                                   {t("add_input")}
                                 </Button>
                               </li>
@@ -1369,7 +1354,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                           }}
                                           type="button"
                                           className="text-md flex items-center border border-gray-300 px-2 py-1 text-sm font-medium text-gray-700 ltr:rounded-r-sm ltr:border-l-0 rtl:rounded-l-sm rtl:border-r-0">
-                                          <DocumentDuplicateIcon className="w-6 p-1 text-neutral-500" />
+                                          <Icon.Copy className="w-6 p-1 text-neutral-500" />
                                         </Button>
                                       </Tooltip>
                                     </div>
@@ -1425,7 +1410,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               return (
                                 <Select
                                   isSearchable={false}
-                                  className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                                  className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                                   onChange={(val) => {
                                     formMethods.setValue(
                                       "slotInterval",
@@ -1477,14 +1462,14 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                         <div className="inline-flex">
                                           <input
                                             type="number"
-                                            className="block w-16 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                                            className="block w-16 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                                             placeholder="30"
                                             {...formMethods.register("periodDays", { valueAsNumber: true })}
                                             defaultValue={eventType.periodDays || 30}
                                           />
                                           <select
                                             id=""
-                                            className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none sm:text-sm"
+                                            className="block w-full rounded-sm border-gray-300 py-2 pl-3 pr-10 text-base text-sm focus:outline-none"
                                             {...formMethods.register("periodCountCalendarDays")}
                                             defaultValue={eventType.periodCountCalendarDays ? "1" : "0"}>
                                             <option value="1">{t("calendar_days")}</option>
@@ -1558,7 +1543,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                     return (
                                       <Select
                                         isSearchable={false}
-                                        className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                                        className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                                         onChange={(val) => {
                                           if (val) onChange(val.value);
                                         }}
@@ -1596,7 +1581,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                     return (
                                       <Select
                                         isSearchable={false}
-                                        className="block w-full min-w-0 flex-1 rounded-sm sm:text-sm"
+                                        className="block w-full min-w-0 flex-1 rounded-sm text-sm"
                                         onChange={(val) => {
                                           if (val) onChange(val.value);
                                         }}
@@ -1690,7 +1675,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                                     </label>
                                                     <input
                                                       type="number"
-                                                      className="focus:border-primary-500 focus:ring-primary-500 py- block  w-20 rounded-sm border-gray-300 [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                                                      className="focus:border-primary-500 focus:ring-primary-500 py- block  w-20 rounded-sm border-gray-300 text-sm [appearance:textfield] ltr:mr-2 rtl:ml-2"
                                                       placeholder={`${defaultSeatsPro}`}
                                                       min={minSeats}
                                                       {...formMethods.register("seatsPerTimeSlot", {
@@ -1711,7 +1696,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                                     <Select
                                                       isSearchable={false}
                                                       classNamePrefix="react-select"
-                                                      className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-auto rounded-sm border border-gray-300 sm:text-sm "
+                                                      className="react-select-container focus:border-primary-500 focus:ring-primary-500 block w-full min-w-0 flex-auto rounded-sm border border-gray-300 text-sm "
                                                       onChange={(val) => {
                                                         if (!val) {
                                                           return;
@@ -1816,7 +1801,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                                 min="0.5"
                                                 type="number"
                                                 required
-                                                className="block w-full rounded-sm border-gray-300 pl-2 pr-12 sm:text-sm"
+                                                className="block w-full rounded-sm border-gray-300 pl-2 pr-12 text-sm"
                                                 placeholder="Price"
                                                 onChange={(e) => {
                                                   field.onChange(e.target.valueAsNumber * 100);
@@ -1826,7 +1811,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                             )}
                                           />
                                           <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
-                                            <span className="text-gray-500 sm:text-sm" id="duration">
+                                            <span className="text-sm text-gray-500" id="duration">
                                               {new Intl.NumberFormat("en", {
                                                 style: "currency",
                                                 currency: currency,
@@ -1917,7 +1902,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   target="_blank"
                   rel="noreferrer"
                   className="text-md inline-flex items-center rounded-sm px-2 py-1 text-sm font-medium text-neutral-700 hover:bg-gray-200 hover:text-gray-900">
-                  <ExternalLinkIcon
+                  <Icon.ExternalLink
                     className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2"
                     aria-hidden="true"
                   />
@@ -1930,7 +1915,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   }}
                   type="button"
                   className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-                  <LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                  <Icon.Link className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                   {t("copy_link")}
                 </button>
                 {hashedLinkVisible && (
@@ -1945,7 +1930,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     }}
                     type="button"
                     className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
-                    <LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                    <Icon.Link className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                     {t("copy_private_link")}
                   </button>
                 )}
@@ -1953,12 +1938,12 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900"
                   eventTypeId={eventType.id}
                 />
-                {/* This will only show if the user is not a member (ADMIN,OWNER) and if there is no current membership 
+                {/* This will only show if the user is not a member (ADMIN,OWNER) and if there is no current membership
                       - meaning you are within an eventtype that does not belong to a team */}
                 {(props.currentUserMembership?.role !== "MEMBER" || !props.currentUserMembership) && (
                   <Dialog>
                     <DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-red-500 hover:bg-gray-200">
-                      <TrashIcon className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
+                      <Icon.Trash className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
                       {t("delete")}
                     </DialogTrigger>
                     <ConfirmationDialogContent
@@ -1994,7 +1979,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   <div className="inline-block transform rounded-sm bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
                     <div className="mb-4 sm:flex sm:items-start">
                       <div className="bg-secondary-100 mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
-                        <PlusIcon className="text-primary-600 h-6 w-6" />
+                        <Icon.Plus className="text-primary-600 h-6 w-6" />
                       </div>
                       <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                         <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-title">

apps/web/pages/event-types/index.tsx

@@ -1,17 +1,3 @@
-import { CalendarIcon } from "@heroicons/react/outline";
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  ClipboardCopyIcon,
-  DotsHorizontalIcon,
-  DuplicateIcon,
-  ExternalLinkIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-  UploadIcon,
-  UsersIcon,
-} from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import { Trans } from "next-i18next";
 import Head from "next/head";
@@ -33,6 +19,7 @@ import Dropdown, {
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { withQuery } from "@lib/QueryCell";
@@ -230,15 +217,15 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 {types.length > 1 && !type.$disabled && (
                   <>
                     <button
-                      className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
+                      className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 items-center justify-center rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:flex"
                       onClick={() => moveEventType(index, -1)}>
-                      <ArrowUpIcon />
+                      <Icon.ArrowUp className="h-5 w-5" />
                     </button>
 
                     <button
-                      className="invisible absolute left-1/2 mt-8 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
+                      className="invisible absolute left-1/2 mt-8 -ml-4 hidden h-7 w-7 scale-0 items-center  justify-center rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:flex"
                       onClick={() => moveEventType(index, 1)}>
-                      <ArrowDownIcon />
+                      <Icon.ArrowDown className="h-5 w-5" />
                     </button>
                   </>
                 )}
@@ -264,76 +251,77 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         type.$disabled && "pointer-events-none cursor-not-allowed"
                       )}>
                       <Tooltip side="top" content={t("preview") as string}>
-                        <a
-                          href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}
+                        <Button
                           target="_blank"
                           rel="noreferrer"
-                          className={classNames("btn-icon appearance-none", type.$disabled && " opacity-30")}>
-                          <ExternalLinkIcon
-                            className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
-                          />
-                        </a>
+                          type="button"
+                          size="icon"
+                          color="minimal"
+                          className={classNames(!type.$disabled && "group-hover:text-black")}
+                          StartIcon={Icon.ExternalLink}
+                          href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}
+                        />
                       </Tooltip>
 
                       <Tooltip side="top" content={t("copy_link") as string}>
-                        <button
+                        <Button
+                          type="button"
+                          size="icon"
+                          color="minimal"
+                          className={classNames(type.$disabled && " opacity-30")}
+                          StartIcon={Icon.Link}
                           onClick={() => {
                             showToast(t("link_copied"), "success");
                             navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
                           }}
-                          className={classNames("btn-icon", type.$disabled && " opacity-30")}>
-                          <LinkIcon
-                            className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
-                          />
-                        </button>
+                        />
                       </Tooltip>
                     </div>
                     <Dropdown>
-                      <DropdownMenuTrigger
-                        className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
-                        data-testid={"event-type-options-" + type.id}>
-                        <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                      <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
+                        <Button
+                          type="button"
+                          size="icon"
+                          color="minimal"
+                          className={classNames(type.$disabled && " opacity-30")}
+                          StartIcon={Icon.MoreHorizontal}
+                        />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem className="outline-none">
                           <Link href={"/event-types/" + type.id} passHref={true}>
                             <Button
                               type="button"
                               size="sm"
+                              disabled={type.$disabled}
                               color="minimal"
-                              className={classNames(
-                                "w-full rounded-none",
-                                type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
-                              )}
-                              StartIcon={PencilIcon}>
+                              StartIcon={Icon.Edit2}>
                               {t("edit") as string}
                             </Button>
                           </Link>
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem className="outline-none">
                           <Button
                             type="button"
                             color="minimal"
                             size="sm"
-                            className={classNames(
-                              "w-full rounded-none",
-                              type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
-                            )}
+                            disabled={type.$disabled}
                             data-testid={"event-type-duplicate-" + type.id}
-                            StartIcon={DuplicateIcon}
+                            StartIcon={Icon.Copy}
                             onClick={() => openModal(group, type)}>
                             {t("duplicate") as string}
                           </Button>
                         </DropdownMenuItem>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem className="outline-none">
                           <EmbedButton
-                            dark
+                            StartIcon={Icon.Code}
                             className={classNames(
                               "w-full rounded-none",
                               type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
                             )}
-                            eventTypeId={type.id}
-                          />
+                            eventTypeId={type.id}>
+                            {t("embed")}
+                          </EmbedButton>
                         </DropdownMenuItem>
                         <DropdownMenuSeparator className="h-px bg-gray-200" />
                         {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
@@ -346,7 +334,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               }}
                               color="warn"
                               size="sm"
-                              StartIcon={TrashIcon}
+                              StartIcon={Icon.Trash}
                               className="w-full rounded-none">
                               {t("delete") as string}
                             </Button>
@@ -359,31 +347,37 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
               </div>
               <div className="mr-5 flex flex-shrink-0 sm:hidden">
                 <Dropdown>
-                  <DropdownMenuTrigger className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900">
-                    <DotsHorizontalIcon className="h-5 w-5 group-hover:text-gray-800" />
+                  <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
+                    <Button
+                      type="button"
+                      size="icon"
+                      color="minimal"
+                      className={classNames(type.$disabled && " opacity-30")}
+                      StartIcon={Icon.MoreHorizontal}
+                    />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent portalled>
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="outline-none">
                       <Link href={`${CAL_URL}/${group.profile.slug}/${type.slug}`}>
-                        <a target="_blank">
-                          <Button
-                            color="minimal"
-                            size="sm"
-                            StartIcon={ExternalLinkIcon}
-                            className="w-full rounded-none">
-                            {t("preview") as string}
-                          </Button>
-                        </a>
+                        <Button
+                          rel="noreferrer"
+                          target="_blank"
+                          color="minimal"
+                          size="sm"
+                          StartIcon={Icon.ExternalLink}
+                          className="w-full rounded-none">
+                          {t("preview") as string}
+                        </Button>
                       </Link>
                     </DropdownMenuItem>
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="outline-none">
                       <Button
                         type="button"
                         color="minimal"
                         size="sm"
                         className="w-full rounded-none text-left"
                         data-testid={"event-type-duplicate-" + type.id}
-                        StartIcon={ClipboardCopyIcon}
+                        StartIcon={Icon.Clipboard}
                         onClick={() => {
                           navigator.clipboard.writeText(`${CAL_URL}/${group.profile.slug}/${type.slug}`);
                           showToast(t("link_copied"), "success");
@@ -392,14 +386,14 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                       </Button>
                     </DropdownMenuItem>
                     {isNativeShare ? (
-                      <DropdownMenuItem>
+                      <DropdownMenuItem className="outline-none">
                         <Button
                           type="button"
                           color="minimal"
                           size="sm"
                           className="w-full rounded-none"
                           data-testid={"event-type-duplicate-" + type.id}
-                          StartIcon={UploadIcon}
+                          StartIcon={Icon.Upload}
                           onClick={() => {
                             navigator
                               .share({
@@ -414,31 +408,31 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         </Button>
                       </DropdownMenuItem>
                     ) : null}
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="outline-none">
                       <Button
                         type="button"
                         size="sm"
                         href={"/event-types/" + type.id}
                         color="minimal"
                         className="w-full rounded-none"
-                        StartIcon={PencilIcon}>
+                        StartIcon={Icon.Edit2}>
                         {t("edit") as string}
                       </Button>
                     </DropdownMenuItem>
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="outline-none">
                       <Button
                         type="button"
                         color="minimal"
                         size="sm"
                         className="w-full rounded-none"
                         data-testid={"event-type-duplicate-" + type.id}
-                        StartIcon={DuplicateIcon}
+                        StartIcon={Icon.Copy}
                         onClick={() => openModal(group, type)}>
                         {t("duplicate") as string}
                       </Button>
                     </DropdownMenuItem>
                     <DropdownMenuSeparator className="h-px bg-gray-200" />
-                    <DropdownMenuItem>
+                    <DropdownMenuItem className="outline-none">
                       <Button
                         onClick={() => {
                           setDeleteDialogOpen(true);
@@ -446,7 +440,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         }}
                         color="warn"
                         size="sm"
-                        StartIcon={TrashIcon}
+                        StartIcon={Icon.Trash}
                         className="w-full rounded-none">
                         {t("delete") as string}
                       </Button>
@@ -499,7 +493,7 @@ const EventTypeListHeading = ({ profile, membershipCount }: EventTypeListHeading
             <Link href="/settings/teams">
               <a>
                 <Badge variant="gray">
-                  <UsersIcon className="mr-1 -mt-px inline h-3 w-3" />
+                  <Icon.Users className="mr-1 -mt-px inline h-3 w-3" />
                   {membershipCount}
                 </Badge>
               </a>
@@ -523,7 +517,7 @@ const CreateFirstEventTypeView = () => {
 
   return (
     <EmptyScreen
-      Icon={CalendarIcon}
+      Icon={Icon.Calendar}
       headline={t("new_event_type_heading")}
       description={t("new_event_type_description")}
     />

apps/web/pages/getting-started.tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Prisma } from "@prisma/client";
 import classnames from "classnames";
@@ -20,6 +19,7 @@ import { fetchUsername } from "@calcom/lib/fetchUsername";
 import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { Form } from "@calcom/ui/form/fields";
 
 import { getSession } from "@lib/auth";
@@ -323,7 +323,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="token"
                   placeholder={t("access_token")}
                   required
-                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
                 />
                 <Button type="submit" className="mt-1 ml-4 h-10">
                   {t("import")}
@@ -354,7 +354,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   placeholder={t("your_name")}
                   defaultValue={props.user.name ?? enteredName}
                   required
-                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
                 />
               </fieldset>
 
@@ -372,7 +372,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   id="timeZone"
                   value={selectedTimeZone}
                   onChange={({ value }) => setSelectedTimeZone(value)}
-                  className="mt-1 block w-full rounded-md border-gray-300 focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                  className="mt-1 block w-full rounded-md border-gray-300 text-sm focus:border-blue-500 focus:ring-blue-500"
                 />
               </fieldset>
             </section>
@@ -448,7 +448,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
           <section>
             <Schedule name="schedule" />
             <footer className="flex flex-col space-y-6 py-6 sm:mx-auto sm:w-full">
-              <Button className="justify-center" EndIcon={ArrowRightIcon} type="submit">
+              <Button className="justify-center" EndIcon={Icon.ArrowRight} type="submit">
                 {t("continue")}
               </Button>
             </footer>
@@ -478,7 +478,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 placeholder={t("your_name")}
                 defaultValue={props.user.name || enteredName}
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
               />
             </fieldset>
             <fieldset>
@@ -491,7 +491,7 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                 name="bio"
                 id="bio"
                 required
-                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm"
+                className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-500 focus:outline-none focus:ring-neutral-500"
                 defaultValue={props.user.bio || undefined}
               />
               <p className="mt-2 text-sm leading-tight text-gray-500 dark:text-white">
@@ -584,7 +584,6 @@ export default function Onboarding(props: inferSSRProps<typeof getServerSideProp
                   className="justify-center"
                   disabled={isSubmitting}
                   onClick={debouncedHandleConfirmStep}
-                  EndIcon={ArrowRightIcon}
                   data-testid={`continue-button-${currentStep}`}>
                   {steps[currentStep].confirmText}
                 </Button>

apps/web/pages/sandbox/Button.tsx

@@ -1,7 +1,7 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import React from "react";
 
 import { Button, ButtonBaseProps } from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { sandboxPage } from ".";
 
@@ -31,8 +31,8 @@ const page = sandboxPage(function ButtonPage() {
     // { href: "/staging" },
     // { href: "/staging", disabled: true },
 
-    { StartIcon: PlusIcon },
-    { EndIcon: PlusIcon },
+    { StartIcon: Icon.Plus },
+    { EndIcon: Icon.Plus },
   ];
   return (
     <>

apps/web/pages/settings/billing.tsx

@@ -1,10 +1,10 @@
-import { ExternalLinkIcon } from "@heroicons/react/solid";
 import { useState } from "react";
 import { ReactNode } from "react";
 import { HelpScout, useChat } from "react-live-chat-loader";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -46,7 +46,7 @@ export default function Billing() {
               className="mb-4">
               <form method="POST" action="/api/upgrade">
                 <Button type="submit">
-                  {t("upgrade_now")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
+                  {t("upgrade_now")} <Icon.ExternalLink className="ml-2 h-4 w-4" />
                 </Button>
               </form>
             </Card>
@@ -55,7 +55,7 @@ export default function Billing() {
           <Card title={t("view_and_manage_billing_details")} description={t("view_and_edit_billing_details")}>
             <form method="POST" action="/api/integrations/stripepayment/portal">
               <Button type="submit" color="secondary">
-                {t("go_to_billing_portal")} <ExternalLinkIcon className="ml-1 h-4 w-4" />
+                {t("go_to_billing_portal")} <Icon.ExternalLink className="ml-2 h-4 w-4" />
               </Button>
             </form>
           </Card>

apps/web/pages/settings/profile.tsx

@@ -1,4 +1,3 @@
-import { TrashIcon } from "@heroicons/react/solid";
 import crypto from "crypto";
 import { GetServerSidePropsContext } from "next";
 import { signOut } from "next-auth/react";
@@ -14,6 +13,7 @@ import { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Icon } from "@calcom/ui/Icon";
 
 import { withQuery } from "@lib/QueryCell";
 import { asStringOrNull, asStringOrUndefined } from "@lib/asStringOrNull";
@@ -239,7 +239,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     autoComplete="given-name"
                     placeholder={t("your_name")}
                     required
-                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
                     defaultValue={user.name || undefined}
                   />
                 </div>
@@ -255,7 +255,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     name="email"
                     id="email"
                     placeholder={t("your_email")}
-                    className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
                     defaultValue={user.email}
                   />
                   <p className="mt-2 text-sm text-gray-500" id="email-description">
@@ -276,7 +276,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     placeholder={t("little_something_about")}
                     rows={3}
                     defaultValue={user.bio || undefined}
-                    className="mt-1 block w-full rounded-sm border-gray-300 focus:border-neutral-800 focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border-gray-300 text-sm focus:border-neutral-800 focus:ring-neutral-800"
                   />
                 </div>
               </div>
@@ -294,7 +294,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     name="avatar"
                     id="avatar"
                     placeholder="URL"
-                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 focus:border-neutral-800 focus:outline-none focus:ring-neutral-800 sm:text-sm"
+                    className="mt-1 block w-full rounded-sm border border-gray-300 px-3 py-2 text-sm focus:border-neutral-800 focus:outline-none focus:ring-neutral-800"
                     defaultValue={imageSrc}
                   />
                   <div className="flex items-center px-5">
@@ -329,7 +329,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="languageSelect"
                     value={selectedLanguage || props.localeProp}
                     onChange={(v) => v && setSelectedLanguage(v)}
-                    className="mt-1 block w-full rounded-sm capitalize  sm:text-sm"
+                    className="mt-1 block w-full rounded-sm text-sm  capitalize"
                     options={localeOptions}
                   />
                 </div>
@@ -343,7 +343,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="timeZone"
                     value={selectedTimeZone}
                     onChange={(v) => v && setSelectedTimeZone(v)}
-                    className="mt-1 block w-full rounded-sm sm:text-sm"
+                    className="mt-1 block w-full rounded-sm text-sm"
                   />
                 </div>
               </div>
@@ -356,7 +356,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="timeFormatSelect"
                     value={selectedTimeFormat || user.timeFormat}
                     onChange={(v) => v && setSelectedTimeFormat(v)}
-                    className="mt-1 block w-full rounded-sm  capitalize  sm:text-sm"
+                    className="mt-1 block w-full rounded-sm  text-sm  capitalize"
                     options={timeFormatOptions}
                   />
                 </div>
@@ -370,7 +370,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     id="weekStart"
                     value={selectedWeekStartDay}
                     onChange={(v) => v && setSelectedWeekStartDay(v)}
-                    className="mt-1 block w-full rounded-sm capitalize sm:text-sm"
+                    className="mt-1 block w-full rounded-sm text-sm capitalize"
                     options={[
                       { value: "Sunday", label: nameOfDay(props.localeProp, 0) },
                       { value: "Monday", label: nameOfDay(props.localeProp, 1) },
@@ -413,7 +413,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                     defaultValue={selectedTheme || themeOptions[0]}
                     value={selectedTheme || themeOptions[0]}
                     onChange={(v) => v && setSelectedTheme(v)}
-                    className="mt-1 block w-full rounded-sm sm:text-sm"
+                    className="mt-1 block w-full rounded-sm text-sm"
                     options={themeOptions}
                   />
                 </div>
@@ -471,7 +471,7 @@ function SettingsView(props: ComponentProps<typeof Settings> & { localeProp: str
                       <Button
                         type="button"
                         color="warn"
-                        StartIcon={TrashIcon}
+                        StartIcon={Icon.Trash}
                         className="border-2 border-red-700 text-red-700"
                         data-testid="delete-account">
                         {t("delete_account")}

apps/web/pages/settings/teams/[id]/index.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
@@ -8,6 +7,7 @@ import { trpc } from "@calcom/trpc/react";
 import { SkeletonAvatar, SkeletonText } from "@calcom/ui";
 import { Alert } from "@calcom/ui/Alert";
 import { Button } from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import SAMLConfiguration from "@ee/components/saml/Configuration";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -158,7 +158,7 @@ export function TeamSettingsPage() {
                           <Button
                             type="button"
                             color="secondary"
-                            StartIcon={PlusIcon}
+                            StartIcon={Icon.Plus}
                             onClick={() => setShowMemberInvitationModal(true)}
                             data-testid="new-member-button">
                             {t("new_member")}

apps/web/pages/settings/teams/index.tsx

@@ -1,4 +1,3 @@
-import { PlusIcon, UserGroupIcon } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { useSession } from "next-auth/react";
 import { Trans } from "next-i18next";
@@ -9,6 +8,7 @@ import { trpc } from "@calcom/trpc/react";
 import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import EmptyScreen from "@calcom/ui/EmptyScreen";
+import { Icon } from "@calcom/ui/Icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -62,9 +62,9 @@ function Teams() {
           <Button
             disabled={isFreePlan}
             type="button"
-            className="btn btn-white"
+            color="secondary"
             onClick={() => setShowCreateTeamModal(true)}>
-            <PlusIcon className="inline-block h-3.5 w-3.5 text-gray-700 group-hover:text-black ltr:mr-2 rtl:ml-2" />
+            <Icon.Plus className="inline-block h-3.5 w-3.5 text-gray-700 group-hover:text-black ltr:mr-2 rtl:ml-2" />
             {t("new_team")}
           </Button>
         </div>
@@ -77,11 +77,7 @@ function Teams() {
         )}
         {isLoading && <SkeletonLoaderTeamList />}
         {!teams.length && !isLoading && (
-          <EmptyScreen
-            Icon={UserGroupIcon}
-            headline={t("no_teams")}
-            description={t("no_teams_description")}
-          />
+          <EmptyScreen Icon={Icon.Users} headline={t("no_teams")} description={t("no_teams_description")} />
         )}
         {teams.length > 0 && <TeamList teams={teams} />}
       </>

apps/web/pages/success.tsx

@@ -1,5 +1,3 @@
-import { CheckIcon } from "@heroicons/react/outline";
-import { ChevronLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import { createEvent } from "ics";
@@ -27,6 +25,7 @@ import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { localStorage } from "@calcom/lib/webstorage";
 import { Prisma } from "@calcom/prisma/client";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 import { EmailInput } from "@calcom/ui/form/fields";
 
 import { asStringOrThrow } from "@lib/asStringOrNull";
@@ -125,7 +124,7 @@ function RedirectionToast({ url }: { url: string }) {
                     window.clearInterval(timerRef.current as number);
                   }}
                   className="-mr-1 flex rounded-md p-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-white">
-                  <XIcon className="h-6 w-6 text-white" />
+                  <Icon.X className="h-6 w-6 text-white" />
                 </button>
               </div>
             </div>
@@ -260,7 +259,7 @@ export default function Success(props: SuccessProps) {
         <div className="mt-2 ml-4 -mb-4">
           <Link href={eventType.recurringEvent?.count ? "/bookings/recurring" : "/bookings/upcoming"}>
             <a className="mt-2 inline-flex px-1 py-2 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800">
-              <ChevronLeftIcon className="h-5 w-5" /> {t("back_to_bookings")}
+              <Icon.ChevronLeft className="h-5 w-5" /> {t("back_to_bookings")}
             </a>
           </Link>
         </div>
@@ -301,10 +300,10 @@ export default function Success(props: SuccessProps) {
                       <img src={giphyImage} alt="Gif from Giphy" />
                     )}
                     {!giphyImage && !needsConfirmation && !isCancelled && (
-                      <CheckIcon className="h-8 w-8 text-green-600" />
+                      <Icon.Check className="h-8 w-8 text-green-600" />
                     )}
-                    {needsConfirmation && !isCancelled && <ClockIcon className="h-8 w-8 text-green-600" />}
-                    {isCancelled && <XIcon className="h-8 w-8 text-red-600" />}
+                    {needsConfirmation && !isCancelled && <Icon.Clock className="h-8 w-8 text-green-600" />}
+                    {isCancelled && <Icon.X className="h-8 w-8 text-red-600" />}
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3

apps/web/pages/team/[slug].tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { UserPlan } from "@prisma/client";
 import classNames from "classnames";
 import { GetServerSidePropsContext } from "next";
@@ -10,6 +9,7 @@ import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { CAL_URL } from "@calcom/lib/constants";
 import { getTeamWithMembers } from "@calcom/lib/server/queries/teams";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
@@ -51,7 +51,7 @@ function TeamPage({ team }: TeamPageProps) {
             "hover:border-brand group relative rounded-sm border border-neutral-200   dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-600",
             isEmbed ? "" : "bg-white hover:bg-gray-50"
           )}>
-          <ArrowRightIcon className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
+          <Icon.ArrowRight className="absolute right-3 top-3 h-4 w-4 text-black opacity-0 transition-opacity group-hover:opacity-100 dark:text-white" />
           <Link href={`${team.slug}/${type.slug}`}>
             <a className="flex justify-between px-6 py-4">
               <div className="flex-shrink">
@@ -111,7 +111,7 @@ function TeamPage({ team }: TeamPageProps) {
             <aside className="mt-8 text-center dark:text-white">
               <Button
                 color="secondary"
-                EndIcon={ArrowRightIcon}
+                EndIcon={Icon.ArrowRight}
                 href={`/team/${team.slug}?members=1`}
                 shallow={true}>
                 {t("book_a_team_member")}

apps/web/pages/video/meeting-ended/[uid].tsx

@@ -1,13 +1,13 @@
-import { CalendarIcon, XIcon } from "@heroicons/react/outline";
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { NextPageContext } from "next";
 import { getSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -15,6 +15,7 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 import { HeadSeo } from "@components/seo/head-seo";
 
 export default function MeetingUnavailable(props: inferSSRProps<typeof getServerSideProps>) {
+  const { t } = useLocale();
   const router = useRouter();
   // if no booking redirectis to the 404 page
   const emptyBooking = props.booking === null;
@@ -41,7 +42,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                   aria-labelledby="modal-headline">
                   <div>
                     <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                      <XIcon className="h-6 w-6 text-red-600" />
+                      <Icon.X className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -53,7 +54,7 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
-                        <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                        <Icon.Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
                         {dayjs(props.booking.startTime).format(
                           detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
                         )}
@@ -62,8 +63,8 @@ export default function MeetingUnavailable(props: inferSSRProps<typeof getServer
                   </div>
                   <div className="mt-5 text-center sm:mt-6">
                     <div className="mt-5">
-                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
-                        Go back home
+                      <Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
+                        {t("go_back")}
                       </Button>
                     </div>
                   </div>

apps/web/pages/video/meeting-not-started/[uid].tsx

@@ -1,20 +1,21 @@
-import { CalendarIcon, XIcon } from "@heroicons/react/outline";
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { NextPageContext } from "next";
 import { getSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import prisma, { bookingMinimalSelect } from "@calcom/prisma";
 import type { inferSSRProps } from "@calcom/types/inferSSRProps";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
 export default function MeetingNotStarted(props: inferSSRProps<typeof getServerSideProps>) {
+  const { t } = useLocale();
   const router = useRouter();
 
   //if no booking redirectis to the 404 page
@@ -42,7 +43,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                   aria-labelledby="modal-headline">
                   <div>
                     <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                      <XIcon className="h-6 w-6 text-red-600" />
+                      <Icon.X className="h-6 w-6 text-red-600" />
                     </div>
                     <div className="mt-3 text-center sm:mt-5">
                       <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -54,7 +55,7 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                         {props.booking.title}
                       </h2>
                       <p className="text-center text-gray-500">
-                        <CalendarIcon className="mr-1 -mt-1 inline-block h-4 w-4" />
+                        <Icon.Calendar className="mr-1 -mt-1 inline-block h-4 w-4" />
                         {dayjs(props.booking.startTime).format(
                           detectBrowserTimeFormat + ", dddd DD MMMM YYYY"
                         )}
@@ -68,8 +69,8 @@ export default function MeetingNotStarted(props: inferSSRProps<typeof getServerS
                   </div>
                   <div className="mt-5 text-center sm:mt-6">
                     <div className="mt-5">
-                      <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
-                        Go back home
+                      <Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
+                        {t("go_back")}
                       </Button>
                     </div>
                   </div>

apps/web/pages/video/no-meeting-found.tsx

@@ -1,8 +1,6 @@
-import { XIcon } from "@heroicons/react/outline";
-import { ArrowRightIcon } from "@heroicons/react/solid";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
+import { Icon } from "@calcom/ui/Icon";
 
 import { HeadSeo } from "@components/seo/head-seo";
 
@@ -26,7 +24,7 @@ export default function NoMeetingFound() {
                 aria-labelledby="modal-headline">
                 <div>
                   <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
-                    <XIcon className="h-6 w-6 text-red-600" />
+                    <Icon.X className="h-6 w-6 text-red-600" />
                   </div>
                   <div className="mt-3 text-center sm:mt-5">
                     <h3 className="text-lg font-medium leading-6 text-gray-900" id="modal-headline">
@@ -39,7 +37,7 @@ export default function NoMeetingFound() {
                 </div>
                 <div className="mt-5 text-center sm:mt-6">
                   <div className="mt-5">
-                    <Button data-testid="return-home" href="/event-types" EndIcon={ArrowRightIcon}>
+                    <Button data-testid="return-home" href="/event-types" EndIcon={Icon.ArrowRight}>
                       {t("go_back_home")}
                     </Button>
                   </div>