Grid
To create Nimbus Icons we use a 160px by 160px grid with 10px modules as a base. When finished, we reduced the icon to its smallest size (16x16px).
Style
The graphic style we use for the icon system is elongated along its horizontal axis. Thus, the shapes that are generally symmetrical, we lengthen them on their X axis (horizontally).
To draw a new icon, we choose a shape as a base and keep the icon inside the containers.
Circle
(160 x 150 px)
Square
(150 x 130 px)
Horizontal rectangle
(110 x 160 px)
Vertical rectangle
(160 x 110 px)
Visually the dominant body or object of the icon has to be centered both vertically and horizontally in the grid.
Stroke and spacing
We use a constant stroke of 12.5px. Besides that, the space between different lines cannot be less than stroke thickness.
Tips and fillers
Maintaining the style of the icons is very important for consistency and for the whole system to look like one. For Nimbus Icons, we define that the ends of the strokes are straight and the shapes have no filling.
Corners
We use rounded corners of 12.5px, the same value as the stroke. The inner corners must be kept straight.
Detail and reduction
Once the drawing is finished, the icons must work perfectly in scaling down to 16px, being legible and recognizable in their shape.
Names
Icons should be named based on what they display, not what they represent. For example, a truck icon should be named truck, not shipping. In addition, the name of the icons is always written in English.
Contribution
You can ask for a new icon here, or upload your own following ourcontribution guide! Download our template onFigma orIllustrator and get started.