Thanks for sharing!
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)
- PNG is great for clipart-style icons and yields a relatively small file
- Support for transparency
- Compared to JPEG, PNG is great for things like icons where you want a transparent background