CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-primer--octicons-react

React components for GitHub's Octicons icon library providing scalable SVG icons with tree-shaking support and TypeScript definitions.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

icon-components.mddocs/

Icon Components

Overview

@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.

Component Interface

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>

Complete Icon List

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.Element

Usage Examples

Basic Icon Usage

import { AlertIcon, CheckIcon } from '@primer/octicons-react'

function StatusIndicator({ isError }) {
  return isError ? <AlertIcon /> : <CheckIcon />
}

Multiple Icons with Different Sizes

import { 
  BeakerIcon, 
  RocketIcon, 
  GearIcon 
} from '@primer/octicons-react'

function Toolbar() {
  return (
    <div className="toolbar">
      <BeakerIcon size="small" />
      <RocketIcon size="medium" />  
      <GearIcon size="large" />
    </div>
  )
}

Tree-Shaking Benefits

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 } = Octicons

Install with Tessl CLI

npx tessl i tessl/npm-primer--octicons-react

docs

accessibility.md

customization.md

icon-components.md

index.md

styling.md

tile.json