> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-blocks/icon-image-icon-image-with-text.md).

# Icon/Image - Icon/Image With Text

The Icon with text block lets you display up to three icon or image combinations with text labels. This is perfect for highlighting key features, benefits, or information like "Free Shipping", "Secure Payment", or "24/7 Support". You can choose from a wide selection of built-in icons or upload your own custom images. The block automatically arranges your items in a clean, organized layout that looks great on any device.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2Flc3UokFpqDNGMpmqhUGQ%2Fimage.png?alt=media&amp;token=4866a7a2-8f09-4ac2-95f2-1f48be322d2a" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Navigate to the section where you want to add the button (like **Image with text**, **Media banner**, or **Popup**).&#x20;
3. Click **Add block** and select **Icon/Image with text** or **Icon/Image**.
4. Make your changes, preview live, then click **Save**.
   {% endhint %}

***

### Settings

### Settings

* **Icon/Image size**: Choose how large your icons or images appear. Options range from S (smallest) to 2XL (largest). Larger sizes create more visual impact, while smaller sizes work well for subtle feature highlights.
* **Text type**: Choose whether your text uses heading styles (bold, larger) or body text styles (regular weight, standard size). Heading style works well for short labels, while body style is better for longer descriptions.
* **Text size**: Choose the size of your text labels. The available options depend on whether you selected "Heading" or "Body" for the text type. For headings, options range from S to 2XL. For body text, options range from XS to XL.
* **Layout**: Choose how your icons and text are arranged. Select "Horizontal" to display items side by side in a row, or "Vertical" to stack items with icons above text. Horizontal works well for feature lists, while vertical creates a more compact look.

#### Icon/Image 1

* **Icon**: Choose a built-in icon from the extensive library, or select "None" if you want to use a custom image instead. Icons are perfect for common features like shipping, security, or support.
* **Image**: Upload a custom image to use instead of an icon. This is useful when you need a specific logo or graphic that isn't available in the icon library. If you upload an image, it will replace the icon.
* **Heading**: The text label that appears next to or below your first icon or image. You can use basic formatting like bold or italic. Leave this blank to hide the heading completely.

#### Icon/Image 2

* **Icon**: Choose a built-in icon for your second item, or select "None" if you want to use a custom image instead.
* **Image**: Upload a custom image for your second item. If you upload an image, it will replace the icon.
* **Heading**: The text label for your second icon or image. Leave this blank to hide the heading completely.

#### Icon/Image 3

* **Icon**: Choose a built-in icon for your third item, or select "None" if you want to use a custom image instead.
* **Image**: Upload a custom image for your third item. If you upload an image, it will replace the icon.
* **Heading**: The text label for your third icon or image. Leave this blank to hide the heading completely.

***

### Presets

* **Icon/Image with Text**: A preset with three icons (shield, delivery, smile) and example headings (Secure, Fast, Support) to help you get started quickly.
* **Icon/Image**: A preset with three icons only (no text headings) for a minimalist look.

***

### Tips

* If you only need one or two items, you can leave the other pairings' headings blank and they won't appear.&#x20;
* The horizontal layout works great for feature lists at the bottom of product pages, while vertical layout is perfect for sidebars or compact sections.&#x20;
* Make sure your custom images are clear and recognizable at the size you've chosen.

***

### Available in

{% columns %}
{% column %}
{% content-ref url="/pages/ngvmw20Bi2qqvrk8HoQv" %}
[Image with text](/docs/theme-sections-by-category/media/image-with-text.md)
{% endcontent-ref %}

{% content-ref url="/pages/wdbz2FLtTxJRNgV4HxUJ" %}
[Multirow](/docs/theme-sections-by-category/media/multirow.md)
{% endcontent-ref %}

{% content-ref url="/pages/QJEyc6jhJqL1njQZe7CZ" %}
[Product Information](/docs/collections-and-products-pages/product-page/product-information.md)
{% endcontent-ref %}
{% endcolumn %}

{% column %}
{% content-ref url="/pages/plfRkW5949tNZcZs5CWA" %}
[Featured product](/docs/theme-sections-by-category/product/featured-product.md)
{% endcontent-ref %}

{% content-ref url="/pages/UGNfqaG5AipM18ieNTsI" %}
[Rich Text](/docs/theme-sections-by-category/informative/rich-text.md)
{% endcontent-ref %}
{% endcolumn %}
{% endcolumns %}