Customizing icons in our JavaScript PDF viewer

It’s possible to customize icons for a toolbar item.

Try for Free Launch Demo

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 (try it in the Playground(opens in a new tab)).

Adding a custom toolbar item with icon

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

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:

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:

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:

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);
  });