I added two icons and created two new components Checkbox and radio

src/components/ui/Checkbox.jsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+
+const Checkbox = forwardRef(({
+  checked,
+  onChange,
+  disabled = false,
+  icon,
+  ...rest
+}, ref) => {
+  return (
+    <label style={{ position: "relative", display: "inline-block", width: 24, height: 24 }}>
+      <input
+        ref={ref}
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        style={{ position: "absolute", opacity: 0, width: 0, height: 0 }}
+        {...rest}
+      />
+      <span style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        border: "0.5px solid black",
+        borderRadius: 4,
+        background: checked ? "green" : "white",
+      }}>
+        {checked && icon}
+      </span>
+    </label>
+  );
+});
+
+Checkbox.displayName = "Checkbox";
+
+export default Checkbox;

src/components/ui/Radio.jsx

@@ -0,0 +1,39 @@
+import { forwardRef } from "react";
+
+const Radio = forwardRef(({
+  checked,
+  onChange,
+  disabled = false,
+  icon,
+  ...rest
+}, ref) => {
+  return (
+    <label style={{ display: "inline-block", width: 24, height: 24 }}>
+      <input
+        ref={ref}
+        type="radio"
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        style={{ position: "absolute", opacity: 0, width: 0, height: 0 }}
+        {...rest}
+      />
+      <span style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: 24,
+        height: 24,
+        borderRadius: "50%",
+        border: "1px solid #ccc",
+        background: checked ? "yellow" : "#ccc",
+      }}>
+        {checked && icon}
+      </span>
+    </label>
+  );
+});
+
+Radio.displayName = "Radio";
+
+export default Radio;

src/main.jsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client'
 import { App } from './App.jsx'
-import Themes from './components/ui/Themes.jsx'
+import Themes from './components/Themes.jsx'
 import './index.css'
 
 createRoot(document.getElementById('root')).render(