# I want to use custom icon for the scatter markers. How to do it?

**URL:** <https://community.plotly.com/t/i-want-to-use-custom-icon-for-the-scatter-markers-how-to-do-it/6644>\
**Category:** plotly.js\
**Created:** [November 3, 2017, 6:52pm UTC](https://community.plotly.com/t/i-want-to-use-custom-icon-for-the-scatter-markers-how-to-do-it/6644 "2017-11-03T18:52:18Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Blueberry](https://avatars.discourse-cdn.com/v4/letter/b/54ee81/32.png) [@Blueberry](https://community.plotly.com/u/Blueberry)\
**Post date:** [October 27, 2020, 9:56am UTC](https://community.plotly.com/t/i-want-to-use-custom-icon-for-the-scatter-markers-how-to-do-it/6644/6 "2020-10-27T09:56:22Z")

</div>

Hi, one very easy solution is to use UTF-8 icons. This will expand the ‘nomal’ plotly markers by a lot 🙂  
_UTF-8 res: [https://www.compart.com/de/unicode/search?q=bell#characters](https://www.compart.com/de/unicode/search?q=bell#characters)_

```auto
Plotly.plot('graph', [{
  mode: 'text',
  x: [1],
  y: [1],
  text: ['⚽'],
  type: 'scatter',
  textfont: {
    size: 25,
    color: 'black'
  }
}])

```

You can easily exchange them. I havn’t found out yet, if using a custom created font also allows to use own icons.

I made a codepen for that: [https://codepen.io/cherzog/pen/YzqBNvx?editors=0010](https://codepen.io/cherzog/pen/YzqBNvx?editors=0010)

Hopefully this will help you!

---

_[View the full topic](https://community.plotly.com/t/i-want-to-use-custom-icon-for-the-scatter-markers-how-to-do-it/6644)._