0
# Icon Components
1

2
## Overview
3

4
@primer/octicons-react provides 339 individual icon components, each following a consistent naming pattern and accepting the same props interface. All icons are React functional components that render SVG elements.
5

6
## Component Interface
7

8
```typescript { .api }
9
interface OcticonProps extends React.ComponentPropsWithoutRef<'svg'> {
10
  /** Accessible label for screen readers */
11
  'aria-label'?: string
12
  /** References element that labels this icon */
13
  'aria-labelledby'?: string
14
  /** Tab order for keyboard navigation */
15
  tabIndex?: number
16
  /** Child elements (typically not used) */
17
  children?: React.ReactElement<any>
18
  /** CSS class names */
19
  className?: string
20
  /** Title text or element for tooltips */
21
  title?: string | React.ReactElement<any>
22
  /** Unique identifier */
23
  id?: string
24
  /** Fill color (defaults to 'currentColor') */
25
  fill?: string
26
  /** Icon data (for generic icon component) */
27
  icon?: Icon | React.ReactNode
28
  /** Size as number (pixels) or predefined size */
29
  size?: number | Size
30
  /** Vertical alignment relative to text */
31
  verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
32
}
33

34
type Size = 'small' | 'medium' | 'large'
35
type Icon = React.FC<OcticonProps>
36
```
37

38
## Complete Icon List
39

40
All icons follow the pattern `{IconName}Icon` and accept `OcticonProps`:
41

