> For the complete documentation index, see [llms.txt](https://docs.lowcodera.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lowcodera.com/ui-components-1/icon.md).

# Icon

## Purpose

The lowcodera's Icons control provides us the flexibility to add icons from large set of the [font-awesome library](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free).

## Variations

![](/files/LVQ4sRit0GGJrS8NNLwJ)

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="150">Required</th><th width="171">Accepted Values</th></tr></thead><tbody><tr><td><strong>Property</strong></td><td><strong>Description</strong></td><td><strong>Required</strong></td><td><strong>Accepted Values</strong></td></tr><tr><td>IconName</td><td>Property to provide icon name from font-awosome gallery.</td><td>Yes</td><td>Text</td></tr><tr><td>IsClickable</td><td>Property to makeour icon clickable</td><td>X</td><td>Boolean</td></tr></tbody></table>

## Examples&#x20;

### Icons

![](/files/zVNa2QeVQL8pqnSN2stA)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Icon name`property is to set as **file/folder/map-signs/map/marker/tree**
* [x] `Theme`is to set as **Primary/Info/Success**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}