Icon

Overview

The Icon block lets you add a single icon anywhere blocks are supported.
You can choose from the built-in icon library or paste your own SVG. The icon can also be clickable by adding a link.

---

Where to use this block

You can add the Icon block in many places, such as:

• Feature lists and benefits

• Trust indicators (shipping, support, warranty)

• Buttons/CTAs (as a visual helper)

• Headers, footers, and promo rows (when supported by the section)

• Inside a Group block to align icons with text/buttons

---

How to add this block

1. Open the Theme Editor

2. Navigate to a section that supports blocks

3. Click Add block

4. Select Icon

---

Block settings

Icon source

• Icon
  Select an icon from the theme’s built-in icon library.

• Custom SVG icon (optional)
  Paste your own SVG code.

  ⚠️ Important:
  If Custom SVG icon is provided, it will be used instead of the selected icon from the library.

---

Size

• Width
  Controls the icon size in pixels (12–200px).

---

Link

• Link (optional)
  Makes the icon clickable.

• Open link in new tab
  Opens the link in a new browser tab/window.

---

Color

• Color
  Choose where the icon color is taken from:

  • Text color

  • Solid button background

  • Outline button label

  • Outline button border

  • Custom

• Custom color (visible when Color = Custom)
  Pick any color for the icon.

---

Tips

• Use consistent icon sizes within the same section (e.g., 20–28px for feature rows)

• If you need a brand-specific icon, use Custom SVG icon

• When using links, make sure the icon meaning is clear (icons alone can be ambiguous)

---

Limitations

• If the icon is set to none and no custom SVG is provided, nothing will display

• Custom SVG should be clean and optimized (large SVG markup may impact performance)

---

Common use cases

• “Free shipping / 24/7 support / Secure payment” rows

• Social or external links (as icons)

• Icons inside an Accordion Row or content block

• Decorative icons for headings or callouts

---

SVG best practices (Custom SVG icon)

When using Custom SVG icon, follow these tips to ensure the icon scales correctly and matches your theme style:

• Always include viewBox
  Your SVG should have a viewBox attribute so it can scale properly.

• Avoid fixed width/height
  Remove hardcoded width and height in the <svg> tag when possible. The theme will control sizing via the Width setting.

• Use fill="currentColor" (recommended)
  This allows the icon to inherit the color from the block’s Color setting, so it stays consistent with your theme.

• Keep SVG clean and lightweight
  Remove unnecessary metadata, comments, and hidden layers (especially from exported SVG files) to improve performance.

• Test on multiple devices
  Preview on desktop and mobile to ensure the icon looks sharp at different sizes.

---

Need help?

If the icon does not appear:

• Check that an icon is selected (not none) or that Custom SVG is not empty

• If using Custom SVG, make sure the SVG code is valid

• Verify color settings (especially when using Custom color)