or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

accessibility.mdcustomization.mdicon-components.mdindex.mdstyling.md
tile.json

tessl/npm-primer--octicons-react

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@primer/octicons-react@19.16.x

To install, run

npx @tessl/cli install tessl/npm-primer--octicons-react@19.16.0

index.mddocs/

@primer/octicons-react

Overview

@primer/octicons-react is a React component library providing GitHub's Octicons as individual React components. It offers 339 scalable SVG icons with full TypeScript support, tree-shaking optimization, and comprehensive accessibility features. Each icon is available as a self-contained React component that renders clean SVG markup.

Package Information

  • Name: @primer/octicons-react
  • Type: React component library
  • Language: JavaScript/TypeScript
  • Installation: npm install @primer/octicons-react

Core Imports

ESM (ES Modules):

// Named imports (recommended for tree-shaking)
import { BeakerIcon, ZapIcon, AlertIcon } from '@primer/octicons-react'

// Import all icons (not recommended - large bundle)
import * as Octicons from '@primer/octicons-react'

CommonJS:

// Named imports using destructuring
const { BeakerIcon, ZapIcon, AlertIcon } = require('@primer/octicons-react')

// Import all icons
const Octicons = require('@primer/octicons-react')

Basic Usage

import React from 'react'
import { BeakerIcon, ZapIcon } from '@primer/octicons-react'

export default function MyComponent() {
  return (
    <div>
      <BeakerIcon size="small" />
      <ZapIcon size="medium" fill="#ff0000" />
    </div>
  )
}

Core Types

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 (defaults to undefined) */
  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 (defaults to 16) */
  size?: number | Size
  /** Vertical alignment relative to text (defaults to 'text-bottom') */
  /** @deprecated use v-align utilities instead */
  verticalAlign?: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'
}

type Size = 'small' | 'medium' | 'large'

type Icon = React.ForwardRefExoticComponent<OcticonProps & React.RefAttributes<SVGSVGElement>>

Important Notes:

  • All icons support ref forwarding to the underlying SVG element
  • Icons automatically apply CSS classes following the pattern octicon octicon-{iconname}
  • SVG elements have display="inline-block" and overflow="visible" by default
  • Icons automatically select the most appropriate SVG variant based on requested size
  • Width is computed automatically based on original icon aspect ratio when height is specified

Capabilities

Icon Components

All 339 Octicon icons are available as individual React components with consistent props and behavior. Each icon follows the naming pattern {IconName}Icon and accepts the standard OcticonProps interface.

// Example icon component signatures
function AlertIcon(props: OcticonProps): JSX.Element
function BeakerIcon(props: OcticonProps): JSX.Element  
function CheckIcon(props: OcticonProps): JSX.Element

Icon Categories Available:

  • Interface & Navigation (arrows, chevrons, menus)
  • Actions (plus, edit, delete, copy)
  • Status & Alerts (check, alert, warning, error)
  • Files & Folders (file, directory, code)
  • Git & Version Control (branch, commit, merge, pull request)
  • Communication (comment, discussion, mail)
  • Media & Content (image, video, markdown)
  • And many more...

Complete Icon Reference

Sizing and Display

Icons support multiple sizing options and display customizations through props.

// Size options
size: number | 'small' | 'medium' | 'large'

// Vertical alignment options (deprecated - use v-align utilities instead)
verticalAlign: 'middle' | 'text-bottom' | 'text-top' | 'top' | 'unset'

Size Mappings:

  • small: 16px height by computed width
  • medium: 32px height by computed width
  • large: 64px height by computed width
  • Custom number: Exact pixel height with proportional width

Detailed Styling Guide

Accessibility Features

Built-in accessibility support with ARIA attributes and proper semantic markup.

// Accessibility props
'aria-label'?: string
'aria-labelledby'?: string
tabIndex?: number
title?: string | React.ReactElement<any>

Accessibility Documentation

Customization

Icons can be styled using standard React props and CSS-in-JS approaches.

// Styling props
fill?: string
className?: string
style?: React.CSSProperties

Customization Guide