0
# Icon Components
1

2
Complete icon set for common admin interface needs including navigation, actions, content types, and status indicators. All icons are React SVG components with consistent styling and customization options.
3

4
## Common Icon Props
5

6
All icon components share the same base interface:
7

8
```typescript { .api }
9
interface IconProps {
10
  className?: string;
11
  size?: number | string;
12
  style?: React.CSSProperties;
13
  color?: string;
14
}
15
```
16

17
## Navigation Icons
18

19
### ChevronIcon
20

21
Directional arrow icon for navigation and expansion.
22

23
```typescript { .api }
24
function ChevronIcon(props: IconProps): JSX.Element;
25
```
26

27
Usage example:
28
```typescript
29
import { ChevronIcon } from '@payloadcms/ui';
30

31
function DropdownButton() {
32
  return (
33
    <button>
34
      Menu <ChevronIcon size={16} />
35
    </button>
36
  );
37
}
38
```
39

40
### MenuIcon
41

42
Hamburger menu icon for mobile navigation.
43

44
```typescript { .api }
45
function MenuIcon(props: IconProps): JSX.Element;
46
```
47

48
### CloseMenuIcon
49

50
Close/X icon for dismissing menus and modals.
51

52
```typescript { .api }
53
function CloseMenuIcon(props: IconProps): JSX.Element;
54
```
55

56
### MoreIcon
57

58
Three dots icon for additional actions menu.
59

60
```typescript { .api }
61
function MoreIcon(props: IconProps): JSX.Element;
62
```
63

64
### XIcon
65

66
Generic close/cancel icon.
67

68
```typescript { .api }
69
function XIcon(props: IconProps): JSX.Element;
70
```
71

72
## Action Icons
73

74
### EditIcon
75

76
Edit/modify action icon.
77

78
```typescript { .api }
79
function EditIcon(props: IconProps): JSX.Element;
80
```
81

82
### PlusIcon
83

84
Add/create action icon.
85

86
```typescript { .api }
87
function PlusIcon(props: IconProps): JSX.Element;
88
```
89

90
### CheckIcon
91

92
Confirm/success action icon.
93

94
```typescript { .api }
95
function CheckIcon(props: IconProps): JSX.Element;
96
```
97

98
### SwapIcon
99

100
Exchange/swap action icon.
101

102
```typescript { .api }
103
function SwapIcon(props: IconProps): JSX.Element;
104
```
105

106
### CopyIcon
107

108
Copy/duplicate action icon.
109

110
```typescript { .api }
111
function CopyIcon(props: IconProps): JSX.Element;
112
```
113

114
### SearchIcon
115

116
Search functionality icon.
117

118
```typescript { .api }
119
function SearchIcon(props: IconProps): JSX.Element;
120
```
121

122
### DragHandleIcon
123

124
Drag handle for sortable items.
125

126
```typescript { .api }
127
function DragHandleIcon(props: IconProps): JSX.Element;
128
```
129

130
## Content Icons
131

132
### DocumentIcon
133

134
Document/file representation icon.
135

136
```typescript { .api }
137
function DocumentIcon(props: IconProps): JSX.Element;
138
```
139

140
### FolderIcon
141

142
Folder/directory icon.
143

144
```typescript { .api }
145
function FolderIcon(props: IconProps): JSX.Element;
146
```
147

148
### MoveFolderIcon
149

150
Move folder action icon.
151

152
```typescript { .api }
153
function MoveFolderIcon(props: IconProps): JSX.Element;
154
```
155

156
### CalendarIcon
157

158
Date/calendar icon.
159

160
```typescript { .api }
161
function CalendarIcon(props: IconProps): JSX.Element;
162
```
163

164
### LinkIcon
165

166
Link/URL icon.
167

168
```typescript { .api }
169
function LinkIcon(props: IconProps): JSX.Element;
170
```
171

172
### ExternalLinkIcon
173

174
External link icon (with arrow indicator).
175

