diff --git a/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json b/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json
new file mode 100644
index 0000000000000..491601fca7d3b
--- /dev/null
+++ b/change/@fluentui-react-checkbox-cba19a44-ae9e-485b-9089-6c7d0d4d8ce6.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "perf: Don't render Checkbox icon when unchecked",
+ "packageName": "@fluentui/react-checkbox",
+ "email": "behowell@microsoft.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index e553f8f6b3b3a..922705a2db39f 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -41,22 +41,7 @@ exports[`Checkbox renders a default state 1`] = `
+ />
`;
@@ -153,22 +138,7 @@ exports[`Checkbox renders with a label 1`] = `
+ />
: ;
}
- } else {
+ } else if (checked) {
checkmarkIcon = size === 'large' ? : ;
}
diff --git a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index d0d22c2a609a3..11e4e12821e97 100644
--- a/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-components/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -33,11 +33,6 @@ const useInputBaseClassName = makeResetStyles({
// This is done so that clicking on that "empty space" still toggles the checkbox.
width: `calc(${indicatorSizeMedium} + 2 * ${tokens.spacingHorizontalS})`,
- // When unchecked, hide the the checkmark icon (child of the indicator slot)
- [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {
- opacity: 0,
- },
-
// Colors for the unchecked state
':enabled:not(:checked):not(:indeterminate)': {
[`& ~ .${checkboxClassNames.label}`]: {
diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
index de9c9e7fab454..e96b26dd14d43 100644
--- a/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
+++ b/packages/react-components/react-table/src/components/TableSelectionCell/__snapshots__/TableSelectionCell.test.tsx.snap
@@ -16,22 +16,7 @@ exports[`TableSelectionCell renders a default state 1`] = `
+ />