> 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)