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

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