Dark Light Pixel Art Icon
A dark/light mode icon for theme switchers, appearance toggles, and day/night display preference controls.
Tags
darklight
Style variants
Base, sharp, solid or glyph: see how the four styles differ and which to use.
About the Dark Light icon
An icon depicting both dark and light states in a single image, such as a half-filled circle or split-tone symbol, designed for theme-mode toggles. Use it on a dark/light toggle button in a settings panel, a top-bar appearance switcher, or a site-wide theme control. It is more compact than placing a sun and moon side by side. When you want to show each state separately, individual sun and moon icons let users see the current mode at a glance.
Usage
<!-- HTML -->
<img src="pixelarticons/svg/dark-light.svg" width="24" height="24" alt="Dark Light" />
<!-- React -->
import { DarkLight } from 'pixelarticons/react'
<!-- Sizes: 24px, 48px, 72px, 96px (multiples of 24) -->
<img src="dark-light.svg" width="48" height="48" style="image-rendering: pixelated" />