> For the complete documentation index, see [llms.txt](https://docs.smind.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.smind.io/in-app/library/product-blocks/featured-icons.md).

# 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