Icons with text

Where to find it

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Icon rendering

For Google icons, enter a name such as lock, shopping_bag, or credit_card in each icon field.Options: Existing symbols or markup · Google Material Symbols

Color source

Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom

Color schemeConditional

Choose an available Shopify color scheme.

LabelsConditional

Choose a local color when the relevant custom source is enabled.

IconsConditional

Choose a local color when the relevant custom source is enabled.

Icon / Emoji

Edit the text shown by this component.

Label

Edit the text shown by this component.

Icon / Emoji

Edit the text shown by this component.

Label

Edit the text shown by this component.

Icon / Emoji

Edit the text shown by this component.

Label

Edit the text shown by this component.

Icon / Emoji

Edit the text shown by this component.

Label

Edit the text shown by this component.

Icon size

Adjust within the range offered by the theme editor.

Icon color (SVG only)

Choose a local color when the relevant custom source is enabled.

Label size

Adjust within the range offered by the theme editor.

Label weight

Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold

Label color

Choose a local color when the relevant custom source is enabled.

Gap between items

Adjust within the range offered by the theme editor.

Vertical padding

Adjust within the range offered by the theme editor.

Horizontal padding

Adjust within the range offered by the theme editor.

Top margin

Adjust within the range offered by the theme editor.

Bottom margin

Adjust within the range offered by the theme editor.