From 8b4ea6dc93e8bafa250a13e922c2235b09a91aa0 Mon Sep 17 00:00:00 2001
From: anmolsinghbhatia <asb.dev.1001@gmail.com>
Date: Mon, 31 Aug 2026 14:37:00 +0530
Subject: [PATCH] fix: set explicit sizes on migrated Button icons

Lucide defaults to 24px and published Button no longer injects glyph
size. Pass size-3.5 for xs/sm and size-4 for md/lg, including cloneElement
on dynamic icon props.
---
 .../app/(all)/[workspaceSlug]/(projects)/header.tsx  |  4 ++--
 .../(projects)/profile/[userId]/header.tsx           |  6 +++++-
 apps/web/core/components/common/empty-state.tsx      | 10 ++++++++--
 apps/web/core/components/common/new-empty-state.tsx  | 10 ++++++++--
 apps/web/core/components/cycles/transfer-issues.tsx  |  2 +-
 .../core/components/empty-state/comic-box-button.tsx | 12 +++++++++---
 .../empty-state/detailed-empty-state-root.tsx        |  9 +++++++--
 .../core/components/estimates/points/create-root.tsx |  2 +-
 apps/web/core/components/exporter/prev-exports.tsx   |  4 ++--
 .../issue-detail/label/select/label-select.tsx       |  2 +-
 .../components/issues/issue-detail/subscription.tsx  |  2 +-
 .../filters/header/helpers/dropdown.tsx              | 12 +++++++++---
 apps/web/core/components/project/empty-state.tsx     | 10 ++++++++--
 apps/web/core/components/sidebar/add-button.tsx      |  9 ++++++++-
 .../core/components/web-hooks/form/secret-key.tsx    |  2 +-
 .../components/workspace/billing/comparison/base.tsx |  4 +++-
 16 files changed, 74 insertions(+), 26 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index be884294e2..ee399a610c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -44,7 +44,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
               size="md"
               stretch="auto"
               onClick={() => toggleWidgetSettings(true)}
-              icon={<Shapes />}
+              icon={<Shapes className="size-4" />}
               label={t("home.manage_widgets")}
             />
           </span>
@@ -53,7 +53,7 @@ export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHead
               variant="secondary"
               size="md"
               aria-label={t("home.manage_widgets")}
