# How to change the icons of the header toolbar

**URL:** <https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069>\
**Category:** Technical Support\
**Created:** [October 13, 2021, 1:16pm UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069 "2021-10-13T13:16:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [October 13, 2021, 1:16pm UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069/1 "2021-10-13T13:16:49Z")

</div>

**Which product are you using?**  
PDF.js Express Plus

**PDF.js Express Version**  
8.0.0

**Detailed description of issue**  
How to change the icons of the header toolbar like for button Continuous Page, Zoom In, Zoom Out, etc. ?

**Expected behaviour**

**Does your issue happen with every document, or just one?**

**Link to document**

**Code snippet**

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/ffbcd25c7d423db8d5acd5db201c272f4db306dd.png) [@system](https://pdfjs.community/u/system)\
**Post date:** [October 13, 2021, 1:16pm UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069/2 "2021-10-13T13:16:51Z")

</div>

**Hello, I’m Ron, an automated tech support bot 🤖**

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:
- [Hiding/Showing DOM elements in WebViewer UI - List of elements](https://pdfjs.express/documentation/ui-customization/hiding-elements#list-of-elements)
- [Customize toolbar in viewer - Header items - StatefulButton](https://pdfjs.express/documentation/ui-customization/customizing-header.8#statefulbutton)
- [Core engine for WebViewer - Creating your own UI using WebViewer Core](https://pdfjs.express/documentation/ui-customization/core.8#creating-your-own-ui-using-webviewer-core)

APIs:
- [Adding a download button](https://pdfjs.express/api/utils/tutorial-Adding%20a%20download%20button.html#__anchor)
- [UI.Header - get(dataElement)](https://pdfjs.express/api/UI.Header.html#get__anchor)
- [Core.Tools.MarqueeZoomTool](https://pdfjs.express/api/Core.Tools.MarqueeZoomTool.html#__anchor)

Forums:
- [Programmatically highlight area on pdf using coordinates or quads](https://pdfjs.community/t/programmatically-highlight-area-on-pdf-using-coordinates-or-quads/847/1)
- [Load document by Url and save with watermark and html](https://pdfjs.community/t/load-document-by-url-and-save-with-watermark-and-html/502/1)
- [React Native support for PDFJS Express](https://pdfjs.community/t/react-native-support-for-pdfjs-express/677/1)

---

<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:** [October 18, 2021, 8:21pm UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069/3 "2021-10-18T20:21:28Z")

</div>

Hey!

You can use the [`updateTool`](https://pdfjs.express/api/UI.html#.updateTool__anchor) and/or the `updateElement` API to update the icon of a tool.

Example:

```javascript
  instance.UI.updateElement('zoomOutButton', {
    img: 'https://cdn-icons-png.flaticon.com/512/117/117453.png'
  })

```

The first parameter is the `data-element` string. More info on that can be found [here](https://pdfjs.express/documentation/ui-customization/hiding-elements#find-data-element-attribute-values).

Thanks!  
Logan

---

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [October 19, 2021, 10:51am UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069/4 "2021-10-19T10:51:11Z")

</div>

Hi,

Was able to change the header icons, but it did not work for the flyout menu items : Continuous Page, Single Page, Fit to Page etc.

Please guide.

![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/1X/a8a6bc07066f47e6c10570f1cc43b866f4f4acaa.png)

---

<div class="post-metadata">

**Author:** ![pankaj](https://avatars.discourse-cdn.com/v4/letter/p/a9adbd/32.png) [@pankaj](https://pdfjs.community/u/pankaj)\
**Post date:** [October 29, 2021, 12:26pm UTC](https://pdfjs.community/t/how-to-change-the-icons-of-the-header-toolbar/1069/5 "2021-10-29T12:26:10Z")

</div>

Hi,

Have not received any response, please assist.