Beta

Dark Mode SVG icon, line

Free

A crescent moon and small four-point star indicate a night display setting. Place it in app settings menus or on display control panels.

Sign in to download. Free SVGs are free with any account.

darknightmoondisplayweathericonline

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vW8esDU2Hv6b/amnt.svg" alt="Dark Mode" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 15.5A8 8 0 0 1 8.5 5 8 8 0 1 0 19 15.5Z"/><path d="m18 2 .8 2.2L21 5l-2.2.8L18 8l-.8-2.2L15 5l2.2-.8L18 2Z"/></svg>
CSS background-image
.dark-mode {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vW8esDU2Hv6b/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.dark-mode {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/vW8esDU2Hv6b/amnt.svg") center / contain no-repeat;
}
React
import DarkModeSvg from "./dark-mode.jsx"; // from the React tab above

<DarkModeSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Dark Mode: A crescent moon beside one small four-point star. as part of the pack Weather icons, line. Want one like it? Make your own in the SVG studio.

Rest of Weather icons, line

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence