> 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/settings/icon-collections.md).

# Icon Collections

From the Settings Tab, you can browse available Icon Collections and add a custom collection which may be visualised and deleted.

* In the Dashboard, open Cwicly Settings.
* Open the Icon Collections tab.

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

## Available Icon Collections

You can browse the Available Icon Collections from here.&#x20;

By default these are Font Awesome, Phosphor light, Phosphor Regular, Phosphor Duotone.&#x20;

{% hint style="info" %}
Default collections cannot be deleted.
{% endhint %}

<figure><img src="/files/9xUoitRea66SjnnPHgPB" alt=""><figcaption></figcaption></figure>

### Font Awesome

Font Awesome is the world's most popular icon set and toolkit.

![](/files/MNh1yuBi3ti6DddtZLcY)

### Phosphor Light

Phosphor is a light flexible icon family for interfaces, diagrams, presentations and other applications.

![](/files/33p5G6DTIoaa148KS4ag)

### Phosphor Regular

Phosphor is a regular flexible icon family for interfaces, diagrams, presentations and other applications.

![](/files/zW6BCWre3WwQDfkwfynI)

### Phosphor Duotone

Phosphor Duotone icons allow you to display two tones or apply two colours by using two layers on the icon, one primary and one secondary.

![](/files/xPtPCzX5Idtn1Fp70seH)

## Add Icon Using IcoMoon

Custom Icon Collections can be added to complement the default collections.

{% hint style="info" %}
Default Icon Collections cannot be deleted.
{% endhint %}

{% hint style="info" %}
To prepare your collection of custom icons, Cwicly recommends using IcoMoon.
{% endhint %}

* Go to the [IcoMoon app](https://app.tango.us/app/workflow/How-to-Create-and-Upload-Custom-Icons-using-IcoMoon-0468345a5e274a6f84f5d6292f34f8ed).
* Click on *Import icons* or drag the icons from your folder to the IcoMoon app.
* Once uploaded, Select the icons you wish to use.
* Click on *Generate SVG & More.*
* Change the name of the icons if you want.
* Click on the :icon-gear: icon next to the *Download* button.
* Enter the name of the icon collection.
* Check the *Add `<title>` to definitions in symbol-defs.svg* property.
* Click and Download the created collection.

Once downloaded, the icon collection you have created will appear as a .zip folder.

Open the folder and find the symbol-defs.svg file. Rename it to a suitable name.

### Add

* Open the Icon Collections panel.
* Enter the desired Icon Collection Name in the Collection Name field.

<figure><img src="/files/1hwaCfmCTakz12VPk9X9" alt=""><figcaption></figcaption></figure>

* Choose the .svg file downloaded from IcoMoon.
* Click Upload.

<figure><img src="/files/8T43x1RmxyE4cD0DcDII" alt=""><figcaption></figcaption></figure>

The Custom Icon collection will appear in the Icon Collections tab of the Settings tab.

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

### Remove

* Open the Icon Collections panel.
* Find the Icon Collection you wish to remove.
* Click Delete.

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