MN
Back to articles
Introducing Ghicons: A React Icon Library for Ghanaian Cultural Symbols

The Problem: A Missing Piece in the Ecosystem

Anyone who has worked on a project that celebrates African culture knows the frustration: you want to use a traditional Ghanaian symbol, say, the Gye Nyame or the Sankofa, and you end up spending more time hunting across scattered websites than actually building. The symbols are out there, but they're fragmented. Quality is inconsistent. And integrating a raw SVG into a React project the right way, with proper sizing, color control, and TypeScript support, is more work than it should be.

That's exactly the gap ghicons was built to fill.

The Inspiration: Standing on the Shoulders of react-icons

If you've used react-icons, you know how powerful the concept is: one package, dozens of icon packs, a consistent API. You import what you need, tree-shaking handles the rest, and you're done. ghicons borrows that same philosophy and applies it specifically to Ghanaian iconography. Instead of navigating multiple sources for Adinkra symbols or Ghanaian cultural motifs, developers now have a single, reliable, and growing library to pull from.

What ghicons Offers

ghicons is available on npm and can be installed in seconds:

shell
npm install ghicons
# or
pnpm add ghicons
# or
yarn add ghicons

Once installed, using an icon is as simple as:

typescript
import { GyeNyame, Sankofa } from 'ghicons';

function App() {
  return (
    <div>
      <GyeNyame size={48} color="gold" />
      <Sankofa size={32} color="#b30000" />
    </div>
  );
}

Every icon is a fully typed React component that accepts a consistent set of props: size, color, viewBox, className, and style. Icons default to currentColor, so they naturally inherit the color of their parent element, the same ergonomic pattern developers already love from other icon libraries.

The Collection

The current library includes two primary categories:

Adinkra Symbols, Over 100 symbols from the traditional Ghanaian Adinkra system, each carrying deep cultural meaning. The Gye Nyame (supremacy of God), Sankofa (learn from the past), Duafe (beauty and cleanliness), Dwennimmen (humility and strength), and many more are all available as crisp, scalable components.

General Ghanaian Symbols, Context-specific icons for the Ghanaian web, including the GhanaCedisIcon for the official Ghana Cedi (₵) currency symbol, a must-have for any fintech or e-commerce product targeting the Ghanaian market.

You can explore the full icon set on the ghicons website.

Built for Developers

Ghicons is designed to fit neatly into modern development workflows:

  • TypeScript support, Full type definitions are included out of the box. You can even extend IconProps to build your own wrapper components.
  • Tree-shaking, Import only the icons you use, and keep your bundle lean.
  • Framework compatible, Works with React 18+ and Next.js, including both Client and Server Components.
  • No CSS required, Icons use inline SVG styles, so there's nothing extra to import.
  • Accessibility-ready, Icons are rendered as decorative SVGs by default. Adding aria-label and role="img" is all you need to make them meaningful to screen readers.

The Technology Behind It

Under the hood, ghicons uses a custom automated generation pipeline built with Node.js scripts and SVGO. Raw SVG files live in a source directory, organized by category. A build script optimizes each SVG, wraps it in a typed React functional component with the standard IconProps interface, and updates the library's main export file automatically. Storybook stories are also generated automatically for every icon, making visual testing straightforward.

This pipeline means contributing a new icon is a three-step process: drop in the SVG file, run pnpm run generate:icons, and run pnpm run generate:stories. No boilerplate to write by hand.

Why This Matters

Software shapes how cultures are represented on the web. When developers building products for, or inspired by, Ghana lack accessible, quality tooling for Ghanaian symbols, those symbols simply don't appear in digital products. ghicons is a small but meaningful step toward changing that. It makes it easier to build apps, websites, and dashboards that are rooted in Ghanaian identity, without the extra friction.

Whether you're building a cultural education platform, a fintech app targeting West Africa, or simply want to add a touch of Ghanaian heritage to your portfolio site, ghicons gives you the tools to do it properly.