> 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/cornerstone/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><figure><img src="/files/CQiOlVxWzZs5mVbjuXic" alt=""><figcaption></figcaption></figure> <figure><img src="/files/FEpXIac4xts9QkobXLtf" alt=""><figcaption></figcaption></figure></div>

## Set up text list with icons

***

Under **Product overview**, click **(+) Add block** and select **Text list with icons**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content.

Customize the appearance with boxes around the text or dividers between them.

<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 the new **Text list with icons** block to open the settings.
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>

## Add items

***

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

`Click Text list with icons block to find settings`

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

## Change layout and style

***

`Click the Text list with icons block to find settings`

<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;">Column</mark></td><td>Display the block in either the Right column (in the product form) or the Left column (beneath the product media).</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><tr><td><mark style="color:blue;">Truncate text</mark></td><td>Hide text after a selected number of lines and show a ‘more’ button that reveals the full description.</td></tr><tr><td><mark style="color:blue;">Icon framing</mark></td><td>Choose to show a Circle or Slightly rounded border around the icons. Select None to show no border.</td></tr><tr><td><mark style="color:blue;">Icon framing style</mark></td><td>Choose to display icons with a solid color background (Filled), or with a border and no background (Outlined).</td></tr><tr><td><mark style="color:blue;">Icon frame color</mark></td><td>Choose to use the Accent color (from your theme settings) or the Current text color (from the section settings).</td></tr><tr><td><mark style="color:blue;">Icon width</mark></td><td>Set the pixel width of icons for desktop screens: between 10 and 50 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile icon width</mark></td><td>Set the pixel width of icons for mobile screens: between 10 and 50 pixels.</td></tr></tbody></table>

#### Collapsible row

<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](/cornerstone/product-pages/product-template.md)\
> [Product page blocks](/cornerstone/product-pages/product-page-blocks.md)\
> [Image with text block](/cornerstone/product-pages/product-page-blocks/image-with-text-block.md)\
> [Text block](/cornerstone/product-pages/product-page-blocks/text-block.md)\
> [Text columns with icons](/cornerstone/product-pages/product-page-blocks/text-columns-with-icons.md)