From b295df7d36d2aa07fc02ea70b83d00b97ce94113 Mon Sep 17 00:00:00 2001
From: kanishksingh23 <kanishksingh763@gmail.com>
Date: Thu, 11 Jun 2026 06:37:51 +0000
Subject: [PATCH 1/2] fix(theme): scope transparent color in checkbox modifier
 to default unchecked icon

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
---
 src/theme/components/checkbox.modifier.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts
index 4a08a6fe9..9e372a5ce 100644
--- a/src/theme/components/checkbox.modifier.ts
+++ b/src/theme/components/checkbox.modifier.ts
@@ -15,7 +15,6 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
       const inverseBackground = ownerState.inverseBackground || false;
 
       return {
-        color: 'transparent',
         '&.Mui-checked': {
           color: defaultText,
           '& .MuiSvgIcon-root': {
@@ -27,6 +26,9 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
             padding: '0px'
           }
         },
+        '&:not(.Mui-checked):not(.Mui-indeterminate) .MuiSvgIcon-root': {
+          color: 'transparent'
+        },
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',

From 378ed14348ecfc8f93f0fd10d12f0263c835aa7e Mon Sep 17 00:00:00 2001
From: kanishksingh23 <kanishksingh763@gmail.com>
Date: Fri, 12 Jun 2026 07:56:41 +0000
Subject: [PATCH 2/2] refactor(theme): use default checkbox icon components
 instead of CSS overrides

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
---
 src/icons/Checkbox/CheckboxCheckedIcon.tsx | 22 ++++++++++++++++
 src/icons/Checkbox/CheckboxIcon.tsx        | 30 ++++++++++++++++++++++
 src/icons/Checkbox/index.ts                |  2 ++
 src/icons/index.ts                         |  1 +
 src/theme/components/checkbox.modifier.ts  | 22 ++++++----------
 5 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 src/icons/Checkbox/CheckboxCheckedIcon.tsx
 create mode 100644 src/icons/Checkbox/CheckboxIcon.tsx
 create mode 100644 src/icons/Checkbox/index.ts

diff --git a/src/icons/Checkbox/CheckboxCheckedIcon.tsx b/src/icons/Checkbox/CheckboxCheckedIcon.tsx
new file mode 100644
index 000000000..15544d030
--- /dev/null
+++ b/src/icons/Checkbox/CheckboxCheckedIcon.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const CheckboxCheckedIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    fill="currentColor"
+  >
+    <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+  </svg>
+);
+
+export default CheckboxCheckedIcon;
diff --git a/src/icons/Checkbox/CheckboxIcon.tsx b/src/icons/Checkbox/CheckboxIcon.tsx
new file mode 100644
index 000000000..911ee9d76
--- /dev/null
+++ b/src/icons/Checkbox/CheckboxIcon.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { IconProps } from '../types';
+
+export const CheckboxIcon = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  ...props
+}: IconProps): JSX.Element => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+    fill="none"
+  >
+    <rect
+      x="3"
+      y="3"
+      width="18"
+      height="18"
+      rx="2"
+      stroke="currentColor"
+      strokeWidth="1.5"
+    />
+  </svg>
+);
+
+export default CheckboxIcon;
diff --git a/src/icons/Checkbox/index.ts b/src/icons/Checkbox/index.ts
new file mode 100644
index 000000000..87c55e777
--- /dev/null
+++ b/src/icons/Checkbox/index.ts
@@ -0,0 +1,2 @@
+export * from './CheckboxIcon';
+export * from './CheckboxCheckedIcon';
diff --git a/src/icons/index.ts b/src/icons/index.ts
index e392acb19..3c12eef26 100644
--- a/src/icons/index.ts
+++ b/src/icons/index.ts
@@ -206,3 +206,4 @@ export * from './Warning';
 export * from './Wasm';
 export * from './Workspace';
 export * from './Zoom';
+export * from './Checkbox';
diff --git a/src/theme/components/checkbox.modifier.ts b/src/theme/components/checkbox.modifier.ts
index 9e372a5ce..c75e439a2 100644
--- a/src/theme/components/checkbox.modifier.ts
+++ b/src/theme/components/checkbox.modifier.ts
@@ -1,13 +1,19 @@
 import { Components, Theme } from '@mui/material';
+import React from 'react';
+import { CheckboxIcon } from '../../icons/Checkbox/CheckboxIcon';
+import { CheckboxCheckedIcon } from '../../icons/Checkbox/CheckboxCheckedIcon';
 
 export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
+  defaultProps: {
+    icon: React.createElement(CheckboxIcon),
+    checkedIcon: React.createElement(CheckboxCheckedIcon),
+  },
   styleOverrides: {
     root: ({ theme, ownerState }) => {
       const {
         palette: {
           text: { default: defaultText },
           icon: { inverse: inverseColor },
-          background: { brand },
           border: { strong }
         }
       } = theme;
@@ -15,25 +21,13 @@ export const MuiCheckbox: Components<Theme>['MuiCheckbox'] = {
       const inverseBackground = ownerState.inverseBackground || false;
 
       return {
+        color: inverseBackground ? inverseColor : strong,
         '&.Mui-checked': {
           color: defaultText,
-          '& .MuiSvgIcon-root': {
-            width: '1.25rem',
-            height: '1.25rem',
-            borderColor: brand?.default,
-            marginLeft: '0px',
-            fill: inverseBackground ? inverseColor : defaultText,
-            padding: '0px'
-          }
-        },
-        '&:not(.Mui-checked):not(.Mui-indeterminate) .MuiSvgIcon-root': {
-          color: 'transparent'
         },
         '& .MuiSvgIcon-root': {
           width: '1.25rem',
           height: '1.25rem',
-          border: `.75px solid ${inverseBackground ? inverseColor : strong}`,
-          borderRadius: '2px',
           padding: '0px'
         },
         '&:hover': {