Octicons
Octicons is GitHub's official open-source icon library, designed specifically to support developer-centric UI patterns, code workflows, and technical dashboard interfaces. Used daily by millions of developers on github.com, it is the ultimate standard for clean, technical iconography. Unlike general icon packs, Octicons features specialized coding symbols such as repositories, branches, pull requests, git commits, code tags, issues, and terminal symbols. The layout is optimized across two grid designs (16px and 24px), ensuring that tiny text inline elements remain perfectly legible without blurriness. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Octicons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 933 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | @primer/octicons-react |
| Source Repository | Official GitHub Repository → |
How many icons does Octicons have?
Octicons currently includes 933 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Octicons free for commercial use?
Yes, Octicons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Octicons in React, Next.js, and Vue?
Install the package using npm install @primer/octicons-react, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
npm install @primer/octicons-react
// React & Next.js App Router usage
import { Accessibility16 } from '@primer/octicons-react'
export default function Header() {
return <Accessibility16 className="w-5 h-5 text-indigo-500" />
}Octicons FAQ & Technical Guide
Can I use GitHub Octicons on commercial products?
Yes. Octicons is licensed under the MIT License, which means you are legally allowed to use, copy, modify, and distribute these icons in any commercial software, SaaS, or website without paying licensing fees.
How does Octicons handle scaling and sizes in React?
The React package allows you to pass a numeric 'size' prop (e.g. size={16}) or string keywords ('small' for 16px, 'medium' for 24px) to ensure sharp rendering. It loads specific pixel-grid variations under the hood to prevent subpixel scaling issues.
Does @primer/octicons-react work with Next.js Server Components?
Yes, absolutely. The Octicons React component outputs static SVG elements, making it 100% compatible with Next.js App Router and Server Components without requiring client-side JS.
What license covers Octicons icons vs Octicons code?
Both the SVG icon files and the NPM code wrappers are released under the MIT License. The GitHub trademark itself remains protected, but the icons can be used freely.