> 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/eclipse/product-pages/product-content-blocks/icon-with-text.md).

# Icon with text

Use the **Icon with text** to highlight key product details or promotions.

* Show a default or custom **Icon**
* Add **Text**
* Make the block a clickable **link**

<figure><img src="/files/6fpDfXDSCSnP2LCL7J96" alt="" width="563"><figcaption></figcaption></figure>

> See the [Featured icon with text](/eclipse/product-pages/product-content-blocks/featured-icon-with-text.md) block that has a custom background color.

## Add icon with text

***

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

{% hint style="warning" %}
**Editing a template will change all pages that use that template**.

[Create and assign new templates](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/create-and-assign-new-templates.md) to design different page layouts.

[Add dynamic content](https://github.com/fluorescent/kb-horizon/blob/main/product-pages/pages/editing-page-templates/dynamic-content-with-metafields.md) to show page-specific content in the same template.
{% endhint %}

### Select icon

***

Choose an icon or upload your own to display next to the featured text.

<figure><img src="/files/h5OxF4ZrX2cEQI56Bt0z" alt="" width="226"><figcaption></figcaption></figure>

`Click Icon with text block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Icon</mark></td><td>Choose from 40+ free icons.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Checkmark</mark></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><td></td></tr></tbody></table>

### Add text

***

Add a short text to highlight a key feature or detail.

`Click Icon with text block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to display a title at the top.</td><td></td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Enter multiple lines of rich text.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: "Icon with text"</mark></td></tr></tbody></table>

### Add link

***

Add a **link** to redirect visitors to another page when they click the block.

`Click Icon with text block to find settings`

<table><thead><tr><th width="160">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Link</mark></td><td>Enter the page or URL that you want to link to.</td></tr></tbody></table>

### Add bottom padding

***

Use **Bottom padding** to adjust the layout of the product overview section by adding spacing between blocks.

`Click Icon with text block to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Bottom padding</mark></td><td>Add spacing below the block.</td><td><p><strong>1 - 50px</strong> </p><p><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: 16px</mark></p></td></tr></tbody></table>