diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 888bffe512..3464ebd118 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -954,7 +954,7 @@ const BookingPage = ({
                     <Button
                       type="button"
                       color="minimal"
-                      size="icon"
+                      variant="icon"
                       tooltip={t("additional_guests")}
                       StartIcon={Icon.FiUserPlus}
                       onClick={() => setGuestToggle(!guestToggle)}
diff --git a/apps/web/components/eventtype/CustomInputTypeForm.tsx b/apps/web/components/eventtype/CustomInputTypeForm.tsx
index ec0c1f466b..44d7b699af 100644
--- a/apps/web/components/eventtype/CustomInputTypeForm.tsx
+++ b/apps/web/components/eventtype/CustomInputTypeForm.tsx
@@ -183,7 +183,7 @@ function RadioInputHandler({
                 {...register(`options.${index}.label` as const, { required: true })}
                 addOnSuffix={
                   <Button
-                    size="icon"
+                    variant="icon"
                     color="minimal"
                     StartIcon={Icon.FiX}
                     onClick={() => {
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index b1c72d6153..15f27a6d61 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -129,7 +129,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
             <Button
               type="button"
               StartIcon={Icon.FiEdit}
-              size="icon"
+              variant="icon"
               color="minimal"
               className="hover:stroke-3 min-w-fit px-0 hover:bg-transparent hover:text-black"
               onClick={() => setShowEventNameTip((old) => !old)}
diff --git a/apps/web/components/eventtype/EventLimitsTab.tsx b/apps/web/components/eventtype/EventLimitsTab.tsx
index 033aa3a0c8..40f9f7a46a 100644
--- a/apps/web/components/eventtype/EventLimitsTab.tsx
+++ b/apps/web/components/eventtype/EventLimitsTab.tsx
@@ -430,7 +430,7 @@ const BookingLimits = () => {
                         }}
                       />
                       <Button
-                        size="icon"
+                        variant="icon"
                         StartIcon={Icon.FiTrash}
                         color="destructive"
                         onClick={() => {
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 1882f487b1..2ae7cddd61 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -208,7 +208,7 @@ function EventTypeSingleLayout({
               <Button
                 color="secondary"
                 target="_blank"
-                size="icon"
+                variant="icon"
                 href={permalink}
                 rel="noreferrer"
                 StartIcon={Icon.FiExternalLink}
@@ -217,7 +217,7 @@ function EventTypeSingleLayout({
 
             <Button
               color="secondary"
-              size="icon"
+              variant="icon"
               StartIcon={Icon.FiLink}
               tooltip={t("copy_link")}
               onClick={() => {
@@ -229,12 +229,12 @@ function EventTypeSingleLayout({
               embedUrl={encodeURIComponent(embedLink)}
               StartIcon={Icon.FiCode}
               color="secondary"
-              size="icon"
+              variant="icon"
               tooltip={t("embed")}
             />
             <Button
               color="secondary"
-              size="icon"
+              variant="icon"
               StartIcon={Icon.FiTrash}
               tooltip={t("delete")}
               disabled={!hasPermsToDelete}
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 952729516c..d72313a99a 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -312,7 +312,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             <Button
                               color="secondary"
                               target="_blank"
-                              size="icon"
+                              variant="icon"
                               href={calLink}
                               StartIcon={Icon.FiExternalLink}
                             />
@@ -321,7 +321,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           <Tooltip content={t("copy_link")}>
                             <Button
                               color="secondary"
-                              size="icon"
+                              variant="icon"
                               StartIcon={Icon.FiLink}
                               onClick={() => {
                                 showToast(t("link_copied"), "success");
@@ -336,7 +336,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               className="radix-state-open:rounded-r-md">
                               <Button
                                 type="button"
-                                size="icon"
+                                variant="icon"
                                 color="secondary"
                                 StartIcon={Icon.FiMoreHorizontal}
                               />
@@ -396,7 +396,12 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                 <div className="min-w-9 mx-5 flex sm:hidden">
                   <Dropdown>
                     <DropdownMenuTrigger asChild data-testid={"event-type-options-" + type.id}>
-                      <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+                      <Button
+                        type="button"
+                        variant="icon"
+                        color="secondary"
+                        StartIcon={Icon.FiMoreHorizontal}
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuPortal>
                       <DropdownMenuContent>
diff --git a/apps/web/pages/settings/my-account/conferencing.tsx b/apps/web/pages/settings/my-account/conferencing.tsx
index 76e7935202..02ed369f60 100644
--- a/apps/web/pages/settings/my-account/conferencing.tsx
+++ b/apps/web/pages/settings/my-account/conferencing.tsx
@@ -91,7 +91,7 @@ const ConferencingLayout = () => {
                   <div>
                     <Dropdown>
                       <DropdownMenuTrigger asChild>
-                        <Button StartIcon={Icon.FiMoreHorizontal} size="icon" color="secondary" />
+                        <Button StartIcon={Icon.FiMoreHorizontal} variant="icon" color="secondary" />
                       </DropdownMenuTrigger>
                       <DropdownMenuContent>
                         <DropdownMenuItem>
diff --git a/apps/web/pages/teams/index.tsx b/apps/web/pages/teams/index.tsx
index 00363b5a64..3694a888a8 100644
--- a/apps/web/pages/teams/index.tsx
+++ b/apps/web/pages/teams/index.tsx
@@ -16,7 +16,7 @@ function Teams() {
       subtitle={t("create_manage_teams_collaborative")}
       CTA={
         <Button
-          size="fab"
+          variant="fab"
           StartIcon={Icon.FiPlus}
           type="button"
           href={`${WEBAPP_URL}/settings/teams/new?returnTo=${WEBAPP_URL}/teams`}>
diff --git a/packages/app-store/ee/routing-forms/components/FormActions.tsx b/packages/app-store/ee/routing-forms/components/FormActions.tsx
index f50ce25bb9..fa245ea4af 100644
--- a/packages/app-store/ee/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/ee/routing-forms/components/FormActions.tsx
@@ -159,7 +159,7 @@ export const FormActionsDropdown = ({ form, children }: { form: RoutingForm; chi
         <DropdownMenuTrigger data-testid="form-dropdown" asChild>
           <Button
             type="button"
-            size="icon"
+            variant="icon"
             color="secondary"
             className={classNames("radix-state-open:rounded-r-md", disabled && "opacity-30")}
             StartIcon={Icon.FiMoreHorizontal}
diff --git a/packages/app-store/ee/routing-forms/components/SingleForm.tsx b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
index 606c02c814..19bc39cf98 100644
--- a/packages/app-store/ee/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/ee/routing-forms/components/SingleForm.tsx
@@ -73,7 +73,7 @@ const Actions = ({
             routingForm={form}
             color="secondary"
             target="_blank"
-            size="icon"
+            variant="icon"
             type="button"
             rel="noreferrer"
             action="preview"
@@ -84,7 +84,7 @@ const Actions = ({
           routingForm={form}
           action="copyLink"
           color="secondary"
-          size="icon"
+          variant="icon"
           type="button"
           StartIcon={Icon.FiLink}
           tooltip={t("copy_link_to_form")}
@@ -96,7 +96,7 @@ const Actions = ({
             routingForm={form}
             action="download"
             color="secondary"
-            size="icon"
+            variant="icon"
             type="button"
             StartIcon={Icon.FiDownload}
           />
@@ -105,7 +105,7 @@ const Actions = ({
           routingForm={form}
           action="embed"
           color="secondary"
-          size="icon"
+          variant="icon"
           StartIcon={Icon.FiCode}
           tooltip={t("embed")}
         />
@@ -114,7 +114,7 @@ const Actions = ({
           routingForm={form}
           action="_delete"
           // className="mr-3"
-          size="icon"
+          variant="icon"
           StartIcon={Icon.FiTrash}
           color="secondary"
           type="button"
diff --git a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
index aa9fa79175..c63f6098e4 100644
--- a/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+++ b/packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
@@ -36,7 +36,7 @@ export default function RoutingForms({
   function NewFormButton() {
     return (
       <FormAction
-        size="fab"
+        variant="fab"
         routingForm={null}
         data-testid="new-routing-form"
         StartIcon={Icon.FiPlus}
@@ -88,7 +88,7 @@ export default function RoutingForms({
                                   target="_blank"
                                   StartIcon={Icon.FiExternalLink}
                                   color="secondary"
-                                  size="icon"
+                                  variant="icon"
                                   disabled={disabled}
                                 />
                               </Tooltip>
@@ -96,7 +96,7 @@ export default function RoutingForms({
                                 routingForm={form}
                                 action="copyLink"
                                 color="secondary"
-                                size="icon"
+                                variant="icon"
                                 StartIcon={Icon.FiLink}
                                 disabled={disabled}
                                 tooltip={t("copy_link_to_form")}
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 328aaebbc8..5c8e745cb7 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -107,7 +107,7 @@ const IntegrationContainer = ({
                     <CollapsibleTrigger>
                       <Button
                         color="secondary"
-                        size="icon"
+                        variant="icon"
                         tooltip={t("edit_keys")}
                         onClick={() => setShowKeys(!showKeys)}>
                         <Icon.FiEdit />
diff --git a/packages/features/apps/components/DisconnectIntegration.tsx b/packages/features/apps/components/DisconnectIntegration.tsx
index d9a31a9554..4bdcf75101 100644
--- a/packages/features/apps/components/DisconnectIntegration.tsx
+++ b/packages/features/apps/components/DisconnectIntegration.tsx
@@ -55,7 +55,8 @@ export default function DisconnectIntegration({
           <Button
             color={buttonProps?.color || "destructive"}
             StartIcon={trashIcon ? Icon.FiTrash : undefined}
-            size={trashIcon && !label ? "icon" : "base"}
+            size="base"
+            variant={trashIcon && !label ? "icon" : "button"}
             disabled={isGlobal}
             {...buttonProps}>
             {label && label}
diff --git a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
index 152b51d8d0..3e7a82d761 100644
--- a/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
+++ b/packages/features/calendars/weeklyview/components/heading/SchedulerHeading.tsx
@@ -30,7 +30,7 @@ export function SchedulerHeading() {
           {/* TODO: i18n label with correct view */}
           <Button
             StartIcon={Icon.FiChevronLeft}
-            size="icon"
+            variant="icon"
             color="secondary"
             aria-label="Previous Week"
             onClick={() => {
@@ -39,7 +39,7 @@ export function SchedulerHeading() {
           />
           <Button
             StartIcon={Icon.FiChevronRight}
-            size="icon"
+            variant="icon"
             color="secondary"
             aria-label="Next Week"
             onClick={() => {
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index f54d4151e7..1b19f5e4d7 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -66,7 +66,7 @@ const ApiKeyListItem = ({
       <div>
         <Dropdown>
           <DropdownMenuTrigger asChild>
-            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+            <Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
           </DropdownMenuTrigger>
 
           <DropdownMenuContent>
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index 284a171e11..5040f281b0 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -164,7 +164,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
         <Button
           data-testid="remove-member-button"
           StartIcon={Icon.FiTrash2}
-          size="icon"
+          variant="icon"
           color="secondary"
           className="h-[36px] w-[36px]"
           onClick={() => {
diff --git a/packages/features/ee/teams/components/MemberListItem.tsx b/packages/features/ee/teams/components/MemberListItem.tsx
index 02dc669c2c..1e1a5c6215 100644
--- a/packages/features/ee/teams/components/MemberListItem.tsx
+++ b/packages/features/ee/teams/components/MemberListItem.tsx
@@ -133,7 +133,7 @@ export default function MemberListItem(props: Props) {
                   disabled={!props.member.accepted}
                   onClick={() => (props.member.accepted ? setShowTeamAvailabilityModal(true) : null)}
                   color="secondary"
-                  size="icon"
+                  variant="icon"
                   StartIcon={Icon.FiClock}
                 />
               </Tooltip>
@@ -143,7 +143,7 @@ export default function MemberListItem(props: Props) {
                   href={"/" + props.member.username}
                   color="secondary"
                   className={classNames(!editMode ? "rounded-r-md" : "")}
-                  size="icon"
+                  variant="icon"
                   StartIcon={Icon.FiExternalLink}
                 />
               </Tooltip>
@@ -154,7 +154,7 @@ export default function MemberListItem(props: Props) {
                     className="h-[36px] w-[36px] bg-transparent px-0 py-0 hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0">
                     <Button
                       color="secondary"
-                      size="icon"
+                      variant="icon"
                       className="rounded-r-md"
                       StartIcon={Icon.FiMoreHorizontal}
                     />
@@ -197,7 +197,7 @@ export default function MemberListItem(props: Props) {
             <div className="flex md:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" size="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
+                  <Button type="button" variant="icon" color="minimal" StartIcon={Icon.FiMoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   {props.member.accepted && (
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 80e89e22e1..1c23baf6eb 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -90,7 +90,7 @@ export default function TeamInviteListItem(props: Props) {
               <Button
                 type="button"
                 className="mr-3 border-gray-700"
-                size="icon"
+                variant="icon"
                 color="secondary"
                 onClick={declineInvite}
                 StartIcon={Icon.FiSlash}
@@ -98,7 +98,7 @@ export default function TeamInviteListItem(props: Props) {
               <Button
                 type="button"
                 className="border-gray-700"
-                size="icon"
+                variant="icon"
                 color="secondary"
                 onClick={acceptInvite}
                 StartIcon={Icon.FiCheck}
@@ -107,7 +107,7 @@ export default function TeamInviteListItem(props: Props) {
             <div className="block sm:hidden">
               <Dropdown>
                 <DropdownMenuTrigger asChild>
-                  <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                  <Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
                   <DropdownMenuItem>
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 38cea12ce2..49e0ac4b29 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -115,7 +115,7 @@ export default function TeamListItem(props: Props) {
               <div className="block sm:hidden">
                 <Dropdown>
                   <DropdownMenuTrigger asChild>
-                    <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                    <Button type="button" color="minimal" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem>
@@ -150,14 +150,19 @@ export default function TeamListItem(props: Props) {
                         );
                         showToast(t("link_copied"), "success");
                       }}
-                      size="icon"
+                      variant="icon"
                       StartIcon={Icon.FiLink}
                     />
                   </Tooltip>
                 )}
                 <Dropdown>
                   <DropdownMenuTrigger asChild className="radix-state-open:rounded-r-md">
-                    <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                    <Button
+                      type="button"
+                      color="secondary"
+                      variant="icon"
+                      StartIcon={Icon.FiMoreHorizontal}
+                    />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent hidden={hideDropdown}>
                     {isAdmin && (
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 766e7f17a1..0476febf91 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -143,7 +143,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                           <Button
                             type="button"
                             color="secondary"
-                            size="icon"
+                            variant="icon"
                             StartIcon={Icon.FiEdit2}
                             onClick={async () => await router.replace("/workflows/" + workflow.id)}
                           />
@@ -155,7 +155,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                               setwWorkflowToDeleteId(workflow.id);
                             }}
                             color="secondary"
-                            size="icon"
+                            variant="icon"
                             StartIcon={Icon.FiTrash2}
                           />
                         </Tooltip>
@@ -167,7 +167,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                           <Button
                             type="button"
                             color="minimal"
-                            size="icon"
+                            variant="icon"
                             StartIcon={Icon.FiMoreHorizontal}
                           />
                         </DropdownMenuTrigger>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index 3d6309c0af..0f04106a4d 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -296,7 +296,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div>
                   <Dropdown>
                     <DropdownMenuTrigger asChild>
-                      <Button type="button" color="minimal" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+                      <Button
+                        type="button"
+                        color="minimal"
+                        variant="icon"
+                        StartIcon={Icon.FiMoreHorizontal}
+                      />
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                       <DropdownMenuItem>
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index cc4c2ab085..593868cc82 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -44,7 +44,7 @@ function WorkflowsPage() {
       CTA={
         session.data?.hasValidLicense && data?.workflows && data?.workflows.length > 0 ? (
           <Button
-            size="fab"
+            variant="fab"
             StartIcon={Icon.FiPlus}
             onClick={() => createMutation.mutate()}
             loading={createMutation.isLoading}>
diff --git a/packages/features/eventtypes/components/CreateEventTypeButton.tsx b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
index c12268f834..6448fd043a 100644
--- a/packages/features/eventtypes/components/CreateEventTypeButton.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeButton.tsx
@@ -286,7 +286,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
           onClick={() => openModal(props.options[0])}
           data-testid="new-event-type"
           StartIcon={Icon.FiPlus}
-          size="fab"
+          variant="fab"
           disabled={!props.canAddEvents}>
           {t("new")}
         </Button>
@@ -295,7 +295,7 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
           <DropdownMenuTrigger asChild>
             <Button
               EndIcon={Icon.FiChevronDown}
-              size="fab"
+              variant="fab"
               className="radix-state-open:!bg-brand-500 radix-state-open:ring-2 radix-state-open:ring-brand-500 ring-offset-2 focus:border-none">
               {t("new")}
             </Button>
diff --git a/packages/features/eventtypes/components/CustomInputItem.tsx b/packages/features/eventtypes/components/CustomInputItem.tsx
index 1702fcc3a3..1bb7a93cc4 100644
--- a/packages/features/eventtypes/components/CustomInputItem.tsx
+++ b/packages/features/eventtypes/components/CustomInputItem.tsx
@@ -28,7 +28,7 @@ function CustomInputItem({ required, deleteOnClick, editOnClick, type, question
         </Button>
         <Button
           StartIcon={Icon.FiTrash}
-          size="icon"
+          variant="icon"
           color="destructive"
           onClick={deleteOnClick}
           className="h-[36px] border border-gray-200"
diff --git a/packages/features/schedules/components/DateOverrideList.tsx b/packages/features/schedules/components/DateOverrideList.tsx
index 2885cebbf1..42df9aef24 100644
--- a/packages/features/schedules/components/DateOverrideList.tsx
+++ b/packages/features/schedules/components/DateOverrideList.tsx
@@ -75,7 +75,7 @@ const DateOverrideList = ({
                     tooltip={t("edit")}
                     className="text-gray-700"
                     color="minimal"
-                    size="icon"
+                    variant="icon"
                     StartIcon={Icon.FiEdit2}
                   />
                 </DialogTrigger>
@@ -85,7 +85,7 @@ const DateOverrideList = ({
               <Button
                 className="text-gray-700"
                 color="destructive"
-                size="icon"
+                variant="icon"
                 StartIcon={Icon.FiTrash2}
                 onClick={() => remove(index)}
               />
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 65b7d5018d..2dc2089674 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -58,7 +58,7 @@ export function NewScheduleButton({ name = "new-schedule" }: { name?: string })
   return (
     <Dialog name={name} clearQueryParamsOnClose={["copy-schedule-id"]}>
       <DialogTrigger asChild>
-        <Button size="fab" data-testid={name} StartIcon={Icon.FiPlus}>
+        <Button variant="fab" data-testid={name} StartIcon={Icon.FiPlus}>
           {t("new")}
         </Button>
       </DialogTrigger>
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 1cd9b6ab76..bd081fcd82 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -106,7 +106,7 @@ const CopyButton = ({
           type="button"
           tooltip={t("duplicate")}
           color="minimal"
-          size="icon"
+          variant="icon"
           StartIcon={Icon.FiCopy}
         />
       </DropdownMenuTrigger>
@@ -184,7 +184,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 className=" text-gray-400"
                 type="button"
                 color="minimal"
-                size="icon"
+                variant="icon"
                 StartIcon={Icon.FiPlus}
                 onClick={() => {
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -213,7 +213,7 @@ const RemoveTimeButton = ({
   return (
     <Button
       type="button"
-      size="icon"
+      variant="icon"
       color="minimal"
       StartIcon={Icon.FiTrash}
       onClick={() => remove(index)}
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 29e8700834..2a7a059356 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -73,7 +73,7 @@ export function ScheduleListItem({
         </div>
         <Dropdown>
           <DropdownMenuTrigger asChild className="mx-5">
-            <Button type="button" size="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
+            <Button type="button" variant="icon" color="secondary" StartIcon={Icon.FiMoreHorizontal} />
           </DropdownMenuTrigger>
           {!isLoading && data && (
             <DropdownMenuContent>
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index dc327ce11b..18f6c3a4ce 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -339,7 +339,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
     <>
       <nav className="sticky top-0 z-20 flex w-full items-center justify-between border-b border-gray-100 bg-gray-50 p-4 sm:relative lg:hidden">
         <div className="flex items-center space-x-3 ">
-          <Button StartIcon={Icon.FiMenu} color="minimal" size="icon" onClick={props.onSideContainerOpen}>
+          <Button StartIcon={Icon.FiMenu} color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
           </Button>
 
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 78aa12993c..f020a097d4 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -766,7 +766,7 @@ export function ShellMain(props: LayoutProps) {
       <div className="mb-6 flex sm:mt-0 lg:mb-10">
         {!!props.backPath && (
           <Button
-            size="icon"
+            variant="icon"
             color="minimal"
             onClick={() =>
               typeof props.backPath === "string" ? router.push(props.backPath as string) : router.back()
diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx
index d1597a6d4f..6eb4c18be9 100644
--- a/packages/features/webhooks/components/WebhookListItem.tsx
+++ b/packages/features/webhooks/components/WebhookListItem.tsx
@@ -75,7 +75,7 @@ export default function WebhookListItem(props: {
         <Button
           color="destructive"
           StartIcon={Icon.FiTrash}
-          size="icon"
+          variant="icon"
           onClick={() => {
             // TODO: Confimation dialog before deleting
             deleteWebhook.mutate({ id: webhook.id, eventTypeId: webhook.eventTypeId || undefined });
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index bae939b50b..50494d1ee0 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -36,6 +36,11 @@ const buttonClasses = cva(
   "inline-flex items-center text-sm font-medium relative rounded-md transition-colors",
   {
     variants: {
+      variant: {
+        button: "",
+        icon: "flex justify-center",
+        fab: "h-14 w-14 sm:h-9 sm:w-auto rounded-full justify-center sm:rounded-md sm:px-4 sm:py-2.5 radix-state-open:rotate-45 sm:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
+      },
       color: {
         primary: "text-white dark:text-black",
         secondary: "text-gray-900 dark:text-darkgray-900",
@@ -46,10 +51,6 @@ const buttonClasses = cva(
         sm: "px-3 py-2 leading-4 rounded-sm" /** For backwards compatibility */,
         base: "h-9 px-4 py-2.5 ",
         lg: "h-[36px] px-4 py-2.5 ",
-        icon: "flex justify-center min-h-[36px] min-w-[36px] ",
-        // fab = floating action button, used for the main action in a page.
-        // it uses the same primary classNames for desktop size
-        fab: "h-14 w-14 sm:h-9 sm:w-auto rounded-full justify-center sm:rounded-md sm:px-4 sm:py-2.5 radix-state-open:rotate-45 sm:radix-state-open:rotate-0 transition-transform radix-state-open:shadown-none radix-state-open:ring-0 !shadow-none",
       },
       loading: {
         true: "cursor-wait",
@@ -133,8 +134,20 @@ const buttonClasses = cva(
         className:
           "border dark:text-white text-gray-900 hover:text-red-700 focus:text-red-700 dark:hover:text-red-700 dark:focus:text-red-700 hover:border-red-100 focus:border-red-100 hover:bg-red-100  focus:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset focus:ring-red-700",
       }),
+      // https://github.com/joe-bell/cva/issues/95 created an issue about using !p-2 on the icon variants as i would expect this to take priority
+      {
+        variant: "icon",
+        size: "base",
+        className: "min-h-[36px] min-w-[36px] !p-2",
+      },
+      {
+        variant: "icon",
+        size: "sm",
+        className: "h-6 w-6 !p-1",
+      },
     ],
     defaultVariants: {
+      variant: "button",
       color: "primary",
       size: "base",
     },
@@ -149,6 +162,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     loading = false,
     color = "primary",
     size,
+    variant = "button",
     type = "button",
     StartIcon,
     EndIcon,
@@ -169,7 +183,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       type: !isLink ? type : undefined,
       ref: forwardedRef,
       className: classNames(
-        buttonClasses({ color, size, loading, disabled: props.disabled }),
+        buttonClasses({ color, size, loading, disabled: props.disabled, variant }),
         props.className
       ),
       // if we click a disabled button, we prevent going through the click handler
@@ -182,7 +196,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
     <>
       {StartIcon && (
         <>
-          {size === "fab" ? (
+          {variant === "fab" ? (
             <>
               <StartIcon className="hidden h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2 sm:inline-flex" />
               <Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
@@ -190,14 +204,14 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
           ) : (
             <StartIcon
               className={classNames(
-                "inline-flex",
-                size === "icon" ? "h-4 w-4 " : "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
+                variant === "icon" && "h-4 w-4",
+                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
               )}
             />
           )}
         </>
       )}
-      {size === "fab" ? <span className="hidden sm:inline">{props.children}</span> : props.children}
+      {variant === "fab" ? <span className="hidden sm:inline">{props.children}</span> : props.children}
       {loading && (
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
           <svg
@@ -216,13 +230,19 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
       )}
       {EndIcon && (
         <>
-          {size === "fab" ? (
+          {variant === "fab" ? (
             <>
               <EndIcon className="-mr-1 hidden h-5 w-5 ltr:ml-2 rtl:-ml-1 rtl:mr-2 sm:inline" />
               <Icon.FiPlus className="inline h-6 w-6 sm:hidden" />
             </>
           ) : (
-            <EndIcon className="inline h-5 w-5 ltr:-mr-1 ltr:ml-2 rtl:mr-2" />
+            <EndIcon
+              className={classNames(
+                "inline-flex",
+                variant === "icon" && "h-4 w-4",
+                variant === "button" && "h-4 w-4 stroke-[1.5px] ltr:mr-2 rtl:ml-2"
+              )}
+            />
           )}
         </>
       )}
diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index e7af447208..59193f6cd4 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -65,6 +65,17 @@ Button are clickable elements that initiates user actions. Labels in the button
   </Example>
 </Examples>
 
+<Examples title="Icons">
+  <Example title="Icon Normal">
+      <Button StartIcon={Icon.FiX} variant="icon" size="base" color="minimal"></Button>
+  </Example>
+  <Example title="Icon Small">
+      <Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal"></Button>
+  </Example>
+   <Example title="Icon Loading">
+      <Button StartIcon={Icon.FiX} variant="icon" size="sm" color="minimal" loading></Button>
+  </Example>
+</Examples>
 
 ## Anatomy
 Button are clickable elements that initiates user actions. Labels in the button guide users to what action will occur when the user interacts with it.
@@ -80,36 +91,41 @@ Button are clickable elements that initiates user actions. Labels in the button
 
 <Canvas>
   <Story name="All variants">
-    <VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive']} columnMinWidth={150}>
+    <VariantsTable titles={['Primary', 'Secondary', 'Minimal', 'Destructive',"Icon"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <Button>Button text</Button>
         <Button color="secondary">Button text</Button>
         <Button color="minimal">Button text</Button>
         <Button color="destructive">Button text</Button>
+        <Button color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
       </VariantRow>
       <VariantRow variant="Hover">
         <Button className="sb-pseudo--hover">Button text</Button>
         <Button className="sb-pseudo--hover" color="secondary">Button text</Button>
         <Button className="sb-pseudo--hover" color="minimal">Button text</Button>
         <Button className="sb-pseudo--hover" color="destructive">Button text</Button>
+        <Button className="sb-pseudo--hover" color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
       </VariantRow>
       <VariantRow variant="Focus">
         <Button className="sb-pseudo--focus">Button text</Button>
         <Button className="sb-pseudo--focus" color="secondary">Button text</Button>
         <Button className="sb-pseudo--focus" color="minimal">Button text</Button>
         <Button className="sb-pseudo--focus" color="destructive">Button text</Button>
+        <Button className="sb-pseudo--focus" color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
       </VariantRow>
       <VariantRow variant="Loading">
         <Button loading>Button text</Button>
         <Button loading color="secondary">Button text</Button>
         <Button loading color="minimal">Button text</Button>
         <Button loading color="destructive">Button text</Button>
+        <Button loading color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
       </VariantRow>
       <VariantRow variant="Disabled">
         <Button disabled>Button text</Button>
         <Button disabled color="secondary">Button text</Button>
         <Button disabled color="minimal">Button text</Button>
         <Button disabled color="destructive">Button text</Button>
+        <Button disabled color="destructive" variant="icon" StartIcon={Icon.FiX}></Button>
       </VariantRow>
     </VariantsTable>
   </Story>
diff --git a/packages/ui/components/buttonGroup/ButtonGroup.tsx b/packages/ui/components/buttonGroup/ButtonGroup.tsx
index 81dc8b8bb1..dd8500dbd9 100644
--- a/packages/ui/components/buttonGroup/ButtonGroup.tsx
+++ b/packages/ui/components/buttonGroup/ButtonGroup.tsx
@@ -21,7 +21,7 @@ export function ButtonGroup({ children, combined = false, containerProps }: Prop
         "flex",
         !combined
           ? "space-x-2 rtl:space-x-reverse"
-          : "[&_button]:rounded-none [&_button]:ltr:border-l-0 rtl:[&_button]:border-r-0 ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r [&_a]:rounded-none ltr:[&_a]:border-l-0 rtl:[&_a]:border-r-0 ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md",
+          : "ltr:[&>*:first-child]:rounded-l-md ltr:[&>*:first-child]:border-l rtl:[&>*:first-child]:rounded-r-md rtl:[&>*:first-child]:border-r ltr:[&>*:last-child]:rounded-r-md rtl:[&>*:last-child]:rounded-l-md [&_button]:rounded-none [&_button]:ltr:border-l-0 rtl:[&_button]:border-r-0 [&_a]:rounded-none ltr:[&_a]:border-l-0 rtl:[&_a]:border-r-0",
         containerProps?.className
       )}>
       {children}
diff --git a/packages/ui/components/buttonGroup/buttongroup.stories.mdx b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
index 9dc0373ad0..fb8e1fd485 100644
--- a/packages/ui/components/buttonGroup/buttongroup.stories.mdx
+++ b/packages/ui/components/buttonGroup/buttongroup.stories.mdx
@@ -31,16 +31,16 @@ Button group enables multiple buttons to be combined into a single unit. It offe
 >
   <Example title="Default" >
     <ButtonGroup>
-      <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
-      <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
-      <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
+      <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
+      <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
   <Example title="Combined">
     <ButtonGroup combined>
-      <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
-      <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
-      <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+      <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
+      <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
+      <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
     </ButtonGroup>
   </Example>
 </Examples>
@@ -52,31 +52,31 @@ Button group enables multiple buttons to be combined into a single unit. It offe
     <VariantsTable titles={["Default",'Secondary',"Minimal"]} columnMinWidth={150}>
       <VariantRow variant="Default">
         <ButtonGroup>
-          <Button StartIcon={Icon.FiTrash} size="icon"  />
-          <Button StartIcon={Icon.FiNavigation} size="icon"/>
-          <Button StartIcon={Icon.FiClipboard} size="icon"  />
+          <Button StartIcon={Icon.FiTrash} variant="icon"  />
+          <Button StartIcon={Icon.FiNavigation} variant="icon"/>
+          <Button StartIcon={Icon.FiClipboard} variant="icon"  />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Icon.FiTrash} size="icon" color="secondary" />
-          <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary" />
-          <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary" />
+          <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary" />
+          <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary" />
+          <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary" />
         </ButtonGroup>
         <ButtonGroup>
-          <Button StartIcon={Icon.FiTrash} size="icon" color="minimal" />
-          <Button StartIcon={Icon.FiNavigation} size="icon" color="minimal" />
-          <Button StartIcon={Icon.FiClipboard} size="icon" color="minimal" />
+          <Button StartIcon={Icon.FiTrash} variant="icon" color="minimal" />
+          <Button StartIcon={Icon.FiNavigation} variant="icon" color="minimal" />
+          <Button StartIcon={Icon.FiClipboard} variant="icon" color="minimal" />
         </ButtonGroup>
       </VariantRow>
       <VariantRow variant="Combined">
         <ButtonGroup combined>
-          <Button StartIcon={Icon.FiTrash} size="icon"  />
-          <Button StartIcon={Icon.FiNavigation} size="icon"  />
-          <Button StartIcon={Icon.FiClipboard} size="icon"  />
+          <Button StartIcon={Icon.FiTrash} variant="icon"  />
+          <Button StartIcon={Icon.FiNavigation} variant="icon"  />
+          <Button StartIcon={Icon.FiClipboard} variant="icon"  />
         </ButtonGroup>
          <ButtonGroup combined>
-          <Button StartIcon={Icon.FiTrash} size="icon" color="secondary"  />
-          <Button StartIcon={Icon.FiNavigation} size="icon" color="secondary"  />
-          <Button StartIcon={Icon.FiClipboard} size="icon" color="secondary"  />
+          <Button StartIcon={Icon.FiTrash} variant="icon" color="secondary"  />
+          <Button StartIcon={Icon.FiNavigation} variant="icon" color="secondary"  />
+          <Button StartIcon={Icon.FiClipboard} variant="icon" color="secondary"  />
         </ButtonGroup>
       </VariantRow>
     </VariantsTable>
diff --git a/packages/ui/components/table/TableActions.tsx b/packages/ui/components/table/TableActions.tsx
index 0e4cb1d2d6..73436fb0b8 100644
--- a/packages/ui/components/table/TableActions.tsx
+++ b/packages/ui/components/table/TableActions.tsx
@@ -45,7 +45,7 @@ export const DropdownActions = ({
     <Dropdown>
       {!actionTrigger ? (
         <DropdownMenuTrigger asChild>
-          <Button type="button" color="secondary" size="icon" StartIcon={Icon.FiMoreHorizontal} />
+          <Button type="button" color="secondary" variant="icon" StartIcon={Icon.FiMoreHorizontal} />
         </DropdownMenuTrigger>
       ) : (
         <DropdownMenuTrigger asChild>{actionTrigger}</DropdownMenuTrigger>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index fcb3cea499..6d4cd7b648 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -22,7 +22,7 @@
     "@radix-ui/react-select": "^0.1.1",
     "@tanstack/react-query": "^4.3.9",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
-    "class-variance-authority": "^0.3.0",
+    "class-variance-authority": "^0.4.0",
     "downshift": "^6.1.9",
     "next": "^13.1.1",
     "react": "^18.2.0",