Implement a grid for icons

[GBKS]

Having a basic grid template would help us create more consistency across icons. Below is an example. The grid has a few preset sizes an icon may use (but doesn't have to).

A good next step could be to take a few representative icons and adjust them to the grids, to see whether this is easy to work with and actually does lead to more consistency.

One part of this is also to snap values to full pixels. In a time of retina screens and vector-rendering, this is not 100% necessary, but generally sticking with it should also help the icon set look consistent.

[GBKS]

Some more references for design guidelines:

• Nucleo icons via Feather
• Material design

[Bosch-0]

Started working on this in the Figma file. Will be finished in a few days. I've added a grid underlay you can toggle on/off for each icon in the left hand assets menu.

Was also thinking of adding an SVG of the grids in the repo so designers can easily download and use it in whatever vector tool they are using. @GBKS thoughts? Or would it be best to keep this repo purely for the icons.

[GBKS]

Sounds good to me. The SVG could go in the "img" folder, and would also allow us to reference it in the Readme, to document the grid logic.

[GBKS]

This is implemented now with the latest commit.

Thanks @Bosch-0 for the hardcore work on this. It was super tedious. But now the icons are way more consistent and we have a better system in place for design iteration.