Battery Charge icon
Used for power indication on devices. The Battery Charge 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 Charge 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 { BatteryCharge24Regular, BatteryCharge24Filled } from "@fluentui/react-icons";
export function Example() {
return <BatteryCharge24Regular aria-label="Battery Charge" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_battery_charge_24_regular.svg" width="24" height="24" alt="Battery Charge"> 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="M7.6416 7.11618C7.57793 7.24187 7.53843 7.37122 7.51758 7.49997H5C4.22034 7.49997 3.57957 8.09485 3.50684 8.85545L3.5 8.99998V15C3.5 15.7796 4.09485 16.4204 4.85547 16.4932L5 16.5H16.998C17.7777 16.5 18.4185 15.9051 18.4912 15.1445L18.498 15V8.99998C18.498 8.2203 17.9032 7.57949 17.1426 7.50681L16.998 7.49997H15.0498L15.3594 6.88865C15.5079 6.59566 15.5315 6.2842 15.4629 5.99997H17C18.6569 5.99997 20 7.34315 20 8.99998V9.99998H21.001C21.1829 10 21.354 10.0487 21.501 10.1338C21.7997 10.3067 22.001 10.63 22.001 11V13C22.001 13.37 21.7997 13.6933 21.501 13.8662C21.354 13.9513 21.183 13.9999 21.001 14H20V15C20 16.6569 18.6569 18 17 18H5C3.34315 18 2 16.6569 2 15V8.99998C2.00003 7.34315 3.34317 5.99997 5 5.99997H8.20703L7.6416 7.11618ZM11.2422 2.22262C11.4325 1.8473 11.9989 1.98254 11.999 2.40328V5.99997H14.2002C14.4238 5.99997 14.5687 6.23601 14.4678 6.43552L11.7588 11.7812C11.5685 12.1567 11.002 12.0215 11.002 11.6006V8.00388H8.80078C8.57707 8.00388 8.43211 7.76788 8.5332 7.56833L11.2422 2.22262Z" 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_charge_24_regular.svg";Details
| Name | Battery Charge |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_battery_charge_24_regular.svg |
| Filled file | ic_fluent_battery_charge_24_filled.svg |
| React components | BatteryCharge24Regular, BatteryCharge24Filled |
| License | MIT (© Microsoft Corporation) |