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.

Font System

👨🏻‍🎨 Design Guidelines

Colors

Color	BG	Use Cases
Phantom Grey 08	White	Default Icon with Text
Phantom Grey 04	White	Disabled
Evergreen 06	Dark/White	Links/Buttons with an Icon
Midnight Blue 06	Dark/White	Accent Icons
Sunrise Yellow	Dark/White	Warnings Icons
Fire Red 06	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.