Moon icon - Free SVG for React, Vue, Svelte, Angular, Solid & Preact - Customizable interface vector icon

Install with shadcn CLI

npx shadcn@latest add https://www.shadcn.io/registry/akar-icons-moon.json
npx shadcn@latest add https://www.shadcn.io/registry/akar-icons-moon.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/akar-icons-moon.json
bunx shadcn@latest add https://www.shadcn.io/registry/akar-icons-moon.json
Category:interface
Tags:moondarknightthememodetogglelow-lightpreference

The moon icon represents dark mode, night theme, and low-light interface settings in theme switching and display preference controls.

Featuring a crescent moon design, this universally recognized symbol has become the standard indicator for activating dark themes, night modes, and reduced brightness settings across digital platforms.

Frequently Asked Questions

Common questions about the Moon icon

Similar Icons

Infinite - interface icon from Akar Icons
infinite
Infinity - data icon from Akar Icons
infinity
Postgresql Fill - system icon from Akar Icons
postgresql fill
Check Box - interface icon from Akar Icons
check box
Three Line Horizontal - navigation icon from Akar Icons
three line horizontal
Node Fill - system icon from Akar Icons
node fill
Jquery Fill - communication icon from Akar Icons
jquery fill
Desktop Device - system icon from Akar Icons
desktop device
Nextjs Fill - system icon from Akar Icons
nextjs fill