diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 5bc05972c..f0ec0d8bc 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -6,6 +6,11 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Moved the `checked-icon` and `indeterminate-icon` parts from a wrapper `<span>` to the `<svg>` in `<sl-checkbox>` [#786](https://github.com/shoelace-style/shoelace/issues/786)
+- Moved the `checked-icon` part from a wrapper `<span>` to the `<svg>` in `<sl-radio>` [#786](https://github.com/shoelace-style/shoelace/issues/786)
+
 ## 2.0.0-beta.77
 
 - Added styles to required form controls so they show an asterisk next to the label by default
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index e37d9b3da..58a47c6c2 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -154,33 +154,29 @@ export default class SlCheckbox extends LitElement {
         <span part="control" class="checkbox__control">
           ${this.checked
             ? html`
-                <span part="checked-icon" class="checkbox__icon">
-                  <svg viewBox="0 0 16 16">
-                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-                      <g stroke="currentColor" stroke-width="2">
-                        <g transform="translate(3.428571, 3.428571)">
-                          <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
-                          <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
-                        </g>
+                <svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
+                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                    <g stroke="currentColor" stroke-width="2">
+                      <g transform="translate(3.428571, 3.428571)">
+                        <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
+                        <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
                       </g>
                     </g>
-                  </svg>
-                </span>
+                  </g>
+                </svg>
               `
             : ''}
           ${!this.checked && this.indeterminate
             ? html`
-                <span part="indeterminate-icon" class="checkbox__icon">
-                  <svg viewBox="0 0 16 16">
-                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-                      <g stroke="currentColor" stroke-width="2">
-                        <g transform="translate(2.285714, 6.857143)">
-                          <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
-                        </g>
+                <svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16">
+                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+                    <g stroke="currentColor" stroke-width="2">
+                      <g transform="translate(2.285714, 6.857143)">
+                        <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
                       </g>
                     </g>
-                  </svg>
-                </span>
+                  </g>
+                </svg>
               `
             : ''}
         </span>
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index b0fbe0053..6f6e1d75c 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -179,15 +179,13 @@ export default class SlRadio extends LitElement {
           @focus=${this.handleFocus}
         />
         <span part="control" class="radio__control">
-          <span part="checked-icon" class="radio__icon">
-            <svg viewBox="0 0 16 16">
-              <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g fill="currentColor">
-                  <circle cx="8" cy="8" r="3.42857143"></circle>
-                </g>
+          <svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
+            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+              <g fill="currentColor">
+                <circle cx="8" cy="8" r="3.42857143"></circle>
               </g>
-            </svg>
-          </span>
+            </g>
+          </svg>
         </span>
 
         <span part="label" class="radio__label">