@ghicons/react 🇬🇭

Ghanaian symbols as React components.

Adinkra and other tribal symbols, the currency, national emblems and more — fully typed, tree-shakeable, and generated from the ghicons canonical SVG collection.

⚠️ Moved from ghicons. Through 0.0.1 these components were published as ghicons. That name now belongs to the framework-agnostic core. See the migration guide.

Install

npm install @ghicons/react

React 18 or 19, as a peer dependency.

Use

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

function App() {
  return (
    <div>
      <GyeNyame />
      <Sankofa size={40} color="gold" />
    </div>
  );
}

Icons use currentColor, so they inherit the surrounding text colour:

<div style={{ color: 'gold' }}>
  <GyeNyame />
</div>

Props

| Prop | Type | Default | Description | |---|---|---|---| | size | number \| string | 24 | Numbers are pixels; strings take any CSS unit | | color | string | currentColor | Icon colour | | viewBox | string | 0 0 24 24 | SVG viewBox | | className | string | — | Additional CSS classes | | style | React.CSSProperties | — | Inline styles |

Components render real <svg> elements, so every standard SVG attribute works too:

<GyeNyame size="2rem" color="#b8860b" role="img" aria-label="Gye Nyame symbol" onClick={…} />

TypeScript

IconProps is exported for building wrappers:

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

const IconButton = ({ label, ...icon }: IconProps & { label: string }) => (
  <button><GyeNyame {...icon} />{label}</button>
);

Accessibility

Whether an icon is decorative or meaningful depends on how you use it, so the choice is yours:

<GyeNyame role="img" aria-label="Gye Nyame symbol" />   {/* meaningful */}
<button><GyeNyame aria-hidden="true" /> Learn more</button>   {/* decorative */}

Not using React?

Install ghicons for the raw SVGs and the icon registry — it works with any framework, or none.

Links

• Documentation
• Contributing
• Browse the icons

License

MIT © Methuselah Nwodobeh