diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index e2c09629c..ba4d1037f 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,6 +11,7 @@
         element?: HTMLInputElement | undefined;
         indeterminate?: boolean;
         wrapperTag?: FormItemTag;
+        size?: 'small' | 'medium';
     }
 
     export let id: string;
@@ -20,6 +21,7 @@
     export let disabled = false;
     export let element: HTMLInputElement | undefined = undefined;
     export let wrapperTag: FormItemTag = 'li';
+    export let size: $$Props['size'] = 'medium';
     let error: string;
 
     const handleInvalid = (event: Event) => {
@@ -44,6 +46,7 @@
                 {disabled}
                 {required}
                 {...$$restProps}
+                class:is-small={size === 'small'}
                 type="checkbox"
                 bind:this={element}
                 bind:checked
diff --git a/src/routes/console/project-[project]/overview/keys/checkbox.svelte b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
index cad6cd09c..4e4553957 100644
--- a/src/routes/console/project-[project]/overview/keys/checkbox.svelte
+++ b/src/routes/console/project-[project]/overview/keys/checkbox.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
     export let indeterminate = false;
     export let checked = false;
+    export let fontSize: $$Props['fontSize'] = 'medium';
 
     interface $$Props extends Partial<HTMLInputElement> {
         indeterminate?: boolean;
         checked?: boolean;
+        fontSize?: 'small' | 'medium';
     }
 </script>
 
-<input type="checkbox" bind:checked {...$$restProps} bind:indeterminate on:change />
+<input
+    class:is-small={fontSize === 'small'}
+    type="checkbox"
+    bind:checked
+    {...$$restProps}
+    bind:indeterminate
+    on:change />