> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/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).

# Icon with Text

# Getting Started

You can easily add an icon and text to your website for various purposes. This article will guide you on how to add and edit the **Icon & Text** element in your website.


---

# Adding the Icon & Text element to your website

To add an **Icon & Text** to your website, follow the steps below.

- Click on + **Add Element or Containers** in an empty Container
- From the **Elements** option, select the **Icon & Text** element

**Refer to the GIF below:**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-41_1qx9axc.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_109e2d5.png)


![Icon & Text element after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ughlf5.png)


---

# Editing the Icon & Text element

Follow the steps and instructions below to add and edit an **Icon & Text** on your site.

The **Icon & Text** element editor has the following options:

- Icon Content
- Icon Alignment
- Background

__The **Icon & Text** element editor :__


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_2t4t7z.png)

---

## Icon Content

This option lets you make various changes to the text and icon in your element, from changing the text color, text, size, etc. also choosing and customizing the icon.

Refer to the **GIFs** below to see the demonstration:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-45_4mzckt.gif)


---

## Icon Alignment

This option allows you to adjust the position and alignment of the icon and text elements.

Refer to the **GIFs** below to see the demonstration:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-51_1qpkuxl.gif)


---

## Background

This option enables you to set a background for the element, and it also provides the hover effect option. The background can be a plain color or a gradient.

Refer to the **GIFs** below to see the demonstration:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-28-at-51_17mwcy9.gif)


---

---

# Related articles


[Accordion](/en/article/accordion-1rk8xwy/)

[Icon](/en/article/icon-f87rha/)