Material-design-icons: Question: are icons that are not 24dp redrawn or scaled?

Created on 17 Mar 2017  Â·  2Comments  Â·  Source: google/material-design-icons

I believe material icons are drawn on a 24dp grid. Are the 18dp icons redrawn on a smaller grid, or are they simply scaled down? Same question for the 36dp icons. Are they scaled up?

question

Most helpful comment

Depends.

Generally we design system icons on a 24px grid. And if that's the only size we've designed, then indeed, the 18px icons are a rendering of the 24px vector scaled down to 18px. This may result in some half-pixel blurriness, but not as bad if you took the 24px PNG and scaled that down to 18px.

However, for many icons we have specifically designed 18px versions of the icons – specifically to avoid _any_ blurriness at all.

For example, if you look here:
https://github.com/google/material-design-icons/tree/master/alert/svg/design
ic_warning and ic_error have vector sources at 18, 24, 36, and 48 pixels.
Where as ic_add_alert and ic_error_outline only have 24 and 48.

The former two, should be pixel perfect at all those sizes.
The latter two scale the 24px source to create the 18 and 36 generated assets – these may not be perfect.

We do optimize which source we choose... so for example if we have an 18px and 24px source, and we generate a 36px icon., we use the 18px and double it, rather than scaling up the 24px by 50%. This results in more crisp, precise icons.

If you notice any 18 or 36dp icons that _are_ blurry and could be significantly improved, file an issue, and we'll see if we can get it fixed up.

All 2 comments

Depends.

Generally we design system icons on a 24px grid. And if that's the only size we've designed, then indeed, the 18px icons are a rendering of the 24px vector scaled down to 18px. This may result in some half-pixel blurriness, but not as bad if you took the 24px PNG and scaled that down to 18px.

However, for many icons we have specifically designed 18px versions of the icons – specifically to avoid _any_ blurriness at all.

For example, if you look here:
https://github.com/google/material-design-icons/tree/master/alert/svg/design
ic_warning and ic_error have vector sources at 18, 24, 36, and 48 pixels.
Where as ic_add_alert and ic_error_outline only have 24 and 48.

The former two, should be pixel perfect at all those sizes.
The latter two scale the 24px source to create the 18 and 36 generated assets – these may not be perfect.

We do optimize which source we choose... so for example if we have an 18px and 24px source, and we generate a 36px icon., we use the 18px and double it, rather than scaling up the 24px by 50%. This results in more crisp, precise icons.

If you notice any 18 or 36dp icons that _are_ blurry and could be significantly improved, file an issue, and we'll see if we can get it fixed up.

By the way, thank you so much for your response. That helps a lot.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anlexN picture anlexN  Â·  3Comments

VeeK727 picture VeeK727  Â·  4Comments

quyleanh picture quyleanh  Â·  4Comments

Unknow-max picture Unknow-max  Â·  3Comments

cdeutsch picture cdeutsch  Â·  4Comments