# Can I add custom SVGs as symbols on ElasticSearch Kibana Maps?

**URL:** <https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309>\
**Category:** Kibana\
**Tags:** maps\
**Created:** [February 4, 2021, 10:57pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309 "2021-02-04T22:57:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![irwazr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/irwazr/32/56741_2.png) [@irwazr](https://discuss.elastic.co/u/irwazr)\
**Post date:** [February 4, 2021, 10:57pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/1 "2021-02-04T22:57:30Z")

</div>

Hi all,

We have a map view taking a GeoJSON feed and plotting points according to long/lat. It works really well, but the out of the box symbols provided don't match our data use-case (weather events etc). I'm capable of creating my own SVGs, but I'm wondering where these files reside on the ES/Kibana hosts. I imagine the existing symbols are all just SVGs sitting in a directory, so in theory it should be easy enough to add more.

Short of doing a massive scan over the directory structure (which will produce thousands of false leads), does anyone know the path to the symbols files, or any other methods for adding these in?

Thanks.

---

<div class="post-metadata">

**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\
**Post date:** [February 5, 2021, 4:48pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/2 "2021-02-05T16:48:09Z")

</div>

Hi @irwazr. Custom symbols are not available in Elastic Maps at this time.

This is technically challenging. To enable changing the style (color and size) of icons (and text labels) in WebGL requires a special method of rasterization using a [Signed Distance Function](https://en.wikipedia.org/wiki/Signed_distance_function). Because icons are rasterized, it is common to see [artifacts and poor resolution](https://github.com/elastic/maki/pull/9#issuecomment-603955403) in the output (sprites). The SVG icons we use ([Maki](https://github.com/elastic/maki)) are specifically designed to support rasterization via SDF with a minimal loss of resolution.

The location of the sprites is imported into the `node_modules` directory from the [@elastic/maki NPM module](https://www.npmjs.com/package/@elastic/maki).

More reading:  
[This blog post by Mapbox goes into more detail on the implementation of SDF in drawing fonts.](https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817)

[Elastic's fork of spritezero](https://github.com/elastic/spritezero#wtf-why-the-fork) adds an option to produce sprites using signed distance fields.

---

<div class="post-metadata">

**Author:** ![irwazr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/irwazr/32/56741_2.png) [@irwazr](https://discuss.elastic.co/u/irwazr)\
**Post date:** [February 6, 2021, 3:56am UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/3 "2021-02-06T03:56:13Z")

</div>

Thanks for the detailed and helpful reply Nick. I like the sound of a technical challenge 🙂

In terms of a way forward here, would it be fair to say then that I either need to find a way to convert SVGs into the correct format, or alternatively to contribute SVGs to Elastic for potential inclusion in a future release? What's the viability of either?

Thanks.

---

<div class="post-metadata">

**Author:** ![nickpeihl](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nickpeihl/32/112622_2.png) [@nickpeihl](https://discuss.elastic.co/u/nickpeihl)\
**Post date:** [February 8, 2021, 5:21pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/4 "2021-02-08T17:21:55Z")

</div>

Hi @irwazr.

We can only add icons that are CC 1.0 licensed. Usually this means we need to design our own icons rather than use an existing one.

Would you mind opening an issue at [GitHub - elastic/maki: POI Icon Set](https://github.com/elastic/maki) with a description of the icon(s) you wish to include? We can continue the discussion there.

---

<div class="post-metadata">

**Author:** ![irwazr](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/irwazr/32/56741_2.png) [@irwazr](https://discuss.elastic.co/u/irwazr)\
**Post date:** [February 9, 2021, 11:43pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/5 "2021-02-09T23:43:17Z")

</div>

Thanks Nick, I've opened issues for each icon requirement, and provided an example.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 9, 2021, 11:43pm UTC](https://discuss.elastic.co/t/can-i-add-custom-svgs-as-symbols-on-elasticsearch-kibana-maps/263309/6 "2021-03-09T23:43:20Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
