# Icons

Source: https://payloadcms.com/docs/ui-components/icons

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

## Import

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

## Available icons

**Implementation**

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

export function Toolbar() {
  return (
    <div className="toolbar">
      <span aria-hidden="true"><PlusIcon /></span>
      <span aria-hidden="true"><EditIcon /></span>
      <span aria-hidden="true"><CopyIcon /></span>
      <span aria-hidden="true"><SearchIcon /></span>
    </div>
  )
}
```

**Styling**

Icons use currentColor, so set color on a wrapper to follow your theme. Target the nested SVG only when the surrounding layout requires a consistent size.

```css
.toolbar-icon {
  color: var(--theme-text);
  display: inline-flex;
}

.toolbar-icon svg {
  height: 1.25rem;
  width: 1.25rem;
}

.toolbar-icon:hover {
  color: var(--theme-elevation-600);
}
```

- `color`: Stroke or fill color inherited by the icon.
- `height`: Rendered icon height.
- `width`: Rendered icon width.

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.