Octicons

Octicons are provided as SVGs, but there are helpers use them more easily in your React and Rails projects.

React

Getting started

Install

npm install @primer/octicons-react

Basic usage

// Import the component
import {ArrowRightIcon} from '@primer/octicons-react'

// Render the icon component
const MyComponent = () => <ArrowRightIcon />

Size

The icon component has a size prop that accepts a number of pixels. The default icon size is 16px.

<>
  <AlertFillIcon size={12} />
  <AlertFillIcon size={16} />
  <AlertFillIcon size={24} />
</>

Fill color

By default, icon fills use currentColor, so they automatically follow the surrounding text (and theme) color. Prefer leveraging inherited color instead of forcing a custom fill.

// in real-world scenarios, use CSS instead of a `style` attribute
<span style={{color: 'var(--fgColor-attention)'}}>
  <AlertFillIcon />
</span>

If you need a high-specificity override, you could pass a color string to fill. A CSS variable from Primer Primitives is strongly recommended because it will adapt based on the current theme (dark modes, high-contrast modes, etc).

<AlertFillIcon fill="var(--fgColor-attention)" />

Accessibility

Decorative by default: no need to add aria-hidden; the component handles decorative cases automatically.

Add an accessible name using aria-label only when the icon alone conveys essential meaning:

<AlertFillIcon aria-label="Build failed" />

When the icon appears alongside explanatory text, you usually do not need aria-label:

<span>
  <AlertFillIcon /> Build failed
</span>

For interactive icon-only buttons, use the IconButton component.

Rails

Getting started

Install

Add the Primer ViewComponents gem:

# Gemfile
gem "primer_view_components"

Then bundle:

bundle install

Basic usage

<%= render(Primer::Beta::Octicon.new(:"arrow-right")) %>

Size

Use the size: keyword with one of the predefined tokens (:xsmall, :small, :medium, etc). The default icon size is 16px (:small).

<%= render Primer::Beta::Octicon.new(:"alert-fill", size: :xsmall) %>
<%= render Primer::Beta::Octicon.new(:"alert-fill", size: :small) %>
<%= render Primer::Beta::Octicon.new(:"alert-fill", size: :medium) %>

Fill color

Icons inherit currentColor (the computed color of their container). Prefer inheritance so icons automatically adapt to theme changes (dark mode, high contrast, etc.).

<span class="color-fg-attention">
  <%= render Primer::Beta::Octicon.new(:"alert-fill") %>
</span>

If you need a high-specificity override, pass a color string to the fill attribute. A CSS variable from Primer Primitives is strongly recommended because it will adapt based on the current theme (dark modes, high-contrast modes, etc).

<%= render Primer::Beta::Octicon.new(:"alert-fill", fill: "var(--fgColor-attention)") %>

Accessibility

Decorative by default: if no accessible label is supplied, the component sets aria-hidden="true" for you—no action needed.

Provide an accessible name only when the icon itself conveys essential meaning (i.e. it is “contentful”):

<%= render Primer::Beta::Octicon.new(:"alert-fill", "aria-label": "Build failed") %>

(or using the aria: hash form)

<%= render Primer::Beta::Octicon.new(:"alert-fill", aria: { label: "Build failed" }) %>

Icon next to explanatory text (no label needed; avoid redundant labeling):

<span>
  <%= render Primer::Beta::Octicon.new(:"alert-fill") %> Build failed
</span>

For interactive icon-only buttons, use Primer::Beta::IconButton.

Other

You can grab SVGs from primer/octicons and manually render them in your application.