SVG Switches · Lessons

Nine reference switch designs, each driven by the same vSwitch variable.

Outlined dot

Rounded track with an outline and a dot knob.

Solid rounded track with a white outlined knob.

Rounded track with a teal outline and white knob.

Taller filled capsule with a white knob.

Square-cornered track, an outlined icon and a rectangular slider.

Pale track, a check badge on the left and a sliding knob.

Outlined pill with a text label and double chevrons.

Filled track with an arrow and a white knob.

Plain grey track with a solid teal knob.