13

From the Android's Material Design guide,

System icons are displayed at 24dp. When creating icons, it’s important to design at 100% scale for pixel-accuracy.

What is meant by designing at 100% scale? Does it mean the icon should have 24*24 dp dimensions? Or does it mean that they should be in a file format in which scaling would not result in data loss or distortion etc., like SVG file format?

23

Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at.

If you are designing a 24px × 24px icon, you set up your artboard in Illustrator or document in Photoshop or whatever else you are using to 24px × 24px.

As quoted from the Material Design guide, this is for pixel accuracy. If you work at a larger scale, or work in a vector format without taking in to account pixels then later reduce the size down to 24px—your shapes, paths, point or pixels won't be aligned to the pixel grid and you will get effects as illustrated in this example:

enter image description here

It's worth noting, since dp is not an absolute unit of measurement and translates to a number of different actual pixel sizes—designing at 100% scale also implies designing for each pixel size independently. (Thanks Yorik!)

  • Thank you so very much for a very precise and clear answer. =) – Solace Apr 8 '16 at 16:29
  • It is important to realize also that "24 dp" being a derived "sliding scale measurement" means that "design for 100% scale" in the quoted context really does imply you need a different icon for every possible density, in the ideal. – Yorik Apr 8 '16 at 20:13
  • 1
    @Yorik Very good point. Updated my answer. – Cai Apr 8 '16 at 20:32
  • You don't necessarily need to work at every resolution independently: 48 could take exactly the same design as 24, while 126, 128, 64, 32 could all share as well. Hand pixeling 16px will probably be needed though. See this post for the most common resolutions. – curiousdannii Apr 9 '16 at 1:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.