Using CSS to change icon color of uploaded icons

[josh]

@Smarthome_Chelmsford

When I use a icon I created in photoshop (of type png) and uploaded into my sharptools icon library, it doesn’t change the color.

That makes sense as a PNG is a ‘raster’ image where the pixels are fixed much like a photo.

You might find the following discussion from another thread helpful:

@josh

One downside to these is they are PNGs rather than SVG, so there’s a few things you tradeoff compared to a single color SVG:

• PNGs are a fixed color (no theme support)
  • Single color SVGs can be automatically recolored to match your theme preferences
  • This PNG will always be red whereas the SVG version could change colors with the theme (and do other neat things like apply glow effects, etc)
• PNGs are not ‘infinitely scalable’
  • In this case, the PNG seems to scale down well enough, but you can start to see some of the ‘aliasing’ on the edges in the downscaled version
  • SVGs on the other hand should scale infinitely up or down without loss of resolution
• PNG file size is much larger than SVG
  • In this case, the PNG is only 20kb but it’s still more than 20x larger than the 1kb SVG
  • Most PNGs with more detail / color tend to be much larger (again, this is all relative)

That being said, PNG gives you some benefits:

• Full color support with details
  • For example, if you want a more ‘realistic’ style with your icons, that source seems have a lot of great icons
• Great compression for computer generated art
  • PNG is great for clipart-style icons and yields a relatively small file
    (eg. a photo is better as a JPEG)
• Support for transparency
  • Compared to JPEG, PNG is great for things like icons where you want a transparent background

As you can tell from the above, SVG images tend to be preferred for most cases – especially if you want to be able to ‘recolor’ single color icons.