Battery Saver icon

Used for power indication on devices. The Battery Saver icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 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

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_battery_saver_24_regular.svg

Battery Saver icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <BatterySaver24Regular aria-label="Battery Saver" />;
}

Battery Saver icon in SVG

npm install @fluentui/svg-icons

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

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

Battery Saver icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Battery Saver icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.battery_saver_24_regular)

Battery Saver 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="&#xF1D4;" FontSize="24" />

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

Battery Saver 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_battery_saver_24_regular"></i>

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

Battery Saver icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_battery_saver_24_regular

Battery Saver icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .batterySaver24Regular)

Battery Saver 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 Battery Saver 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 { BatterySaver24Regular, BatterySaver24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BatterySaver24Regular aria-label="Battery Saver" />;
}

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_battery_saver_24_regular.svg" width="24" height="24" alt="Battery Saver">

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="M11.0048 11.0809C11.0048 9.50568 10.2104 7.21324 8.64603 4.36148C8.37747 3.8719 7.67676 3.87805 7.37562 4.34194C6.95678 4.98716 6.332 5.64892 5.49915 6.32209L5.12968 6.61135L4.77472 6.88042L4.28418 7.25774C2.55613 8.63495 1.87457 9.85963 2.02412 11.6694C2.15628 13.2688 3.12372 14.4146 4.78685 14.9395C4.19979 15.623 3.42846 16.1621 2.46342 16.5615C2.08068 16.7198 1.89881 17.1585 2.05719 17.5412C2.21558 17.924 2.65424 18.1058 3.03698 17.9475C4.8701 17.1889 6.18577 15.9718 6.94901 14.3142C7.2344 13.6944 7.46268 13.0831 7.63283 12.4808L7.6761 12.3252L7.7777 11.9126L7.84619 11.5826L7.88783 11.3456L7.95448 10.8689C7.99703 10.4916 8.01557 10.118 8.00995 9.74822L8.00624 9.72511C8.02395 9.33216 8.34498 9.01601 8.74358 9.00969C9.15774 9.00312 9.49881 9.33354 9.50537 9.7477C9.52853 11.2078 9.232 12.6972 8.62043 14.212L8.59477 14.3005C8.57833 14.3907 8.58947 14.4846 8.62792 14.5694C8.73144 14.7977 9.00047 14.8989 9.2288 14.7954L9.34317 14.7376C9.41573 14.6968 9.48092 14.6513 9.53875 14.6013C10.2609 13.9767 11.0048 12.6561 11.0048 11.0809ZM17 6.00052H11.75L11.6482 6.00737C11.2822 6.05703 11 6.37082 11 6.75052C11 7.16473 11.3358 7.50052 11.75 7.50052H17L17.1445 7.50739C17.9051 7.58007 18.5 8.22082 18.5 9.00052V15.0005L18.4931 15.145C18.4204 15.9056 17.7797 16.5005 17 16.5005H7.75C7.34438 16.5278 7 16.821 7 17.2505C7 17.6647 7.33579 18.0005 7.75 18.0005H17L17.1763 17.9954C18.7511 17.9042 20 16.5982 20 15.0005V14.0005L21.0006 14.0184L21.1349 14.0094C21.2667 13.9917 21.3903 13.9484 21.5006 13.8846C21.7995 13.7117 22.0006 13.3885 22.0006 13.0184V11.0184L21.9933 10.8969C21.9548 10.5783 21.7663 10.3058 21.5006 10.1522C21.3535 10.0671 21.1827 10.0184 21.0006 10.0184L20 10.0005V9.00052L19.9949 8.82425C19.9037 7.24944 18.5977 6.00052 17 6.00052Z" fill="currentColor"/></svg>

Details

NameBattery Saver
StylesRegular (outlined), Filled
Sizes20 px, 24 px
Regular (outlined) fileic_fluent_battery_saver_24_regular.svg
Filled fileic_fluent_battery_saver_24_filled.svg
React (Regular)BatterySaver20Regular, BatterySaver24Regular
React (Filled)BatterySaver20Filled, BatterySaver24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

chargepower

Related icons