Skip to main content

Icon with text

What is the Icon with text block?​

Since v1.0.0Theme block

The Icon with text block shows an icon next to a short line of text. Use it for product benefits, store promises or quick facts, for example Free shipping over $50, Vegan or 30-day returns. Add several blocks one after another to build a list.

Where can I use it?​

Icon with text is a theme block, so you can add it to any section or block that shows Add block in the theme editor, for example:

See How sections and blocks work for how to add a block.

Settings​

Icon​

  • Image: Upload your own icon image. When you add an image, it is shown instead of the icon below.
  • Icon: Pick an icon from the theme's icon set.
  • Icon advanced settings: Enable this setting to adjust the icon size and position. When it is on, these settings appear:
    • Icon height (desktop) and Icon height (mobile): The height of the icon (10 to 100 px).
    • Icon top margin (desktop) and Icon top margin (mobile): Move the icon down a little, for example to line it up with the first line of text (0 to 16 px).

Alignment​

  • Icon alignment (desktop) and Icon alignment (mobile): Place the icon and text on the left, in the center or on the right (options: Left, Center, Right, Inherit). Inherit follows the alignment of the section or block the icon sits in.
  • Align icon top: Line the icon up with the top of the text instead of its middle. Useful when the text runs over two or more lines.
  • Icon left margin (desktop) and Icon left margin (mobile): Add space on the left of the block (0 to 40 px), for example to indent it under a heading.

Text​

  • Text: The text next to the icon. You can make words bold or add a link.
  • Text scale (desktop) and Text scale (mobile): Make the text smaller or larger (40 to 220%). 100% is the body text size set in your theme settings.

Spacing​

  • Gap: Space between the icon and the text (0 to 16 px).
  • Distance top and Distance bottom: Space above and below the block (0 to 40 px).
tip

The icon takes the color of the text around it. To change the icon set used across the theme, go to Theme settings: Icon set.