-              icon={<Shapes />}
+              icon={<Shapes className="size-4" />}
               onClick={() => toggleWidgetSettings(true)}
             />
           </span>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index f66a423eef..e802874997 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -100,7 +100,11 @@ export const UserProfileHeader = observer(function UserProfileHeader(props: TUse
               variant="ghost"
               size="md"
               aria-label="Toggle profile sidebar"
-              icon={<PanelRight className={!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"} />}
+              icon={
+                <PanelRight
+                  className={`size-4 ${!profileSidebarCollapsed ? "text-accent-primary" : "text-secondary"}`}
+                />
+              }
               onClick={() => toggleProfileSidebar()}
             />
           </div>
diff --git a/apps/web/core/components/common/empty-state.tsx b/apps/web/core/components/common/empty-state.tsx
index 39714252e8..5f073d5a49 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -4,10 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -36,7 +42,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               size="sm"
               stretch="auto"
               label={primaryButton.text}
-              icon={primaryButton.icon}
+              icon={withIconSize(primaryButton.icon, "size-3.5")}
               onClick={primaryButton.onClick}
               disabled={disabled}
             />
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index 9b0c63c754..1ff3b6815a 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -4,10 +4,16 @@
  * See the LICENSE file for details.
  */
 
-import React, { useState } from "react";
+import React, { cloneElement, isValidElement, useState } from "react";
 
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -57,7 +63,7 @@ export function NewEmptyState({ title, description, image, primaryButton, disabl
                   onClick={primaryButton.onClick}
                   disabled={disabled}
                   label={primaryButton.text}
-                  icon={primaryButton.icon}
+                  icon={withIconSize(primaryButton.icon, "size-4")}
                 />
                 <div
                   onMouseEnter={handleMouseEnter}
diff --git a/apps/web/core/components/cycles/transfer-issues.tsx b/apps/web/core/components/cycles/transfer-issues.tsx
index 027d5bbe41..65d4ad142f 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -32,7 +32,7 @@ export function TransferIssues(props: Props) {
             size="md"
             stretch="auto"
             label="Transfer work items"
-            icon={<TransferIcon />}
+            icon={<TransferIcon className="size-4 fill-current" />}
             onClick={handleClick}
             disabled={disabled}
           />
diff --git a/apps/web/core/components/empty-state/comic-box-button.tsx b/apps/web/core/components/empty-state/comic-box-button.tsx
index 7452aaa442..a585b9378e 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -4,12 +4,18 @@
  * See the LICENSE file for details.
  */
 
-import type { Ref } from "react";
-import { Fragment, useState } from "react";
+import type { ReactNode, Ref } from "react";
+import { cloneElement, Fragment, isValidElement, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover } from "@headlessui/react";
 // plane imports
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   label: string;
@@ -56,7 +62,7 @@ export function ComicBoxButton(props: Props) {
             stretch="auto"
             onClick={onClick}
             disabled={disabled}
-            icon={icon}
+            icon={withIconSize(icon, "size-4")}
             label={label}
           />
           <span className="relative h-2 w-2">
diff --git a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
index 03fe2aa48f..b78ff76397 100644
--- a/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
+++ b/apps/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -4,13 +4,18 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 import { observer } from "mobx-react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
 // utils
 import { cn } from "@plane/utils";
 
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
+
 type EmptyStateSize = "sm" | "base" | "lg";
 
 type ButtonConfig = {
@@ -54,7 +59,7 @@ function CustomButton({
       size="sm"
       stretch="auto"
       label={config.text}
-      icon={icon}
+      icon={withIconSize(icon, "size-3.5")}
       iconPosition={config.prependIcon ? "start" : "end"}
       onClick={config.onClick}
       disabled={config.disabled}
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index 00927b2df0..cdf3b9bfb8 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -175,7 +175,7 @@ export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot
           variant="ghost"
           size="sm"
           stretch="auto"
-          icon={<PlusIcon />}
+          icon={<PlusIcon className="size-3.5" />}
           onClick={handleCreate}
           label={`Add ${estimateType}`}
         />
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index 53880b10ef..8dece25dc0 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -96,7 +96,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
               size="xs"
               stretch="auto"
               label={t("prev")}
-              icon={<MoveLeft />}
+              icon={<MoveLeft className="size-3.5" />}
               disabled={!exporterServices?.prev_page_results}
               onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
             />
@@ -105,7 +105,7 @@ export const PrevExports = observer(function PrevExports(props: Props) {
               size="xs"
               stretch="auto"
               label={t("next")}
-              icon={<MoveRight />}
+              icon={<MoveRight className="size-3.5" />}
               iconPosition="end"
               disabled={!exporterServices?.next_page_results}
               onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
diff --git a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
index a4383b3d14..35b8f9b984 100644
--- a/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -132,7 +132,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
             size="xs"
             stretch="auto"
             label={label}
-            icon={<PlusIcon />}
+            icon={<PlusIcon className="size-3.5" />}
             ref={setReferenceElement}
             type="button"
             onClick={() => !projectLabels && fetchLabels()}
diff --git a/apps/web/core/components/issues/issue-detail/subscription.tsx b/apps/web/core/components/issues/issue-detail/subscription.tsx
index a06d112565..f769eaf20a 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -82,7 +82,7 @@ export const IssueSubscription = observer(function IssueSubscription(props: TIss
   return (
     <div>
       <Button
-        icon={isSubscribed ? <BellOff /> : <Bell className="h-3 w-3" />}
+        icon={isSubscribed ? <BellOff className="size-4" /> : <Bell className="size-4" />}
         variant="secondary"
         size="md"
         stretch="auto"
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
index fc4e292cb5..123ef8ed7e 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -4,7 +4,7 @@
  * See the LICENSE file for details.
  */
 
-import React, { Fragment, useState } from "react";
+import React, { cloneElement, Fragment, isValidElement, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 // headless ui
@@ -12,6 +12,12 @@ import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
 import { IconButton } from "@makeplane/propel/components/icon-button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   children: React.ReactNode;
@@ -62,7 +68,7 @@ export function FiltersDropdown(props: Props) {
                     variant="secondary"
                     size="md"
                     stretch="auto"
-                    icon={icon}
+                    icon={withIconSize(icon, "size-4")}
                     tabIndex={tabIndex}
                     label={title ?? ""}
                   />
@@ -76,7 +82,7 @@ export function FiltersDropdown(props: Props) {
                       variant="secondary"
                       size="md"
                       aria-label={typeof title === "string" ? title : "Filters"}
-                      icon={miniIcon}
+                      icon={withIconSize(miniIcon, "size-4")}
                       disabled={disabled}
                       tabIndex={tabIndex}
                     />
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index f12a689bcc..4d7c313f4c 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -4,9 +4,15 @@
  * See the LICENSE file for details.
  */
 
-import React from "react";
+import React, { cloneElement, isValidElement } from "react";
 // ui
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: React.ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   title: string;
@@ -37,7 +43,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               size="lg"
               stretch="auto"
               label={primaryButton.text}
-              icon={primaryButton.icon}
+              icon={withIconSize(primaryButton.icon, "size-4")}
               onClick={primaryButton.onClick}
               disabled={disabled}
             />
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index 1ce096c347..b1a7f36cfd 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -5,7 +5,14 @@
  */
 
 import type { MouseEventHandler, ReactNode } from "react";
+import { cloneElement, isValidElement } from "react";
 import { Button } from "@makeplane/propel/components/button";
+import { cn } from "@plane/utils";
+
+function withIconSize(icon: ReactNode, sizeClass: string) {
+  if (!isValidElement<{ className?: string }>(icon)) return icon;
+  return cloneElement(icon, { className: cn(sizeClass, icon.props.className) });
+}
 
 type Props = {
   label: string;
@@ -25,7 +32,7 @@ export function SidebarAddButton(props: Props) {
         size="lg"
         stretch="full"
         label={label}
-        icon={icon}
+        icon={withIconSize(icon, "size-4")}
         onClick={onClick}
         disabled={disabled}
       />
diff --git a/apps/web/core/components/web-hooks/form/secret-key.tsx b/apps/web/core/components/web-hooks/form/secret-key.tsx
index 390abfd7bf..97fc5f34be 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -138,7 +138,7 @@ export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props)
                   size="md"
                   stretch="auto"
                   label={isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
-                  icon={<RefreshCw />}
+                  icon={<RefreshCw className="size-4" />}
                   onClick={handleRegenerateSecretKey}
                   loading={isRegenerating}
                 />
diff --git a/apps/web/core/components/workspace/billing/comparison/base.tsx b/apps/web/core/components/workspace/billing/comparison/base.tsx
index 4c98178b65..cf7c6a032a 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -130,7 +130,9 @@ export const PlansComparisonBase = observer(function PlansComparisonBase(props:
             size="sm"
             stretch="auto"
             label={isCompareAllFeaturesSectionOpen ? "Collapse comparison" : "Compare all features"}
-            icon={isCompareAllFeaturesSectionOpen ? <ArrowUp /> : <ArrowDown />}
+            icon={
+              isCompareAllFeaturesSectionOpen ? <ArrowUp className="size-3.5" /> : <ArrowDown className="size-3.5" />
+            }
             iconPosition="end"
             onClick={() => {
               setIsCompareAllFeaturesSectionOpen(!isCompareAllFeaturesSectionOpen);