An IoT Icon Library
The challenge
A mess that had to be tamed
As part of the rapidly growing Lightelligence Design System, an icon library existed relatively unnoticed. Due to the neglect, the pictograms were created in various sizes, line widths and styles and supplemented by integrated material design icons. Within the Design System 2.0, this chaos had to be eliminated and an icon set especially for the open IoT platform developed and integrated.
Working on a design system requires naming conventions - also applying to an icon library. When integrating the symbols, they were summarized according to use cases and function.
The construction
Defining the Style
The shape of each icon is reduced to its minimal form. The overall style is based on a single consistent stroke. Symmetry and consistency of shapes gives the icons a unique quality, while keeping them simple and easy to understand and ensures readability. To balance out the curves of the icon, all end-points are squared off which guaranteed that the icon wouldn’t be too playful for an IoT Set.
However, what makes the icon library so special is the fact that each icon exists in three sizes. Depending on the intended usage, the sizes 24x24, 16x16 and 12x12 are available. For the smaller sizes, the stroke width and the level of detail have been reduced to still allow a quick comprehension of the symbol. A filled version of the icon was created for warning states to ensure a higher attention.
My role
A future-oriented implementation
For the 24x24px icons a 2px outline wasn’t used as it is common. This enabled the level of detail to be increased. However, the use of a 1.5px outline requires high-resolution displays, the prevalence of these have increased significantly in the recent years. The integration of the new icon library was therefore a future-oriented decision. When working on this project, I assumed the entire creation using Adobe Illustrator and incorporation into the design system.