# Icon in Kibana

**URL:** <https://discuss.elastic.co/t/icon-in-kibana/275306>\
**Category:** Kibana\
**Created:** [June 8, 2021, 1:35pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306 "2021-06-08T13:35:50Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mostpha456](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@mostpha456](https://discuss.elastic.co/u/mostpha456)\
**Post date:** [June 8, 2021, 1:35pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/1 "2021-06-08T13:35:50Z")

</div>

Hello,

I want to know if it is possible to create a visualisation in kibana with a custom icon.

For exemple, i have a field X and i want to put an icon depending on the value of the field in data table.

Is that possible with kibana ?

Thank you

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [June 8, 2021, 1:45pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/2 "2021-06-08T13:45:19Z")

</div>

You can take a look at field formatters: [Manage index pattern data fields | Kibana Guide [7.13] | Elastic](https://www.elastic.co/guide/en/kibana/current/managing-index-patterns.html#string-field-formatters)

They allow you to use the value of a field as a dynamic part of a URL which will load as an image.

For your field, configure the image formatter to load the right icon based on the value (you have to put them onto a reachable web server, Kibana isn't able to serve the icon itself)

---

<div class="post-metadata">

**Author:** ![mostpha456](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@mostpha456](https://discuss.elastic.co/u/mostpha456)\
**Post date:** [June 9, 2021, 12:05pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/3 "2021-06-09T12:05:05Z")

</div>

Hello flash1293,  
Thanks for your answer.  
i tried to put the icon in a local directory "/src/legacy/ui/public/field\_editor/components/field\_format\_editor/editors/url/icons"  
the same directory where kibana put the sample icons.  
But i am having an issue, i tried with the value of the filed is "go" got the default icon of kibana,  
but when the value is green for example ( i added green.png) can't see the icon.

I cheked the rights on the icon, the size and dimension. looks fine

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/0/5/05ae1524269711894550004773892f31e0b0c7fe.png)

Do you have any idea ?

Thank you

---

<div class="post-metadata">

**Author:** ![flash1293](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/flash1293/32/41227_2.png) [@flash1293](https://discuss.elastic.co/u/flash1293)\
**Post date:** [June 9, 2021, 12:13pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/4 "2021-06-09T12:13:07Z")

</div>

I already answered this part here:

> [@flash1293](#):
>
> you have to put them onto a reachable web server, Kibana isn't able to serve the icon itself

Kibana is not a webserver, and any way using it like one isn't supported and might break without notice at any point. It's much more robust to store these icons somewhere else (e.g. a wiki or another kind of filehost)

---

<div class="post-metadata">

**Author:** ![mostpha456](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@mostpha456](https://discuss.elastic.co/u/mostpha456)\
**Post date:** [June 9, 2021, 12:23pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/5 "2021-06-09T12:23:08Z")

</div>

sorry didnt notice this part of the answer.  
Thank you 🙂

---

<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:** [July 7, 2021, 12:23pm UTC](https://discuss.elastic.co/t/icon-in-kibana/275306/6 "2021-07-07T12:23:49Z")

</div>

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