Toggle Checkbox Custom Icons

Use checked-icon and unchecked-icon slots for custom icons.

Dot Icon
Custom Unchecked Icon

Code

The following example assumes that you have imported the component and set up the theme.

<label class="check-box-label">
  <sv-toggle-checkbox class="dot-checkbox">
    <svg aria-hidden="true" slot="unchecked-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
3 collapsed lines
      <path
        d="M480-480Zm0 280q-116 0-198-82t-82-198q0-116 82-198t198-82q116 0 198 82t82 198q0 116-82 198t-198 82Zm0-80q83 0 141.5-58.5T680-480q0-83-58.5-141.5T480-680q-83 0-141.5 58.5T280-480q0 83 58.5 141.5T480-280Z"
      ></path>
    </svg>

    <svg aria-hidden="true" slot="checked-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
3 collapsed lines
      <path
        d="M480-200q-117 0-198.5-81.5T200-480q0-117 81.5-198.5T480-760q117 0 198.5 81.5T760-480q0 117-81.5 198.5T480-200Z"
      ></path>
    </svg>
  </sv-toggle-checkbox>

  Dot Icon
</label>

<br />

<label class="check-box-label">
  <sv-toggle-checkbox>
    <svg slot="unchecked-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
      <path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"></path>
    </svg>
  </sv-toggle-checkbox>

  Custom Unchecked Icon
</label>

<style>
7 collapsed lines
  .check-box-label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .dot-checkbox {
    --sv-bdr-rad-sm: var(--sv-bdr-rad-lg);
    --sv-checkbox-sz: 2em;
  }
</style>