@primer/octovisuals-react

React components for GitHub's Primer Octovisuals illustrative icon library.

Installation

npm install @primer/octovisuals-react

Usage

import {SettingsIcon, GlobeIcon} from "@primer/octovisuals-react"

function App() {
  return (
    <div>
      {/* Decorative icon — hidden from assistive technology */}
      <SettingsIcon />

      {/* Labeled icon — announced by screen readers */}
      <GlobeIcon aria-label="Global settings" />

      {/* Custom size */}
      <SettingsIcon size={48} />
    </div>
  )
}

Colors

Icons are two-tone: primary shapes use currentColor (inherits from CSS color property), accent shapes use a fixed color (#96A199). This means the primary color automatically adapts to your text color, while the accent stays true to the design.

Props

All icons accept the following props, plus any valid SVG element props:

| Prop | Type | Default | Description | | ------------ | -------- | ------- | -------------------------------------------------- | | size | number | 96 | Width and height of the icon in pixels | | aria-label | string | — | Accessible label. When set, icon gets role="img" |

When no aria-label is provided, icons render with aria-hidden="true".

RSC / SSR

All components are fully compatible with React Server Components and SSR. No "use client" directive, no React Context, no hooks — just pure render functions.

Metadata

Access the full icon catalog for building search, documentation, or tooling:

import {icons} from "@primer/octovisuals-react/metadata"

icons.forEach((icon) => {
  console.log(icon.name, icon.keywords, icon.categories)
})

Custom Icons

Use createIcon to create custom icons that match the same API:

import {createIcon} from "@primer/octovisuals-react"

export const MyCustomIcon = createIcon({
  displayName: "MyCustomIcon",
  viewBox: "0 0 96 96",
  defaultWidth: 96,
  defaultHeight: 96,
  path: '<path d="..." />',
})

License

UNLICENSED — All rights reserved. Copyright (c) 2026 GitHub, Inc.