Iconography
Zoom icons act as visual aids to help Zappers & Zoomers to complete tasks. They should be used purposefully.
We strongly recommend to use icons from our libraries, if you are using it in code. Otherwise, to download single icons or use them in different software.
👨🏻🎨 Design Guidelines
Colors
Color | BG | Use Cases |
White | Default Icon with Text | |
White | Disabled | |
Dark/White | Links/Buttons with an Icon | |
Dark/White | Accent Icons | |
Dark/White | Warnings Icons | |
Dark/White | Error Icons |
Sizing
We use 4 scales of icon size depending upon the context 16px, 20px, 24px & 32px. Be sure icon size is consistent throughout your product.
Alignment
When used next to text, icons should be center-aligned.
🧑🏻💻 Usage Guidlines
Sizing
Size of the icons should match the give size in Zeplin.
Color
Icon color value should be only defined from icon color tokens.
Last updated
