Materialdesign: Unsharp and pixelated icon after export in png format

[makerlabs]

Like in the topic when u customize your icon on https://materialdesignicons.com/ and export it as png the result icon is pixelated and unsharp.

[JapanYoshi]

What resolution are you exporting at?

[makerlabs]

at 24x24 with additional padding 28x28 but regardless of the resolution the effect is always the same
https://imgur.com/VUpGQLA

[JapanYoshi]

That explains it. You're exporting an image at 24 pixels wide.
Moderators, I highly recommend closing this issue. It's a C2KI error.

[goyney]

There is no bug here, that is what happens when you export a raster based image.

Vector based images (such as SVGs, which all of our icons are created in), use math to draw their lines instead of pixels. This allows them to look crisp.

Raster based images (such as JPG and PNG) use raw pixel data.

I believe your screenshot is also exacerbating the pixelation because you are likely on a Retina or high DPI monitor. PNG images created for the web are at a resolution of 72dpi.

[makerlabs]

@JapanYoshi @goyney well I din't know u are using canvas to export your icons to png. Next time you should read about devicePixelRatio and how to save your image rather than talking about how raster and vector base image works... It was great talking to you bb.

[JapanYoshi]

This happens no matter how you export a vector image into 24px raster, idiot.

[Templarian]

Be nice @JapanYoshi, but they are right @makerlabs since you are not on a native 1:1 display you're going to see blurry images. If you are not using vectors it's often best to export at 2x the size since most run their displays at 200% scale or less.

In UI design we refer to 24x24 as device pixels. On a 200% scaled "retina" display this could be 48x48. Because of this vector is almost always preferred for icons due to their small size pixelation is most noticeable.