Documentation

Which package?

ghicons is the canonical collection: the optimised SVG files plus a machine-readable registry, with no dependencies. @ghicons/react is generated from it.

Installation

# React components
npm install @ghicons/react

# the SVGs and the registry — works with anything
npm install ghicons

@ghicons/react lists React 18 or 19 as a peer dependency and has no runtime dependencies of its own. ghicons has no dependencies at all.

React usage

Import icons individually by name. Tree-shaking is supported, so only the icons you use end up in your bundle.

import { GyeNyame, Sankofa } from '@ghicons/react';

function MyComponent() {
  return (
    <div>
      <GyeNyame />
      <Sankofa size={40} color="#b30000" />
    </div>
  );
}

Browse every icon — with a copy-ready snippet — on the Browse page.

Props

Every icon accepts the same optional props:

Components render real <svg> elements, so every standard SVG attribute works too — onClick, aria-*, data-*, role, and the rest.

Sizing

<Adinkrahene size={32} />       {/* 32px */}
<Adinkrahene size="2.5rem" />    {/* 2.5rem */}

Coloring

Icons use currentColor, so they inherit the surrounding text color. Override with the color prop when needed.

{/* Inherits text color from parent */}
<div style={{ color: 'blue' }}>
  <Akoben />
</div>

{/* Explicit color */}
<Akoben color="gold" />

Classes and inline styles

<Fihankra className="my-icon" style={{ marginTop: '8px' }} />

TypeScript

Full type definitions are included. IconProps is exported for building wrapper components.

import { GyeNyame, type IconProps } from '@ghicons/react';

interface IconButtonProps extends IconProps {
  label: string;
}

const IconButton = ({ label, ...iconProps }: IconButtonProps) => (
  <button>
    <GyeNyame {...iconProps} />
    {label}
  </button>
);

Without React

The ghicons package ships the SVG files themselves at stable, predictable paths. No build step, no framework.

npm install ghicons

<img src="node_modules/ghicons/svg/adinkra/GyeNyame.svg" alt="Gye Nyame">

Or straight from a CDN, with no install at all:

<img src="https://unpkg.com/ghicons/svg/adinkra/GyeNyame.svg" alt="Gye Nyame">

<span class="icon">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
    <path d="…" />
  </svg>
</span>

<style>
  .icon { color: #b8860b; }
  .icon svg { width: 2rem; height: 2rem; }
</style>

Vue, Svelte, Web Components and Flutter packages are planned — see the roadmap ↗. Until then, the core package covers those cases.

The icon registry

ghicons also publishes registry.json, a machine-readable index of the whole collection. This page is built on it.

import { icons, categories, getIcon, iconsByCategory } from 'ghicons';

getIcon('gye-nyame');
// { name: 'GyeNyame', slug: 'gye-nyame', category: 'adinkra',
//   viewBox: '0 0 24 24', file: 'svg/adinkra/GyeNyame.svg' }

iconsByCategory('national');   // [BlackStar, GhanaFlag]
categories;                    // ['adinkra', 'general', 'national']

Read the JSON directly from any language, not just JavaScript:

import registry from 'ghicons/registry.json';

name, slug, category, viewBox and file are always present. meaning, keywords and aliases are optional and are being researched and filled in across the collection — contributions welcome ↗.

Accessibility

Whether an icon is decorative or meaningful depends on how you use it, so GHIcons leaves the decision to you and makes both straightforward.

{/* Meaningful — give it an accessible name */}
<GyeNyame role="img" aria-label="Gye Nyame symbol" />

{/* Decorative — hide it when adjacent text carries the meaning */}
<button>
  <GyeNyame aria-hidden="true" />
  Learn more
</button>

The same applies to an inlined raw SVG. No external CSS file is required in either case — icons are inline SVG with no stylesheet.

Migrating from 0.0.x

In 0.1.0, ghicons became the framework-agnostic core and the React components moved to @ghicons/react. Two steps:

npm uninstall ghicons
npm install @ghicons/react

- import { GyeNyame, Sankofa } from 'ghicons';
+ import { GyeNyame, Sankofa } from '@ghicons/react';

The component API is unchanged. Two icons were also renamed:

Full details in the migration guide ↗.

Raise an issue

Found a bug, a rendering problem, or a missing icon? Open an issue and a maintainer will respond as soon as possible.

Contributing

Contributions are very welcome, and the most valuable one is an icon. You only need to produce an SVG — the project generates every framework package from it, so you never have to write React or any other framework code.

Ways to contribute

• Submit a new icon — add a clean SVG under svg/<category>/ and open a PR.
• Contribute cultural research — meanings, context and references for symbols already in the collection. No code required, and it is what powers search and the descriptions on this site.
• Submit a non-SVG for conversion — open an issue with your PNG/JPEG and a volunteer will convert it.
• Request an icon — open an issue with the symbol name, meaning, and a reference image.
• Review PRs — check submissions against the icon specification.
• Build a framework integration — Vue, Svelte, Web Components and Flutter are all planned.

SVG requirements

These are enforced automatically on every pull request, across the whole collection.

<!-- A valid icon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">
  <path d="M18.24 3.38L16.16 1.3L12 5.46..." />
</svg>

The full rules live in the icon specification ↗, and the contribution process in CONTRIBUTING.md ↗.