Icons
Icons are small visual elements wich are used to represent certain functions, features, or types of content in a digital product. Within the GROW design system, icons are used as functionality and as a brand attribute.
Principles
To ensure a consistent effectiveness as well as a consistent visual appearance, we use several principles for the GROW icons:
Clarity of meaning
Visual clarity
Simplicity
Consistency across the icon family
Personality and branding
Characteristics
To align the visual appearance, every icon needs to match certain characteristics. Those are defined in the following paragraph.
Sharp corners
Inside corners as well as outside corners are sharp. This means that no rounded corners are used troughout the entire icon family.
Line thickness
Troughout the entire icon family, each icon has the same value of line weight 400 / 1.5px line thickness. No exceptions allowed.
Flat design
The GROW iconography only shows the level of detail necessary for semantic communication. This also manifests in their perspective: always flat. Furthermore, the GROW icons are all line-based. This means, they are not filled with any color.
Usage of color
The display options for icons in color are limited to the mentioned primary colors from the foundation, as well as copy text gray of the grayscale palette. As with the font color, the contrast counts here too. This is why white is only allowed on green, green only allowed on white, and copy text gray only allowed on white.
Copytext gray on white
White on green
Green on white
White on copytext gray
A non primary color
Green on copytext gray
Grid
Alignment defines the positioning of text and paragraphs. Within the GROW design system a left-centered approach is chosen, aiming for optimized readability.