diff --git a/web/images/checkbox-dark-mode.svg b/web/images/checkbox-dark-mode.svg
new file mode 100644
index 0000000000..40494abb45
Binary files /dev/null and b/web/images/checkbox-dark-mode.svg differ
diff --git a/web/images/checkbox.svg b/web/images/checkbox.svg
index 006c527a46..6f17bc0445 100644
Binary files a/web/images/checkbox.svg and b/web/images/checkbox.svg differ
diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 8895022ca6..dcd00b7062 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -929,8 +929,10 @@
     --color-border-zulip-button: hsl(0deg 0% 80%);
     --color-border-zulip-button-interactive: hsl(0deg 0% 60%);
 
-    /* Zulip-style checkbox colors. */
+    /* Zulip-style checkbox values. */
     --color-border-rendered-checkbox: hsl(0deg 0% 0% / 60%);
+    /* The SVG must be adjusted when changing the border color above. */
+    --svg-url-rendered-checkbox: url("../images/checkbox.svg");
 
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 93%);
@@ -1357,8 +1359,10 @@
     --color-border-zulip-button: hsl(0deg 0% 0% / 60%);
     --color-border-zulip-button-interactive: var(--color-border-zulip-button);
 
-    /* Zulip-style checkbox colors. */
+    /* Zulip-style checkbox values. */
     --color-border-rendered-checkbox: hsl(0deg 0% 100% / 40%);
+    /* The SVG must be adjusted when changing the border color above. */
+    --svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");
 
     /* Emoji-picker colors */
     --color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
diff --git a/web/styles/components.css b/web/styles/components.css
index ef45040e9f..57092c26f7 100644
--- a/web/styles/components.css
+++ b/web/styles/components.css
@@ -31,15 +31,18 @@
                the light-mode color value here as a fallback. */
             border: 1px solid
                 var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
-
             border-radius: 4px;
-            filter: brightness(0.8);
 
             cursor: pointer;
         }
 
         &:checked ~ .rendered-checkbox {
-            background-image: url("../images/checkbox.svg");
+            /* As with the border color above, we duplicate
+               the light-mode SVG URL value here as a fallback. */
+            background-image: var(
+                --svg-url-rendered-checkbox,
+                url("../images/checkbox.svg")
+            );
             background-size: 85%;
             background-position: 50% 50%;
             background-repeat: no-repeat;