> For the complete documentation index, see [llms.txt](https://zoomuxd.gitbook.io/drift/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zoomuxd.gitbook.io/drift/foundations/icons.md).

# Iconography

Zoom icons act as visual aids to help Zappers & Zoomers to complete tasks. They should be used purposefully.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzHDyrnNImiCaiQx45v%2F-LzHE72H0rTAo9Bp91jH%2F3-1-3-All-System-Icons.png?alt=media\&token=ee89b474-7fbf-4e25-bcf6-bc457b25232e)

We strongly recommend to use icons from our [**libraries**](https://pedantic-euler-3b0c5b.netlify.com/), if you are using it in code. Otherwise, to download single icons or use them in different software.

{% hint style="info" %}
[Font System](https://pedantic-euler-3b0c5b.netlify.com/)
{% endhint %}

## 👨🏻‍🎨  Design Guidelines

### Colors

| Color                                                                                                                                                                                                                                                                                       | BG         | Use Cases                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------- |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LnGi0cHUfE8Mzwumduu%2F-LnHr_8qpg0qUH_L6-4l%2FAsh%20Grey%208.png?alt=media&amp;token=b1be2bc2-dace-4557-8638-1888392b484f" alt="" data-size="line"> Phantom  Grey 08      | White      | Default Icon with Text     |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LnGi0cHUfE8Mzwumduu%2F-LnHrT3x-PEqmq4yXxcu%2FAsh%20Grey%204.png?alt=media&amp;token=63b8a32d-1b55-4162-b2a1-c11a950d57b7" alt="" data-size="line"> Phantom Grey 04       | White      | Disabled                   |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LnGi0cHUfE8Mzwumduu%2F-LnH-Ru3yrnxNAyerUUW%2FEvergreen%206.png?alt=media&amp;token=a4435e31-4e4c-48c1-a211-72fe1a4aed7e" alt="" data-size="line"> Evergreen 06           | Dark/White | Links/Buttons with an Icon |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LnGi0cHUfE8Mzwumduu%2F-LnH2ijElZOcDhC_I1IU%2FMidnight%20Blue%206.png?alt=media&amp;token=a2168e83-5539-453d-a945-2aacc78f361f" alt="" data-size="line"> Midnight Blue 06 | Dark/White | Accent Icons               |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-Lbh30PBOsI--GF99HIe%2F-Lbh4d4GcWPSgRLcfw-U%2FSunrise%20Yellow%206.png?alt=media&amp;token=69cba818-f814-4574-b64d-874d0ac5d633" alt="" data-size="line"> Sunrise Yellow  | Dark/White | Warnings Icons             |
| <img src="https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LbgsPact_0yiwezilDZ%2F-Lbguss_TvaRFnJKlLYm%2FFire%20Red%206.png?alt=media&amp;token=6c12a8dc-58e3-448f-b3ec-e18f857feac2" alt="" data-size="line"> 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.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzHDyrnNImiCaiQx45v%2F-LzHEhdI_Yl1Z0-kGz9e%2F7-1-2-Sizes.png?alt=media\&token=8c8477f6-c662-4247-b1a6-0144a8ccc36d)

### Alignment

When used next to text, icons should be center-aligned.

![](https://2356004247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lbc6L-VCMDVnzwwpCOK%2F-LzHDyrnNImiCaiQx45v%2F-LzHF2hjBhjV7br14iq-%2F7-1-3-Alignment.png?alt=media\&token=8e8f379b-dde6-4474-b477-54b4d71700bb)

## 🧑🏻‍💻 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](/drift/foundations/color.md#icon-color-token).