Skip to main content

Icon with Text block

Icon with Text Block

Since v2.3.0Product page

The Icon with Text block displays a single icon alongside a text label on the product page. It is ideal for highlighting social proof, key features, or short product claims — for example a star rating or a certification badge.

Icon

  • Image: Upload a custom icon image to display.
  • Select icon: Choose a built-in icon to display. Used when no custom image is uploaded.
  • Horizontal alignment desktop: Set the horizontal alignment of the icon and text on desktop — Left, Center, or Right.
  • Horizontal alignment mobile: Set the horizontal alignment of the icon and text on mobile devices — Left, Center, or Right.
  • Align icon to top: Enable this toggle to align the icon to the top of the text instead of centering it vertically.
  • More icon settings: Enable this toggle to reveal additional icon sizing and spacing controls.
  • Icon scale desktop: Set the size of the icon on desktop.
  • Icon scale mobile: Set the size of the icon on mobile devices.
  • Icon top margin desktop: Set the top margin of the icon on desktop.
  • Icon top margin mobile: Set the top margin of the icon on mobile devices.

Text

  • Text: Enter the label displayed alongside the icon.
  • Text scale large screen: Adjust the font size of the text on large screens.
  • Text scale mobile screen: Adjust the font size of the text on mobile devices.

Spacing

  • Gap: Set the spacing between the icon and the text.
  • Distance from the top: Adjust the spacing above the block.
  • Distance from the bottom: Adjust the spacing below the block.
  • Spacing from the left desktop: Set the left offset of the block on desktop.
  • Spacing from the left mobile: Set the left offset of the block on mobile devices.