> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/text-list-with-icons.md).

# Text list with icons

Add a **Text list with icons** for additional product details with one of 30+ icons. You can highlight your company values, process, or key elements of your product.

<div data-with-frame="true"><img src="/files/bDmlcTBgZlgbG1OETZ2g" alt="" width="375"></div>

***

{% columns %}
{% column width="41.66666666666667%" %}

### Set up block

Under **Product overview**, click **(+) Add block** and select **Text list with icons**. Use the drag handles **`⋮⋮`** to re-order blocks.
{% endcolumn %}

{% column width="58.33333333333333%" %}
{% hint style="info" %}
Editing templates change all pages that use that template. For unique pages, [use new templates](/stiletto/general/editing-themes/using-templates.md#create-and-assign-multiple-templates) or [dynamic metafields](/stiletto/general/adapting-your-theme/dynamic-content-with-metafields.md)
{% endhint %}
{% endcolumn %}
{% endcolumns %}

***

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Product overview**, click **(+) Add block** and select **Text list with icons**.
2. Click on the new **Text list with icons** block to open the settings.

   <img src="/files/8W78Woge5QrD1hU5GAy5" alt="" width="372">
3. Choose whether to **Add box** to display an outline around the text list.
4. Choose whether to **Add dividers** to separate each text list item.
5. For each **List item**, select an **Icon** and enter **Text**.

   > We recommend a short sentence or two.
6. Click **Save**.

</details>

### <mark style="color:$primary;">Add items</mark>

Add up to 6 list items with an **icon** and **text**. Choose an icon or upload your own.

<sub>Click Text list with icons block to find settings</sub>

<table><thead><tr><th width="217">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Choose from 30+ free icons.</td></tr><tr><td><mark style="color:blue;">Custom icon image</mark></td><td>Upload your own icon image to display next the heading.<br><br>We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add short text to tell customers about your product.</td></tr></tbody></table>

### <mark style="color:$primary;">Change layout and style</mark>

Add a title above the list, and choose to display the list within a box with a background divider and divider.

<sub>Click the Text list with icons block to find settings</sub>

<table><thead><tr><th width="194">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Title</mark></td><td>Add text to show a heading at the top of the block, above the text list.</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a block with a background color.</td></tr><tr><td><mark style="color:blue;">Add dividers</mark></td><td>Show horizontal borders between each text list item.</td></tr></tbody></table>

#### <mark style="color:$primary;">Collapsible row</mark>

<table><thead><tr><th width="178">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr><tr><td><mark style="color:blue;">Collapsible row title</mark></td><td>Enter text for the row title.</td></tr></tbody></table>

***

> **Related links**
>
> [Product template](/stiletto/product-pages/product-template.md)\
> [Product labels](/stiletto/product-pages/product-page-blocks/product-labels.md)\
> [Text block](/stiletto/product-pages/product-page-blocks/text-block.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.fluorescent.co/stiletto/product-pages/product-page-blocks/text-list-with-icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.