Understanding how to work with your icons will help you design better. Symbolset has a distinct approach to fonts that makes this easier for you.

At the bottom of any of our set pages you’ll see a number labeled “Px grid”, or pixel grid.1 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.

em-pixel-fitting

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 icon results in softer edges.

The em unit

em-the-em

Characters in a font are contained in invisible boxes (in blue above) and the “em” is the height of these boxes. It’s kind of like a type designer’s artboard where there’s one artboard for each character. The specified size a font is set at — whether measured in pixels, points, etc. — scales these boxes and the character inside of each.

The tricky part is that a character almost never uses the full height of this box. A capital letter fills only about 70-75%2 of this vertical measure, and these metrics (cap height, x-height, ascenders, and descenders) are unique to each typeface.

The em comes historically from metal type. A piece was measured by the metal body rather than the character itself. Because of the way that metal type is locked up the body of the piece is really the size that matters.

em-icon-fitting

Symbolset icons occupy an “em-quad”, or square em. This allows us to give you precise control over the size of your icons where the icon size is equal to the font size.

Sizing and positioning

We aim to deliver crisp icons and are happy to defer size and position to the designer. With your desktop design tools and CSS you can easily size and position the icons as you see fit in your design. These are some handy CSS attributes that you can apply:

Sizing

The font-size attribute targets the icon’s size. The em unit here scales the icon in relation to the parent element.

Positioning

The position attribute and a top [bottom, left, or right] attribute reposition the icon. This is great for dropping the icon a bit below the baseline so that it visually aligns with the text.

The em unit here positions the icon in relation to the parent element. You can also use static units like px or rem.


  1. One exception — SS Steedicons has an organic line quality and doesn’t align with a pixel grid. 

  2. Try it — Set a typeface to 24px, zoom in, and then count the number of pixels tall that a capital letter H is. It’s likely to measure 17 or 18 pixels tall.