# Icon

<figure><img src="/files/sSCxfQN75rtT06Ajjw8E" alt=""><figcaption></figcaption></figure>

An Icon is a visual anchor that helps capture the user’s attention and direct them to specific actions.&#x20;

The `icon` block allows you to add icons to your page in a matter of seconds.

The `icon` block is a specifically designed block that allows you to add pre-defined and custom SVG icons with a few clicks.

## Add&#x20;

* Add an Icon using the Cwicly [Quick inserter](/cwicly/quick-inserter.md) (recommended).

![](/files/5qyBKY5Zbdp5QD1J5Com)

* Alternately, open the block inserter and click to add a Cwicly Icon block.

<figure><img src="https://lh6.googleusercontent.com/2CUUi0yQSWuBOYB64_VXzoNnh5-in45DJab43Y-I9Uk7MLyP0A8jQjHCnpDsMG-A99fiOdT_-SyZt3xH3nBy_iimTgFb8xToM3puzo1oDTAPT8TCRLGiSKXW5KRjrZKYIFSu8eb8Ad_G9VdH_ZEXs-FSX1Glq1I3qwic26z8fIqLig5Dr7nzV6QNhaYbAA" alt=""><figcaption></figcaption></figure>

## Select an Icon

Use the Icon Selector to select the desired icon.

You can choose from four different Icon libraries, including Font Awesome, Phosphor Light, Phosphor Regular, Phosphor Duotone.

* In the Primary tab, open the Icon tab and click the Icon icon to open the Icon library.
* Make sure that Active is toggled on.

![](https://lh3.googleusercontent.com/IYjbFpptPS7gjir8YaFZlWU4H68Wq-lcdH6fb9stoXHBEkA3olxfPhPGdVc9uk53iwk0bIKCxV44gr_iNAkG2N8-MPTaAYpdx7yt0gLUl21CbokU4NBMWxHh42P8Itq9AyG1Aeb7mVTIHpayl3c1CBRquAewhgHp3MfPrVdsh0CMMUNu-usLpnuWz3-6-w)

* Select a library in the dropdown and select required icon.

![](https://lh5.googleusercontent.com/-kMzE_K8kpAFD8vo_3_1o7mMnKpnP6u5g5H_kAlMx5BMjLy9KnXkuvzCd9RwvtgkEOQFqSabsCOmlrjNEFcFpYeJX0aD7iaVw0EBNU8fq-8HoAHUt3rgrxnr9JzpBKjI7iEV1BzF6ES6Bzz8ZWb7eQ3Cs9VhShYrw3RzfysY5BJtxuR0TTqp1zEJurAqSg)

### Icon Size

The Icon Size property defines the size of the icon.

* Select an `icon` block.
* Open the Block Inspector.
* Navigate to the Primary tab.
* Open the Icon tab.
* Find the Icon Size property.
* Enter the desired value.

{% hint style="info" %}
Unless a size is specified, you will not be able to visualise the Icon.
{% endhint %}

![](https://lh5.googleusercontent.com/Y5pMX_YlJXEXtwFmsUdYYt4jEzVy97JvFpY_sZQQu5V7UXG12rSNElhFAYUk0n-_2IFYeAJ21YPWmlFM7lKMUvrWcXOrsGvWt82z1TVUYOQPPtoqQdRgoTUUy3y_fyQ-u7BsfC_EUSsfe0bsmRy4vz8otOME0MbcFojnJAdvysmFnWnw77VUXxxUjd1_ww)

### Icon Colour

The Icon colour can be selected in the Primary tab.

* Select an `icon` block.
* Open the Block Inspector.
* Navigate to the Primary tab
* Open the Colours tab.
* Select required Icon and Background colours using the colour picker.

![](https://lh3.googleusercontent.com/tP8XipQ31UzE29erqhEZ3Ox0MNy4J6bN23j_YcDyvmzQHwEmhIgfFHDTozM0L1KVoiq5Dftc3wdnXaOlOYODI4WWcItkljjGxbguVqWKXJT-9OWbaNA9g9w1BUCP4yLB5GUC9qQ6ncnIu8kEeH2NBd7_765sCRInAtaLSTF4VfGGBJE5vOSFL1j9UKCLvA)

### Icon Margin and Padding

You can style an Icon by adjusting the Margin and Padding.

* Select an `icon` block.
* Open the Block Inspector.
* Navigate to the Primary tab.
* Open the Margin and Padding tab.
* Adjust Margin and Padding as required.

![](https://lh5.googleusercontent.com/UnYKVNiQ9TTBPbvZ5xr2_odN-IWCFupVKScLc-P833CEAuQVq82tJOspZowGX-1eD6zxW2hnCUEGs-bi0KOu5BXPsnJXCpozVKwpqUK1NjIkCt3F2U0jUUM7cGlAgxw6VFDxKlKQa5qRU99EkgThaRT_Irp8Bz0qmJh7fmnCk-JdRKWXyVHwvJIv8dzSLA)

### Icon Border

The Icon Border property allows you to add a border to an Icon and adjust radius, style, colour and width.

* Select an `icon` block.
* Open the Block Inspector.
* Navigate to the Primary tab.
* Open the Border tab.
* Adjust Border properties as required.

![](https://lh3.googleusercontent.com/M5uV_AGoWX--D8FZEymHL5c-og5z5zQ92k2MZjR_wRKX0zEerii9SXKpJEw9BoaFZGGOgH3crGAHAa0PF1E4ySfibXhBPXpNuYYD4ezqdKZaDFB8na8vsMkBXeWFVCotKb9MputgWIQBHMJCoIiOTtylnJOSUE2R-PPfJu-m8S40qyjb6WMFiTaI_voUdg)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/blocks/icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.