A professional React icon pack inspired by African culture and design, featuring tribal symbols, kente patterns, drums, masks, and more.
npm install afro-react-iconsA professional React icon pack inspired by African culture and design, featuring beautiful SVG icons including tribal symbols, kente patterns, drums, masks, and more.
- 🎨 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
``bash`
npm install afro-react-icons
or
`bash`
yarn add afro-react-icons
`jsx
import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum } from 'afro-react-icons';
function App() {
return (
export default App;
`
`tsx
import React from 'react';
import { GyeNyame, AfricanMask, DjembeDrum, IconProps } from 'afro-react-icons';
interface MyComponentProps {
iconSize: number;
}
const MyComponent: React.FC
return (
);
};
export default MyComponent;
`
`jsx`
import GyeNyame from 'afro-react-icons/icons/GyeNyame';
import AfricanMask from 'afro-react-icons/icons/AfricanMask';
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 |
`jsx`
`jsx`
`jsx`
`jsx`
`jsx`
`jsx`
`jsx`
`css`
.my-icon-class {
color: #FF6B35;
width: 2rem;
height: 2rem;
}
`jsx`
style={{
width: '100%',
height: 'auto',
maxWidth: '48px'
}}
/>
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
We welcome contributions! Please feel free to submit issues and pull requests.
MIT © Omoike Benjamin
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.
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.
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.demo.html
* An interactive file to visually showcase all icons in your browser.package.json` configured for easy publishing to NPM.
*
Purchase the Premium Pack Here