Recoloring a set of PNG icons

Question

I have a set of icons in a .png format. The customer wants them in a different colour. I know they are from either glyphicons or fontawesome icon fonts, but I do not know how they were generated. I tried this command to recolour them, but bits of red are always left behind and increasing fuzz value has negative effects on other parts of image:

mogrify -fuzz 41% -fill "#5DBFAD" -opaque "#ea5648" *icon.png *arrow.png *rtl.png

Image before:

Image after:

Note: Look closely if you have a dark theme on, there is a second dark-grey icon over the coloured one.

I need either a way to get rid of these red artefacts or a way to generate these icons on my own with the colour of my choice (a full replacement in css is also an option, using the icon font, colouring it and animating). Also for an unknown reason some icons have the coloured one on top like this:

Extra info: When hovered-over these icons transition a few pixels up/down to show the other icon. This is a part of a free nopCommerce theme: http://themes.nopaccelerate.com/themes/nopaccelerate-simplex-theme-3/?utm_source=nop&utm_medium=extension&utm_campaign=extension-directory

Answer 1

You can use ImageMagick to re-color just the bottom half of your input image with a command like this...

magick input.png -crop 1x2@ ^
   ( +clone -fill "#5DBFAD" -colorize 100 ) -delete 1 -append result.png

That isolates just the bottom half inside the parentheses, and uses "-colorize" to re-color the image without leaving the artifacts. Then it re-assembles the halves to complete the icon.

Unfortunately "-clone" is not an available option to "mogrify", so for a command like this you'd need to use just "magick" and a "for" loop in your command shell to process multiple images.

The command is in Windows syntax. For a *nix system change the continued-line caret "^" to a backslash "\" and escape the parentheses with backslashes "\(...\)".

Regarding the icons with the colored part on top instead of the bottom, ImageMagick can probably determine which end is colored, but it could get complicated. Maybe easier to sort them manually and process them in two groups. To color just the top half, add "-rotate 180" just after reading in the image and "-rotate 180" again before writing the result.