Fluent Icons

Brightness High icon

Used in device brightness scenarios. Contains high & low variants. The Brightness High icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_brightness_high_24_regular.svg

Brightness High icon in React

npm install @fluentui/react-icons

import { BrightnessHigh24Regular } from "@fluentui/react-icons";

export function Example() {
  return <BrightnessHigh24Regular aria-label="Brightness High" />;
}

Brightness High icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/brightness_high_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/brightness_high_24_regular.svg" width="24" height="24" alt="Brightness High">

Brightness High icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.BrightnessHigh())" />

Brightness High icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.brightness_high_24_regular)

Brightness High icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE1F8;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE1F8;" FontSize="24" />

Brightness High icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_brightness_high_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e1f8";
  font-size: 24px;
}

Brightness High icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_brightness_high_24_regular" />

// Kotlin
R.drawable.ic_fluent_brightness_high_24_regular

Brightness High icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .brightnessHigh24Regular)

Brightness High icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Brightness High icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS. 

npm install @fluentui/react-icons

import { BrightnessHigh24Regular, BrightnessHigh24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BrightnessHigh24Regular aria-label="Brightness High" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_brightness_high_24_regular.svg" width="24" height="24" alt="Brightness High">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent: 

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C12.4142 2 12.75 2.33579 12.75 2.75V4.25C12.75 4.66421 12.4142 5 12 5C11.5858 5 11.25 4.66421 11.25 4.25V2.75C11.25 2.33579 11.5858 2 12 2ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17ZM12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.067 10.067 8.5 12 8.5C13.933 8.5 15.5 10.067 15.5 12C15.5 13.933 13.933 15.5 12 15.5ZM21.25 12.75C21.6642 12.75 22 12.4142 22 12C22 11.5858 21.6642 11.25 21.25 11.25H19.75C19.3358 11.25 19 11.5858 19 12C19 12.4142 19.3358 12.75 19.75 12.75H21.25ZM12 19C12.4142 19 12.75 19.3358 12.75 19.75V21.25C12.75 21.6642 12.4142 22 12 22C11.5858 22 11.25 21.6642 11.25 21.25V19.75C11.25 19.3358 11.5858 19 12 19ZM4.25 12.75C4.66421 12.75 5 12.4142 5 12C5 11.5858 4.66421 11.25 4.25 11.25H2.75C2.33579 11.25 2 11.5858 2 12C2 12.4142 2.33579 12.75 2.75 12.75H4.25ZM4.21967 4.22004C4.51256 3.92714 4.98744 3.92714 5.28033 4.22004L6.78033 5.72004C7.07322 6.01293 7.07322 6.4878 6.78033 6.7807C6.48744 7.07359 6.01256 7.07359 5.71967 6.7807L4.21967 5.2807C3.92678 4.9878 3.92678 4.51293 4.21967 4.22004ZM5.28033 19.7807C4.98744 20.0736 4.51256 20.0736 4.21967 19.7807C3.92678 19.4878 3.92678 19.0129 4.21967 18.72L5.71967 17.22C6.01256 16.9271 6.48744 16.9271 6.78033 17.22C7.07322 17.5129 7.07322 17.9878 6.78033 18.2807L5.28033 19.7807ZM19.7803 4.22004C19.4874 3.92714 19.0126 3.92714 18.7197 4.22004L17.2197 5.72004C16.9268 6.01293 16.9268 6.4878 17.2197 6.7807C17.5126 7.07359 17.9874 7.07359 18.2803 6.7807L19.7803 5.2807C20.0732 4.9878 20.0732 4.51293 19.7803 4.22004ZM18.7197 19.7807C19.0126 20.0736 19.4874 20.0736 19.7803 19.7807C20.0732 19.4878 20.0732 19.0129 19.7803 18.72L18.2803 17.22C17.9874 16.9271 17.5126 16.9271 17.2197 17.22C16.9268 17.5129 16.9268 17.9878 17.2197 18.2807L18.7197 19.7807Z" fill="currentColor"/></svg>

Details

NameBrightness High
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_brightness_high_24_regular.svg
Filled fileic_fluent_brightness_high_24_filled.svg
React (Regular)BrightnessHigh16Regular, BrightnessHigh20Regular, BrightnessHigh24Regular, BrightnessHigh28Regular, BrightnessHigh32Regular, BrightnessHigh48Regular
React (Filled)BrightnessHigh16Filled, BrightnessHigh20Filled, BrightnessHigh24Filled, BrightnessHigh28Filled, BrightnessHigh32Filled, BrightnessHigh48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

sunlight

Related icons

Brightness LowWeather Sunny HighCircle HighlightCircle ShadowDark ThemeF StopFlashlightFlashlight OffLightbulbLightbulb CheckmarkLightbulb CircleLightbulb Filament