explaingit

primer/octicons

★ 8,680JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

Octicons is GitHub's official SVG icon library, with packages for JavaScript, React, Ruby, Rails, and Jekyll so you can use the same icons that appear across GitHub's own interface in your own projects.

Mindmap

mindmap
  root((Octicons))
    Platforms
      React package
      Ruby gem
      Rails helper
      Jekyll plugin
    Icon Format
      SVG source files
      Scales to any size
      Single source truth
    Audience
      Web developers
      GitHub users
    License
      MIT code license
      Logo usage rules
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add GitHub-style SVG icons to a React application by installing the @primer/octicons-react package.

USE CASE 2

Use Octicons in a Ruby on Rails project with the octicons_rails gem and Rails helper methods.

USE CASE 3

Embed GitHub icons in a Jekyll static site using the jekyll-octicons plugin.

Tech stack

JavaScriptTypeScriptReactRubyRailsJekyllSVG

Getting it running

Difficulty · easy Time to first run · 5min
MIT licensed, use freely for any purpose, including commercial projects, as long as you keep the copyright notice.

In plain English

Octicons is the official icon library built and used by GitHub. The icons are SVG files, which means they scale to any size without losing quality. This repository is where GitHub maintains those icons and the various packages that let developers use them in their own projects. The repository is organized around several packages targeting different platforms. For JavaScript and Node.js projects, there is a core package with a JavaScript API plus a React-specific package that wraps each icon as a component you can drop into a React app. There is also a styled version of the React package that works with the Styled System library for applying spacing and color props directly on icon elements. For Ruby projects, there are three packages: a plain Ruby gem with a Ruby API, a Rails helper that makes it easier to insert icons in Rails templates, and a Jekyll plugin for using octicons in Jekyll-generated static sites. All packages share the same underlying SVG source files stored in this repository. When GitHub updates or adds an icon, the change flows through to all the platform packages from a single source. The icon set is used across GitHub's own web interface, so it reflects the visual language GitHub has developed for its product. Contributions from outside GitHub staff are welcome for bug reports and feedback, but adding new icons to the library requires an internal review process. The code is MIT-licensed, the GitHub logo icons themselves are subject to GitHub's separate logo usage guidelines.

Copy-paste prompts

Prompt 1
Show me how to install @primer/octicons-react and render the GitHub alert icon as a React component in a Next.js app.
Prompt 2
How do I add an Octicon icon to a Ruby on Rails view template using the octicons_rails helper?
Prompt 3
Write a Jekyll include snippet that renders the 'check-circle' Octicon SVG icon using the jekyll-octicons plugin.
Prompt 4
List all available Octicon icon names and their SVG paths using the @primer/octicons JavaScript package in Node.js.
Open on GitHub → Explain another repo

← primer on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.