diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 39a1799838..9cfedd73ff 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -2,7 +2,6 @@ import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
 import { EventTypeSetupInfered, FormValues } from "pages/event-types/[type]";
 import { useMemo, useState } from "react";
-import { Loader } from "react-feather";
 import { UseFormReturn } from "react-hook-form";
 
 import { classNames } from "@calcom/lib";
@@ -294,7 +293,7 @@ function EventTypeSingleLayout({
           </Button>
         </div>
       }>
-      <ClientSuspense fallback={<Loader />}>
+      <ClientSuspense fallback={<Icon.FiLoader />}>
         <div className="-mt-2 flex flex-col xl:flex-row xl:space-x-8">
           <div className="hidden xl:block">
             <VerticalTabs
diff --git a/packages/app-store/closecom/pages/setup/index.tsx b/packages/app-store/closecom/pages/setup/index.tsx
index d3c76da6f4..92a8d3886e 100644
--- a/packages/app-store/closecom/pages/setup/index.tsx
+++ b/packages/app-store/closecom/pages/setup/index.tsx
@@ -1,13 +1,12 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { Check, X } from "react-feather";
 import { Controller, useForm } from "react-hook-form";
 import { Toaster } from "react-hot-toast";
 import z from "zod";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button, Form, showToast, TextField } from "@calcom/ui";
