Blum Icon With Text

Theme: Blum · Section type: All-template section

The Icon with text section shows a row of icons, each with a short heading and description. Use it to highlight your store's benefits, such as free shipping, easy returns, or secure payment.

Note: You can add this section to any template, but not to the header or footer. The section comes with 4 Icon with text item blocks.

What you can do

Add the section and your items
Choose an icon for each item
Choose the layout
Add a button
See what customers see
Look up every setting
Fix common problems

Add the section and your items

In the theme editor, open the template where you want the section.
In the left sidebar, click Add section > Icon with text.
Under General, enter a Section subheading, a Section heading, and a Section description. Leave a field empty to hide it.
Click an Icon with text item block.
Under Text, enter a Heading and a Description.
To add more items, click Add block > Icon with text item.
Click Save.

Tip: Keep headings to 2 to 4 words and descriptions to one short sentence. Customers scan this section quickly.

Choose an icon for each item

Click an Icon with text item block.
Under Icon, select an Icon source:
- Theme library: pick an icon from the Theme library list.
- Custom image: select a Custom image. Use a square image for the best result.
- Custom SVG: paste your SVG code in Custom SVG.
Click Save.

To color the icons, click the section and select an Accent scheme under Icon item: Main, Extra, or None.

Choose the layout

Click the Icon with text section.
Under Layout, select a Content alignment: Left, Center, or Diagonal.
Select Items per row on desktop: 3, 4, 5, or 6. This setting doesn't apply to Diagonal.
Optional: check Enable carousel on mobile to let customers swipe through the items on phones. Check Show navigation on mobile to add arrow buttons.
Click Save.

Add a button

Click the Icon with text section.
Under Button, enter a Label.
Add a Link.
Click Save.

To hide the button, clear the Label field.

What customers see

Desktop: the items show in a row, with the number of items per row you set.
Diagonal: on desktop, the section heading and button sit on the left, and the items show 2 per row on the right.
Tablet: 2 items per row.
Mobile: with Enable carousel on mobile, customers swipe through the items one by one. Without it, the items stack on top of each other.
Button: shows below the items, or below the heading with Diagonal.

Settings reference

General

Setting	What it does
Color scheme	Sets the colors of the section. You can edit color schemes in Theme settings > Colors.
Section subheading	Small text above the heading. Leave it empty to hide it.
Section heading	The main heading. Leave it empty to hide it.
Section description	Short text below the heading. Leave it empty to hide it.

Layout

Setting	What it does
Items per row on desktop	Sets how many items show in a row on desktop: 3, 4, 5, or 6. Doesn't apply to Diagonal.
Content alignment	Sets the layout: Left, Center, or Diagonal.
Enable carousel on mobile	Lets customers swipe through the items on phones.
Show navigation on mobile	Shows arrow buttons in the mobile carousel.
Remove padding top	Removes the space above the section.
Remove padding bottom	Removes the space below the section.

Icon item

Setting	What it does
Accent scheme	Colors the icons with the Main or Extra accent color. Select None to keep the text color.

Button

Setting	What it does
Label	The button text. Leave it empty to hide the button.
Link	Where the button goes. Appears when the button has a label.

Prominent badge

Setting	What it does
Text	The badge text. Leave it empty to hide the badge.
Accent scheme	Colors the badge with the Main or Extra accent colors. Appears when the badge has text.
Position	Places the badge on the Left or Right. Appears when the badge has text.
Shape	Sets the badge shape: Star, Diamond, or Asterisk. Appears when the badge has text.

Icon with text item block settings

Setting	What it does
Icon source	Selects where the icon comes from: Theme library, Custom image, or Custom SVG.
Theme library	Selects an icon from the theme's icon list. Used with Theme library.
Custom image	Uses your own image as the icon. Use a square image. Used with Custom image.
Custom SVG	Uses your own SVG code as the icon. The SVG is shown at the theme's icon size. Used with Custom SVG.
Heading	The heading of the item.
Description	The text below the heading.

Troubleshooting

My custom image doesn't show.
Check that Icon source is set to Custom image. The other icon fields are ignored unless their source is selected.

There is no setting for tablets.
Tablets always show 2 items per row. You can only change the number of items per row on desktop.

Items per row doesn't change anything.
Items per row on desktop doesn't apply when Content alignment is Diagonal.

My SVG icon has the wrong color.
The Accent scheme colors icons that use the current color. If your SVG has fixed colors, edit the SVG code or use Theme library icons.

Updated on: 26/10/2026

Was this article helpful?

Thank you!