The Standard Icon Set

Controls

Sun Moon icon

A circle half filled on the left, with short sun rays around the left side only. Use for light and dark mode, theme switching, or day and night.

Also searched as theme, appearance, dark mode.

SVG
PNG
Size
Weight

Sizes

  • 16
  • 18
  • 20
  • 22
  • 24
  • 28
  • 32
  • 40
  • 48

Use it

Format
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M9.5 2V3M9.5 13V14M3.5 8H4.5M5.25 3.75L6 4.5M5.25 12.25L6 11.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.182"/><path d="M12.25 8C12.25 8.729 11.96 9.429 11.445 9.945C10.929 10.46 10.229 10.75 9.5 10.75C8.771 10.75 8.071 10.46 7.555 9.945C7.04 9.429 6.75 8.729 6.75 8C6.75 7.271 7.04 6.571 7.555 6.055C8.071 5.54 8.771 5.25 9.5 5.25C10.229 5.25 10.929 5.54 11.445 6.055C11.96 6.571 12.25 7.271 12.25 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.182"/><path d="M9.5 5.25C8.771 5.25 8.071 5.54 7.555 6.055C7.04 6.571 6.75 7.271 6.75 8C6.75 8.729 7.04 9.429 7.555 9.945C8.071 10.46 8.771 10.75 9.5 10.75V5.25Z" fill="currentColor"/></svg>

Paste it into HTML. It draws in currentColor, so it takes the colour of the text around it.

Related15