React PDF Kit exports built-in icon components so you can keep the same visual style across your toolbar and custom UI.

Quick Start

Import the icons you need:

import {
  RPIconZoomIn,
  RPIconZoomOut,
  RPIconFullScreen,
  RPIconSearch
} from '@react-pdf-kit/viewer/icons'

Use them in your own components:

import { RPIconZoomIn } from '@react-pdf-kit/viewer/icons'

const CustomZoomInButton = () => {
  return (
    <button type="button">
      <RPIconZoomIn />
      <span>Zoom in</span>
    </button>
  )
}

Icon Catalog

All icons are exported from @react-pdf-kit/viewer/icons.

RPIconSearch

RPIconChevronUp

RPIconChevronDown

RPIconZoomOut

RPIconZoomIn

RPIconMoon

RPIconSun

RPIconFileUploadDefault

RPIconFileDownloadDefault

RPIconPrintDefault

RPIconFullScreen

RPIconThumbnail

RPIconThreeDot

RPIconGoToDown

RPIconClockwise

RPIconTextSelectionDefault

RPIconHandModeDefault

RPIconSinglePage

RPIconDualPage

RPIconDualPageWithCover

RPIconPageScrolling

RPIconVerticalScrolling

RPIconHorizontalScrolling

RPIconInfo

RPIconCheck

RPIconClose

RPIconClear

RPIconLoader

RPIconLightPdf

RPIconDarkPdf

Notes

• The icon props accept React.ReactNode.
• You can pass built-in icons directly or wrap them in your own styled component.
• If you build a fully custom toolbar, you can still import and reuse these icons in your own buttons.

Related

For more information on how to apply the built-in icons and customize them in actual viewer layouts:

• RPLayout for wiring custom toolbars via the toolbar prop, then applying icon overrides with RPHorizontalBar and RPVerticalBar.
• RPHorizontalBar: Change the icon of any tool for top toolbar customization with built-in or custom icons.
• RPVerticalBar: Change the icon of any tool for side toolbar icon customization.
• Customize Toolbar for end-to-end toolbar tailoring, including icon visibility and replacement patterns.