SmartHome+ Chameleon Design System
An iconography system creates a consistent experience across all areas of the SH+ app.
Standardized styling
Consistent craftsmanship across every icon that standardizes design aesthetic, stroke, background and color.
Enhanced discoverability
Keywords and descriptions added to each icon enable designers and developers to quickly search and locate the correct icon they need from the asset directory in Figma.
Doesn’t matter if it’s a pencil to one person or edit to the next.
Defined scaling
Icons scale effortlessly to match predefined icon size tokens in design.
Design tokens enable everyone to utilize the same size definitions.
How I consolidated 5 different “home” icons into one home icon
Auditing usage and intent
Understanding intent behind the icons was the first step towards establishing meaning and consolidating icons conceptually.
Icons should easily be understood and consistent in appearance and use.
Utilizing categories and keywords together to establish meaning
Categories alone did not provide enough contextual information to our team about the usage of an icon. For example the “Home” category could have devices that are part of a smart home and icons that represent rooms in a home.
Baking in keywords enabled designers and developers to quickly locate an icon instead of scanning a gigantic directory searching. Improving discoverability reduces the risk of a designer or developer not finding an icon then creating a duplicate of an existing icon.
Focusing on flexible construction
Icons are meant to be iterated upon and modified over time. Icons are built as flexible components with nesting layers that contain sub-components or parts made from the icon artwork. The icon artwork can be updated in isolation or swapped entirely.
Documentation enables our designers to easily understand how to design for icons and how to edit existing icons.
Enabling recoloring with semantic design tokens
Icon specific semantic tokens allow for our teams to quickly and easily recolor an icon based from a predefined list of colors for icons. The specific scope creates consistency and reinforces accessibility for color across icons in designs.
Including brand expression
Icon semantic tokens reference theming tokens. When included in a brand theme, icons can easily be recolored to match a brand’s specific color palette.