All Scouticons are built on a 24px grid. In order to maintain visual consistency, they should be positioned within the grid in a congruent way. There are two main sizes of icons, Primary and Navigation, each with a designated content area. As a general rule, icons should never exceed the boundaries of the content area.
Primary Content Area
Navigation Content Area
The keylines provided are a necessary constraint to maintain visual consistency. Each icon should align with these core shapes.
Stroke, Corner Radius and Spacing
Stylistic consistency is key to a cohesive icon family. Follow these guidelines to avoid any standouts.
One of the key defining elements of Scouticons is the consistent 2px stroke width. Each icon must maintain this element.
There are three acceptable values to use for a corner radius in a rectangular shape: 0px, 1px, and 2px.
Space between strokes should be 2px or more. Avoid spaces less than 2px, and stroke proximity that forms a solid shape.
Optical Corrections and Anomalies
It is critical to follow each of these guidelines; however, there may be a few rare instances when a shape requires an exemption from the rules to maintain legibility, especially at small sizes. In these extreme scenarios, use your absolute best judgement in determining if the exemption is necessary, and if the icon still belongs in the family.
Examples of anomalies
This icon for features settings would lose it's form if scaled vertically.
This small icon is displayed with preview copy, and must be legible at a small scale.
When including a "+", an icon may exceed the keyline boundary.
Use rounded corners, consistent curves.
Use sharp corners
Use excessive curves
Use 2px strokes
Use alternate stroke widths
Balance detail and negative space.
Use excessive detail
Use vague shapes