What is the "px grid"?

Help » FAQ » What is the "px grid"?


At the bottom of any of our set pages you’ll see a number labeled “Px grid”, or pixel grid. This means that the icons in the set were drawn on a grid. Edges, corners, and curves are all informed by this underlying grid.

Designers call this “pixel-fitting” and on standard resolution screens pixel-fitting can mean the difference between blurry and crisp icons.

Because fonts are vector they can scale infinitely. However at sizes that are multiples of that pixel grid number you should see the icons looking their best. This is where those edges align to the screen’s pixels and result in clean edges.

The unit size of the grid varies by set but you’ll commonly see something between 28–32 pixels. A set drawn on a 30 pixel grid will look best at 30, 60, 90px, etc. Above is Pika’s calendar icon set at 27 and 30 pixels. Pika was drawn on a 30px grid so at that size the artwork aligns to pixels. At 27px the icons results in softer edges.

Powered by Siteleaf