# 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="https://891064830-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fz8oqtXqtdhOM4CxRzekr%2Fuploads%2FuuYi0qiWFlZgDkApX2Ax%2Ficon.gif?alt=media&#x26;token=72f83a58-a1f6-4bfe-8968-8d86e6556f69" 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>