太陽⇄月アイコンのシンプルトグル

<div class="d11-15-01-row">
          <span class="d11-15-01-sw d11-15-01-light">
            <span class="d11-15-01-knob">
              <svg viewBox="0 0 24 24" width="14" height="14"><circle cx="12" cy="12" r="5" fill="#f59e0b"/><g stroke="#f59e0b" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.2" y1="4.2" x2="5.6" y2="5.6"/><line x1="18.4" y1="18.4" x2="19.8" y2="19.8"/><line x1="4.2" y1="19.8" x2="5.6" y2="18.4"/><line x1="18.4" y1="5.6" x2="19.8" y2="4.2"/></g></svg>
            </span>
          </span>
          <span class="d11-15-01-label">ライト</span>
        </div>
        <div class="d11-15-01-row">
          <span class="d11-15-01-sw d11-15-01-dark">
            <span class="d11-15-01-knob">
              <svg viewBox="0 0 24 24" width="14" height="14"><path d="M12 3a9 9 0 109 9c0-.46-.04-.92-.1-1.36A7 7 0 1113.36 3.1 9.13 9.13 0 0012 3z" fill="#475569"/></svg>
            </span>
          </span>
          <span class="d11-15-01-label">ダーク</span>
        </div>

.d11-15-01{flex-direction:column;gap:14px}
        .d11-15-01-row{display:flex;align-items:center;gap:12px}
        .d11-15-01-sw{position:relative;width:52px;height:28px;border-radius:14px;display:block}
        .d11-15-01-light{background:#fde68a}
        .d11-15-01-dark{background:#1e293b}
        .d11-15-01-knob{position:absolute;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.25)}
        .d11-15-01-light .d11-15-01-knob{left:3px}
        .d11-15-01-dark .d11-15-01-knob{right:3px}
        .d11-15-01-label{font-size:13px;color:#374151;font-weight:600}