Recolor multiple images

I am converting a static website to a WordPress site. Many of my current pages have several simple one-color png images (in multiple sizes) on them that represent an ancient symbol or font character. See example at https://hebrewwordpics.com/jehovah.html where you will see some of the small symbols on the brown background. I have about 40 of these symbols and I have access to each of them in svg, png, and jpg formats.

I would like to be able to easily recolor these using CSS when I make other color changes to the WordPress website. I currently have to create a new png image, and then repointing every instance they are used to the new image. Gotta be a better way!

I have examined using icon fonts and sprites, but that seems to be quite difficult also. For quality reasons, I would prefer to use svg, but will gladly compromise on that if needed to get an easier implementation.

Please give any guidance or suggestions that will decrease the amount of labor required to simply change the color of these symbols.