# Icon block

Source: https://themes.spicydesign.ca/help/reference/blocks/icon/
Updated: 2026-11-12

A single icon from the theme icon set. Settings for the Icon block in the Picante Shopify theme.


A single icon from the theme icon set.

**Where to find it:** open any section sidebar that accepts theme blocks, choose **Add block**, then pick **Icon**.

The same block in the three themes:

![The Icon block in the Picante style.](https://themes.spicydesign.ca/help/shots/block-icon--picante.webp)

![The Icon block in the Overdrive style.](https://themes.spicydesign.ca/help/shots/block-icon--overdrive.webp)

![The Icon block in the Pastille style.](https://themes.spicydesign.ca/help/shots/block-icon--pastille.webp)

When you add this section, it starts from the **Icon** preset.

## Settings

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Icon | Select | Sparkle | Sparkle, Flame, Leaf, Truck, Star, Heart, Check, Mail |  |
| Custom image | Image |  |  | Replaces the icon above. .svg or .png with a transparent background recommended. |
| Size | Slider | 40 px | 16 to 160 px, step 4 |  |
| Color | Select | Text color | Text color, Accent |  |
| Background shape | Select | None | None, Circle, Rounded square |  |
| Accessible label | Text |  |  | Leave empty for a decorative icon that screen readers skip. |
| Alignment | Text alignment | left | Left, center, right |  |

### Colors and border

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Inherit color scheme | Checkbox | On |  |  |
| Color scheme | Color scheme | Scheme 1 |  | Shown when **Inherit color scheme** is off. |
| Corner radius | Slider | 0 px | 0 to 80 px, step 2 |  |
| Border | Select | None | None, Solid, Dashed |  |
| Border thickness | Slider | 2 px | 1 to 8 px, step 1 | Shown when **Border** is not None. |

### Padding

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Customize padding | Checkbox | Off |  | Padding settings stay visible while any side has padding. Set a side to 0px to remove its padding. |
| Top padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Bottom padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Left padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Right padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Customize padding** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |

### Motion

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in |  |