Zero-dependency React components for Octicons

Downloads in past


2401.8.06 years ago6 years agoMinified + gzip package size for react-component-octicons in KB


React Component for Octicons
Build Status NPM Version codecov
Octicons now support React officially. I recommend to try it at first.
is a React component library for the latest Octicons (v7.x). This library wraps SVG icons and provides one React component <Octicon/>. Built by and ready for TypeScript.
This library has no dependency because all <svg> elements for octicons are embedded in library. You don't need any source code bundler to use this library.
To see the catalog of icons, please visit the document page built with Storybook.


$ npm install --save react-component-octicons


<Octicon/> component has a required property name and optional properties zoom, style.
import * as React from 'react';
import { render } from 'react-dom';
import Octicon from 'react-component-octicons';

        // Normal size
        <Octicon name="alert" />

        // Twice bigger
        <Octicon name="star" zoom="x2" />

        // Size 100px x 100px
        <div style={{width: '100px', height: '100px'}}>
            <Octicon name="flame" zoom="100%" />

        // Styled icon
        <Octicon name="flame" zoom="100%" style={{color: 'blue'}}/>

name property (required)

name is a symbol name for an icon. Symbol names are described in Octicons documentOcticons.

zoom property (optional)

zoom is a string value and it represents the zoom factor of the icon.
  • x{N}: N is a number (integer or float). Zoom the icon by xN (i.e. x4 means 4 times bigger than normal).
  • N%: N is a number between 0~100. It means N% size of its parent element. So 100% means to fit to the parent element.

style property (optional)

style is a CSS property to specify the style of the icon itself. The styles are applied to underlying <svg> element.

className property (optional)

className is a class name of underlying <svg> element.

Typo Safety for Icon Names

name property of <Octicon/> is restricted to actual symbol names. For example, following code contains typo allow-right (arrow-right is correct).
// ERROR! 'allow-right' is typo of 'arrow-right'
    <Octicon name="allow-right" />,

It falls into a compilation error.
test.tsx(5,17): error TS2322: Type '{ name: "allow-right"; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Octicon> & Readonly<{ children?: ReactNode; }> & R...'.
  Type '{ name: "allow-right"; }' is not assignable to type 'Readonly<OcticonProps>'.
    Types of property 'name' are incompatible.
      Type '"allow-right"' is not assignable to type 'OcticonSymbol'.


Following is a process to develop this library.
$ # Install all development dependencies
$ npm install

$ # Build the library and run all unit tests
$ npm test

$ # See manually if the library is working
$ # Open http://localhost:4321 in your browser
$ npm run smoke-test

$ # Run storybook locally on port 6006
$ npm run storybook

$ # Build storybook (catalog site) in docs/ directory
$ npm run build-storybook


Distributed under the MIT License.