Dusk UI Controls — checkbox, toggle and slider

Sixteen pixel controls for a settings screen that has to sit next to sixteen pixel type. At this size the difference between checked and unchecked cannot be a subtle tint, so it is a filled surface against an empty recess.

The set covers what a settings screen actually needs: a checkbox, a radio button, a toggle switch, a slider with a separate knob, and a stepper pair for discrete values. Each stateful control ships every state as its own file at a 16×16 base — the toggle is 32×16 and the slider track is 128 px wide so it can be nine-sliced to any length. The slider also ships empty, full and vertical, because a volume column is not a rotated row.

On and off are drawn as different shapes, not different colours. An unchecked box is an empty recess; a checked one is a filled surface with a tick cut into it. That matters because a settings screen is exactly where a player is most likely to be running a colourblind mode, a greyscale shader, or a heavily tinted post-process — and a state you can only read by hue disappears under all three.

The slider ships as a track and a knob rather than a single sprite. Animating a one-piece slider means redrawing it per value; with two pieces you stretch the fill and move the knob, which is what every UI toolkit already expects. The knob carries a centre notch so its rotation and position stay readable at small sizes, and a held variant adds an accent ring for the drag state.

Disabled is a separate sprite for every stateful control, not a tint applied at runtime. An unavailable setting and a switched-off setting are different things — one says "off", the other says "you cannot touch this" — and a screen that shows them the same way sends a player looking for a bug that is not there. The checkbox also ships a partial state for the select-all row above a list of mixed selections, which is the case a two-state checkbox reports incorrectly.

Everything is included as editable SVG and as flat transparent PNG at 1x, 2x and 4x, drawn from the same six night-violet tones as the rest of the Dusk family.

Creative Commons Attribution 4.0 — Free for commercial use. Credit required. Full terms · What this means in practice