+import { Button, Form, showToast, TextField, Icon } from "@calcom/ui";
 
 const formSchema = z.object({
   api_key: z.string(),
@@ -107,7 +106,7 @@ export default function CloseComSetup() {
                     type="submit"
                     loading={testLoading}
                     disabled={testPassed === true}
-                    StartIcon={testPassed !== undefined ? (testPassed ? Check : X) : undefined}
+                    StartIcon={testPassed !== undefined ? (testPassed ? Icon.FiCheck : Icon.FiX) : undefined}
                     className={
                       testPassed !== undefined
                         ? testPassed
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index b2cf69ffb8..adcf486a50 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -1,12 +1,11 @@
 import React from "react";
-import { Icon as FeatherIcon } from "react-feather";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Button, Icon } from "@calcom/ui";
 
 type WorkflowExampleType = {
-  Icon: FeatherIcon;
+  Icon: SVGComponent;
   text: string;
 };
 
@@ -40,7 +39,7 @@ export default function EmptyScreen({
   isLoading,
   showExampleWorkflows,
 }: {
-  IconHeading: SVGComponent | FeatherIcon;
+  IconHeading: SVGComponent;
   headline: string;
   description: string | React.ReactElement;
   buttonText?: string;
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index bd341471af..a94d974dbf 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -1,9 +1,9 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { Check } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
+import { Icon } from "@calcom/ui";
 
 import { Maybe } from "@trpc/server";
 
@@ -47,7 +47,7 @@ export function Avatar(props: AvatarProps) {
             size === "lg" ? "h-5 w-5" : "h-2 w-2"
           )}>
           <div className="flex h-full items-center justify-center p-[2px]">
-            {size === "lg" && <Check className="" />}
+            {size === "lg" && <Icon.FiCheck className="" />}
           </div>
         </div>
       )}
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 2da015d269..d6c35bcc57 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -1,7 +1,7 @@
-import { Icon } from "react-feather";
 import { GoPrimitiveDot } from "react-icons/go";
 
 import classNames from "@calcom/lib/classNames";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 
 const badgeClassNameByVariant = {
   default: "bg-orange-100 text-orange-800",
@@ -23,7 +23,7 @@ const classNameBySize = {
 export type BadgeProps = {
   variant: keyof typeof badgeClassNameByVariant;
   size?: keyof typeof classNameBySize;
-  StartIcon?: Icon;
+  StartIcon?: SVGComponent;
   bold?: boolean;
   withDot?: boolean;
   rounded?: boolean;
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 3979602994..c61aba5599 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -1,10 +1,10 @@
 import { cva, VariantProps } from "class-variance-authority";
 import Link, { LinkProps } from "next/link";
 import React, { forwardRef } from "react";
-import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 import { applyStyleToMultipleVariants } from "@calcom/lib/cva";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 import { Tooltip } from "@calcom/ui";
 
 type InferredVariantProps = VariantProps<typeof buttonClasses>;
@@ -13,9 +13,9 @@ export type ButtonBaseProps = {
   /** Action that happens when the button is clicked */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /**Left aligned icon*/
-  StartIcon?: Icon | React.ElementType;
+  StartIcon?: SVGComponent | React.ElementType;
   /**Right aligned icon */
-  EndIcon?: Icon;
+  EndIcon?: SVGComponent;
   shallow?: boolean;
   /**Tool tip used when icon size is set to small */
   tooltip?: string;
diff --git a/packages/ui/components/form/inputs/HintOrErrors.tsx b/packages/ui/components/form/inputs/HintOrErrors.tsx
index e66e55351b..5a8777b349 100644
--- a/packages/ui/components/form/inputs/HintOrErrors.tsx
+++ b/packages/ui/components/form/inputs/HintOrErrors.tsx
@@ -1,4 +1,3 @@
-import { X, Circle, Check } from "react-feather";
 import { FieldValues, useFormContext } from "react-hook-form";
 
 // TODO: Refactor import once V1 migration has happened
@@ -50,12 +49,12 @@ export function HintsOrErrors<T extends FieldValues = FieldValues>(props: {
                 className={error !== undefined ? (submitted ? "text-red-700" : "") : "text-green-600"}>
                 {error !== undefined ? (
                   submitted ? (
-                    <X size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
+                    <Icon.FiX size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
                   ) : (
-                    <Circle fill="currentColor" size="5" className="mr-2 inline-block" />
+                    <Icon.FiCircle fill="currentColor" size="5" className="mr-2 inline-block" />
                   )
                 ) : (
-                  <Check size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
+                  <Icon.FiCheck size="12" strokeWidth="3" className="mr-2 -ml-1 inline-block" />
                 )}
                 {t(`${fieldName}_hint_${key}`)}
               </li>
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 9b1508248e..19761240e9 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, ReactElement, ReactNode, Ref, useCallback, useId, useState } from "react";
-import { Eye, EyeOff } from "react-feather";
 import { FieldValues, FormProvider, SubmitHandler, useFormContext, UseFormReturn } from "react-hook-form";
 
 import classNames from "@calcom/lib/classNames";
@@ -211,9 +210,9 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
               type="button"
               onClick={() => toggleIsPasswordVisible()}>
               {isPasswordVisible ? (
-                <EyeOff className="h-4 stroke-[2.5px]" />
+                <Icon.FiEyeOff className="h-4 stroke-[2.5px]" />
               ) : (
-                <Eye className="h-4 stroke-[2.5px]" />
+                <Icon.FiEye className="h-4 stroke-[2.5px]" />
               )}
               <span className="sr-only">{textLabel}</span>
             </button>
diff --git a/packages/ui/v2/core/Dialog.tsx b/packages/ui/v2/core/Dialog.tsx
index ea996408b7..5af67c7e00 100644
--- a/packages/ui/v2/core/Dialog.tsx
+++ b/packages/ui/v2/core/Dialog.tsx
@@ -1,10 +1,10 @@
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useRouter } from "next/router";
 import React, { ReactNode, useState } from "react";
-import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 
 import { Button, ButtonProps } from "../../components/button";
 
@@ -58,7 +58,7 @@ type DialogContentProps = React.ComponentProps<typeof DialogPrimitive["Content"]
   description?: string | JSX.Element | undefined;
   closeText?: string;
   actionDisabled?: boolean;
-  Icon?: Icon;
+  Icon?: SVGComponent;
 };
 
 export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
diff --git a/packages/ui/v2/core/Dropdown.tsx b/packages/ui/v2/core/Dropdown.tsx
index 3c53aeae8f..33f618e1bf 100644
--- a/packages/ui/v2/core/Dropdown.tsx
+++ b/packages/ui/v2/core/Dropdown.tsx
@@ -2,9 +2,9 @@ import { CheckCircleIcon } from "@heroicons/react/outline";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import Link from "next/link";
 import { ComponentProps, forwardRef } from "react";
-import { Icon } from "react-feather";
 
 import { classNames } from "@calcom/lib";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 
 export const Dropdown = DropdownMenuPrimitive.Root;
 
@@ -98,8 +98,8 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
 type DropdownItemProps = {
   children: React.ReactNode;
   color?: "destructive";
-  StartIcon?: Icon;
-  EndIcon?: Icon;
+  StartIcon?: SVGComponent;
+  EndIcon?: SVGComponent;
   href?: string;
   disabled?: boolean;
 } & ButtonOrLinkProps;
diff --git a/packages/ui/v2/core/EmptyScreen.tsx b/packages/ui/v2/core/EmptyScreen.tsx
index 07962a6cf6..e04056dd24 100644
--- a/packages/ui/v2/core/EmptyScreen.tsx
+++ b/packages/ui/v2/core/EmptyScreen.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import { Icon } from "react-feather";
 import { IconType } from "react-icons";
 
 import { SVGComponent } from "@calcom/types/SVGComponent";
@@ -14,7 +13,7 @@ export default function EmptyScreen({
   buttonOnClick,
   buttonRaw,
 }: {
-  Icon: SVGComponent | Icon | IconType;
+  Icon: SVGComponent | IconType;
   headline: string;
   description: string | React.ReactElement;
   buttonText?: string;
diff --git a/packages/ui/v2/core/apps/Categories.tsx b/packages/ui/v2/core/apps/Categories.tsx
index 1db46bdd5c..28f662e867 100644
--- a/packages/ui/v2/core/apps/Categories.tsx
+++ b/packages/ui/v2/core/apps/Categories.tsx
@@ -1,7 +1,7 @@
 import Link from "next/link";
-import { ArrowRight } from "react-feather";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon } from "@calcom/ui";
 
 import { SkeletonText } from "../skeleton";
 import Slider from "./Slider";
@@ -44,7 +44,7 @@ export default function AppStoreCategories({
                 )}
                 <p className="text-sm text-gray-500">
                   {isLocaleReady ? t("number_apps", { count: category.count }) : <SkeletonText invisible />}{" "}
-                  <ArrowRight className="inline-block h-4 w-4" />
+                  <Icon.FiArrowRight className="inline-block h-4 w-4" />
                 </p>
               </div>
             </a>
diff --git a/packages/ui/v2/core/banner.tsx b/packages/ui/v2/core/banner.tsx
index d7ae94215c..b2b4bac42a 100644
--- a/packages/ui/v2/core/banner.tsx
+++ b/packages/ui/v2/core/banner.tsx
@@ -1,7 +1,7 @@
 import { MouseEvent, useState } from "react";
-import { Icon } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
+import { SVGComponent } from "@calcom/types/SVGComponent";
 
 const stylesByVariant = {
   neutral: { background: "bg-gray-100 ", text: "!text-gray-800", hover: "hover:!bg-gray-200" },
@@ -14,7 +14,7 @@ export type BannerProps = {
   description?: string;
   variant: keyof typeof stylesByVariant;
   errorMessage?: string;
-  Icon?: Icon;
+  Icon?: SVGComponent;
   onDismiss: (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
   onAction?: (event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => void;
   actionText?: string;
diff --git a/packages/ui/v2/core/form/DatePicker.tsx b/packages/ui/v2/core/form/DatePicker.tsx
index 0884fa9b3b..c87fa16611 100644
--- a/packages/ui/v2/core/form/DatePicker.tsx
+++ b/packages/ui/v2/core/form/DatePicker.tsx
@@ -1,9 +1,9 @@
 import "react-calendar/dist/Calendar.css";
 import "react-date-picker/dist/DatePicker.css";
 import PrimitiveDatePicker from "react-date-picker/dist/entry.nostyle";
-import { Calendar } from "react-feather";
 
 import classNames from "@calcom/lib/classNames";
+import { Icon } from "@calcom/ui";
 
 type Props = {
   date: Date;
@@ -22,7 +22,7 @@ const DatePicker = ({ minDate, disabled, date, onDatesChange, className }: Props
       )}
       calendarClassName="rounded-md"
       clearIcon={null}
-      calendarIcon={<Calendar className="h-5 w-5 rounded-md text-gray-500" />}
+      calendarIcon={<Icon.FiCalendar className="h-5 w-5 rounded-md text-gray-500" />}
       value={date}
       minDate={minDate}
       disabled={disabled}
diff --git a/packages/ui/v2/core/notifications.tsx b/packages/ui/v2/core/notifications.tsx
index 30faf30bbe..ec260b2466 100644
--- a/packages/ui/v2/core/notifications.tsx
+++ b/packages/ui/v2/core/notifications.tsx
@@ -1,7 +1,8 @@
 import classNames from "classnames";
-import { Check, Info } from "react-feather";
 import toast from "react-hot-toast";
 
+import { Icon } from "@calcom/ui";
+
 export function showToast(message: string, variant: "success" | "warning" | "error") {
   switch (variant) {
     case "success":
@@ -12,7 +13,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
               "data-testid-toast-success bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
               t.visible && "animate-fade-in-up"
             )}>
-            <Check className="h-4 w-4" />
+            <Icon.FiCheck className="h-4 w-4" />
             <p>{message}</p>
           </div>
         ),
@@ -27,7 +28,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
               "animate-fade-in-up mb-2 flex h-9 items-center space-x-2 rounded-md bg-red-100 p-3 text-sm font-semibold text-red-900 shadow-md",
               t.visible && "animate-fade-in-up"
             )}>
-            <Info className="h-4 w-4" />
+            <Icon.FiInfo className="h-4 w-4" />
             <p>{message}</p>
           </div>
         ),
@@ -42,7 +43,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
               "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
               t.visible && "animate-fade-in-up"
             )}>
-            <Info className="h-4 w-4" />
+            <Icon.FiInfo className="h-4 w-4" />
             <p>{message}</p>
           </div>
         ),
@@ -57,7 +58,7 @@ export function showToast(message: string, variant: "success" | "warning" | "err
               "animate-fade-in-up bg-brand-500 mb-2 flex h-9 items-center space-x-2 rounded-md p-3 text-sm font-semibold text-white shadow-md",
               t.visible && "animate-fade-in-up"
             )}>
-            <Check className="h-4 w-4" />
+            <Icon.FiCheck className="h-4 w-4" />
             <p>{message}</p>
           </div>
         ),