# 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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FCkd2hdC3qL840wUjtJZI%2Fimage.png?alt=media\&token=ed5844c4-afac-4c01-b3b3-41d4356007f4)

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

![](https://3753622978-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Mk6h6_qso0k3_0dNo1k%2Fuploads%2FgrsI4T8rxgauHwb0dKra%2Fimage.png?alt=media\&token=22180a46-171b-495a-a1ec-82c5b2e2ce91)

{% 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 %}