Iconography
Basics
Setu’s icon style is meant to be simple, minimal and to-the-point. We use icons to often represent pages, infrequently actions, and occasionally, concepts.
And true to our aim to being subtle with our design ideology, we use a stroked line style for all our icons.
Grid
All line-icons use a 24px by 24px square grid and pictograms use a 64px by 64px square grid as the base canvas. Since we use SVGs and only SVGs for iconography, we can get away with using such a small size for our icons assets—they scale infinitely.
Key shapes
Here are a few basic shapes to use as a framework for making icons. Keep in mind these are just guideline shapes, and not a hard and fast rule.
The horizontal and vertical rectangle, and the circle all extend to the bleed area, while the square sits a little smaller, in the centre.
Drawing icons
We stick to a simple, 2px stroked line style, no fills. Keep the icon geometric, and free of any embellishments that could hinder interpretation.
@setu/crucible-icons : ^1.0.12
Click on any icon to customise
Click on any icon to customise