Octicons

The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Octicons in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.

npm install @primer/octicons-react

npm install @primer/octicons-react

// Note: Octicons React components are fully compatible with Next.js App Router. They render natively as lightweight Server Components without hydration overhead.

npm install @primer/octicons-vue

// No official Svelte package — use raw SVG or Iconify prefix 'octicon:'

npm install @primer/octicons

// Access individual SVG data programmatically in Node.js:
const octicons = require('@primer/octicons')

import { RepoIcon, GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react'
 
export default function App() {
  return (
    <div style={{ display: 'flex', gap: '12px' }}>
      <RepoIcon size={24} className="text-gray-500" />
      <GitPullRequestIcon size={16} className="text-green-500" />
      <IssueOpenedIcon size={16} className="text-red-500" />
    </div>
  )
}

// Octicons support strict size scales and built-in accessibility descriptions
import { ShieldCheckIcon } from '@primer/octicons-react'
 
export default function SecurityStatus() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
      <ShieldCheckIcon 
        size="medium" // 'small' (16px), 'medium' (24px)
        aria-label="Security check passed" 
        className="text-green-400" 
      />
      <span>Your connection is secure</span>
    </div>
  )
}

// Git workflow representation in code
import { GitCommitIcon, GitBranchIcon } from '@primer/octicons-react'
 
export default function DeploymentSummary({ commitHash, branchName }) {
  return (
    <div style={{ fontFamily: 'monospace', fontSize: '13px' }}>
      <div>
        <GitBranchIcon size={16} style={{ marginRight: '6px' }} />
        Branch: {branchName}
      </div>
      <div>
        <GitCommitIcon size={16} style={{ marginRight: '6px' }} />
        Commit: {commitHash}
      </div>
    </div>
  )
}