---
title: "Changing icons in JavaScript PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/web/user-interface/theming/icons/"
md_url: "https://www.nutrient.io/guides/web/user-interface/theming/icons.md"
last_updated: "2026-05-20T19:49:34.911Z"
description: "Changing icons in JavaScript PDF viewer | guide for Nutrient Web SDK with detailed instructions and code examples."
---

# Customizing icons in our JavaScript PDF viewer

It’s possible to customize [icons](https://www.nutrient.io/api/web/interfaces/ToolbarItem.html#icon) for a toolbar item.

[Try for Free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch Demo](https://www.nutrient.io/demo/toolbar-customization/)

The icon should be a URL, a Base64-encoded image, or a string with an SVG. This property can either add an icon to a custom button or override the icons of the [default items](https://www.nutrient.io/api/web/variables/NutrientViewer.defaultToolbarItems.html) ([try it in the Playground](https://www.nutrient.io/demo/sandbox?p=eyJ2IjoxLCJjc3MiOiIvKiBBZGQgeW91ciBDU1MgaGVyZSAqL1xuIiwianMiOiJjb25zb2xlLmxvZyhcIkN1c3RvbWl6aW5nIHRvb2xiYXIgaWNvbnMuLi5cIik7XG5cbi8vIEV4YW1wbGUgMTogQ3VzdG9tIHRvb2xiYXIgaXRlbSB3aXRoIFNWRyBpY29uXG5jb25zdCBjdXN0b21ab29tQnV0dG9uID0ge1xuICB0eXBlOiBcImN1c3RvbVwiLFxuICBpZDogXCJjdXN0b20tem9vbS1pblwiLFxuICB0aXRsZTogXCJDdXN0b20gWm9vbSBJblwiLFxuICBpY29uOiAnPHN2ZyB3aWR0aD1cIjI0XCIgaGVpZ2h0PVwiMjRcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgZmlsbD1cIm5vbmVcIiB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCI%252BPGNpcmNsZSBjeD1cIjExXCIgY3k9XCIxMVwiIHI9XCI4XCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlLXdpZHRoPVwiMlwiLz48cGF0aCBkPVwiTTExIDh2Nk04IDExaDZcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCIyXCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiLz48cGF0aCBkPVwiTTE2LjUgMTYuNUwyMSAyMVwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjJcIiBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIvPjwvc3ZnPicsXG4gIG9uUHJlc3M6IChldmVudCkgPT4ge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgY29uc29sZS5sb2coXCJDdXN0b20gem9vbSBidXR0b24gcHJlc3NlZCFcIik7XG4gIH1cbn07XG5cbi8vIEV4YW1wbGUgMjogT3ZlcnJpZGUgZGVmYXVsdCB6b29tLWluIGljb25cbk51dHJpZW50Vmlld2VyLmxvYWQoe1xuICAuLi5iYXNlT3B0aW9ucyxcbn0pLnRoZW4oKGluc3RhbmNlKSA9PiB7XG4gIGNvbnNvbGUubG9nKFwiTnV0cmllbnQgbG9hZGVkIVwiKTtcblxuICAvLyBHZXQgZGVmYXVsdCB0b29sYmFyIGl0ZW1zXG4gIGNvbnN0IHRvb2xiYXJJdGVtcyA9IE51dHJpZW50Vmlld2VyLmRlZmF1bHRUb29sYmFySXRlbXM7XG5cbiAgLy8gRmluZCB0aGUgem9vbS1pbiBidXR0b25cbiAgY29uc3Qgem9vbUluSW5kZXggPSB0b29sYmFySXRlbXMuZmluZEluZGV4KChpdGVtKSA9PiBpdGVtLnR5cGUgPT09IFwiem9vbS1pblwiKTtcblxuICBpZiAoem9vbUluSW5kZXggIT09IC0xKSB7XG4gICAgLy8gT3ZlcnJpZGUgd2l0aCBjdXN0b20gaWNvbiAodXNpbmcgU1ZHKVxuICAgIHRvb2xiYXJJdGVtc1t6b29tSW5JbmRleF0uaWNvbiA9ICc8c3ZnIHdpZHRoPVwiMjRcIiBoZWlnaHQ9XCIyNFwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj48Y2lyY2xlIGN4PVwiMTFcIiBjeT1cIjExXCIgcj1cIjhcIiBzdHJva2U9XCIjRkY2QjM1XCIgc3Ryb2tlLXdpZHRoPVwiMlwiLz48cGF0aCBkPVwiTTExIDh2Nk04IDExaDZcIiBzdHJva2U9XCIjRkY2QjM1XCIgc3Ryb2tlLXdpZHRoPVwiMlwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIi8%252BPHBhdGggZD1cIk0xNi41IDE2LjVMMjEgMjFcIiBzdHJva2U9XCIjRkY2QjM1XCIgc3Ryb2tlLXdpZHRoPVwiMlwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIi8%252BPC9zdmc%252BJztcbiAgICBjb25zb2xlLmxvZyhcIk92ZXJyaWRpbmcgZGVmYXVsdCB6b29tLWluIGljb24gd2l0aCBjdXN0b20gb3JhbmdlIGljb25cIik7XG4gIH1cblxuICAvLyBBZGQgY3VzdG9tIHRvb2xiYXIgaXRlbVxuICB0b29sYmFySXRlbXMucHVzaChjdXN0b21ab29tQnV0dG9uKTtcblxuICAvLyBBcHBseSB0aGUgY3VzdG9taXplZCB0b29sYmFyXG4gIGluc3RhbmNlLnNldFRvb2xiYXJJdGVtcyh0b29sYmFySXRlbXMpO1xuXG4gIGNvbnNvbGUubG9nKFwiVG9vbGJhciBjdXN0b21pemF0aW9uIGNvbXBsZXRlIVwiKTtcbiAgY29uc29sZS5sb2coXCItIERlZmF1bHQgem9vbS1pbiBpY29uIHJlcGxhY2VkIHdpdGggb3JhbmdlIHZlcnNpb25cIik7XG4gIGNvbnNvbGUubG9nKFwiLSBDdXN0b20gem9vbSBidXR0b24gYWRkZWQgYXQgdGhlIGVuZFwiKTtcbiAgY29uc29sZS5sb2coXCJMb29rIGZvciB0aGUgb3JhbmdlIG1hZ25pZnlpbmcgZ2xhc3MgaWNvbiBpbiB0aGUgdG9vbGJhciFcIik7XG59KTtcbiJ9)).

## Adding a custom toolbar item with icon

Here’s a complete example of adding a custom toolbar item with a custom icon:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
}).then((instance) => {
    // Define a custom toolbar item with an SVG icon.
    const customToolbarItem = {
      type: "custom",
      id: "my-custom-button",
      title: "My Custom Action",
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>',
      onPress: () => {
        alert("Custom button clicked!");
      },
    };

    // Get existing toolbar items and add the custom item.
    const toolbarItems = [...NutrientViewer.defaultToolbarItems];
    toolbarItems.push(customToolbarItem);

    // Apply the updated toolbar.
    instance.setToolbarItems(toolbarItems);
  }).catch((error) => {
    console.error("Failed to load viewer:", error);
  });

```

## Overriding a default toolbar icon

You can also replace the icon of an existing toolbar item:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
}).then((instance) => {
    // Get the default toolbar items.
    const toolbarItems = [...NutrientViewer.defaultToolbarItems];

    // Find the zoom-in button and replace its icon.
    const zoomInIndex = toolbarItems.findIndex((item) => item.type === "zoom-in");
    if (zoomInIndex!== -1) {
      toolbarItems[zoomInIndex] = {...toolbarItems[zoomInIndex],
        icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2"/><line x1="11" y1="8" x2="11" y2="14" stroke="white" stroke-width="2"/><line x1="8" y1="11" x2="14" y2="11" stroke="white" stroke-width="2"/></svg>',
      };
    }

    // Apply the updated toolbar.
    instance.setToolbarItems(toolbarItems);
  }).catch((error) => {
    console.error("Failed to load viewer:", error);
  });

```

## Using an external image file as icon

You can also use an external image URL or a Base64-encoded image:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
}).then((instance) => {
    const toolbarItems = [...NutrientViewer.defaultToolbarItems];

    // Add custom item with external image URL.
    const customItem = {
      type: "custom",
      id: "my-image-button",
      title: "Image Icon Button",
      icon: "/path/to/my-icon.svg", // External URL.
      onPress: () => {
        console.log("Button with image icon clicked");
      },
    };

    toolbarItems.push(customItem);
    instance.setToolbarItems(toolbarItems);
  }).catch((error) => {
    console.error("Failed to load viewer:", error);
  });

