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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/battery_saver_24_regular.svg";Details
| Name | Battery Saver |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_battery_saver_24_regular.svg |
| Filled file | ic_fluent_battery_saver_24_filled.svg |
| React components | BatterySaver24Regular, BatterySaver24Filled |
| License | MIT (© Microsoft Corporation) |