> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Electro How to Edit Electro Icon With Text

**Theme:** Electro · **Section type:** All-template section

The Icon with text section shows a row of short items, each with an icon, a heading, and a description. Use it to highlight store benefits such as free shipping, support, or secure payment, or to sum up product features.

> **Note:** You can add this section to any template and to the footer, but not to the header.

![An Icon with text section with 4 items above the footer on large screens (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwtx-1_1peacpl.jpg)

**What you can do**
- Add the section and your items
- Choose the icons
- Arrange the items on large screens and on mobile
- Add a button
- See what customers see
- Change the section settings
- Fix common problems

## Add the section and your items
1. In the theme editor, open the template where you want the section. To show it on every page, add it to the footer area instead.
2. In the left sidebar, click **Add section** > **Icon with text**. The section comes with 4 items.
3. Under **General**, enter a **Section subheading**, a **Section heading**, and a **Section description**, or leave them empty.
4. Click an **Icon with text item** block. Under **Text**, enter a **Heading** and a **Description**.
5. Optional: add a **Link**. The whole item becomes clickable.
6. To add more items, click **Add block** > **Icon with text item**.
7. Click **Save**.

> **Tip:** Keep each description to one short sentence, so the items line up evenly in a row.

## Choose the icons
1. Click an **Icon with text item** block.
2. Under **Icon**, choose an **Icon source**: **Theme library**, **Custom image**, or **Custom SVG**.
3. Pick an icon from the **Theme library** list, select a **Custom image** (a square image works best), or paste your **Custom SVG** code.
4. Optional: choose a **Custom color icon**. This is available for Theme library and Custom SVG icons.
5. Click **Save**.

To set the size of all icons, open the section and change **Icon size** under **Layout**.

> **Tip:** For a custom SVG icon to take the custom color, the SVG should use fill="currentColor" instead of a fixed color.

## Arrange the items on large screens and on mobile
1. Click the **Icon with text** section.
2. Under **Layout**, choose how many **Items per row on large screen** you want, from 3 to 8, and how many **Items per row on mobile**, from 1 to 3.
3. Choose the **Content alignment** (Left or Center) and the **Icon position** (Top or Left of the text).
4. Optional: select **Show divider** to add a line above and below the items.
5. Click **Save**.

## Add a button
1. Click the **Icon with text** section.
2. Under **Button**, enter a **Label** and a **Link**.
3. Choose a **Button position**: **Below content** or **Next to heading**.
4. Choose a **Style**: Primary, Secondary, or Tertiary.
5. Click **Save**.

The button is hidden when the **Label** is empty.

## What customers see
- **Large screens:** the items appear in one row, or in several rows if there are more items than **Items per row on large screen**. Each item shows its icon, heading, and description.
- **Tablets:** the items appear 2 per row, or 3 per row when **Items per row on mobile** is 3.
- **Phones:** the items appear 1, 2, or 3 per row, based on **Items per row on mobile**. Icons are shown at up to 36 px on screens narrower than 1025 px.
- **Linked items:** when an item has a link, customers can click anywhere on the item to open it.
- **Scrolling:** the items fade in one after another as customers scroll to the section.
![The same Icon with text items stacked 1 per row on a phone (Electro preset)](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/iwtx-2_1n1ok2.png =390x680)


## Settings reference
### General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the background and text colors of the section. You edit color schemes in Theme settings > Colors. |
| Section subheading | Shows a short line above the section heading. |
| Section heading | Sets the main heading of the section. |
| Heading size | Sets the heading size, from H2 to H5. |
| Section description | Shows text below the heading. |

### Layout
| Setting | What it does |
| ---- | ---- |
| Items per row on large screen | Sets how many items appear in a row on large screens, from 3 to 8. |
| Items per row on mobile | Sets how many items appear in a row on phones, from 1 to 3. |
| Content alignment | Aligns the heading and items to the Left or Center. |
| Icon position | Places the icon above the text (Top) or beside it (Left). |
| Icon size | Sets the icon size on large screens, from 16 to 100 px. |
| Show divider | Adds a line above and below the items. |

### Padding
| Setting | What it does |
| ---- | ---- |
| Custom padding | Replaces the theme's default section spacing with your own padding values. |
| Top, Bottom, Left, Right | Sets the space inside the section edges, from 0 to 100 px. Appears when Custom padding is on. |
| Enable padding mobile | Lets you set separate padding for phones. Appears when Custom padding is on. |
| Top (mobile), Bottom (mobile), Left (mobile), Right (mobile) | Sets the padding on phones, from 0 to 100 px. Appears when Custom padding and Enable padding mobile are on. |

### Button
| Setting | What it does |
| ---- | ---- |
| Label | Sets the button text. The button is hidden if this is empty. |
| Link | Sets the page the button opens. |
| Button position | Shows the button below the items (Below content) or beside the section heading (Next to heading). |
| Style | Sets the button style: Primary, Secondary, or Tertiary. |

### Icon with text item settings
| Setting | What it does |
| ---- | ---- |
| Icon source | Chooses where the icon comes from: Theme library, Custom image, or Custom SVG. |
| Theme library | Chooses an icon from the theme's icon set. Appears with Theme library. |
| Custom image | Uses your own image as the icon. A square image works best. Appears with Custom image. |
| Custom SVG | Uses your own SVG code as the icon, shown at the Icon size. Appears with Custom SVG. |
| Custom color icon | Sets the icon color. If you don't choose a color, the icon uses the text color. Appears with Theme library and Custom SVG. |
| Heading | Sets the item heading. |
| Description | Sets the item text. Supports bold, italic, and links. |
| Link | Makes the whole item clickable and opens this page. |

## Troubleshooting
**My icons look smaller on mobile than in the editor.**
On screens narrower than 1025 px, icons are shown at up to 36 px, even if **Icon size** is larger. Check the size in the mobile preview.

**The custom color doesn't change my icon.**
**Custom color icon** doesn't apply to **Custom image** icons. For a **Custom SVG** icon, the SVG code must use fill="currentColor" or stroke="currentColor".

**The button doesn't show.**
Enter a **Label** under **Button**. The button is hidden when the label is empty.

**I can't add the section to the header.**
Icon with text can't be used in the header. You can add it to any template or to the footer.

## Related articles
- [Electro What icons can you use on Electro theme](https://help.ecomx.co/en/article/electro-what-icons-can-you-use-on-electro-theme-hdw06b/)
- [Electro How to Use Electro Footer Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-footer-section-1og04vg/)
- [Electro How to Use Electro Image With Text Columns Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-image-with-text-columns-section-s1z5a/)
- [Electro How to Use Electro Text Section](https://help.ecomx.co/en/article/electro-how-to-use-electro-text-section-188rf2a/)
- [Electro Theme Settings](https://help.ecomx.co/en/article/electro-theme-settings-2ubwqk/)