The HugeIcons dark mode icon visually represents the concept of switching a user interface to a darker color scheme, commonly used to reduce eye strain and save battery life on OLED screens.
Common uses
- Toggle dark mode in application settings.
- Indicate the current theme (light or dark).
- Control display preferences.
Use it in React
Install
npm i @hugeicons/react @hugeicons/core-free-iconsImport & render
import { HugeiconsIcon } from '@hugeicons/react';
import { DarkModeIcon } from '@hugeicons/core-free-icons';
<HugeiconsIcon icon={DarkModeIcon} size={24} strokeWidth={1.5} />Details
- Library
- HugeIcons (5,121 icons)
- License
- MIT
- viewBox
0 0 24 24- Keywords
- moon iconnight modetheme switchdark theme
FAQ
- What is the purpose of the dark mode icon?
- It's used in UIs to allow users to switch between a light and a dark color theme for the interface.
- How do I use the DarkModeIcon in React?
- Import both HugeiconsIcon and DarkModeIcon, then render <HugeiconsIcon icon={DarkModeIcon} />.
- What is the license for this icon?
- The HugeIcons library, including this icon, is distributed under the MIT license.
Related icons
The same idea in other libraries, and near matches in 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 →