> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/basic/icon.md).

# Icon

The **Icon** block places a single small graphic inside a section, either one of the icons that ship with the theme or an image file you upload in its place. It is sized in pixels rather than as a share of the section, which is what makes it suitable for the small marks that sit beside wording: a delivery van next to a shipping promise, a payment logo, a brand mark, a separator between scrolling items. It can also be made clickable, so the mark itself becomes a link.

<figure><img src="/files/oOk5AWQe22bnWtdOfyCj" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the icon to.
3. Click **Add block** and choose **Icon**.
4. Pick an icon in **Svg icon**, or upload your own file in **Image**, then set the width.
   {% endhint %}

*Result:* the icon appears in the section at the pixel width you set, and follows the alignment of whatever block it sits in.

### General <a href="#general" id="general"></a>

| Setting                  | Description                                                                                                                                                                             |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Link**                 | Where a click on the icon takes shoppers. It can point at a page, product, or collection in your store, or at an address outside it. Leave it empty to keep the icon purely decorative. |
| **Open link in new tab** | Loads that destination in a second browser tab so your store stays open behind it. Worth using for addresses that lead away from your store.                                            |
| **Image**                | Your own file, used in place of the built in icon. This is the route for logos, payment marks, and anything the theme icon set does not cover.                                          |
| **Svg icon**             | Picks one of the icons built into the theme, which is shown when no image has been uploaded. These icons follow the theme styling, so they stay consistent with the rest of the page.   |

### Sizing <a href="#sizing" id="sizing"></a>

| Setting            | Applies To | Description                                                                                                                                                             |
| ------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width              | Desktop    | How big the mark is on a computer screen, in pixels. Small values keep it as a label beside text, larger ones turn it into a feature of its own. Accepts 20px to 200px. |
| Mobile Image Width | Mobile     | The same size for phone screens. Set it lower than the desktop value when the icon would otherwise eat the narrow space next to its wording. Accepts 20px to 200px.     |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* A single graphic appears in the section, at a fixed pixel size that does not stretch with the screen.
* Uploading an image replaces the theme icon, so a store logo or payment mark can sit anywhere a block is allowed.
* With a link filled in, shoppers can click the mark itself, which is how icon rows of social or payment links are built.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Image](/velare/customize-your-pages/basic/image.md): for photographs and larger visuals that should scale with the layout
* [Group](/velare/customize-your-pages/layout/group.md): the container that lets an icon and its wording sit side by side
* [Marquee](/velare/customize-your-pages/decorative/marquee.md): a scrolling strip that accepts icons as part of its content


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/basic/icon.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.