octicons

A scalable set of icons handcrafted with <3 by GitHub

8,302

827

8,302

View on GitHub View on NPM

Top Related Projects

icons

7,376

Official open source SVG icon library for Bootstrap.

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

feather

24,931

Simply beautiful open-source icons

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Quick Overview

Primer Octicons is GitHub's official icon set, designed for use in GitHub's user interface and available for use in other projects. It provides a comprehensive collection of scalable vector icons that are optimized for various sizes and use cases, ensuring consistency across GitHub's ecosystem and beyond.

Pros

High-quality, professionally designed icons
Regularly updated and maintained by GitHub
Available in multiple formats (SVG, PNG, and web font)
Extensive collection covering a wide range of use cases

Cons

Limited to GitHub's design aesthetic, which may not fit all projects
Some icons may be too specific to GitHub's ecosystem
Potential for design changes that could affect consistency in long-term projects
Requires attribution when used outside of GitHub projects

Code Examples

Using Octicons in HTML with SVG:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Using Octicons with React:

import { MarkGithubIcon } from '@primer/octicons-react'

function MyComponent() {
  return (
    <div>
      <MarkGithubIcon size={24} />
    </div>
  )
}

Using Octicons with JavaScript:

import { octicons } from "@primer/octicons"

const svg = octicons["mark-github"].toSVG()
document.body.innerHTML = svg

Getting Started

To use Octicons in your project, follow these steps:

Install the package:
```
npm install @primer/octicons
```

Import and use in your project:

import { octicons } from "@primer/octicons"

// Use as SVG
const markGithubIcon = octicons["mark-github"].toSVG()

// Get path data
const pathData = octicons["mark-github"].path

For React projects, install @primer/octicons-react and use the components directly in your JSX.

Competitor Comparisons

icons

7,376

Official open source SVG icon library for Bootstrap.

Pros of Icons

Larger icon set with over 1,800 icons compared to Octicons' ~200
More diverse range of icon styles and categories
Supports multiple file formats (SVG, webfont, icon font)

Cons of Icons

Larger file size due to the extensive icon set
May require more time to find specific icons in the larger collection
Less GitHub-specific icons compared to Octicons

Code Comparison

Octicons usage:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Icons usage:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
  <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48

Font-Awesome

73,502

The iconic SVG, font, and CSS toolkit

Pros of Font-Awesome

Larger icon set with over 2,000 icons compared to Octicons' ~200
Supports multiple styles (solid, regular, light, duotone)
Wider adoption and community support

Cons of Font-Awesome

Larger file size due to extensive icon set
Some advanced features require a paid Pro version
Less focused on GitHub-specific use cases

Code Comparison

Octicons usage:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Font-Awesome usage:

<i class="fab fa-github"></i>

Both libraries offer easy-to-use icon implementations, but Font-Awesome's approach is more concise for basic usage.

feather

24,931

Simply beautiful open-source icons

Pros of Feather

Larger icon set with over 280 icons compared to Octicons' ~200
More minimalist and consistent design style across all icons
Supports multiple file formats (SVG, PNG, WEBFONT) out of the box

Cons of Feather

Less tailored for specific GitHub/development use cases
Fewer size variations and customization options
Less frequent updates and maintenance compared to Octicons

Code Comparison

Octicons usage:

<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"></path>
</svg>

Feather usage:

<i data-feather="alert-triangle"></i>
<script>
  feather.replace()
</script>

Both libraries offer easy integration, but Feather's implementation is generally simpler and requires less markup.

ionicons

17,564

Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎

Pros of Ionicons

Larger icon set with over 1,200 icons compared to Octicons' ~200
Supports multiple file formats (SVG, WebFont, PNG, PDF)
Includes both iOS and Material Design style icons

Cons of Ionicons

Larger file size due to the extensive icon set
May require more time to find specific icons due to the larger collection
Less focused on GitHub-specific use cases

Code Comparison

Octicons usage:

<svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>

Ionicons usage:

<ion-icon name="logo-github"></ion-icon>

The Ionicons implementation is simpler and more concise, while Octicons provides more control over the SVG rendering.

material-design-icons

50,411

Material Design icons by Google (Material Symbols)

Pros of Material Design Icons

Larger icon set with over 2,000 icons in various styles and themes
Comprehensive design system with guidelines for consistent usage across platforms
Wider adoption and recognition in the design community

Cons of Material Design Icons

Larger file size and potentially slower load times due to the extensive icon set
Less frequent updates compared to Octicons
May require more effort to customize or modify icons to fit specific branding needs

Code Comparison

Material Design Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">favorite</i>

Octicons:

<svg class="octicon octicon-heart" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
  <path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"></path>
</svg>

Both icon sets offer easy integration into web projects, but Material Design Icons uses a more straightforward approach with font icons, while Octicons utilizes inline SVGs for better scalability and customization options.

tabler-icons

17,904

A set of over 5500 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Pros of Tabler Icons

Larger icon set with over 3,100 icons compared to Octicons' ~200
More diverse icon categories, including weather, flags, and brand logos
Supports multiple file formats (SVG, React, Vue, Webfont)

Cons of Tabler Icons

Less focused on GitHub-specific use cases
May have a steeper learning curve due to the larger number of icons
Potentially slower load times if using the entire icon set

Code Comparison

Octicons (React):

import { MarkGithubIcon } from '@primer/octicons-react'

function App() {
  return <MarkGithubIcon size={24} />
}

Tabler Icons (React):

import { IconBrandGithub } from '@tabler/icons-react'

function App() {
  return <IconBrandGithub size={24} />
}

Both libraries offer similar usage patterns for React components, with minor differences in naming conventions and import statements. Tabler Icons provides more customization options for stroke width and other properties.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

octicons cover light octicons cover dark

Primer Octicons

Octicons are a set of SVG icons built by GitHub for GitHub.

Libraries

This repository contains several libraries. Each of them is in the lib/ folder and gives access to Octicons on a different platform/language.

JavaScript

The octicons node.js library is the main JavaScript library. With a JavaScript API that can be used in a variety of applications.

Package	Version
@primer/octicons Node.js package with JavaScript API
@primer/octicons-react React Octicons components
@primer/styled-octicons React Octicons components with Styled System props

Ruby

Package	Version
octicons Ruby gem with Ruby API
octicons_helper Rails helper for using octicons
jekyll-octicons Jekyll plugin for using octicons

Contributing

Feedback, ideas, and bug reports

If you found a bug, have feedback about our Octicon Library, or an idea on how to improve it, please open a new issue in this repo using the appropriate issue template.

Request an Icon Review (GitHub staff only)

To request an icon review for inclusion in the Octicons Library, open an issue using the icon review request template in github/primer.

Adding or updating an icon

Read through our contributing guide if you want to add or update icons.

License

When using the GitHub logos, be sure to follow the GitHub logo guidelines.

Code License: MIT Applies to all other files

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of Icons

Cons of Icons

Code Comparison

Pros of Font-Awesome

Cons of Font-Awesome

Code Comparison

Pros of Feather

Cons of Feather

Code Comparison

Pros of Ionicons

Cons of Ionicons

Code Comparison

Pros of Material Design Icons

Cons of Material Design Icons

Code Comparison

Pros of Tabler Icons

Cons of Tabler Icons

Code Comparison

Convert designs to code with AI

README

Primer Octicons

Libraries

JavaScript

Ruby

Contributing

Feedback, ideas, and bug reports

Request an Icon Review (GitHub staff only)

Adding or updating an icon

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days