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