What does the moon icon represent?

It represents the crescent moon, typically used for concepts like nighttime, sleep, or dark mode.

How do I use the MoonIcon in React?

Import both HugeiconsIcon and MoonIcon, then render .

What is the license for this icon?

This icon is available under the MIT license, allowing for free commercial and non-commercial use.

moon icon

HugeIcons · MoonIcon · MIT

The HugeIcons moon icon depicts the crescent moon, commonly used to represent nighttime, sleep, or dark mode in user interfaces.

Common uses

Dark mode toggle
Nighttime status indicator
Sleep or rest feature

Use it in React

Install

npm i @hugeicons/react @hugeicons/core-free-icons

Import & render

import { HugeiconsIcon } from '@hugeicons/react';
import { MoonIcon } from '@hugeicons/core-free-icons';

<HugeiconsIcon icon={MoonIcon} size={24} strokeWidth={1.5} />

Details

Library: HugeIcons (5,121 icons)
License: MIT
viewBox: 0 0 24 24
Keywords: nightdark modecrescent

FAQ

What does the moon icon represent?: It represents the crescent moon, typically used for concepts like nighttime, sleep, or dark mode.
How do I use the MoonIcon in React?: Import both HugeiconsIcon and MoonIcon, then render <HugeiconsIcon icon={MoonIcon} />.
What is the license for this icon?: This icon is available under the MIT license, allowing for free commercial and non-commercial use.

Related icons

The same idea in other libraries, and near matches in HugeIcons.

lucide phosphor tabler heroicons hugeicons hugeicons hugeicons hugeicons hugeicons hugeicons hugeicons hugeicons

Looking for something else? Search HugeIcons and 4 more libraries by description →

The search behind these pages runs as a Claude Code skill. What skills are and how I ship them →