# Icon Property

The Icon Property allows you to configure your icon property. You can input a Name and choose a suitable icon and choose whether or not to include it in the CSS so that you can use it in a List block.

* Open the Components Properties modal by clicking "+" icon in the Block inspector.
* Select the Icon Property you wish to configure.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FN8Aax2P6x1MleNtw5Tly%2FScreenshot%202023-09-26%20at%2010.27.10.png?alt=media&#x26;token=75b525f8-df00-4ab4-9432-cc53024f8abd" alt=""><figcaption></figcaption></figure>

## Connect

The Icon Property needs to be connected for it to be applied to the canvas.&#x20;

{% hint style="info" %}
You need to select "Modify" in the Toolbar or Block Inspector for the blocks that make up a particular component to be visible.
{% endhint %}

* Select the Component to which you want to connect the Icon Property.
* Select "Modify" in the toolbar or the Block Inspector.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FNAdWuNIkAnANqPCK3uIL%2FScreenshot%202023-09-26%20at%2010.30.44.png?alt=media&#x26;token=03a42815-d443-4deb-a677-4a565196393c" alt=""><figcaption></figcaption></figure>

* The blocks contained in the component are now visible in the navigator.
* Find and select the Icon property you wish to connect in the navigator.
* In the Components tab of the Primary tab, click the Component icon above the Icon to open the Component Properties modal.&#x20;

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fbv6a42DHnT1bj9DkJwqc%2FScreenshot%202023-09-26%20at%2010.32.34.png?alt=media&#x26;token=af8530ee-a0a0-4241-8577-ed9400c19536" alt=""><figcaption></figcaption></figure>

* Select the required Icon Property in the dropdown.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FPVrbBp2txAZWBxv0qrGR%2FScreenshot%202023-09-26%20at%2010.37.35.png?alt=media&#x26;token=39a40b76-62fd-46f0-bc30-21c7a12a5a07" alt=""><figcaption></figcaption></figure>

* The Icon Property will now be visible in the Content field in green which indicates that it is connected.
* Click Icon Property to open the Component Properties modal if you wish to make any adjustments.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FzPTGMiHprr3pBNwFdpwS%2FScreenshot%202023-09-26%20at%2010.38.25.png?alt=media&#x26;token=eaad7b59-acf9-47e7-93b8-db9d003284e0" alt=""><figcaption></figcaption></figure>

* To customise, select icon block on the canvas or in the navigator.
* In the Block Inspector open Panel by clicking the Icon.
* Select required icon.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FKIVkZG8MnIGrBdFQZ9oF%2FScreenshot%202023-09-26%20at%2011.44.09.png?alt=media&#x26;token=bd22ee97-7007-4b5d-ad22-1b44b4db3e9b" alt=""><figcaption></figcaption></figure>

The required icon will now be visible on the canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F07f18waJ4fwlqZjAspgX%2FScreenshot%202023-09-26%20at%2011.45.34.png?alt=media&#x26;token=90fda618-da0f-4b5a-aa76-17c45ec73f1f" alt=""><figcaption></figcaption></figure>

## Name

Allows you to label the selected Icon property.

* Open the Component Properties modal.
* Select required Icon property.
* Input suitable label name to Name field.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FZ6Aixyh7HXtUsaEqkrkP%2FScreenshot%202023-09-26%20at%2010.44.58.png?alt=media\&token=71570fa1-8592-4a3e-9ad9-2a9d071c2a8c)

The required label will now be visible in the Block Inspector next to the Icon field.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FY3DP2HiDAxOtp8ilMWbt%2FScreenshot%202023-09-26%20at%2010.45.52.png?alt=media&#x26;token=f758dc84-b97f-4baa-afc1-a8f0ef1a7582" alt=""><figcaption></figcaption></figure>

## Default

Allows you to set suitable default text to your Icon component.

* Open the Components Properties.
* Select required Icon property.
* Find required icon in the Icon Libraries or using the Search bar.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Fw3CbiWs045fTsbL9KKiB%2FScreenshot%202023-09-26%20at%2010.47.43.png?alt=media\&token=98fb1444-8bfc-4c05-b2d7-405157ed91bb)

The Selected Icon will now appear in blue in the Default field.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2Flj4WD2kFCj82dofriIYC%2FScreenshot%202023-09-26%20at%2011.00.46.png?alt=media\&token=bb0c77e7-819b-450a-969e-0e6f70affa96)

And this is how the required Default icon will look on the canvas.

<figure><img src="https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2F0fiAOY5b3gDlx4tSBJg9%2FScreenshot%202023-09-26%20at%2011.01.53.png?alt=media&#x26;token=4a12fc44-1bfd-4fca-8b2c-bbe11a0e9f75" alt=""><figcaption></figcaption></figure>

## Include in CSS

This allows you to use a specific Icon in a list block. This means that you do not have to include all your icons in the CSS but only those that you enable.

* Toggle on "Include in CSS" to include the selected Icon Property in a list block.

![](https://3250709389-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MS33S0eoYwMaMrLb7T_%2Fuploads%2FPXya7GyA4zwEIO5koMUM%2FScreenshot%202023-09-26%20at%2011.03.50.png?alt=media\&token=0f403229-75cf-4607-a4f1-e6f8623cef7f)