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.
Open the Noticeable dashboard.
Select your project.
Click to Widgets from the left menu.
Select your widget and click on its name to open it for edition.
In the right menu, open the Trigger panel.
Find the option Icon Type and select Custom. Enter the URL to your image in the field that appears:
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 icons have been tested to fit all requirements and work very well.
Below we discuss common issues and solutions:
A missing 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.
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!
How to set a custom image icon?
Open the Noticeable dashboard.
Select your project.
Click to Widgets from the left menu.
Select your widget and click on its name to open it for edition.
In the right menu, open the Trigger panel.
Find the option Icon Type and select Custom. Enter the URL to your image in the field that appears:
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 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 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!
Updated on: 10/04/2022
Thank you!