diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
index 24a526de..150d0a28 100644
--- a/resources/views/components/checkbox.blade.php
+++ b/resources/views/components/checkbox.blade.php
@@ -1,4 +1,5 @@
-{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer.
+{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer. The
+     tick and the dash fill the box at CheckboxTokens' 18px icon size, drawn from the 20 optical cut.
 
      The label and its hint sit beside it and are its accessible name — the whole row is the
      `<label>`, so either can be pressed. `right` puts the box at the end of the row, for a setting
@@ -44,8 +45,8 @@
                 @if ($indeterminate) data-indeterminate @endif
                 @if ($messages !== []) aria-invalid="true" aria-describedby="{{ $id }}-support" @endif
             />
-            <x-livewire-material::icon name="check" class="size-4" data-check />
-            <x-livewire-material::icon name="remove" class="size-4" data-mixed />
+            <x-livewire-material::icon name="check" class="size-4.5" optical="20" data-check />
+            <x-livewire-material::icon name="remove" class="size-4.5" optical="20" data-mixed />
         </span>
 
         @if (filled($label) || filled($hint))
diff --git a/resources/views/components/chip.blade.php b/resources/views/components/chip.blade.php
index c22a7823..4a60efcd 100644
--- a/resources/views/components/chip.blade.php
+++ b/resources/views/components/chip.blade.php
@@ -230,7 +230,7 @@
                     <img src="{{ $avatar }}" alt="" @class(['me-2 size-6 shrink-0 rounded-corner-full object-cover', 'opacity-38' => $disabled]) />
                 @endif
             @elseif ($icon)
-                <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
+                <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
             @endif
 
             <span data-chip-label class="truncate">{{ $label ?? $slot }}</span>
@@ -251,7 +251,7 @@
                     'cursor-not-allowed' => $disabled,
                 ])
             >
-                <x-livewire-material::icon name="close" class="size-4.5" />
+                <x-livewire-material::icon name="close" class="size-4.5" optical="20" />
             </button>
         @endif
 
@@ -277,18 +277,18 @@
                 'h-4.5 w-0 transition-[width] duration-(--md-sys-motion-effects-default-duration) ease-effects-default group-has-checked/chip:w-4.5 group-has-checked/chip:duration-(--md-sys-motion-spatial-fast-duration) group-has-checked/chip:ease-spatial-fast group-aria-pressed/chip:w-4.5 group-aria-pressed/chip:duration-(--md-sys-motion-spatial-fast-duration) group-aria-pressed/chip:ease-spatial-fast' => blank($icon),
             ])>
                 @if ($icon)
-                    <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['size-4.5 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-0 group-aria-pressed/chip:opacity-0', $leadingInk])" />
+                    <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['size-4.5 transition-opacity duration-(--md-sys-motion-effects-fast-duration) ease-effects-fast group-has-checked/chip:opacity-0 group-aria-pressed/chip:opacity-0', $leadingInk])" />
                 @endif
-                <x-livewire-material::icon name="check" data-chip-check :class="$check" />
+                <x-livewire-material::icon name="check" data-chip-check optical="20" :class="$check" />
             </span>
         @elseif ($icon)
-            <x-livewire-material::icon :name="$icon" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
+            <x-livewire-material::icon :name="$icon" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['me-2 size-4.5', $leadingInk])" />
         @endif
 
         <span class="truncate">{{ $label ?? $slot }}</span>
 
         @if ($iconRight)
-            <x-livewire-material::icon :name="$iconRight" :class="\Illuminate\Support\Arr::toCssClasses(['ms-2 size-4.5', $trailingInk])" />
+            <x-livewire-material::icon :name="$iconRight" optical="20" :class="\Illuminate\Support\Arr::toCssClasses(['ms-2 size-4.5', $trailingInk])" />
         @endif
 
         @if ($tooltip !== null)
