Created With

linkDesign Guidelines

Imagine drawing and icon with a pen. You don't want to close up any loops, and you want to minimize the number of times you have to raise the pen from the paper. The resulting look and feel is what defines graphis icons.

In order to achieve this feel:

look and feel

look and feel


Visual clarity and readability of icons are always more important than aesthetics. If visual noise of a continuous stroke clutters the icon on smaller sizes, use multiple strokes. For example, the quote icon is broken into two strokes, the light bulb icon 💡 into three and the GIF icon 🕺 into four, for increased readability and familiarity.

examples of multiple strokes

linkGrid & Keylines

Each icon is designed using a 128❌128px grid with established keylines, towards which the strokes typically are aligned. You can download this grid here, alternatively, you can find it as a symbol in the standard sketch file used for designing the icon font.

📥 Grid & Keylines📥 Sketch File

Key points of strokes should be centered on intersection points of grid lines and keylines, including terminal points. Strokes should follow (or be parallel to) grid lines or key lines whenever possible.

how to use grid lines

how to use grid lines

When need be, key points of a stroke can also be placed on midpoints between two adjacent key lines. The distance between two adjacent grid lines is 8px, so mid points will be 4px from center point of a grid line.

grid lines mid points

grid lines mid points


Icons are exported from a 116❌116px frame centered on the grid. All strokes should be contained within this frame, considering various potential stroke widths.


Icons should generally fill up the space as much as possible. Icons might appear alongside alphabetical characters, so they should try to touch the baseline, which is the bottom most horizontal grid line. It is also recommended that icons be placed symmetrically within the grid, so that they appear in a balanced manner.

Here are some recommended boundaries and maximal grid / key lines for various icon styles:

variational boundaries

linkStroke Widths & Spacing

Icons should be designed with three stroke widths corresponding to three weights: light, corresponding to 3px width, regular, corresponding to 5px width, and bold, corresponding to 8px width.

how to use grid lines

how to use grid lines

These stroke widths should be considered so that separate lines and strokes do not overlap in a weight where they should not. For example, center points of parallel or semi-parallel lines should have a distance of at least one and a half gridlines (12px), so that in maximum weight, the lines are still separated by half a stroke (4px). Similarly, edge of a line should at least be 8px from the center of a nearby perpendicular line.

how to use grid lines

how to use grid lines

Design GuidelinesGrid & KeylinesBoundariesStroke Widths & Spacing

Home How to Use Design Guidelines