> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.noticeable.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use custom icons with Noticeable widgets?

**When using a Noticeable widget with triggers of type _Floating icon_ or _Icon_ you can use pre-defined images or your own custom image.**

## How to set a custom image icon?

1. Open the [Noticeable dashboard](https://dashboard.noticeable.io).
2. Select your project.
3. Click to **Widgets** from the left menu.
4. Select your widget and click on its name to open it for edition.
5. In the right menu, open the **Trigger** panel.
6. Find the option **Icon Type** and select **Custom**. Enter the URL to your image in the field that appears:

![](https://storage.crisp.chat/users/helpdesk/website/55d6234c11240c00/screenshot-from-2021-03-14-00-_e5zjrg.png)


As an URL for your custom image icon, we recommend:

  * Using an SVG image. This has the benefit to scale well whatever the icon size is but also offers customizing its color from the Noticeable dashboard when the SVG `currentColor` keyword is used with fill and strokes inside SVG definitions. Using a PNG or JPEG image is not recommended as you will not be able to customize the icon color and the hover state color from the Noticeable dashboard.
  * Using an URL served with HTTPS.

|  [FontAwesome](https://fontawesome.com/icons?d=gallery&p=2) icons have been tested to fit all requirements and work very well.

## Common issues

Below we discuss common issues and solutions:

#### The specified custom SVG icon URL is not loading

A missing [CORS](https://developer.mozilla.org/fr/docs/Web/HTTP/CORS) configuration with the URL you specified is most probably the cause of the issue.

The URL you enter as a custom icon must be _fetchable_ from Noticeable's origin.

For instance, Amazon S3 is very strict and does not allow any origin by default. If your icon is hosted on Amazon S3, then the default URL will not load on Noticeable Widgets.  You will need to create a CORS configuration as discussed on the next page:
https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

The origin to allow is `https://widgets.noticeable.io`. Allowing all origins works too.

If you need help just let us know. We can also host your icon for free.

#### Editing colors of a custom icon from the Noticeable dashboard has no effect 

There are 2 cases to distinguish: either your icon is in SVG format, or using another format.

In the former case, it's most probably because your SVG definition uses hard-coded colors. You need to replace hard-coded color values by the standard `currentColor` keyword.

In the latter case, you are most probably using a GIF or PNG icon. Such formats do not support color edition on the fly. We suggest moving to an SVG icon.

Need help with an icon? let us know!