> ## 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

# Getting Started

You can add icons to your website using the icon element for various purposes. This article will cover how you can add the element to your website and customize it according to your preferences. Follow the instructions accordingly.


---

# Adding the Icon element

By following the simple steps below, you can easily add the **Icon** element ****to your site. 

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

**Refer to the GIF below:**

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-27-at-54_16oktzv.gif)

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

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

---

# Editing the Icon element

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

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

- Icon
- Icon Background
- Link Icon
- Inline Icon

The **Icon** element editor**:**


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

---

## Icon

This option lets you pick the icon from various packs, from editing the icon color to setting the icon size, alignment, etc.

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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-27-at-60_szexlm.gif)

---

## Icon Background

This option lets you add a background color or gradient to your icon. Also on hover effect.

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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-12-27-at-60_bf8k7n.gif)


---

## Link Icon

This option lets you add a link to your icon, so it redirects a user to an external link, page, section, etc.

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


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


---

## Inline Icon

This option lets you select whether you want your Icon to be in line with other Icon or not.

|| 💡 This feature is only available for users of our previous version or for those using the Row/Column options.


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

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

---

---

# Related articles

[Navigation](/en/article/navigation-rkzj82/)

[Background Styles](/en/article/background-styles-1o7tdv3/)