> 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FXKsF9iJKWgEpAxgSzpY6%2FFeaturedicons1.jpg?alt=media&amp;token=aceef2ca-38db-4400-825e-517d2fe41735" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fn9hwuxJoqxHtHB6ZL7tj%2FFeatured%20Icons%201.jpg?alt=media&amp;token=cb91d88e-4798-4005-8416-ee5df24221b9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjylppiJnaRCwEeYdNmhX%2FFeatured%20Icons%202.jpg?alt=media&amp;token=309e0779-674f-4656-bf70-0b69a4490df4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKuBq5JVRTT2pZYuTeVZj%2FCountdown%20Timer%20Blocks%203.jpg?alt=media&amp;token=ffae71ba-6b1f-49ae-9a44-111fae623629" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FKigqhrtQX1i9iQv7VO1j%2FFeatured%20Icons%203.jpg?alt=media&amp;token=513ec457-1f2b-4469-a67e-c6c10fe50f98" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FMNSqUVQWg2m7yIJT0fhz%2FFeatured%20Icons%204.jpg?alt=media&amp;token=1433b6dd-199d-422b-93f3-1c7844a6fc70" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F2d0ayludnbXqlMygyZqI%2FFeatured%20Icons%205.jpg?alt=media&amp;token=9b0b68d6-2e1e-4458-9744-e36ff70c5d86" 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