Battery 1 icon
Used for power indication on devices. Contains power variants. The Battery 1 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 1 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 { Battery124Regular, Battery124Filled } from "@fluentui/react-icons";
export function Example() {
return <Battery124Regular aria-label="Battery 1" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_battery_1_24_regular.svg" width="24" height="24" alt="Battery 1"> 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="M17 6C18.6569 6 20 7.34315 20 9V10H21.0003C21.1824 10 21.3532 10.0487 21.5003 10.1338C21.7992 10.3067 22.0003 10.6299 22.0003 11V13C22.0003 13.3701 21.7992 13.6933 21.5003 13.8662C21.3532 13.9513 21.1824 14 21.0003 14H20V15C20 16.6569 18.6569 18 17 18H4.99963C3.34278 18 1.99963 16.6569 1.99963 15V9C1.99963 7.34315 3.34278 6 4.99963 6H17ZM16.9981 7.5H4.99963C4.21993 7.5 3.57918 8.09489 3.5065 8.85554L3.49963 9V15C3.49963 15.7797 4.09452 16.4204 4.85517 16.4931L4.99963 16.5H16.9981C17.7778 16.5 18.4186 15.9051 18.4912 15.1445L18.4981 15V9C18.4981 8.2203 17.9032 7.57955 17.1426 7.50687L16.9981 7.5ZM6.00294 8.99875H6.99996C7.5128 8.99875 7.93547 9.3848 7.99323 9.88213L7.99996 9.99875V13.9988C7.99996 14.5116 7.61391 14.9343 7.11658 14.992L6.99996 14.9988H6.00294C5.4901 14.9988 5.06743 14.6127 5.00967 14.1154L5.00294 13.9988V9.99875C5.00294 9.48592 5.38898 9.06324 5.88632 9.00548L6.00294 8.99875H6.99996H6.00294Z" 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_1_24_regular.svg";Details
| Name | Battery 1 |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_battery_1_24_regular.svg |
| Filled file | ic_fluent_battery_1_24_filled.svg |
| React components | Battery124Regular, Battery124Filled |
| License | MIT (© Microsoft Corporation) |