React

Install

npm install @primer/octicons-react

Usage

Icons

The @primer/octicons-react module exports individual icons as named exports. This allows you to import only the icons that you need without blowing up your bundle:

import React from 'react'
import {BeakerIcon, ZapIcon} from '@primer/octicons-react'

export default function Icon({boom}) {
  return boom ? <ZapIcon /> : <BeakerIcon />
}

If you were to compile this example with a tool that supports tree-shaking (such as Webpack, Rollup, or Parcel) the resulting bundle would only include the "zap" and "beaker" icons.

Vertical alignment

By default the octicons have vertical-align: text-bottom; applied as inline styles. You can change the alignment via the verticalAlign prop, which can be either middle, text-bottom, text-top, or top.

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

export default () => (
  <h1>
    <RepoIcon verticalAlign="middle" /> github/github
  </h1>
)

aria-label

You have the option of adding accessibility information to the icon with the aria-label attribute via the aria-label prop.

// Example usage
import {PlusIcon} from '@primer/octicons-react'

export default () => (
  <button>
    <PlusIcon aria-label="Add new item" /> New
  </button>
)

Sizes

The size prop takes small, medium, and large values that can be used to render octicons at standard sizes:

// Example usage
import {LogoGithubIcon} from '@primer/octicons-react'

export default () => (
  <h1>
    <a href="https://github.com">
      <LogoGithubIcon size="large" aria-label="GitHub" />
    </a>
  </h1>
)

Fill

The fill prop takes a string value that can be used to set the color of the icon. By default, fill is set to currentColor.

// Example usage
import {LogoGithub} from '@primer/octicons-react'
export default () => (
  <h1>
    <a href="https://github.com">
      <LogoGithubIcon fill="#f00" />
    </a>
  </h1>
)

Octicon (DEPRECATED)

⚠️ The Octicon component is deprecated. Use icon components on their own instead:

- <Octicon icon={AlertIcon} />
+ <AlertIcon />

The Octicon component is wrapper that passes props to its icon component. To render a specific icon, you can pass it either via the icon prop, or as the only child:

<Octicon icon={Icon} />
<Octicon><Icon x={10}/></Octicon>

Edit this page on GitHub

3 contributors

Last edited by jonrohan on April 20, 2021