176
```typescript { .api }
177
function ExternalLinkIcon(props: IconProps): JSX.Element;
178
```
179

180
### CodeBlockIcon
181

182
Code block representation icon.
183

184
```typescript { .api }
185
function CodeBlockIcon(props: IconProps): JSX.Element;
186
```
187

188
### LineIcon
189

190
Horizontal line/separator icon.
191

192
```typescript { .api }
193
function LineIcon(props: IconProps): JSX.Element;
194
```
195

196
## View Icons
197

198
### GridViewIcon
199

200
Grid layout view icon.
201

202
```typescript { .api }
203
function GridViewIcon(props: IconProps): JSX.Element;
204
```
205

206
### ListViewIcon
207

208
List layout view icon.
209

210
```typescript { .api }
211
function ListViewIcon(props: IconProps): JSX.Element;
212
```
213

214
### MinimizeMaximizeIcon
215

216
Expand/collapse view icon.
217

218
```typescript { .api }
219
function MinimizeMaximizeIcon(props: IconProps): JSX.Element;
220
```
221

222
## Status Icons
223

224
### LogOutIcon
225

226
Logout/sign out action icon.
227

228
```typescript { .api }
229
function LogOutIcon(props: IconProps): JSX.Element;
230
```
231

232
### ErrorIcon
233

234
Error state indicator icon.
235

236
```typescript { .api }
237
function ErrorIcon(props: IconProps): JSX.Element;
238
```
239

240
### InfoIcon
241

242
Information state icon.
243

244
```typescript { .api }
245
function InfoIcon(props: IconProps): JSX.Element;
246
```
247

248
### SuccessIcon
249

250
Success state indicator icon.
251

252
```typescript { .api }
253
function SuccessIcon(props: IconProps): JSX.Element;
254
```
255

256
### WarningIcon
257

258
Warning state indicator icon.
259

260
```typescript { .api }
261
function WarningIcon(props: IconProps): JSX.Element;
262
```
263

264
## Icon Usage Patterns
265

266
### With Buttons
267

268
```typescript
269
import { Button, PlusIcon, EditIcon } from '@payloadcms/ui';
270

271
function ActionButtons() {
272
  return (
273
    <div>
274
      <Button icon={<PlusIcon />} appearance="primary">
275
        Add Item
276
      </Button>
277
      <Button icon={<EditIcon />} appearance="secondary">
278
        Edit
279
      </Button>
280
    </div>
281
  );
282
}
283
```
284

285
### In Lists and Tables
286

287
```typescript
288
import { Table, EditIcon, DocumentIcon } from '@payloadcms/ui';
289

290
function DocumentTable({ data }) {
291
  const columns = [
292
    {
293
      accessor: 'title',
294
      label: 'Document',
295
      components: {
296
        renderCell: ({ rowData }) => (
297
          <div>
298
            <DocumentIcon size={16} />
299
            {rowData.title}
300
          </div>
301
        )
302
      }
303
    },
304
    {
305
      accessor: 'actions',
306
      label: 'Actions',
307
      components: {
308
        renderCell: ({ rowData }) => (
309
          <button onClick={() => edit(rowData.id)}>
310
            <EditIcon size={16} />
311
          </button>
312
        )
313
      }
314
    }
315
  ];
316

317
  return <Table columns={columns} data={data} />;
318
}
319
```
320

321
### Status Indicators
322

323
```typescript
324
import { ErrorIcon, SuccessIcon, WarningIcon } from '@payloadcms/ui';
325

326
function StatusIndicator({ status, message }) {
327
  const getIcon = () => {
328
    switch (status) {
329
      case 'error':
330
        return <ErrorIcon color="red" />;
331
      case 'success':
332
        return <SuccessIcon color="green" />;
333
      case 'warning':
334
        return <WarningIcon color="orange" />;
335
      default:
336
        return null;
337
    }
338
  };
339

340
  return (
341
    <div className="status-indicator">
342
      {getIcon()}
343
      <span>{message}</span>
344
    </div>
345
  );
346
}
347
```
348

