How can I use my own svg icons in Canvas plugin?

  • What Grafana version and what operating system are you using?
    “version”: “9.3.0-beta.1”

  • What are you trying to achieve?
    Use Canvas plugin and I need to add my own svg icons

  • How are you trying to achieve it?
    I added item as icon, but I have only fixed SVG files. I can’t load my own one.

  • What happened?
    I can Only use Grafana existed icons. Can’t load new ones.

  • What did you expect to happen?
    If you support adding specific icons related to our needs. And how we use this and implement for our own dashboard.

  • Can you copy/paste the configuration(s) that you are having problems with?
    N/A

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    No errors

  • Did you follow any online instructions? If so, what is the URL?
    I didn’t find accurate data in the confluence except for :
    Canvas | Grafana documentation

2 Likes

Hi @mgeriesa,

Welcome to the :grafana: community support forums !!

We are excited that you joined our OSS community. Please read about some of the FAQs in the community :slight_smile:

Canvas Plugin is still new and still making some progress with the documentation.

It would be best to follow this GitHub discussion as other community users asked similar questions as how to add a custom SVG icon and make it work.

I hope this helps.

Thanks for the update.
I actually visited this feedback URL https://github.com/grafana/grafana/discussions/56835.

I see raised questions, but it is not clear if we can add our own icons and how to do that . If this is supported in which version.
If you may help answer this specific question.
I need to use some other icons other in the list. How can I do that?
The confluence is also missing data , since as you said this Canvas is still in development.

Regards,
Manal

Hi @mgeriesa, thanks for reaching out!

The easiest way to include your own svg icons in the Canvas panel is to include the svg file in the grafana/public/img/icons/markers directory. Any new svg files you include in that folder will be visible / selectable inside the markers folder when setting your icon’s source.

See example of including a custom 3m icon

Alternatively you can host your custom svg(s) on a public cloud and set the source of the icon element to the publicly accessible URL (with the correct CORs settings)

If one opens svg, its basically xml. Can one save this xml data to a db and point the canvas icon based on a column in a database table?

Thanks so much. This helps and it works for me .
Regards,
Manal

1 Like

path should be
grafana/public/img/icons/marker (not markers, image is correct)

tested it on my machine - looks like black on black - any requirements to the size of the svg or anything else?

svg-error
svg-file

May be in your svg stroke is set to black.

If stroke is unset (example in Inkscape, see bottom left corner):

It should display correctly in Canvas, both in Dark and Light themes:

dark

light