diff --git a/packages/react-notion-x/src/components/checkbox.tsx b/packages/react-notion-x/src/components/checkbox.tsx
index 3b4d04f4c..d15aa697d 100644
--- a/packages/react-notion-x/src/components/checkbox.tsx
+++ b/packages/react-notion-x/src/components/checkbox.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
-import CheckIcon from '../icons/check'
+import { CheckIcon, CheckBoxIcon } from '../icons/check'
+import '../styles.css'
 
 export const Checkbox: React.FC<{
   isChecked: boolean
@@ -10,15 +11,17 @@ export const Checkbox: React.FC<{
 
   if (isChecked) {
     content = (
-      <div className='notion-property-checkbox-checked'>
+      <div className='notion-property-checkbox notion-property-checkbox-checked'>
         <CheckIcon />
       </div>
     )
   } else {
-    content = <div className='notion-property-checkbox-unchecked' />
+    content = (
+      <div className='notion-property-checkbox'>
+        <CheckBoxIcon />
+      </div>
+    )
   }
 
-  return (
-    <span className='notion-property notion-property-checkbox'>{content}</span>
-  )
+  return <span className='notion-property'>{content}</span>
 }
diff --git a/packages/react-notion-x/src/icons/check.tsx b/packages/react-notion-x/src/icons/check.tsx
index 818d8363a..95bd38e38 100644
--- a/packages/react-notion-x/src/icons/check.tsx
+++ b/packages/react-notion-x/src/icons/check.tsx
@@ -1,11 +1,17 @@
 import * as React from 'react'
 
-function SvgCheck(props: React.SVGProps<SVGSVGElement>) {
+export function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
-    <svg viewBox='0 0 14 14' {...props}>
-      <path d='M5.5 12L14 3.5 12.5 2l-7 7-4-4.003L0 6.499z' />
+    <svg viewBox='0 0 14 14' className='check-icon' {...props}>
+      <polygon points='5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039'></polygon>
     </svg>
   )
 }
 
-export default SvgCheck
+export function CheckBoxIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 16 16' className='check-box-suare-icon' {...props}>
+      <path d='M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z'></path>
+    </svg>
+  )
+}
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index dc44be4f1..60b0e4e6d 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -1399,29 +1399,30 @@ svg.notion-page-icon {
 .notion-property-checkbox {
   width: 16px;
   height: 16px;
+  display: flex;
+  flex-shrink: 0;
+  flex-grow: 0;
+  position: relative;
+  align-items: center;
+  justify-content: center;
 }
-
+ 
 .notion-property-checkbox-checked {
-  width: 16px;
-  height: 16px;
   background: var(--select-color-0);
 }
 
-.notion-property-checkbox-checked svg {
-  position: relative;
+.check-icon{
+  width: 12px;
+  height: 12px;
   display: block;
-  /* top: -3px; */
-  top: 1px;
-  left: 1px;
-  width: 14px;
-  height: 14px;
-  fill: #fff;
+  fill: white;
 }
 
-.notion-property-checkbox-unchecked {
-  width: 16px;
-  height: 16px;
-  border: 1.3px solid var(--fg-color);
+.check-box-suare-icon{
+  width: 100%;
+  height: 100%;
+  display: block;
+  fill: inherit;
 }
 
 .notion-gallery {
diff --git a/packages/react-notion-x/src/third-party/collection.tsx b/packages/react-notion-x/src/third-party/collection.tsx
index cf39b4ac5..f46120bb9 100644
--- a/packages/react-notion-x/src/third-party/collection.tsx
+++ b/packages/react-notion-x/src/third-party/collection.tsx
@@ -10,7 +10,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
 import { CollectionRow } from './collection-row'
 import { CollectionViewIcon } from '../icons/collection-view-icon'
-import CheckIcon from '../icons/check'
+import { CheckIcon } from '../icons/check'
 import { ChevronDownIcon } from '../icons/chevron-down-icon'
 import { CollectionView } from './collection-view'
 import { PropertyImplMemo } from './property'