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

``bash
npm install afro-react-icons
`

or

`bash
yarn add afro-react-icons
`

Usage

$3

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

function App() {
return (


export default App;
`

$3

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

interface MyComponentProps {
iconSize: number;
}

const MyComponent: React.FC = ({ iconSize }) => {
return (


export default MyComponent;
`

$3

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

$3

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

$3

`jsx

`

$3

`jsx

`

$3

`jsx

`

$3

`jsx

`

$3

`jsx

`

Styling Examples

$3

`jsx



`

$3

`jsx

`

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

$3

`jsx
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.

$3

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