React components for GitHub's Octicons icon library providing scalable SVG icons with tree-shaking support and TypeScript definitions.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
@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.
interface OcticonProps extends React.ComponentPropsWithoutRef<'svg'> {
/** Accessible label for screen readers */
'aria-label'?: string
/** References element that labels this icon */
'aria-labelledby'?: string
/** Tab order for keyboard navigation */
tabIndex?: number
/** Child elements (typically not used) */
children?: React.ReactElement<any>
/** CSS class names */
className?: string
/** Title text or element for tooltips */
title?: string | React.ReactElement<any>
/** Unique identifier */
id?: string
/** Fill color (defaults to 'currentColor') */
fill?: string
/** Icon data (for generic icon component) */
icon?: Icon | React.ReactNode
/** Size as number (pixels) or predefined size */
size?: number | Size
/** Vertical alignment relative to text */
verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
}
type Size = 'small' | 'medium' | 'large'
type Icon = React.FC<OcticonProps>All icons follow the pattern {IconName}Icon and accept OcticonProps:
// Accessibility Icons
function AccessibilityIcon(props: OcticonProps): JSX.Element
function AccessibilityInsetIcon(props: OcticonProps): JSX.Element
// Agent & AI Icons
function AgentIcon(props: OcticonProps): JSX.Element
function AiModelIcon(props: OcticonProps): JSX.Element
// Alert & Status Icons
function AlertFillIcon(props: OcticonProps): JSX.Element
function AlertIcon(props: OcticonProps): JSX.Element
function CheckCircleFillIcon(props: OcticonProps): JSX.Element
function CheckCircleIcon(props: OcticonProps): JSX.Element
function CheckIcon(props: OcticonProps): JSX.Element
// Application Icons
function AppsIcon(props: OcticonProps): JSX.Element
function ArchiveIcon(props: OcticonProps): JSX.Element
// Arrow & Navigation Icons
function ArrowBothIcon(props: OcticonProps): JSX.Element
function ArrowDownIcon(props: OcticonProps): JSX.Element
function ArrowDownLeftIcon(props: OcticonProps): JSX.Element
function ArrowDownRightIcon(props: OcticonProps): JSX.Element
function ArrowLeftIcon(props: OcticonProps): JSX.Element
function ArrowRightIcon(props: OcticonProps): JSX.Element
function ArrowSwitchIcon(props: OcticonProps): JSX.Element
function ArrowUpIcon(props: OcticonProps): JSX.Element
function ArrowUpLeftIcon(props: OcticonProps): JSX.Element
function ArrowUpRightIcon(props: OcticonProps): JSX.Element
function ChevronDownIcon(props: OcticonProps): JSX.Element
function ChevronLeftIcon(props: OcticonProps): JSX.Element
function ChevronRightIcon(props: OcticonProps): JSX.Element
function ChevronUpIcon(props: OcticonProps): JSX.Element
// Science & Lab Icons
function BeakerIcon(props: OcticonProps): JSX.Element
// Notification Icons
function BellFillIcon(props: OcticonProps): JSX.Element
function BellIcon(props: OcticonProps): JSX.Element
function BellSlashIcon(props: OcticonProps): JSX.Element
// Block & Restriction Icons
function BlockedIcon(props: OcticonProps): JSX.Element
// Text Formatting Icons
function BoldIcon(props: OcticonProps): JSX.Element
function ItalicIcon(props: OcticonProps): JSX.Element
function StrikethroughIcon(props: OcticonProps): JSX.Element
// Book & Documentation Icons
function BookIcon(props: OcticonProps): JSX.Element
function BookmarkFillIcon(props: OcticonProps): JSX.Element
function BookmarkFilledIcon(props: OcticonProps): JSX.Element
function BookmarkIcon(props: OcticonProps): JSX.Element
function BookmarkSlashFillIcon(props: OcticonProps): JSX.Element
function BookmarkSlashIcon(props: OcticonProps): JSX.Element
// Work & Business Icons
function BriefcaseIcon(props: OcticonProps): JSX.Element
function BroadcastIcon(props: OcticonProps): JSX.Element
function BrowserIcon(props: OcticonProps): JSX.Element
// Bug & Development Icons
function BugIcon(props: OcticonProps): JSX.Element
// Cache & Storage Icons
function CacheIcon(props: OcticonProps): JSX.Element
// Calendar & Time Icons
function CalendarIcon(props: OcticonProps): JSX.Element
function ClockFillIcon(props: OcticonProps): JSX.Element
function ClockIcon(props: OcticonProps): JSX.Element
// Checkbox & Selection Icons
function CheckboxIcon(props: OcticonProps): JSX.Element
function ChecklistIcon(props: OcticonProps): JSX.Element
// Shape Icons
function CircleIcon(props: OcticonProps): JSX.Element
function CircleSlashIcon(props: OcticonProps): JSX.Element
// Cloud & Network Icons
function CloudIcon(props: OcticonProps): JSX.Element
function CloudOfflineIcon(props: OcticonProps): JSX.Element
// Code & Development Icons
function CodeIcon(props: OcticonProps): JSX.Element
function CodeOfConductIcon(props: OcticonProps): JSX.Element
function CodeReviewIcon(props: OcticonProps): JSX.Element
function CodeSquareIcon(props: OcticonProps): JSX.Element
function CodescanCheckmarkIcon(props: OcticonProps): JSX.Element
function CodescanIcon(props: OcticonProps): JSX.Element
function CodespacesIcon(props: OcticonProps): JSX.Element
// Layout Icons
function ColumnsIcon(props: OcticonProps): JSX.Element
function RowsIcon(props: OcticonProps): JSX.Element
// Command & Interface Icons
function CommandPaletteIcon(props: OcticonProps): JSX.Element
// Communication Icons
function CommentDiscussionIcon(props: OcticonProps): JSX.Element
function CommentIcon(props: OcticonProps): JSX.Element
// Container & Deployment Icons
function ContainerIcon(props: OcticonProps): JSX.Element
// Copilot & AI Icons
function CopilotErrorIcon(props: OcticonProps): JSX.Element
function CopilotIcon(props: OcticonProps): JSX.Element
function CopilotWarningIcon(props: OcticonProps): JSX.Element
// Action Icons
function CopyIcon(props: OcticonProps): JSX.Element
function PasteIcon(props: OcticonProps): JSX.Element
// Hardware Icons
function CpuIcon(props: OcticonProps): JSX.Element
// Payment Icons
function CreditCardIcon(props: OcticonProps): JSX.Element
// Reference Icons
function CrossReferenceIcon(props: OcticonProps): JSX.Element
// Separator Icons
function DashIcon(props: OcticonProps): JSX.Element
// Database Icons
function DatabaseIcon(props: OcticonProps): JSX.Element
// Bot & Automation Icons
function DependabotIcon(props: OcticonProps): JSX.Element
// Download Icons
function DesktopDownloadIcon(props: OcticonProps): JSX.Element
function DownloadIcon(props: OcticonProps): JSX.Element
// Device Icons
function DeviceCameraIcon(props: OcticonProps): JSX.Element
function DeviceCameraVideoIcon(props: OcticonProps): JSX.Element
function DeviceDesktopIcon(props: OcticonProps): JSX.Element
function DeviceMobileIcon(props: OcticonProps): JSX.Element
function DevicesIcon(props: OcticonProps): JSX.Element
// Special Shape Icons
function DiamondIcon(props: OcticonProps): JSX.Element
// Diff & Version Control Icons
function DiffAddedIcon(props: OcticonProps): JSX.Element
function DiffIcon(props: OcticonProps): JSX.Element
function DiffIgnoredIcon(props: OcticonProps): JSX.Element
function DiffModifiedIcon(props: OcticonProps): JSX.Element
function DiffRemovedIcon(props: OcticonProps): JSX.Element
function DiffRenamedIcon(props: OcticonProps): JSX.Element
// Discussion Icons
function DiscussionClosedIcon(props: OcticonProps): JSX.Element
function DiscussionDuplicateIcon(props: OcticonProps): JSX.Element
function DiscussionOutdatedIcon(props: OcticonProps): JSX.Element
// Dot & Point Icons
function DotFillIcon(props: OcticonProps): JSX.Element
function DotIcon(props: OcticonProps): JSX.Element
// Duplicate Icons
function DuplicateIcon(props: OcticonProps): JSX.Element
// Menu Icons
function EllipsisIcon(props: OcticonProps): JSX.Element
function KebabHorizontalIcon(props: OcticonProps): JSX.Element
function ThreeBarsIcon(props: OcticonProps): JSX.Element
// Visibility Icons
function EyeClosedIcon(props: OcticonProps): JSX.Element
function EyeIcon(props: OcticonProps): JSX.Element
// Feed & Activity Icons
function FeedDiscussionIcon(props: OcticonProps): JSX.Element
function FeedForkedIcon(props: OcticonProps): JSX.Element
function FeedHeartIcon(props: OcticonProps): JSX.Element
function FeedIssueClosedIcon(props: OcticonProps): JSX.Element
function FeedIssueDraftIcon(props: OcticonProps): JSX.Element
function FeedIssueOpenIcon(props: OcticonProps): JSX.Element
function FeedIssueReopenIcon(props: OcticonProps): JSX.Element
function FeedMergedIcon(props: OcticonProps): JSX.Element
function FeedPersonIcon(props: OcticonProps): JSX.Element
function FeedPlusIcon(props: OcticonProps): JSX.Element
function FeedPublicIcon(props: OcticonProps): JSX.Element
function FeedPullRequestClosedIcon(props: OcticonProps): JSX.Element
function FeedPullRequestDraftIcon(props: OcticonProps): JSX.Element
function FeedPullRequestOpenIcon(props: OcticonProps): JSX.Element
function FeedRepoIcon(props: OcticonProps): JSX.Element
function FeedRocketIcon(props: OcticonProps): JSX.Element
function FeedStarIcon(props: OcticonProps): JSX.Element
function FeedTagIcon(props: OcticonProps): JSX.Element
function FeedTrophyIcon(props: OcticonProps): JSX.Element
// File System Icons
function FileAddedIcon(props: OcticonProps): JSX.Element
function FileBadgeIcon(props: OcticonProps): JSX.Element
function FileBinaryIcon(props: OcticonProps): JSX.Element
function FileCodeIcon(props: OcticonProps): JSX.Element
function FileDiffIcon(props: OcticonProps): JSX.Element
function FileDirectoryFillIcon(props: OcticonProps): JSX.Element
function FileDirectoryIcon(props: OcticonProps): JSX.Element
function FileDirectoryOpenFillIcon(props: OcticonProps): JSX.Element
function FileDirectorySymlinkIcon(props: OcticonProps): JSX.Element
function FileIcon(props: OcticonProps): JSX.Element
function FileMediaIcon(props: OcticonProps): JSX.Element
function FileMovedIcon(props: OcticonProps): JSX.Element
function FileRemovedIcon(props: OcticonProps): JSX.Element
function FileSubmoduleIcon(props: OcticonProps): JSX.Element
function FileSymlinkFileIcon(props: OcticonProps): JSX.Element
function FileZipIcon(props: OcticonProps): JSX.Element
// Filter Icons
function FilterIcon(props: OcticonProps): JSX.Element
function FilterRemoveIcon(props: OcticonProps): JSX.Element
// Organization Icons
function FiscalHostIcon(props: OcticonProps): JSX.Element
// Fire & Activity Icons
function FlameIcon(props: OcticonProps): JSX.Element
// Folding Icons
function FoldDownIcon(props: OcticonProps): JSX.Element
function FoldIcon(props: OcticonProps): JSX.Element
function FoldUpIcon(props: OcticonProps): JSX.Element
function UnfoldIcon(props: OcticonProps): JSX.Element
// Settings Icons
function GearIcon(props: OcticonProps): JSX.Element
// Gift Icons
function GiftIcon(props: OcticonProps): JSX.Element
// Git & Version Control Icons
function GitBranchIcon(props: OcticonProps): JSX.Element
function GitCommitIcon(props: OcticonProps): JSX.Element
function GitCompareIcon(props: OcticonProps): JSX.Element
function GitMergeIcon(props: OcticonProps): JSX.Element
function GitMergeQueueIcon(props: OcticonProps): JSX.Element
function GitPullRequestClosedIcon(props: OcticonProps): JSX.Element
function GitPullRequestDraftIcon(props: OcticonProps): JSX.Element
function GitPullRequestIcon(props: OcticonProps): JSX.Element
// Global Icons
function GlobeIcon(props: OcticonProps): JSX.Element
// Goal Icons
function GoalIcon(props: OcticonProps): JSX.Element
// Interface Icons
function GrabberIcon(props: OcticonProps): JSX.Element
// Chart Icons
function GraphIcon(props: OcticonProps): JSX.Element
// Hash Icons
function HashIcon(props: OcticonProps): JSX.Element
// Text Formatting Icons
function HeadingIcon(props: OcticonProps): JSX.Element
function HorizontalRuleIcon(props: OcticonProps): JSX.Element
// Heart & Like Icons
function HeartFillIcon(props: OcticonProps): JSX.Element
function HeartIcon(props: OcticonProps): JSX.Element
// History Icons
function HistoryIcon(props: OcticonProps): JSX.Element
// Home Icons
function HomeFillIcon(props: OcticonProps): JSX.Element
function HomeIcon(props: OcticonProps): JSX.Element
// Time Icons
function HourglassIcon(props: OcticonProps): JSX.Element
// Bot Icons
function HubotIcon(props: OcticonProps): JSX.Element
// Identity Icons
function IdBadgeIcon(props: OcticonProps): JSX.Element
// Media Icons
function ImageIcon(props: OcticonProps): JSX.Element
function VideoIcon(props: OcticonProps): JSX.Element
// Inbox Icons
function InboxIcon(props: OcticonProps): JSX.Element
// Infinity Icons
function InfinityIcon(props: OcticonProps): JSX.Element
// Information Icons
function InfoIcon(props: OcticonProps): JSX.Element
// Issue Icons
function IssueClosedIcon(props: OcticonProps): JSX.Element
function IssueDraftIcon(props: OcticonProps): JSX.Element
function IssueOpenedIcon(props: OcticonProps): JSX.Element
function IssueReopenedIcon(props: OcticonProps): JSX.Element
function IssueTrackedByIcon(props: OcticonProps): JSX.Element
function IssueTracksIcon(props: OcticonProps): JSX.Element
// Iteration Icons
function IterationsIcon(props: OcticonProps): JSX.Element
// Key Icons
function KeyAsteriskIcon(props: OcticonProps): JSX.Element
function KeyIcon(props: OcticonProps): JSX.Element
// Legal Icons
function LawIcon(props: OcticonProps): JSX.Element
// Ideas Icons
function LightBulbIcon(props: OcticonProps): JSX.Element
// Link Icons
function LinkExternalIcon(props: OcticonProps): JSX.Element
function LinkIcon(props: OcticonProps): JSX.Element
function UnlinkIcon(props: OcticonProps): JSX.Element
// List Icons
function ListOrderedIcon(props: OcticonProps): JSX.Element
function ListUnorderedIcon(props: OcticonProps): JSX.Element
// Location Icons
function LocationIcon(props: OcticonProps): JSX.Element
// Security Icons
function LockIcon(props: OcticonProps): JSX.Element
function UnlockIcon(props: OcticonProps): JSX.Element
// Log Icons
function LogIcon(props: OcticonProps): JSX.Element
// GitHub Logo Icons
function LogoGistIcon(props: OcticonProps): JSX.Element
function LogoGithubIcon(props: OcticonProps): JSX.Element
function MarkGithubIcon(props: OcticonProps): JSX.Element
// Loop Icons
function LoopIcon(props: OcticonProps): JSX.Element
// Mail Icons
function MailIcon(props: OcticonProps): JSX.Element
// Documentation Icons
function MarkdownIcon(props: OcticonProps): JSX.Element
// Window Controls
function MaximizeIcon(props: OcticonProps): JSX.Element
function MinimizeIcon(props: OcticonProps): JSX.Element
// Announcement Icons
function MegaphoneIcon(props: OcticonProps): JSX.Element
// Mention Icons
function MentionIcon(props: OcticonProps): JSX.Element
// Measurement Icons
function MeterIcon(props: OcticonProps): JSX.Element
// Project Management Icons
function MilestoneIcon(props: OcticonProps): JSX.Element
// Mirror Icons
function MirrorIcon(props: OcticonProps): JSX.Element
// Theme Icons
function MoonIcon(props: OcticonProps): JSX.Element
function SunIcon(props: OcticonProps): JSX.Element
// Education Icons
function MortarBoardIcon(props: OcticonProps): JSX.Element
// Movement Icons
function MoveToBottomIcon(props: OcticonProps): JSX.Element
function MoveToEndIcon(props: OcticonProps): JSX.Element
function MoveToStartIcon(props: OcticonProps): JSX.Element
function MoveToTopIcon(props: OcticonProps): JSX.Element
// Selection Icons
function MultiSelectIcon(props: OcticonProps): JSX.Element
function SingleSelectIcon(props: OcticonProps): JSX.Element
// Audio Icons
function MuteIcon(props: OcticonProps): JSX.Element
function UnmuteIcon(props: OcticonProps): JSX.Element
// Restriction Icons
function NoEntryFillIcon(props: OcticonProps): JSX.Element
function NoEntryIcon(props: OcticonProps): JSX.Element
// Star Icons
function NorthStarIcon(props: OcticonProps): JSX.Element
// Note Icons
function NoteIcon(props: OcticonProps): JSX.Element
// Number Icons
function NumberIcon(props: OcticonProps): JSX.Element
// Organization Icons
function OrganizationIcon(props: OcticonProps): JSX.Element
// Package Icons
function PackageDependenciesIcon(props: OcticonProps): JSX.Element
function PackageDependentsIcon(props: OcticonProps): JSX.Element
function PackageIcon(props: OcticonProps): JSX.Element
// Design Icons
function PaintbrushIcon(props: OcticonProps): JSX.Element
// Send Icons
function PaperAirplaneIcon(props: OcticonProps): JSX.Element
// Attachment Icons
function PaperclipIcon(props: OcticonProps): JSX.Element
// Authentication Icons
function PasskeyFillIcon(props: OcticonProps): JSX.Element
// Media Control Icons
function PauseIcon(props: OcticonProps): JSX.Element
function PlayIcon(props: OcticonProps): JSX.Element
function StopIcon(props: OcticonProps): JSX.Element
// Edit Icons
function PencilIcon(props: OcticonProps): JSX.Element
// People Icons
function PeopleIcon(props: OcticonProps): JSX.Element
function PersonAddIcon(props: OcticonProps): JSX.Element
function PersonFillIcon(props: OcticonProps): JSX.Element
function PersonIcon(props: OcticonProps): JSX.Element
// Pin Icons
function PinIcon(props: OcticonProps): JSX.Element
function PinSlashIcon(props: OcticonProps): JSX.Element
// Pivot Icons
function PivotColumnIcon(props: OcticonProps): JSX.Element
// Connection Icons
function PlugIcon(props: OcticonProps): JSX.Element
// Add Icons
function PlusCircleIcon(props: OcticonProps): JSX.Element
function PlusIcon(props: OcticonProps): JSX.Element
// Project Icons
function ProjectIcon(props: OcticonProps): JSX.Element
function ProjectRoadmapIcon(props: OcticonProps): JSX.Element
function ProjectSymlinkIcon(props: OcticonProps): JSX.Element
function ProjectTemplateIcon(props: OcticonProps): JSX.Element
// Activity Icons
function PulseIcon(props: OcticonProps): JSX.Element
// Question Icons
function QuestionIcon(props: OcticonProps): JSX.Element
// Quote Icons
function QuoteIcon(props: OcticonProps): JSX.Element
// Read Icons
function ReadIcon(props: OcticonProps): JSX.Element
function UnreadIcon(props: OcticonProps): JSX.Element
// Undo/Redo Icons
function RedoIcon(props: OcticonProps): JSX.Element
function UndoIcon(props: OcticonProps): JSX.Element
// Path Icons
function RelFilePathIcon(props: OcticonProps): JSX.Element
// Reply Icons
function ReplyIcon(props: OcticonProps): JSX.Element
// Repository Icons
function RepoCloneIcon(props: OcticonProps): JSX.Element
function RepoDeleteIcon(props: OcticonProps): JSX.Element
function RepoDeletedIcon(props: OcticonProps): JSX.Element
function RepoForkedIcon(props: OcticonProps): JSX.Element
function RepoIcon(props: OcticonProps): JSX.Element
function RepoLockedIcon(props: OcticonProps): JSX.Element
function RepoPullIcon(props: OcticonProps): JSX.Element
function RepoPushIcon(props: OcticonProps): JSX.Element
function RepoTemplateIcon(props: OcticonProps): JSX.Element
// Report Icons
function ReportIcon(props: OcticonProps): JSX.Element
// Rocket Icons
function RocketIcon(props: OcticonProps): JSX.Element
// RSS Icons
function RssIcon(props: OcticonProps): JSX.Element
// Language Icons
function RubyIcon(props: OcticonProps): JSX.Element
// Screen Icons
function ScreenFullIcon(props: OcticonProps): JSX.Element
function ScreenNormalIcon(props: OcticonProps): JSX.Element
// Search Icons
function SearchIcon(props: OcticonProps): JSX.Element
// Server Icons
function ServerIcon(props: OcticonProps): JSX.Element
// Share Icons
function ShareAndroidIcon(props: OcticonProps): JSX.Element
function ShareIcon(props: OcticonProps): JSX.Element
// Shield & Security Icons
function ShieldCheckIcon(props: OcticonProps): JSX.Element
function ShieldIcon(props: OcticonProps): JSX.Element
function ShieldLockIcon(props: OcticonProps): JSX.Element
function ShieldSlashIcon(props: OcticonProps): JSX.Element
function ShieldXIcon(props: OcticonProps): JSX.Element
// Sidebar Icons
function SidebarCollapseIcon(props: OcticonProps): JSX.Element
function SidebarExpandIcon(props: OcticonProps): JSX.Element
// Authentication Icons
function SignInIcon(props: OcticonProps): JSX.Element
function SignOutIcon(props: OcticonProps): JSX.Element
// Skip Icons
function SkipFillIcon(props: OcticonProps): JSX.Element
function SkipIcon(props: OcticonProps): JSX.Element
// Control Icons
function SlidersIcon(props: OcticonProps): JSX.Element
// Emotion Icons
function SmileyIcon(props: OcticonProps): JSX.Element
// Sort Icons
function SortAscIcon(props: OcticonProps): JSX.Element
function SortDescIcon(props: OcticonProps): JSX.Element
// Space Icons
function SpaceIcon(props: OcticonProps): JSX.Element
// Sparkle Icons
function SparkleFillIcon(props: OcticonProps): JSX.Element
function SparkleIcon(props: OcticonProps): JSX.Element
function SparklesFillIcon(props: OcticonProps): JSX.Element
// Sponsor Icons
function SponsorTiersIcon(props: OcticonProps): JSX.Element
// Shape Icons
function SquareCircleIcon(props: OcticonProps): JSX.Element
function SquareFillIcon(props: OcticonProps): JSX.Element
function SquareIcon(props: OcticonProps): JSX.Element
// Mascot Icons
function SquirrelIcon(props: OcticonProps): JSX.Element
// Stack Icons
function StackIcon(props: OcticonProps): JSX.Element
// Star Icons
function StarFillIcon(props: OcticonProps): JSX.Element
function StarIcon(props: OcticonProps): JSX.Element
// Timer Icons
function StopwatchIcon(props: OcticonProps): JSX.Element
// Sync Icons
function SyncIcon(props: OcticonProps): JSX.Element
// Tab Icons
function TabExternalIcon(props: OcticonProps): JSX.Element
function TabIcon(props: OcticonProps): JSX.Element
// Table Icons
function TableIcon(props: OcticonProps): JSX.Element
// Tag Icons
function TagIcon(props: OcticonProps): JSX.Element
// Task Icons
function TasklistIcon(props: OcticonProps): JSX.Element
// Telescope Icons
function TelescopeFillIcon(props: OcticonProps): JSX.Element
function TelescopeIcon(props: OcticonProps): JSX.Element
// Terminal Icons
function TerminalIcon(props: OcticonProps): JSX.Element
// Feedback Icons
function ThumbsdownIcon(props: OcticonProps): JSX.Element
function ThumbsupIcon(props: OcticonProps): JSX.Element
// Tools Icons
function ToolsIcon(props: OcticonProps): JSX.Element
// Tracking Icons
function TrackedByClosedCompletedIcon(props: OcticonProps): JSX.Element
function TrackedByClosedNotPlannedIcon(props: OcticonProps): JSX.Element
// Delete Icons
function TrashIcon(props: OcticonProps): JSX.Element
// Triangle Icons
function TriangleDownIcon(props: OcticonProps): JSX.Element
function TriangleLeftIcon(props: OcticonProps): JSX.Element
function TriangleRightIcon(props: OcticonProps): JSX.Element
function TriangleUpIcon(props: OcticonProps): JSX.Element
// Achievement Icons
function TrophyIcon(props: OcticonProps): JSX.Element
// Typography Icons
function TypographyIcon(props: OcticonProps): JSX.Element
// Verification Icons
function UnverifiedIcon(props: OcticonProps): JSX.Element
function VerifiedIcon(props: OcticonProps): JSX.Element
// Upload Icons
function UploadIcon(props: OcticonProps): JSX.Element
// Version Icons
function VersionsIcon(props: OcticonProps): JSX.Element
// Webhook Icons
function WebhookIcon(props: OcticonProps): JSX.Element
// Workflow Icons
function WorkflowIcon(props: OcticonProps): JSX.Element
// Close Icons
function XCircleFillIcon(props: OcticonProps): JSX.Element
function XCircleIcon(props: OcticonProps): JSX.Element
function XIcon(props: OcticonProps): JSX.Element
// Lightning Icons
function ZapIcon(props: OcticonProps): JSX.Element
// Zoom Icons
function ZoomInIcon(props: OcticonProps): JSX.Element
function ZoomOutIcon(props: OcticonProps): JSX.Elementimport { AlertIcon, CheckIcon } from '@primer/octicons-react'
function StatusIndicator({ isError }) {
return isError ? <AlertIcon /> : <CheckIcon />
}import {
BeakerIcon,
RocketIcon,
GearIcon
} from '@primer/octicons-react'
function Toolbar() {
return (
<div className="toolbar">
<BeakerIcon size="small" />
<RocketIcon size="medium" />
<GearIcon size="large" />
</div>
)
}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.
// ✅ Good - Only AlertIcon will be bundled
import { AlertIcon } from '@primer/octicons-react'
// ❌ Bad - All 339 icons will be bundled
import * as Octicons from '@primer/octicons-react'
const { AlertIcon } = OcticonsInstall with Tessl CLI
npx tessl i tessl/npm-primer--octicons-react