40 Free Battery Icons (SVG & PNG) for Apps and Dashboards

Custom Battery Icons: Create Scalable Vector Graphics in Figma

Designing custom battery icons as SVGs in Figma gives you crisp, scalable visuals that work across screens and platforms. This guide walks through a practical, repeatable workflow to create accessible, stateful battery icons, export clean SVGs, and prepare them for use in web and app projects.

Why custom SVG battery icons?

• Scalability: Vector shapes scale without pixelation.
• Small file size: Optimized SVGs are lightweight.
• Styling flexibility: Fill, stroke, and animations can be controlled via CSS or code.
• Multiple states: Easily create empty/full/charging/low states from one base shape.

1. Set up your Figma file

1. Create a new file and a frame sized 96×96 px (or 24–48 px for pixel-precise icons).
2. Enable 1px stroke preview (View → Pixel Grid) if working at small sizes.
3. Add a grid or layout to align elements: 8px square grid works well.

2. Build the base battery shape

1. Draw a rounded rectangle for the body (e.g., 64×36 px, 6 px corner radius).
2. Add the terminal: a smaller rectangle (8×14 px) positioned flush to the body’s right edge and vertically centered. Combine visually without boolean union — keep as separate layers for easier state masking.
3. Set stroke to 2 px and fill to transparent (or use a filled body depending on style). Use vector outlines (right-click → Outline Stroke) only if you need fixed shapes.

3. Create charge-level fills using masks

1. Inside the battery body, draw a rectangle representing the charge fill. Set its width to 100% for full state.
2. Convert the battery body to a mask: select the body and Fill rectangle → right-click → Use as Mask. Place the fill rectangle underneath the mask layer.
3. To create multiple states, duplicate the component and resize the fill rectangle to the desired percentage: 75%, 50%, 20%, and 0%.

4. Add state indicators

• Charging: Overlay a lightning bolt. Create a bolt using the Pen tool or combine triangles; place it centered and use a contrasting color.
• Low battery: Add a small exclamation or change the fill/stroke to an accent color (e.g., red or amber).
• Unknown/error: Use a question mark or dashed outline.

Keep these icons as separate layers so states can be toggled in components or via code.

5. Make components and variants

1. Select the grouped icon (body + terminal + fill + indicator) and create a Component (Ctrl/Cmd+Alt+K).
2. In the Assets panel, convert into Variants for each state: Full, 75%, 50%, Low, Empty, Charging, Error.
3. Add a property named “State” and assign each variant accordingly. This enables quick swapping in designs and handoff.

6. Optimize for small sizes and accessibility

• Test at target sizes (16–24 px). Increase stroke weight if details disappear.
• Use clear contrast between fill and background; meet AA contrast where icons convey status.
• Avoid thin strokes for tiny icons—prefer bolder strokes or filled silhouettes.
• Provide accessible labels in your design system documentation (e.g., aria-label values like “Battery 20% — Low”).

7. Exporting clean SVGs

1. For each variant, select the component instance and choose Export → SVG.
2. Before exporting, tidy layer names and remove unnecessary groups.
3. In the export settings, enable “Simplify outlines” only when necessary.
4. Optionally run exported SVGs through an optimizer (SVGO or svgomg) to remove metadata and reduce size. Keep IDs predictable if you plan to animate parts via CSS/JS.

Example minimal SVG considerations:

• Use shapes and paths instead of raster images.
• Use viewBox that matches the icon artboard (e.g., viewBox=“0 0 96 96”).
• Avoid hard-coded width/height if you want flexible sizing — rely on viewBox only.

8. Styling and animating SVGs in code

• Color: Use currentColor to inherit text color (set fills/strokes to “currentColor”) for themeable icons.
• Animations: Target internal elements by IDs or classes (ensure those are preserved during optimization). Use CSS keyframes or SVG