Skip to content


npm version


npm install @primer/octicons-react



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 () => (
<RepoIcon verticalAlign='middle' /> github/github


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 () => (
<PlusIcon aria-label="Add new item" /> New


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

PropRendered Size
size='small'16px height by computed width
size='medium'32px height by computed width
size='large'64px height by computed width
// Example usage
import {LogoGithubIcon} from '@primer/octicons-react'
export default () => (
<a href=''>
<LogoGithubIcon size='large' aria-label='GitHub'/>


⚠️ 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
2 contributorsashygeecolebemis
Last edited by ashygee on August 25, 2020