# 3.5. Icon

The **Icon** widget allows you to add graphic icons to your landing page to highlight information, enhance design, or decorate. Icons can be used for guidance, to emphasize services, or simply to create visual appeal for the page interface.

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

## **1. Add Icon to the Landing Page**

* In the sidebar, click on **Widgets**, then select Icon.&#x20;
* Click and drag the Icon **widget** into your landing page.

<figure><img src="/files/8OT5bb9W0mj4V06nfNUx" alt=""><figcaption></figcaption></figure>

## **2. Icon Editor**

### 2.1. Content Editor

* Click on the **Icon** widget and select **Content** from the quick setup bar to open the Icon content editor.

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

* Click on Select Icon to choose an available icon or click on Upload SVG file.&#x20;
* To link the icon, click on Icon Link and select the page you want to link the icon to.

**+ Alt Text:** Enter Alt Text for the icon to create alternative text. Alt Text allows search engines to recognize the content of the image. Use descriptive text that clearly describes the image.

**+ Tooltip:** Enter Tooltip for the icon. The tooltip text will display when the user hovers over the image.

### 2.2. Design Editor

* Click on the **Icon** widget and select **Design** from the quick setup bar to open the Icon design editor.

<figure><img src="/files/6N1Ylo4eUF4osuKKQhOI" alt=""><figcaption></figcaption></figure>

* **Align:** Helps you align the Icon within the container. For more information, see [<mark style="color:red;">**Align**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/align.md).
* **Sizes:** In the design editor, helps you adjust the size and position of elements on the website. For more information, see [<mark style="color:red;">**Sizes**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/size.md).
* **Display on:** Allows you to control the display of the Icon on different devices, including Desktop and Mobile.
* **Styles:** Allows you to change the background color and shadow effects of the selected Icon. For more information, see [<mark style="color:red;">**Styles**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/styles.md).
* **Border:** Allows you to add and customize the border around the Icon, and you can also adjust the border radius. For more information, see [<mark style="color:red;">**Border**</mark>](/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/design-editor/border.md).
* **General:** Allows you to change the border color of the Icon.


---

# Agent Instructions: 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:

```
GET https://docs.shopone.io/english/basic-elements/media-widgets/icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.