```

## Conditionally showing icons with media queries

You can control when custom toolbar items appear based on screen size:

```js

import NutrientViewer from "@nutrient-sdk/viewer";

const container = document.getElementById("nutrient-container");

NutrientViewer.load({
  container,
  document: "document.pdf",
}).then((instance) => {
    const toolbarItems = [...NutrientViewer.defaultToolbarItems];

    // This item only appears on screens wider than 980px.
    const desktopOnlyItem = {
      type: "custom",
      id: "desktop-only-button",
      title: "Desktop Only",
      mediaQueries: ["(min-width: 980px)"],
      icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21" stroke="currentColor" stroke-width="2"/><line x1="12" y1="17" x2="12" y2="21" stroke="currentColor" stroke-width="2"/></svg>',
      onPress: () => {
        console.log("Desktop action");
      },
    };

    toolbarItems.push(desktopOnlyItem);
    instance.setToolbarItems(toolbarItems);
  }).catch((error) => {
    console.error("Failed to load viewer:", error);
  });

```
---

## Related pages

- [Customizing CSS styling in our JavaScript PDF viewer](/guides/web/customizing-the-interface/css-customization.md)
- [Customizing the theme of our JavaScript PDF viewer](/guides/web/user-interface/theming/custom-theme.md)
- [Enabling dark theme in our JavaScript PDF viewer](/guides/web/user-interface/theming/dark-theme.md)