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


---

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