42
```typescript { .api }
43
// Accessibility Icons
44
function AccessibilityIcon(props: OcticonProps): JSX.Element
45
function AccessibilityInsetIcon(props: OcticonProps): JSX.Element
46

47
// Agent & AI Icons  
48
function AgentIcon(props: OcticonProps): JSX.Element
49
function AiModelIcon(props: OcticonProps): JSX.Element
50

51
// Alert & Status Icons
52
function AlertFillIcon(props: OcticonProps): JSX.Element
53
function AlertIcon(props: OcticonProps): JSX.Element
54
function CheckCircleFillIcon(props: OcticonProps): JSX.Element
55
function CheckCircleIcon(props: OcticonProps): JSX.Element
56
function CheckIcon(props: OcticonProps): JSX.Element
57

58
// Application Icons
59
function AppsIcon(props: OcticonProps): JSX.Element
60
function ArchiveIcon(props: OcticonProps): JSX.Element
61

62
// Arrow & Navigation Icons
63
function ArrowBothIcon(props: OcticonProps): JSX.Element
64
function ArrowDownIcon(props: OcticonProps): JSX.Element
65
function ArrowDownLeftIcon(props: OcticonProps): JSX.Element
66
function ArrowDownRightIcon(props: OcticonProps): JSX.Element
67
function ArrowLeftIcon(props: OcticonProps): JSX.Element
68
function ArrowRightIcon(props: OcticonProps): JSX.Element
69
function ArrowSwitchIcon(props: OcticonProps): JSX.Element
70
function ArrowUpIcon(props: OcticonProps): JSX.Element
71
function ArrowUpLeftIcon(props: OcticonProps): JSX.Element
72
function ArrowUpRightIcon(props: OcticonProps): JSX.Element
73
function ChevronDownIcon(props: OcticonProps): JSX.Element
74
function ChevronLeftIcon(props: OcticonProps): JSX.Element
75
function ChevronRightIcon(props: OcticonProps): JSX.Element
76
function ChevronUpIcon(props: OcticonProps): JSX.Element
77

78
// Science & Lab Icons
79
function BeakerIcon(props: OcticonProps): JSX.Element
80

81
// Notification Icons
82
function BellFillIcon(props: OcticonProps): JSX.Element
83
function BellIcon(props: OcticonProps): JSX.Element
84
function BellSlashIcon(props: OcticonProps): JSX.Element
85

86
// Block & Restriction Icons
87
function BlockedIcon(props: OcticonProps): JSX.Element
88

89
// Text Formatting Icons
90
function BoldIcon(props: OcticonProps): JSX.Element
91
function ItalicIcon(props: OcticonProps): JSX.Element
92
function StrikethroughIcon(props: OcticonProps): JSX.Element
93

94
// Book & Documentation Icons
95
function BookIcon(props: OcticonProps): JSX.Element
96
function BookmarkFillIcon(props: OcticonProps): JSX.Element
97
function BookmarkFilledIcon(props: OcticonProps): JSX.Element
98
function BookmarkIcon(props: OcticonProps): JSX.Element
99
function BookmarkSlashFillIcon(props: OcticonProps): JSX.Element
100
function BookmarkSlashIcon(props: OcticonProps): JSX.Element
101

102
// Work & Business Icons
103
function BriefcaseIcon(props: OcticonProps): JSX.Element
104
function BroadcastIcon(props: OcticonProps): JSX.Element
105
function BrowserIcon(props: OcticonProps): JSX.Element
106

107
// Bug & Development Icons
108
function BugIcon(props: OcticonProps): JSX.Element
109

110
// Cache & Storage Icons
111
function CacheIcon(props: OcticonProps): JSX.Element
112

113
// Calendar & Time Icons
114
function CalendarIcon(props: OcticonProps): JSX.Element
115
function ClockFillIcon(props: OcticonProps): JSX.Element
116
function ClockIcon(props: OcticonProps): JSX.Element
117

118
// Checkbox & Selection Icons
119
function CheckboxIcon(props: OcticonProps): JSX.Element
120
function ChecklistIcon(props: OcticonProps): JSX.Element
121

122
// Shape Icons
123
function CircleIcon(props: OcticonProps): JSX.Element
124
function CircleSlashIcon(props: OcticonProps): JSX.Element
125

126
// Cloud & Network Icons  
127
function CloudIcon(props: OcticonProps): JSX.Element
128
function CloudOfflineIcon(props: OcticonProps): JSX.Element
129

130
// Code & Development Icons
131
function CodeIcon(props: OcticonProps): JSX.Element
132
function CodeOfConductIcon(props: OcticonProps): JSX.Element
133
function CodeReviewIcon(props: OcticonProps): JSX.Element
134
function CodeSquareIcon(props: OcticonProps): JSX.Element
135
function CodescanCheckmarkIcon(props: OcticonProps): JSX.Element
136
function CodescanIcon(props: OcticonProps): JSX.Element
137
function CodespacesIcon(props: OcticonProps): JSX.Element
138

139
// Layout Icons
140
function ColumnsIcon(props: OcticonProps): JSX.Element
141
function RowsIcon(props: OcticonProps): JSX.Element
142

143
// Command & Interface Icons
144
function CommandPaletteIcon(props: OcticonProps): JSX.Element
145

146
// Communication Icons
147
function CommentDiscussionIcon(props: OcticonProps): JSX.Element
148
function CommentIcon(props: OcticonProps): JSX.Element
149

150
// Container & Deployment Icons
151
function ContainerIcon(props: OcticonProps): JSX.Element
152

153
// Copilot & AI Icons
154
function CopilotErrorIcon(props: OcticonProps): JSX.Element
155
function CopilotIcon(props: OcticonProps): JSX.Element
156
function CopilotWarningIcon(props: OcticonProps): JSX.Element
157

158
// Action Icons
159
function CopyIcon(props: OcticonProps): JSX.Element
160
function PasteIcon(props: OcticonProps): JSX.Element
161

162
// Hardware Icons
163
function CpuIcon(props: OcticonProps): JSX.Element
164

165
// Payment Icons
166
function CreditCardIcon(props: OcticonProps): JSX.Element
167

168
// Reference Icons
169
function CrossReferenceIcon(props: OcticonProps): JSX.Element
170

171
// Separator Icons
172
function DashIcon(props: OcticonProps): JSX.Element
173

174
// Database Icons
175
function DatabaseIcon(props: OcticonProps): JSX.Element
176

177
// Bot & Automation Icons
178
function DependabotIcon(props: OcticonProps): JSX.Element
179

180
// Download Icons
181
function DesktopDownloadIcon(props: OcticonProps): JSX.Element
182
function DownloadIcon(props: OcticonProps): JSX.Element
183

184
// Device Icons
185
function DeviceCameraIcon(props: OcticonProps): JSX.Element
186
function DeviceCameraVideoIcon(props: OcticonProps): JSX.Element
187
function DeviceDesktopIcon(props: OcticonProps): JSX.Element
188
function DeviceMobileIcon(props: OcticonProps): JSX.Element
189
function DevicesIcon(props: OcticonProps): JSX.Element
190

191
// Special Shape Icons
192
function DiamondIcon(props: OcticonProps): JSX.Element
193

194
// Diff & Version Control Icons
195
function DiffAddedIcon(props: OcticonProps): JSX.Element
196
function DiffIcon(props: OcticonProps): JSX.Element
197
function DiffIgnoredIcon(props: OcticonProps): JSX.Element
198
function DiffModifiedIcon(props: OcticonProps): JSX.Element
199
function DiffRemovedIcon(props: OcticonProps): JSX.Element
200
function DiffRenamedIcon(props: OcticonProps): JSX.Element
201

202
// Discussion Icons
203
function DiscussionClosedIcon(props: OcticonProps): JSX.Element
204
function DiscussionDuplicateIcon(props: OcticonProps): JSX.Element
205
function DiscussionOutdatedIcon(props: OcticonProps): JSX.Element
206

207
// Dot & Point Icons
208
function DotFillIcon(props: OcticonProps): JSX.Element
209
function DotIcon(props: OcticonProps): JSX.Element
210

211
// Duplicate Icons
212
function DuplicateIcon(props: OcticonProps): JSX.Element
213

214
// Menu Icons
215
function EllipsisIcon(props: OcticonProps): JSX.Element
216
function KebabHorizontalIcon(props: OcticonProps): JSX.Element
217
function ThreeBarsIcon(props: OcticonProps): JSX.Element
218

219
// Visibility Icons
220
function EyeClosedIcon(props: OcticonProps): JSX.Element
221
function EyeIcon(props: OcticonProps): JSX.Element
222

223
// Feed & Activity Icons
224
function FeedDiscussionIcon(props: OcticonProps): JSX.Element
225
function FeedForkedIcon(props: OcticonProps): JSX.Element
226
function FeedHeartIcon(props: OcticonProps): JSX.Element
227
function FeedIssueClosedIcon(props: OcticonProps): JSX.Element
228
function FeedIssueDraftIcon(props: OcticonProps): JSX.Element
229
function FeedIssueOpenIcon(props: OcticonProps): JSX.Element
230
function FeedIssueReopenIcon(props: OcticonProps): JSX.Element
231
function FeedMergedIcon(props: OcticonProps): JSX.Element
232
function FeedPersonIcon(props: OcticonProps): JSX.Element
233
function FeedPlusIcon(props: OcticonProps): JSX.Element
234
function FeedPublicIcon(props: OcticonProps): JSX.Element
235
function FeedPullRequestClosedIcon(props: OcticonProps): JSX.Element
236
function FeedPullRequestDraftIcon(props: OcticonProps): JSX.Element
237
function FeedPullRequestOpenIcon(props: OcticonProps): JSX.Element
238
function FeedRepoIcon(props: OcticonProps): JSX.Element
239
function FeedRocketIcon(props: OcticonProps): JSX.Element
240
function FeedStarIcon(props: OcticonProps): JSX.Element
241
function FeedTagIcon(props: OcticonProps): JSX.Element
242
function FeedTrophyIcon(props: OcticonProps): JSX.Element
243

244
// File System Icons
245
function FileAddedIcon(props: OcticonProps): JSX.Element
246
function FileBadgeIcon(props: OcticonProps): JSX.Element
247
function FileBinaryIcon(props: OcticonProps): JSX.Element
248
function FileCodeIcon(props: OcticonProps): JSX.Element
249
function FileDiffIcon(props: OcticonProps): JSX.Element
250
function FileDirectoryFillIcon(props: OcticonProps): JSX.Element
251
function FileDirectoryIcon(props: OcticonProps): JSX.Element
252
function FileDirectoryOpenFillIcon(props: OcticonProps): JSX.Element
253
function FileDirectorySymlinkIcon(props: OcticonProps): JSX.Element
254
function FileIcon(props: OcticonProps): JSX.Element
255
function FileMediaIcon(props: OcticonProps): JSX.Element
256
function FileMovedIcon(props: OcticonProps): JSX.Element
257
function FileRemovedIcon(props: OcticonProps): JSX.Element
258
function FileSubmoduleIcon(props: OcticonProps): JSX.Element
259
function FileSymlinkFileIcon(props: OcticonProps): JSX.Element
260
function FileZipIcon(props: OcticonProps): JSX.Element
261

262
// Filter Icons
263
function FilterIcon(props: OcticonProps): JSX.Element
264
function FilterRemoveIcon(props: OcticonProps): JSX.Element
265

266
// Organization Icons
267
function FiscalHostIcon(props: OcticonProps): JSX.Element
268

269
// Fire & Activity Icons
270
function FlameIcon(props: OcticonProps): JSX.Element
271

272
// Folding Icons
273
function FoldDownIcon(props: OcticonProps): JSX.Element
274
function FoldIcon(props: OcticonProps): JSX.Element
275
function FoldUpIcon(props: OcticonProps): JSX.Element
276
function UnfoldIcon(props: OcticonProps): JSX.Element
277

278
// Settings Icons
279
function GearIcon(props: OcticonProps): JSX.Element
280

281
// Gift Icons
282
function GiftIcon(props: OcticonProps): JSX.Element
283

284
// Git & Version Control Icons
285
function GitBranchIcon(props: OcticonProps): JSX.Element
286
function GitCommitIcon(props: OcticonProps): JSX.Element
287
function GitCompareIcon(props: OcticonProps): JSX.Element
288
function GitMergeIcon(props: OcticonProps): JSX.Element
289
function GitMergeQueueIcon(props: OcticonProps): JSX.Element
290
function GitPullRequestClosedIcon(props: OcticonProps): JSX.Element
291
function GitPullRequestDraftIcon(props: OcticonProps): JSX.Element
292
function GitPullRequestIcon(props: OcticonProps): JSX.Element
293

294
// Global Icons
295
function GlobeIcon(props: OcticonProps): JSX.Element
296

297
// Goal Icons
298
function GoalIcon(props: OcticonProps): JSX.Element
299

300
// Interface Icons
301
function GrabberIcon(props: OcticonProps): JSX.Element
302

303
// Chart Icons
304
function GraphIcon(props: OcticonProps): JSX.Element
305

306
// Hash Icons
307
function HashIcon(props: OcticonProps): JSX.Element
308

309
// Text Formatting Icons
310
function HeadingIcon(props: OcticonProps): JSX.Element
311
function HorizontalRuleIcon(props: OcticonProps): JSX.Element
312

313
// Heart & Like Icons
314
function HeartFillIcon(props: OcticonProps): JSX.Element
315
function HeartIcon(props: OcticonProps): JSX.Element
316

317
// History Icons
318
function HistoryIcon(props: OcticonProps): JSX.Element
319

320
// Home Icons
321
function HomeFillIcon(props: OcticonProps): JSX.Element
322
function HomeIcon(props: OcticonProps): JSX.Element
323

324
// Time Icons
325
function HourglassIcon(props: OcticonProps): JSX.Element
326

327
// Bot Icons
328
function HubotIcon(props: OcticonProps): JSX.Element
329

330
// Identity Icons
331
function IdBadgeIcon(props: OcticonProps): JSX.Element
332

333
// Media Icons
334
function ImageIcon(props: OcticonProps): JSX.Element
335
function VideoIcon(props: OcticonProps): JSX.Element
336

337
// Inbox Icons
338
function InboxIcon(props: OcticonProps): JSX.Element
339

340
// Infinity Icons
341
function InfinityIcon(props: OcticonProps): JSX.Element
342

343
// Information Icons
344
function InfoIcon(props: OcticonProps): JSX.Element
345

346
// Issue Icons
347
function IssueClosedIcon(props: OcticonProps): JSX.Element
348
function IssueDraftIcon(props: OcticonProps): JSX.Element
349
function IssueOpenedIcon(props: OcticonProps): JSX.Element
350
function IssueReopenedIcon(props: OcticonProps): JSX.Element
351
function IssueTrackedByIcon(props: OcticonProps): JSX.Element
352
function IssueTracksIcon(props: OcticonProps): JSX.Element
353

354
// Iteration Icons
355
function IterationsIcon(props: OcticonProps): JSX.Element
356

357
// Key Icons
358
function KeyAsteriskIcon(props: OcticonProps): JSX.Element
359
function KeyIcon(props: OcticonProps): JSX.Element
360

361
// Legal Icons
362
function LawIcon(props: OcticonProps): JSX.Element
363

364
// Ideas Icons
365
function LightBulbIcon(props: OcticonProps): JSX.Element
366

367
// Link Icons
368
function LinkExternalIcon(props: OcticonProps): JSX.Element
369
function LinkIcon(props: OcticonProps): JSX.Element
370
function UnlinkIcon(props: OcticonProps): JSX.Element
371

372
// List Icons
373
function ListOrderedIcon(props: OcticonProps): JSX.Element
374
function ListUnorderedIcon(props: OcticonProps): JSX.Element
375

376
// Location Icons
377
function LocationIcon(props: OcticonProps): JSX.Element
378

379
// Security Icons
380
function LockIcon(props: OcticonProps): JSX.Element
381
function UnlockIcon(props: OcticonProps): JSX.Element
382

383
// Log Icons
384
function LogIcon(props: OcticonProps): JSX.Element
385

386
// GitHub Logo Icons
387
function LogoGistIcon(props: OcticonProps): JSX.Element
388
function LogoGithubIcon(props: OcticonProps): JSX.Element
389
function MarkGithubIcon(props: OcticonProps): JSX.Element
390

391
// Loop Icons
392
function LoopIcon(props: OcticonProps): JSX.Element
393

394
// Mail Icons
395
function MailIcon(props: OcticonProps): JSX.Element
396

397
// Documentation Icons
398
function MarkdownIcon(props: OcticonProps): JSX.Element
399

400
// Window Controls
401
function MaximizeIcon(props: OcticonProps): JSX.Element
402
function MinimizeIcon(props: OcticonProps): JSX.Element
403

404
// Announcement Icons
405
function MegaphoneIcon(props: OcticonProps): JSX.Element
406

407
// Mention Icons
408
function MentionIcon(props: OcticonProps): JSX.Element
409

410
// Measurement Icons
411
function MeterIcon(props: OcticonProps): JSX.Element
412

413
// Project Management Icons
414
function MilestoneIcon(props: OcticonProps): JSX.Element
415

416
// Mirror Icons
417
function MirrorIcon(props: OcticonProps): JSX.Element
418

419
// Theme Icons
420
function MoonIcon(props: OcticonProps): JSX.Element
421
function SunIcon(props: OcticonProps): JSX.Element
422

423
// Education Icons
424
function MortarBoardIcon(props: OcticonProps): JSX.Element
425

426
// Movement Icons
427
function MoveToBottomIcon(props: OcticonProps): JSX.Element
428
function MoveToEndIcon(props: OcticonProps): JSX.Element
429
function MoveToStartIcon(props: OcticonProps): JSX.Element
430
function MoveToTopIcon(props: OcticonProps): JSX.Element
431

432
// Selection Icons
433
function MultiSelectIcon(props: OcticonProps): JSX.Element
434
function SingleSelectIcon(props: OcticonProps): JSX.Element
435

436
// Audio Icons
437
function MuteIcon(props: OcticonProps): JSX.Element
438
function UnmuteIcon(props: OcticonProps): JSX.Element
439

440
// Restriction Icons
441
function NoEntryFillIcon(props: OcticonProps): JSX.Element
442
function NoEntryIcon(props: OcticonProps): JSX.Element
443

444
// Star Icons
445
function NorthStarIcon(props: OcticonProps): JSX.Element
446

447
// Note Icons
448
function NoteIcon(props: OcticonProps): JSX.Element
449

450
// Number Icons
451
function NumberIcon(props: OcticonProps): JSX.Element
452

453
// Organization Icons
454
function OrganizationIcon(props: OcticonProps): JSX.Element
455

456
// Package Icons
457
function PackageDependenciesIcon(props: OcticonProps): JSX.Element
458
function PackageDependentsIcon(props: OcticonProps): JSX.Element
459
function PackageIcon(props: OcticonProps): JSX.Element
460

461
// Design Icons
462
function PaintbrushIcon(props: OcticonProps): JSX.Element
463

464
// Send Icons
465
function PaperAirplaneIcon(props: OcticonProps): JSX.Element
466

467
// Attachment Icons
468
function PaperclipIcon(props: OcticonProps): JSX.Element
469

470
// Authentication Icons
471
function PasskeyFillIcon(props: OcticonProps): JSX.Element
472

473
// Media Control Icons
474
function PauseIcon(props: OcticonProps): JSX.Element
475
function PlayIcon(props: OcticonProps): JSX.Element
476
function StopIcon(props: OcticonProps): JSX.Element
477

478
// Edit Icons
479
function PencilIcon(props: OcticonProps): JSX.Element
480

481
// People Icons
482
function PeopleIcon(props: OcticonProps): JSX.Element
483
function PersonAddIcon(props: OcticonProps): JSX.Element
484
function PersonFillIcon(props: OcticonProps): JSX.Element
485
function PersonIcon(props: OcticonProps): JSX.Element
486

487
// Pin Icons
488
function PinIcon(props: OcticonProps): JSX.Element
489
function PinSlashIcon(props: OcticonProps): JSX.Element
490

491
// Pivot Icons
492
function PivotColumnIcon(props: OcticonProps): JSX.Element
493

494
// Connection Icons
495
function PlugIcon(props: OcticonProps): JSX.Element
496

497
// Add Icons
498
function PlusCircleIcon(props: OcticonProps): JSX.Element
499
function PlusIcon(props: OcticonProps): JSX.Element
500

501
// Project Icons
502
function ProjectIcon(props: OcticonProps): JSX.Element
503
function ProjectRoadmapIcon(props: OcticonProps): JSX.Element
504
function ProjectSymlinkIcon(props: OcticonProps): JSX.Element
505
function ProjectTemplateIcon(props: OcticonProps): JSX.Element
506

507
// Activity Icons
508
function PulseIcon(props: OcticonProps): JSX.Element
509

510
// Question Icons
511
function QuestionIcon(props: OcticonProps): JSX.Element
512

513
// Quote Icons
514
function QuoteIcon(props: OcticonProps): JSX.Element
515

516
// Read Icons
517
function ReadIcon(props: OcticonProps): JSX.Element
518
function UnreadIcon(props: OcticonProps): JSX.Element
519

520
// Undo/Redo Icons
521
function RedoIcon(props: OcticonProps): JSX.Element
522
function UndoIcon(props: OcticonProps): JSX.Element
523

524
// Path Icons
525
function RelFilePathIcon(props: OcticonProps): JSX.Element
526

527
// Reply Icons
528
function ReplyIcon(props: OcticonProps): JSX.Element
529

530
// Repository Icons
531
function RepoCloneIcon(props: OcticonProps): JSX.Element
532
function RepoDeleteIcon(props: OcticonProps): JSX.Element
533
function RepoDeletedIcon(props: OcticonProps): JSX.Element
534
function RepoForkedIcon(props: OcticonProps): JSX.Element
535
function RepoIcon(props: OcticonProps): JSX.Element
536
function RepoLockedIcon(props: OcticonProps): JSX.Element
537
function RepoPullIcon(props: OcticonProps): JSX.Element
538
function RepoPushIcon(props: OcticonProps): JSX.Element
539
function RepoTemplateIcon(props: OcticonProps): JSX.Element
540

541
// Report Icons
542
function ReportIcon(props: OcticonProps): JSX.Element
543

544
// Rocket Icons
545
function RocketIcon(props: OcticonProps): JSX.Element
546

547
// RSS Icons
548
function RssIcon(props: OcticonProps): JSX.Element
549

550
// Language Icons
551
function RubyIcon(props: OcticonProps): JSX.Element
552

553
// Screen Icons
554
function ScreenFullIcon(props: OcticonProps): JSX.Element
555
function ScreenNormalIcon(props: OcticonProps): JSX.Element
556

557
// Search Icons
558
function SearchIcon(props: OcticonProps): JSX.Element
559

560
// Server Icons
561
function ServerIcon(props: OcticonProps): JSX.Element
562

563
// Share Icons
564
function ShareAndroidIcon(props: OcticonProps): JSX.Element
565
function ShareIcon(props: OcticonProps): JSX.Element
566

567
// Shield & Security Icons
568
function ShieldCheckIcon(props: OcticonProps): JSX.Element
569
function ShieldIcon(props: OcticonProps): JSX.Element
570
function ShieldLockIcon(props: OcticonProps): JSX.Element
571
function ShieldSlashIcon(props: OcticonProps): JSX.Element
572
function ShieldXIcon(props: OcticonProps): JSX.Element
573

574
// Sidebar Icons
575
function SidebarCollapseIcon(props: OcticonProps): JSX.Element
576
function SidebarExpandIcon(props: OcticonProps): JSX.Element
577

578
// Authentication Icons
579
function SignInIcon(props: OcticonProps): JSX.Element
580
function SignOutIcon(props: OcticonProps): JSX.Element
581

582
// Skip Icons
583
function SkipFillIcon(props: OcticonProps): JSX.Element
584
function SkipIcon(props: OcticonProps): JSX.Element
585

586
// Control Icons
587
function SlidersIcon(props: OcticonProps): JSX.Element
588

589
// Emotion Icons
590
function SmileyIcon(props: OcticonProps): JSX.Element
591

592
// Sort Icons
593
function SortAscIcon(props: OcticonProps): JSX.Element
594
function SortDescIcon(props: OcticonProps): JSX.Element
595

596
// Space Icons
597
function SpaceIcon(props: OcticonProps): JSX.Element
598

599
// Sparkle Icons
600
function SparkleFillIcon(props: OcticonProps): JSX.Element
601
function SparkleIcon(props: OcticonProps): JSX.Element
602
function SparklesFillIcon(props: OcticonProps): JSX.Element
603

604
// Sponsor Icons
605
function SponsorTiersIcon(props: OcticonProps): JSX.Element
606

607
// Shape Icons
608
function SquareCircleIcon(props: OcticonProps): JSX.Element
609
function SquareFillIcon(props: OcticonProps): JSX.Element
610
function SquareIcon(props: OcticonProps): JSX.Element
611

612
// Mascot Icons
613
function SquirrelIcon(props: OcticonProps): JSX.Element
614

615
// Stack Icons
616
function StackIcon(props: OcticonProps): JSX.Element
617

618
// Star Icons
619
function StarFillIcon(props: OcticonProps): JSX.Element
620
function StarIcon(props: OcticonProps): JSX.Element
621

622
// Timer Icons
623
function StopwatchIcon(props: OcticonProps): JSX.Element
624

625
// Sync Icons
626
function SyncIcon(props: OcticonProps): JSX.Element
627

628
// Tab Icons
629
function TabExternalIcon(props: OcticonProps): JSX.Element
630
function TabIcon(props: OcticonProps): JSX.Element
631

632
// Table Icons
633
function TableIcon(props: OcticonProps): JSX.Element
634

635
// Tag Icons
636
function TagIcon(props: OcticonProps): JSX.Element
637

638
// Task Icons
639
function TasklistIcon(props: OcticonProps): JSX.Element
640

641
// Telescope Icons
642
function TelescopeFillIcon(props: OcticonProps): JSX.Element
643
function TelescopeIcon(props: OcticonProps): JSX.Element
644

645
// Terminal Icons
646
function TerminalIcon(props: OcticonProps): JSX.Element
647

648
// Feedback Icons
649
function ThumbsdownIcon(props: OcticonProps): JSX.Element
650
function ThumbsupIcon(props: OcticonProps): JSX.Element
651

652
// Tools Icons
653
function ToolsIcon(props: OcticonProps): JSX.Element
654

655
// Tracking Icons
656
function TrackedByClosedCompletedIcon(props: OcticonProps): JSX.Element
657
function TrackedByClosedNotPlannedIcon(props: OcticonProps): JSX.Element
658

659
// Delete Icons
660
function TrashIcon(props: OcticonProps): JSX.Element
661

662
// Triangle Icons
663
function TriangleDownIcon(props: OcticonProps): JSX.Element
664
function TriangleLeftIcon(props: OcticonProps): JSX.Element
665
function TriangleRightIcon(props: OcticonProps): JSX.Element
666
function TriangleUpIcon(props: OcticonProps): JSX.Element
667

668
// Achievement Icons
669
function TrophyIcon(props: OcticonProps): JSX.Element
670

671
// Typography Icons
672
function TypographyIcon(props: OcticonProps): JSX.Element
673

674
// Verification Icons
675
function UnverifiedIcon(props: OcticonProps): JSX.Element
676
function VerifiedIcon(props: OcticonProps): JSX.Element
677

678
// Upload Icons
679
function UploadIcon(props: OcticonProps): JSX.Element
680

681
// Version Icons
682
function VersionsIcon(props: OcticonProps): JSX.Element
683

684
// Webhook Icons
685
function WebhookIcon(props: OcticonProps): JSX.Element
686

687
// Workflow Icons
688
function WorkflowIcon(props: OcticonProps): JSX.Element
689

690
// Close Icons
691
function XCircleFillIcon(props: OcticonProps): JSX.Element
692
function XCircleIcon(props: OcticonProps): JSX.Element
693
function XIcon(props: OcticonProps): JSX.Element
694

695
// Lightning Icons
696
function ZapIcon(props: OcticonProps): JSX.Element
697

698
// Zoom Icons
699
function ZoomInIcon(props: OcticonProps): JSX.Element
700
function ZoomOutIcon(props: OcticonProps): JSX.Element
701
```
702

703
## Usage Examples
704

705
### Basic Icon Usage
706
```jsx
707
import { AlertIcon, CheckIcon } from '@primer/octicons-react'
708

709
function StatusIndicator({ isError }) {
710
  return isError ? <AlertIcon /> : <CheckIcon />
711
}
712
```
713

714
### Multiple Icons with Different Sizes
715
```jsx
716
import { 
717
  BeakerIcon, 
718
  RocketIcon, 
719
  GearIcon 
720
} from '@primer/octicons-react'
721

722
function Toolbar() {
723
  return (
724
    <div className="toolbar">
725
      <BeakerIcon size="small" />
726
      <RocketIcon size="medium" />  
727
      <GearIcon size="large" />
728
    </div>
729
  )
730
}
731
```
732

733
### Tree-Shaking Benefits
734
When importing individual icons, bundlers like Webpack, Rollup, and Parcel will only include the imported icons in your bundle, dramatically reducing bundle size compared to importing all icons.
735

736
```jsx
737
// ✅ Good - Only AlertIcon will be bundled
738
import { AlertIcon } from '@primer/octicons-react'
739

740
// ❌ Bad - All 339 icons will be bundled
741
import * as Octicons from '@primer/octicons-react'
742
const { AlertIcon } = Octicons
743
```