> For the complete documentation index, see [llms.txt](https://palo-alto.presidiocreative.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://palo-alto.presidiocreative.com/products/blocks/icon.md).

# Icon

The Icon block highlights product features or benefits using visual icons, optional images, and supporting text. Ideal for building trust and conveying quick information.

<figure><img src="/files/wu4TWJIjI39kpbdsYxye" alt=""><figcaption></figcaption></figure>

### How to set up

<table><thead><tr><th width="158.90020751953125">Settings</th><th width="141.122314453125" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Select an icon</td><td align="center"><code>select</code></td><td>Choose from a categorized list of icons (e.g., commerce, food, fashion, and others).</td></tr><tr><td>Color</td><td align="center"><code>color</code></td><td>Customize the icon’s color.</td></tr><tr><td>Image</td><td align="center"><code>image_picker</code></td><td>Upload an image to override the selected icon.</td></tr><tr><td>Width</td><td align="center"><code>range</code></td><td>Set the icon size.</td></tr><tr><td>Heading</td><td align="center"><code>text</code></td><td>Add a short description.</td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Adjust the text size.</td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Choose between <code>Wide</code> or <code>Half</code>.</td></tr><tr><td>Alignment</td><td align="center"><code>select</code></td><td>Align text <code>Left</code> or <code>Center</code>.</td></tr><tr><td>Background color</td><td align="center"><code>color</code></td><td>Set a background color for the block.</td></tr><tr><td>Padding bottom</td><td align="center"><code>range</code></td><td>Adjust spacing below the block.</td></tr></tbody></table>