diff --git a/resources/views/components/datepicker.blade.php b/resources/views/components/datepicker.blade.php
index 115dd65e..9d9bc1d9 100644
--- a/resources/views/components/datepicker.blade.php
+++ b/resources/views/components/datepicker.blade.php
@@ -292,7 +292,7 @@
                         x-bind:aria-label="monthYear + ', ' + @js(__('Switch to selecting a year'))"
                     >
                         <span x-text="monthYear"></span>
-                        <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                        <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                     </button>
 
                     <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
@@ -314,7 +314,7 @@
                             x-bind:aria-label="monthLabel + ', ' + @js(__('Switch to selecting a month'))"
                         >
                             <span x-text="monthLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                         </button>
                         <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next month')" x-on:click="step(1)" x-bind:disabled="view !== 'days' || ! canStep(1)" />
@@ -333,7 +333,7 @@
                             x-bind:aria-label="yearLabel + ', ' + @js(__('Switch to selecting a year'))"
                         >
                             <span x-text="yearLabel"></span>
-                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" data-datepicker-menu-arrow />
+                            <x-livewire-material::icon name="arrow_drop_down" class="size-4.5" optical="20" data-datepicker-menu-arrow />
                         </button>
                         <span data-datepicker-arrows x-bind:data-concealed="view !== 'days' ? '' : null">
                             <x-livewire-material::button icon="chevron_right" :tooltip="__('Next year')" x-on:click="step(12)" x-bind:disabled="view !== 'days' || ! canStep(12)" />
diff --git a/resources/views/components/sort-header.blade.php b/resources/views/components/sort-header.blade.php
index 436cbae2..5fc98da2 100644
--- a/resources/views/components/sort-header.blade.php
+++ b/resources/views/components/sort-header.blade.php
@@ -29,7 +29,7 @@
         ])
     >
         {{ $slot }}
-        <x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" :class="\Illuminate\Support\Arr::toCssClasses([
+        <x-livewire-material::icon :name="$direction === 'desc' ? 'arrow_downward' : 'arrow_upward'" optical="20" :class="\Illuminate\Support\Arr::toCssClasses([
             'size-4 transition-opacity duration-(--md-sys-motion-effects-fast-duration)',
             'opacity-0 group-hover/sort:opacity-60 group-focus-visible/sort:opacity-60' => ! $active,
         ])" />
diff --git a/resources/views/components/toggle.blade.php b/resources/views/components/toggle.blade.php
index f49e9953..ec21adf6 100644
--- a/resources/views/components/toggle.blade.php
+++ b/resources/views/components/toggle.blade.php
@@ -39,8 +39,8 @@
             />
             <span data-handle>
                 @if ($icons)
-                    <x-livewire-material::icon name="check" class="size-4" data-on />
-                    <x-livewire-material::icon name="close" class="size-4" data-off />
+                    <x-livewire-material::icon name="check" class="size-4" optical="20" data-on />
+                    <x-livewire-material::icon name="close" class="size-4" optical="20" data-off />
                 @endif
             </span>
         </span>
diff --git a/tests/Feature/Components/SelectionTest.php b/tests/Feature/Components/SelectionTest.php
index 4b0e1fbe..d25d5d85 100644
--- a/tests/Feature/Components/SelectionTest.php
+++ b/tests/Feature/Components/SelectionTest.php
@@ -16,6 +16,12 @@ it('draws a checkbox whose row is its label', function () {
         ->not->toContain('data-indeterminate');
 });
 
+it('fills the box with an 18px tick from the 20 optical cut', function () {
+    expect((string) $this->blade('<x-checkbox label="Notify me" />'))
+        ->toContain((string) $this->blade('<x-icon name="check" class="size-4.5" optical="20" data-check />'))
+        ->toContain((string) $this->blade('<x-icon name="remove" class="size-4.5" optical="20" data-mixed />'));
+});
+
 it('marks a checkbox that is partly ticked', function () {
     expect((string) $this->blade('<x-checkbox label="Select all" indeterminate />'))->toContain('data-indeterminate');
 });