349
### Navigation Menus
350

351
```typescript
352
import { 
353
  MenuIcon, 
354
  CloseMenuIcon, 
355
  ChevronIcon,
356
  DocumentIcon,
357
  FolderIcon 
358
} from '@payloadcms/ui';
359

360
function NavigationMenu() {
361
  const [isOpen, setIsOpen] = useState(false);
362

363
  return (
364
    <nav>
365
      <button onClick={() => setIsOpen(!isOpen)}>
366
        {isOpen ? <CloseMenuIcon /> : <MenuIcon />}
367
      </button>
368
      
369
      {isOpen && (
370
        <ul>
371
          <li>
372
            <DocumentIcon size={16} />
373
            <span>Documents</span>
374
            <ChevronIcon size={12} />
375
          </li>
376
          <li>
377
            <FolderIcon size={16} />
378
            <span>Media</span>
379
            <ChevronIcon size={12} />
380
          </li>
381
        </ul>
382
      )}
383
    </nav>
384
  );
385
}
386
```
387

388
### Icon Styling
389

390
```typescript
391
import { SearchIcon } from '@payloadcms/ui';
392

393
function CustomStyledIcon() {
394
  return (
395
    <SearchIcon 
396
      size={24}
397
      color="#007acc"
398
      style={{ 
399
        marginRight: '8px',
400
        opacity: 0.8 
401
      }}
402
      className="custom-search-icon"
403
    />
404
  );
405
}
406
```
407

408
### Icon in Form Fields
409

410
```typescript
411
import { TextField, CalendarIcon, LinkIcon } from '@payloadcms/ui';
412

413
function FormWithIcons() {
414
  return (
415
    <form>
416
      <div className="field-with-icon">
417
        <CalendarIcon size={16} />
418
        <TextField path="publishDate" label="Publish Date" />
419
      </div>
420
      
421
      <div className="field-with-icon">
422
        <LinkIcon size={16} />
423
        <TextField path="externalUrl" label="External URL" />
424
      </div>
425
    </form>
426
  );
427
}
428
```
429

430
## Icon Accessibility
431

432
All icons support accessibility features:
433

434
```typescript
435
import { EditIcon } from '@payloadcms/ui';
436

437
function AccessibleIconButton() {
438
  return (
439
    <button aria-label="Edit document">
440
      <EditIcon />
441
      <span className="sr-only">Edit</span>
442
    </button>
443
  );
444
}
445
```
446

447
## Icon Customization
448

449
Icons can be styled with CSS classes:
450

451
```css
452
.custom-icon {
453
  transition: all 0.2s ease;
454
}
455

456
.custom-icon:hover {
457
  transform: scale(1.1);
458
  color: var(--theme-primary);
459
}
460
```
461

462
```typescript
463
import { PlusIcon } from '@payloadcms/ui';
464

465
function AnimatedIcon() {
466
  return (
467
    <PlusIcon 
468
      className="custom-icon"
469
      size={20}
470
    />
471
  );
472
}
473
```
474

475
## Icon Library Organization
476

477
The @payloadcms/ui package organizes icons by functional category:
478

479
- **Navigation**: ChevronIcon, MenuIcon, CloseMenuIcon, MoreIcon, XIcon
480
- **Actions**: EditIcon, PlusIcon, CheckIcon, SwapIcon, CopyIcon, SearchIcon, DragHandleIcon
481
- **Content**: DocumentIcon, FolderIcon, MoveFolderIcon, CalendarIcon, LinkIcon, ExternalLinkIcon, CodeBlockIcon, LineIcon
482
- **Views**: GridViewIcon, ListViewIcon, MinimizeMaximizeIcon
483
- **Status**: LogOutIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon
484

485
All icons are designed to be consistent in style, scalable, and optimized for clarity at different sizes.