toolbar.icons

Replace any icon the SDK draws, by name. Every icon has a name — the toolbar and ribbon, the navigation bar, the sidebar and its panels, search, the phone sheet, the tools' option bars, the selection bar, and the dialogs (signature, stamp, link, image, security, Manage Pages, the document states). Names you leave out keep the built-in; a replacement is drawn as given, so an empty string shows no icon. The keys are typed as IconName, so a misspelt name is a compile error. The same names work as a ToolbarAction.icon. Outside a viewer, createDropZone, createPasswordPrompt and createLoadError take the same map as options.icons. Icons that are part of the document — what a stamp or a note looks like in the saved file — are content, not chrome, and are not in this list.

Security note: icon values are injected into the toolbar as raw HTML. This is host-controlled configuration by design, but treat it accordingly: only pass trusted, static SVG markup — never user-supplied or remotely-fetched strings. A replacement can be any markup; it is inserted as given, not checked or cleaned. Use a single <svg> root with a viewBox: the SDK sizes the svg element with CSS (24px on the toolbar), so the width and height attributes do not decide its size. Leave out <title>: each button already has a name from the string table.

Partial<Record<IconName, string>>

Example

iconsTypeScript

import { ICONS, type IconName } from '@kernstra/pdf-web-sdk';

const brandIcons: Partial<Record<IconName, string>> = {
  zoomIn: myZoomInSvg,
  close: myCloseSvg,
  securityShield: myShieldSvg,
};
new PDFViewer(container, doc, { toolbar: { icons: brandIcons } });

// Reuse a built-in in your own chrome:
exportButton.innerHTML = ICONS.download;