What Happens When You Scale Vector Based Icons

All displays involve rows and columns of physical screen pixels. Image details (raster or vector) displayed on those pixels either align or do not align with them. Not aligning can result in anti-aliased or blurry results.

We use a pixel grid to design icons. Their size is intended to be fixed. Vector based icons are designed to look great at a given visual size on the lowest screen density and potentially better at ideally the same size on a higher screen density display. That is the advantage over raster - not that you can change the apparent size at will. Higher screen densities may or may not result in the alignment of image details. When they do not align it is less perceptible than not aligning on lower screen density displays.

If you take a 48x48 pixel optimized icon and shrink it even 1 pixel (or other measurement like points or inches) you lose clarity. Going bigger has the same problem. The attached image shows the worst-case scenario where the icon has alternating lines of detail optimized for 48x48 pixels. At sizes other than 48x48 pixels the result either creates more patterns or in the case of the 24x24 pixels size it results in a grey square.