# 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).
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://zoomuxd.gitbook.io/drift/foundations/icons.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.