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/heroicons-moon.json
npx shadcn@latest add https://www.shadcn.io/registry/heroicons-moon.json
pnpm dlx shadcn@latest add https://www.shadcn.io/registry/heroicons-moon.json
bunx shadcn@latest add https://www.shadcn.io/registry/heroicons-moon.json
Category:interface
Tags:moondarkmodenightthemeappearancetoggle

The moon icon represents dark mode and night themes with its crescent moon design.

This theme symbol has become the standard indicator for dark mode toggles, night theme activation, low-light interfaces, and appearance settings across all modern web applications and operating systems.

Frequently Asked Questions

Common questions about the Moon icon

Similar Icons

H3 16 Solid - typography icon from HeroIcons
h3 16 solid
Fire Solid - status icon from HeroIcons
fire solid
Arrow Turn Left Down 16 Solid - actions icon from HeroIcons
arrow turn left down 16 solid
Currency Yen 20 Solid - interface icon from HeroIcons
currency yen 20 solid
Arrow Long Down 16 Solid - navigation icon from HeroIcons
arrow long down 16 solid
List Bullet Solid - typography icon from HeroIcons
list bullet solid
Divide 16 Solid - interface icon from HeroIcons
divide 16 solid
Bars 4 Solid - interface icon from HeroIcons
bars 4 solid
Clock 16 Solid - interface icon from HeroIcons
clock 16 solid