Afro React Icons

A professional React icon pack inspired by African culture and design, featuring beautiful SVG icons including tribal symbols, kente patterns, drums, masks, and more.

Features

• 🎨 5 Unique Icons - Carefully designed African-inspired icons
• ⚛️ React Components - Each icon is a React functional component
• 🎯 TypeScript Ready - Full TypeScript support
• 📦 Tree Shakeable - Import only the icons you need
• 🎨 Customizable - Easily customize size, color, and other props
• 📱 Responsive - Scalable SVG icons that work on all screen sizes

Installation

npm install afro-react-icons

or

yarn add afro-react-icons

Usage

Basic Usage

import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum } from 'afro-react-icons';

function App() {
  return (
    <div>
      <GyeNyame size={24} color="#000" />
      <AfricanMask size={32} color="#8B4513" />
      <DjembeDrum size={48} color="#D2691E" />
    </div>
  );
}

export default App;

TypeScript Usage

import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum, IconProps } from 'afro-react-icons';

interface MyComponentProps {
  iconSize: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ iconSize }) => {
  return (
    <div>
      <GyeNyame size={iconSize} color="#000" />
      <AfricanMask size={iconSize} color="#8B4513" />
      <DjembeDrum size={iconSize} color="#D2691E" />
    </div>
  );
};

export default MyComponent;

Individual Imports

import GyeNyame from 'afro-react-icons/icons/GyeNyame';
import AfricanMask from 'afro-react-icons/icons/AfricanMask';

Props

All icons accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Size of the icon in pixels | | color | string | 'currentColor' | Color of the icon | | ...props | SVGProps | {} | Any additional SVG props |

Available Icons

GyeNyame

The Adinkra symbol meaning "except for God" - represents the supremacy of God.

<GyeNyame size={24} color="#000" />

AfricanMask

A stylized representation of traditional African masks used in ceremonies and rituals.

<AfricanMask size={24} color="#8B4513" />

DjembeDrum

The iconic West African goblet drum, central to African music and culture.

<DjembeDrum size={24} color="#D2691E" />

KentePattern

Inspired by the geometric patterns of traditional Kente cloth from Ghana.

<KentePattern size={24} color="#FFD700" />

BaobabTree

The majestic African baobab tree, known as the "Tree of Life."

<BaobabTree size={24} color="#228B22" />

Styling Examples

Custom Colors

<GyeNyame size={32} color="#FF6B35" />
<AfricanMask size={32} color="#8B4513" />
<DjembeDrum size={32} color="#D2691E" />

Using CSS Classes

<GyeNyame className="my-icon-class" />

.my-icon-class {
  color: #FF6B35;
  width: 2rem;
  height: 2rem;
}

Responsive Icons

<GyeNyame 
  size={24} 
  style={{ 
    width: '100%', 
    height: 'auto', 
    maxWidth: '48px' 
  }} 
/>

Cultural Significance

This icon pack celebrates the rich cultural heritage of Africa:

• Gye Nyame: An Adinkra symbol from Ghana representing the omnipotence of God
• African Masks: Sacred objects used in traditional ceremonies across Africa
• Djembe Drum: A goblet-shaped drum from West Africa, central to community gatherings
• Kente Patterns: Traditional woven cloth patterns from Ghana with deep symbolic meaning
• Baobab Tree: The iconic African tree, revered across the continent as a symbol of life

Contributing

We welcome contributions! Please feel free to submit issues and pull requests.

License

MIT © Omoike Benjamin

Support

If you find this package useful, please consider giving it a star on GitHub!

Made with ❤️ for the African diaspora and lovers of African culture worldwide.

Premium Offer

Elevate your web and mobile applications with Afro React Icons – a meticulously crafted, premium icon pack that celebrates the rich tapestry of African culture and modern digital life. Designed for developers and designers who demand both aesthetic excellence and cultural authenticity.

What You'll Get:

Your purchase includes 5 striking, African-inspired icons, each provided in both JavaScript (.js) and TypeScript (.tsx) formats:

1. AfroSun ☀️: A radiant sun with patterns inspired by African textiles.
2. TribalMask 🎭: A minimalist, geometric African mask design.
3. TalkingDrum 🥁: A sleek representation of the traditional West African communication drum.
4. AfricanLeaf 🍃: A stylized leaf adorned with subtle cultural motifs.
5. KenteGrid ⬜: A bold, geometric pattern inspired by the iconic Kente cloth.

Plus:

• Comprehensive README.md with detailed usage instructions and examples.
• An interactive demo.html file to visually showcase all icons in your browser.
• package.json configured for easy publishing to NPM.

Purchase the Premium Pack Here