Drift Design System
Search…
⌃K

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
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.