Simplify your stack and build anything. Or everything.
Schedule a Demo
USE CASES
Headless CMSEnterprise App BuilderHeadless E-CommerceDigital Asset Management
FEATURES
Multi-TenancyWhite LabelLocalizationAccess ControlAuth
CASE STUDIES

See what others are building with Payload.

Browse Case Studies
Build tomorrow’s web with a modern solution you truly own.
PAYLOAD IS FOR
DevelopersMarketing teamsEnterprise companiesAgencies & Consultancies
COMPARE PAYLOAD
Payload vs WordPressPayload vs ContentfulPayload vs SanityPayload vs StrapiPayload vs Directus
AGENCY TESTIMONIAL

"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."

Become a PartnerFind a Partner
Code-based nature means you can build on top of it to power anything.
Resources
DocumentationExamplesTemplatesGitHubReleasesBlogGuides & Tutorials
Community
RoadmapDiscordCommunity Help
Resources for Developers

Get the resources you need to start building today

Guides & TutorialsExplore Docs
It’s time to take back your content infrastructure.
Schedule a Demo
Enterprise Features
SSOAI Auto-EmbeddingPublishing WorkflowsVisual EditorStatic A/B testingAI features
Customer Stories
MicrosoftASICSBlue OriginHello BelloTekton
Featured Customer Story

Microsoft chose Payload to tell the world about AI.

Read the case studyBrowse all
LoginGet Started

Icons

Payload exports the icons used throughout the Admin Panel so custom UI can use the same visual language.

Import

1
import { CopyIcon, EditIcon, PlusIcon, SearchIcon } from '@payloadcms/ui'

Available icons

Loading component example…

Icons inherit their color from the surrounding text. Their default dimensions vary according to where each icon is used in the Admin Panel; apply a shared class to the surrounding element when your layout requires a consistent size.

The client export includes:

  • CalendarIcon, CheckIcon, ChevronIcon, CloseMenuIcon, and CodeBlockIcon
  • CopyIcon, DocumentIcon, DragHandleIcon, EditIcon, and ExternalLinkIcon
  • FolderIcon, GearIcon, GridViewIcon, LineIcon, and LinkIcon
  • ListViewIcon, LogOutIcon, MenuIcon, MinimizeMaximizeIcon, and MoreIcon
  • MoveFolderIcon, PlusIcon, SearchIcon, SwapIcon, and XIcon
  • ErrorIcon, InfoIcon, SuccessIcon, and WarningIcon for notification states

Configurable icons

Most icons render without props. These exports expose additional options:

Component

Props

Description

ChevronIcon

direction, size, ariaLabel, className

Sets its direction, preset size, label, or class.

GearIcon

ariaLabel, className

Adds an accessible label or custom class.

MinimizeMaximizeIcon

isMinimized, className

Switches between the minimize and maximize graphics.

DragHandleIcon

className

Adds a custom class.

EditIcon

className

Adds a custom class.

ExternalLinkIcon

className

Adds a custom class.

FolderIcon

className

Adds a custom class.

MoreIcon

className

Adds a custom class.

XIcon

className

Adds a custom class.

Accessibility

  • Treat an icon as decorative when adjacent text already describes the action.
  • Give an icon-only button or link an accessible name on the interactive element.
  • Do not use color alone to communicate a state or outcome.

The icons use SVG markup and require no Payload providers.

Was this page helpful?

Next

Link