Skip to content

React

npm version

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:

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 () => (
<h1>
<a href='https://github.com'>
<LogoGithubIcon size='large' aria-label='GitHub'/>
</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
1 contributorcolebemis
Last edited by colebemis on June 10, 2020