# Featured Icons

The Featured Icons allows you to showcase key product or brand attributes as a grid or list of small icons paired with text labels.

<figure><img src="/files/R0cRyCDIaeGG7bGoY2cR" alt=""><figcaption></figcaption></figure>

## **Key Features**

* Flexible Layouts: Configure how many columns/rows to display between grid or list styles.
* Built-In Icon Library: Choose from hundreds of vector icons or upload your own SVG.
* Responsive & Mobile-First: Automatically collapses/reflows icons on narrow viewports so badges never overlap

## Benefits

* Instant Scannability: Icons grab attention faster than plain text, letting your customer scan core selling points at a glance.
* Breaks Up Long Copy: Chunking key features into bite-size icon tiles makes your page feel lighter and more engaging.

## How To Use?

1. After installing the **Featured Icons** blocks. Going to the Shopify Editor sidebar, select the product page temple, click **Add Section** in the **Template** tab.
2. Choose the **Featured Icons** block

<figure><img src="/files/KtTjhPUnspzyMoCCx4T7" alt=""><figcaption></figcaption></figure>

3. Copy the block ID. For example: **smi-block-featured-icons-1**

<figure><img src="/files/Pfg8byvLtFiAw61dz6Uu" alt=""><figcaption></figcaption></figure>

4. On the **Product Detail** sections, click **Add Block** and add **Smind Block** to the section

<figure><img src="/files/yuTygK6xuINfMRb8rLo8" alt=""><figcaption></figcaption></figure>

5. On the **Smind Block**, insert the block ID of featured icons which is **smi-block-featured-icons-1** to the Section ID and change the block name if you want

<figure><img src="/files/tqP0XMJXRRicUIVmi1IM" alt=""><figcaption></figcaption></figure>

6. Next, you can rearrange the relevant blocks within the product detail sections

<figure><img src="/files/Uts5nlE15V1F7sfVMLqU" alt=""><figcaption></figcaption></figure>

7. Finally, let's start to customize the **Featured Icon** block

<figure><img src="/files/9PuYTH7XssbcJ9QZNxUj" alt=""><figcaption></figcaption></figure>

**General Settings of Featured Icons**

* Block ID: The unique ID of featured icons
* Content Max Width: Set the maximum width of the timer’s content area can stretch to.
* Item gap on desktop: The horizontal & vertical spacing between each icon and label tile when viewed on desktop.
* Item gap on mobile: Same as above, but only applies at mobile breakpoints.
* Columns on desktop: How many columns of icons to display side by side on desktop.
* Columns on mobile: How many columns to use on mobile devices. Often set to 1 or 2 for readability.
* Content padding: The internal padding around each individual icon and text card.
* Icon size: The size of the SVG/icon graphic.
* Icon position: Display the icon appears to the **left** or **right** of its text label.
* Text size: Preset font sizes for your labels.
* Text alignment: Aligns the text within each card.
* Thickness: Width of the border around each icon and text card.
* Opacity: How transparent that border is.
* Corner radius: Rounds the corners of each card.

**Settings of Featured Items**

* Icon: Pick one of the built-in icons from Smind’s library
* Upload icon: Upload your icon and make sure using a recommended size which is 128x128 PNG file format.
* Text: Enter the label or caption for this feature


---

# Agent Instructions: 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:

```
GET https://docs.smind.io/in-app/library/product-blocks/featured-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.