How to Choose the Right Battery Icon for Your App

Battery Icons Explained: Meanings, Styles, and Best Practices

Battery icons communicate device power status at a glance. Common elements and what they typically mean:

Filled level: Shows remaining charge (e.g., full, half, low).
Color: Green often means healthy/charged, yellow/amber indicates medium/charging or caution, red signals low battery.
Charging indicator: A bolt, plug, or animated fill indicates the device is charging.
State overlays: Symbols such as an X, slash, or exclamation mark indicate errors, not detected battery, or battery health issues.
Percentage label: Numeric percent alongside the icon provides exact remaining charge.

Outline/Stroke icons
- Clean, minimal; fit modern UIs and scale well.
- Best for toolbars and system trays where subtlety is needed.
Filled/Solid icons
- High visual weight; good for emphasis or small sizes where outline details are lost.
- Works well in mobile status bars and notifications.
Glyphs with indicators
- Combine battery shape with bolt, plug, or arrows to show charging, full, or discharging states.
- Use when you need explicit state communication without text.
Animated icons
- Use subtle animation (pulsing, filling) to show charging progress or low-battery warnings.
- Effective for interactive apps but avoid distraction for system status displays.
Monochrome vs. Colored
- Monochrome fits minimalist themes and adapts easily to dark/light modes.
- Color adds immediate semantic cue (green/yellow/red) but must be paired with non-color indicators for accessibility.
Pixel-perfect vs. Scalable vectors
- Pixel-perfect raster icons can look crisper at targeted sizes.
- SVG/vector icons scale across resolutions and are preferred for responsive designs.

Don’t rely on color alone. Always pair color with shape, icons, or text so color-blind users can interpret status.
Provide text alternatives. Screen readers should announce battery percentage and state (e.g., “Battery 23%, charging”).
Sufficient contrast. Ensure icon contrast meets WCAG recommendations against the background.
Touch targets and clarity. If the battery icon is interactive, ensure tappable areas meet minimum size guidelines (typically 44–48 px).

Prioritize clarity: At glance-readability matters—keep shapes simple and use clear indicators for charging and critical states.
Use progressive disclosure: Show basic icon in compact UI, and reveal percentage or detailed status on tap or hover.
Consistent semantics: Use the same symbols across your product (bolt for charging, red for low) to avoid confusion.
Optimize for scale: Test icons at the smallest and largest sizes they’ll appear; adjust stroke weight and gaps for legibility.
Consider animation sparingly: Use motion to show transitions (start/stop charging) but avoid continuous distracting animation.
Localize numeric formats: When showing percentage, follow the locale’s number formatting if relevant (most use plain numerals).
Fallbacks for unknown states: Design a clear “unknown” or “no battery” icon (e.g., a dash or question symbol) rather than leaving empty space.

Use SVGs for crisp, scalable icons and to animate fills via CSS or SMIL when needed.
Provide multiple icon sizes (e.g., 16, 24, 32, 48 px) if using raster assets to retain pixel perfection.
Expose ARIA attributes and live regions to announce state changes for assistive tech users.
Debounce rapid updates to avoid frequent re-renders when reading battery sensor values.

Status bar: Small monochrome outline with numeric percentage hidden unless requested.
Notification: Larger filled icon with color and percentage; include charging bolt if applicable.
Settings screen: Large, labeled battery visualization with charge cycles, health, and power usage details.

If you’d like, I can create a set of SVG battery icons (outline, filled, charging, low) sized for common UI needs.