# Annotation Icons does not change color as selected

**URL:** <https://pdfjs.community/t/annotation-icons-does-not-change-color-as-selected/177>\
**Category:** Technical Support\
**Created:** [August 5, 2020, 5:22am UTC](https://pdfjs.community/t/annotation-icons-does-not-change-color-as-selected/177 "2020-08-05T05:22:14Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Logan](https://yyz1.discourse-cdn.com/flex031/user_avatar/pdfjs.community/logan/32/13_2.png) [@Logan](https://pdfjs.community/u/Logan)\
**Post date:** [August 6, 2020, 4:00pm UTC](https://pdfjs.community/t/annotation-icons-does-not-change-color-as-selected/177/2 "2020-08-06T16:00:24Z")

</div>

Hi!

You can programmatically set the `fill` style of your SVG icon, so this is the approach I would take. You can listen for the toolChanged event to get the color every time it is changed. Something like this should work (you may have to make some tweaks to satisfy your own requirements)

```javascript
Webviewer({
   ...
}, document.getElementById('viewer')).then(instance => {

  const { docViewer, Tools, updateElement } = instance;

  docViewer.on('toolUpdated', (updatedTool) => {

    if (updatedTool instanceof Tools.TextHighlightCreateTool) {
      const { StrokeColor } = updatedTool.defaults;
      const color = StrokeColor.toHexString();
      updateElement('highlightToolButton', {
        img: `<svg fill="${color}">...</svg>`,
      })
    }
  })
});

```

Thanks!  
Logan

---

_[View the full topic](https://pdfjs.community/t/annotation-icons-does-not-change-color-as-selected/177)._