Dual Icon Toggle Switch
Both choices live in the track as icons, code on one end and preview on the other, with labels outside. The white knob glides under the active icon, which takes the accent and pops.
Also known as: toggle switch with two icons, icon toggle switch css, code preview toggle, dual icon switch.
HTML
<label class="tgl-dual-icon-toggle">
<input type="checkbox" role="switch" aria-label="Preview">
<span class="tgl-dual-icon-toggle-word tgl-dual-icon-toggle-code-word" aria-hidden="true">Code</span>
<span class="tgl-dual-icon-toggle-track" aria-hidden="true">
<span class="tgl-dual-icon-toggle-knob"></span>
<svg class="tgl-dual-icon-toggle-code" viewBox="0 0 24 24"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg>
<svg class="tgl-dual-icon-toggle-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
</span>
<span class="tgl-dual-icon-toggle-word tgl-dual-icon-toggle-eye-word" aria-hidden="true">Preview</span>
</label>CSS
.tgl-dual-icon-toggle {
--c: var(--tgl-color, #3b82f6);
font-size: var(--tgl-size, 24px);
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-family: system-ui, sans-serif;
line-height: 1.2;
gap: 0.7em;
}
.tgl-dual-icon-toggle input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
z-index: 1;
}
.tgl-dual-icon-toggle-word {
font-size: 0.8em;
font-weight: 600;
color: color-mix(in srgb, currentColor 45%, transparent);
transition: color 0.3s ease;
}
.tgl-dual-icon-toggle-code-word {
color: currentColor;
}
.tgl-dual-icon-toggle-track {
position: relative;
display: block;
width: 4.4em;
height: 2.2em;
border-radius: 99em;
background: color-mix(in srgb, currentColor 8%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}
.tgl-dual-icon-toggle-knob {
position: absolute;
top: 0.2em;
left: 0.2em;
width: 1.8em;
height: 1.8em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 0.2), 0 0 0 1px rgb(0 0 0 / 0.04);
transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.5, 1);
}
.tgl-dual-icon-toggle-track svg {
position: absolute;
top: 0.6em;
width: 1em;
height: 1em;
fill: none;
stroke: color-mix(in srgb, currentColor 45%, transparent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tgl-dual-icon-toggle-code {
left: 0.6em;
}
.tgl-dual-icon-toggle .tgl-dual-icon-toggle-code {
stroke: var(--c);
}
.tgl-dual-icon-toggle-eye {
right: 0.6em;
}
.tgl-dual-icon-toggle input:checked ~ .tgl-dual-icon-toggle-track .tgl-dual-icon-toggle-knob {
transform: translateX(2.2em);
}
.tgl-dual-icon-toggle input:checked ~ .tgl-dual-icon-toggle-track .tgl-dual-icon-toggle-code {
stroke: color-mix(in srgb, currentColor 45%, transparent);
}
.tgl-dual-icon-toggle input:checked ~ .tgl-dual-icon-toggle-track .tgl-dual-icon-toggle-eye {
stroke: var(--c);
animation: tgl-dual-icon-toggle-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.tgl-dual-icon-toggle input:not(:checked) ~ .tgl-dual-icon-toggle-track .tgl-dual-icon-toggle-code {
animation: tgl-dual-icon-toggle-pop-back 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}
.tgl-dual-icon-toggle input:checked ~ .tgl-dual-icon-toggle-code-word {
color: color-mix(in srgb, currentColor 45%, transparent);
}
.tgl-dual-icon-toggle input:checked ~ .tgl-dual-icon-toggle-eye-word {
color: currentColor;
}
.tgl-dual-icon-toggle input:focus-visible ~ .tgl-dual-icon-toggle-track {
outline: 0.12em solid var(--c);
outline-offset: 0.2em;
}
@keyframes tgl-dual-icon-toggle-pop {
0% { transform: scale(0.6); }
100% { transform: scale(1); }
}
@keyframes tgl-dual-icon-toggle-pop-back {
0% { transform: scale(0.6); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.tgl-dual-icon-toggle *,
.tgl-dual-icon-toggle *::before,
.tgl-dual-icon-toggle *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
}
}
@media (prefers-reduced-motion: reduce) {
.tgl-dual-icon-toggle, .tgl-dual-icon-toggle *, .tgl-dual-icon-toggle::before, .tgl-dual-icon-toggle::after, .tgl-dual-icon-toggle *::before, .tgl-dual-icon-toggle *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--tgl-coloron the element or a parent. Currently previewing#3b82f6. - Size: set
--tgl-size. Every other dimension is inem, so the whole thing scales together. Currently previewing24px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.