# Icon

{% hint style="info" %}
Make sure to activate the icon toggle.
{% endhint %}

When activated, the Icon property allows you to choose whether you want the list bullet to be an icon.

<figure><img src="https://lh5.googleusercontent.com/RLCOatPpu3dyBo21MWlxVO46eNrD8cy2InIDVKnwvWSXvzD14PKdn2JDXLoDY5sneQB2ASMbXtBkmS8ybB_xqLR3jCMxJ5PluDKrhwRnI2RaYz5kMkq2KhNpqDpJBskQzky-txsMwo8BskPguBWZjHKSjKk3cYHrhf_vOQABih9Ae_25ZvIdHexOPbwc5g" alt=""><figcaption></figcaption></figure>

![](https://lh4.googleusercontent.com/N-YR69a-j9aAVSRMZOe2eN-Gv-N9cRq7oQHk_v9uQsBa0vt3m0SUOXyb3EBWT-ggED9y4StnlS4HTXlhsPoz8yI7lqrny-_fOtqBXDWJEMLKnJs6AFii4W4afS8_Thk_EdDSonL0f-n7DFfY4UAHYMx6fODSZ58chUDlnQjYIHcm_Lane3Fk2FhEpvpFPQ)

<details>

<summary>Toggle icon</summary>

The Icon can be activated from the Block Inspector or the ToolbarSelect an `list` block.

From the Block Inspector:

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Icon tab​​
5. Find the Active property
6. Toggle the the Active property on to activate it

From the Toolbar

1. Select a `list` block
2. Click Icon list to toggle Icon on or off

</details>

## Select Icon <a href="#select-icon" id="select-icon"></a>

Use the Icon Selector to select the desired icon.​

![](https://lh5.googleusercontent.com/7kTuJNslIaq1HYeyUwiuuwpvoA9iuB5ICSkLKbzR-5D-ERff8tQ-30vAutmfgheMob_wPMA0GIqYRnqhpEfJjUP_LtlHV202tmu2-qtUQvOqaXSZWi233A3iv2kCQchOzZGZ3Hr3lMJk7O9aWWyU3_S3AUtimOyMmSzLjmSFhaT_kywBhsyjSTl6LrPZug)

<details>

<summary>Open icon selector</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Icon tab
5. Find the Icon property
6. Click on the 🌏 icon to open the Icon Selector

</details>

{% content-ref url="../icon" %}
[icon](https://docs.cwicly.com/blocks/icon)
{% endcontent-ref %}

## Icon Colour <a href="#spacing" id="spacing"></a>

The Icon Colour property allows you to define the icon colour.

![](https://lh5.googleusercontent.com/-ROqWyTGrt68jKoI_Fo7S3NCBmJGBnWZX2NLkZ194OFrEYdN_XAvlYY0HvR_w0n0gnWBqToKuE8whtb5zvYZN7pEMKEbriZtcHBnqH3KtZdetKIClf6HM6nHFRdR6h3GAXkimnhebribPXUikMX27vy25IUeWGgwz0JyQ-H7-mbJWF_n3aTXREdjj4EuBw)

<details>

<summary>Modify icon colour</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Colours tab
5. Open the colour picker by clicking on the colour circle
6. Select your colour in the colour picker or click on a global colour<br>

</details>

## Icon Size

The Icon Size property allows you to choose the size of your Icon.

![](https://lh6.googleusercontent.com/QI9qgE2fZvwFhhX_9y2Zr_7blt_zHE85GAD8rWHOlOXhJj5m65N6JV_d1g3SRFufGagMF049kLiI3S1rM60D_K6oqxO2Dk9EPomA8ruzkaytFHELwGMug9C72uj3wVeenN39C03SYip-dblfYAgInqYZ_Cz-yZZAHUDjc00Q0yuCfSYC9vWBnlXksbiMbg)

## Spacing

The Spacing property allows you to define the margin added between the icon and list text.

![](https://lh4.googleusercontent.com/G54EXtjhRaIhPXrKX61ykGnNZja9CT0BE-GGin5UJMkk0zUUu-NLeFhwL7jf5eM0nqstbCNB8-juK4Po9brSGkCGUAiaGhzoNO-FEWtYwf7jAzKxUrvbYKWpPpBvkREgTM8QMHbRVxLipxYU_XXioVfvNsTZ4qPjIqYscTgVvRnHr87fnJpCfbz4n-1XdA)

<details>

<summary>Modify icon spacing</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Navigate to the Settings tab
5. Find the Spacing property
6. Enter the desired spacing value

</details>

## Flex Position

Allows you to flex position your Icon.

![](https://lh4.googleusercontent.com/xAXcXKgs3i_BQoGfL7GKAY_U_rVHgdOU0zXm4fDT12_tDIh2B9FpleFN_Dy7-mPdt1_O6adAPLz9wuhcHup3wcxZcOvh02V_ZKjiO3bkFHs810i4CMgmXBOomxGAqWyHIZgPxwKmxDXUYgsIdrkUFeQM29ejf9k7r5ONuxjqC5Q7WWTf03rUDGQJaySJdw)

## Vertical Position

The Vertical Position property allows you to define the vertical position relative to the text element in the list.

![](https://lh3.googleusercontent.com/u0Uqr-ntU4iWdhaNxSXzgF5-gf7PS45roaBNonOPVTnjra1tOHqObwbz10rJCKQmHjv0vlpeRpYyvAd2ydzYBcav5_X4Gpj_XNN1A5BY3qYHyCbj0GZIdW0YYOyCpm3hUKE6ZijE5i87iVvJ0uZb7uDGPpQwLLVRMet7aniTOlA2f834Y-s2FpZmFNdF9w)

<details>

<summary>Modify icon vertical position</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Navigate to the Settings tab
5. Find the Vertical Position property
6. Enter the desired value

</details>

## Specific Icons <a href="#specific-icons" id="specific-icons"></a>

The `list` block allows you to choose specific icons for every list element.​&#x20;

Activate/deactivate the icon for specific element.

![](https://lh4.googleusercontent.com/Q2Fv40l7KM1f5GzclCxGMfTyBiPHvaiuRSlhPgLouGRT5Ys8vSpEfYLBFv7-k48dyJ0B0mfVAJc-Lwvnf48MFsE9CtfE64LCChOZF3pwFAnp9b187w-blwBAUyASoLvzozfvCJfkneEqa9fu4SmAEj44gsbFl-xdm-EJBDzBvnREFLWUlHonGrQ4koej0Q)

<details>

<summary>Activate/deactivate icon for specific element</summary>

1. Select a `list` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Icon tab
5. Click on the Specific Icons ![](https://firebasestorage.googleapis.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-MS33S0eoYwMaMrLb7T_%2F-MVuWEJNsq_9qxQBlZnP%2F-MVuahFD13gVoYG-I1AN%2Ftabler-icon-settings.svg?alt=media\&token=02e43104-b111-4374-96cc-286ef3e49512) icon
6. Find the List element you want to define an icon for
7. Toggle the List Icon x property (x being the position of the element in the list)
8. Select an icon using the Icon Selector

</details>