diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss
index e87b36e..9b70281 100644
--- a/apps/web/src/features/recipes/recipes.scss
+++ b/apps/web/src/features/recipes/recipes.scss
@@ -749,8 +749,8 @@
     color: var(--color-text-muted);
 
     svg {
-      width: 1.1rem;
-      height: 1.1rem;
+      width: 1.5rem;
+      height: 1.5rem;
     }
 
     &:hover {
@@ -786,6 +786,16 @@
     label {
       font-size: var(--font-size-sm);
       white-space: nowrap;
+
+      // The global rule trails the checkmark at the far right (`margin-left:
+      // auto`) — reads well as a selected chip in a grid (AllergySelect),
+      // but a vertical settings-menu list reads conventionally the other
+      // way: checkbox leading, label text after it. `.check-mark` already
+      // sits right after the (visually hidden) `<input>` and before the
+      // text in markup, so undoing the auto margin alone puts it there.
+      .check-mark {
+        margin-left: 0;
+      }
     }
   }