> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pdfnoodle.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon

> Our Icon Component lets you easily pick and insert icons from our integrated [**Lucide Icons**](https://lucide.dev/) **library.**

<img src="https://mintcdn.com/pdforge/rwoRLXXUvihWxlAY/images/components/image-1-17.png?fit=max&auto=format&n=rwoRLXXUvihWxlAY&q=85&s=4ea3c8626b173387d0052536d68835bc" alt="" width="295" height="443" data-path="images/components/image-1-17.png" />

### Icon Size Convention

To keep your templates consistent, we’ve standardized icon sizes:

* **Extra small:** 10px
* **Small:** 12px
* **Medium:** 14px
* **Large:** 16px
* **Extra large:** 20px

### Send icon dynamically

You can also set your icons dynamically by using variables. **We automatically generate the variable name based on your component title**. Just provide the icon name in kebab-case format (e.g., circle-alert) in your PDF payload.

<img src="https://mintcdn.com/pdforge/rwoRLXXUvihWxlAY/images/components/send-icon-dynamically-1.png?fit=max&auto=format&n=rwoRLXXUvihWxlAY&q=85&s=376460f0481da6c5e756f0450c385e19" alt="" width="847" height="443" data-path="images/components/send-icon-dynamically-1.png" />

<Info>
  Its mandatory to choose a fallback icon in case you didn't send an icon as a
  payload.
</Info>