# Icon

The **Icon** block is a visually engaging content element used to highlight key features, services, or selling points. It supports a wide selection of icons or custom images, optional supporting text, and flexible layout controls perfect for showcasing brand values or unique product benefits.

{% hint style="success" %}
Add multiple blocks for multiple icon messages on your product form. 
{% endhint %}

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FBnhuhVWYm48eiBpDknsl%2FUntitled%20image%20(40).png?alt=media&#x26;token=69822007-d587-4e50-b87b-e2a516ba0199" alt="Picture depicting the Icon block of the product pages section"><figcaption></figcaption></figure>

<table><thead><tr><th width="193.95220947265625">Settings</th><th width="141.040771484375" align="center">Type</th><th>Description</th></tr></thead><tbody><tr><td>Icon</td><td align="center"><code>select</code></td><td>Choose from a wide variety of pre-defined icons: <code>Star</code>, <code>Gift</code>, <code>Truck</code>, and etc. </td></tr><tr><td>Alternative icon/image</td><td align="center"><code>image_picker</code></td><td>Upload a custom image or icon. Recommended: .<code>svg</code>, 160×160px. <a href="https://broadcast.presidiocreative.com/faq/frequently-asked-questions/how-to-prevent-your-images-from-getting-cropped">Learn more</a></td></tr><tr><td>Size</td><td align="center"><code>range</code></td><td>Controls icon/image size.</td></tr><tr><td>Icon color</td><td align="center"><code>color</code></td><td>Select a custom color for the icon (ignored if using a custom image).</td></tr><tr><td>Text</td><td align="center"><code>richtext</code></td><td>Add a short message or title below the icon. Supports basic HTML formatting.</td></tr><tr><td>Text size</td><td align="center"><code>select</code></td><td>Controls font size for text content. Applies to text set as a paragraph: <code>Extra small</code>, <code>Small</code>, <code>Medium</code>, <code>Large</code>, or <code>Extra large</code>.</td></tr><tr><td><strong>Layout</strong></td><td align="center"></td><td></td></tr><tr><td>Width</td><td align="center"><code>select</code></td><td>Sets block width: <code>Full width</code>, <code>Half</code>, <code>One third</code>, or <code>One quarter</code> of container.</td></tr><tr><td><strong>Padding</strong></td><td align="center"></td><td></td></tr><tr><td>Bottom</td><td align="center"><code>range</code></td><td>Sets the spacing below the block.</td></tr></tbody></table>

## Notes

* Perfect for feature rows, highlights, or callout sections.
* Supports both Shopify’s icon set and brand-aligned custom imagery.
* Responsive across different layouts with flexible width options.


---

# 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://broadcast.presidiocreative.com/product-theme-blocks/icon.md?ask=<question>
```

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.