This is a simple package for generating an SVG battery indicator for us in the mode-line or tab-bar. It’s not on MELPA or Gnu Elpa, so you’ll have to install it manually, or using a GitHub helper like straight. See the top right of the screen-shot below:

This package requires Emacs to be built with SVG support. You can test this by running (image-type-available-p 'svg). If you get t, you have SVG support.

The indicator takes advantage of display-battery-mode (and the battery.el library generally). It uses advice to add an extra expando to battery-mode-line-format. To use, add svg-battery-indicator-status-advice as :filter-return advice to battery-status-function (whatever battery-status-function is on your machine). The expando %i will then be available in battery-mode-line-format, and expands to an a battery SVG.

You might have something like this in your init.el:

(advice-add
 ;; NOTE that `battery-status-function' is UNQUOTED. It's a variable,
 ;; which battery.el requires to point at a function, with a return
 ;; value which `svg-battery-indicator-status-advice' can handle.
 battery-status-function
 :filter-return
 #'svg-battery-indicator-status-advice)

(display-battery-mode)

(setq battery-mode-line-format "%p%% %i")

;; To display in the mode-line
(add-to-list 'mode-line-format
	       'battery-mode-line-string)

;; To display in the tab-bar
(add-to-list 'tab-bar-format
	       'battery-mode-line-string)

The variable svg-battery-indicator-length sets the length of the indicator. Otherwise all customization is through battery.el. The indicator uses the threshholds set in battery-load-low and battery-load-critical, and represents them with the foreground colours from the faces battery-load-low and battery-load-critical.