![](https://storage.googleapis.com/elementa-icons/logo-big.svg)
<p align="center">
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a>
<a href="https://badge.fury.io/js/elementa-icons"><img src="https://badge.fury.io/js/elementa-icons.svg" alt="npm version"></a>
<a href="https://github.com/YOUR_GITHUB_ORG/YOUR_GITHUB_REPO/pulls"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome"></a>
</p>

---
Elementa is a free and open-source icon library with over 200 icons. In a world, where every second day we have a new icon library, Elementa tries to provide a unique flavor to its design ideology which is fun, playful, and on-point.

Elementa is open to be used in personal and commercial projects, be it digital or non-digital enabling developers and designers to create beautiful apps and end-user experience rather than a new icon library.

---

**NOTE:** Please support active development of Elementa icon library by sponsoring us. Please visit https://elementa.dev/donate

---

## ✨ **Key Features:**
*   **Extensive Collection:** Hundreds of meticulously crafted icons covering a wide range of categories.
*   **Fully Customizable:** Easily adjust size, color, stroke width, and more to match your brand.
*   **React-Friendly:** Seamless integration with your React projects. More framework support soon to come.
*   **Optimized for Performance:** Lightweight SVG files ensure fast loading times.
*   **Open Source:** Free to use and contribute to!

# 🚀 Get Started
## Installation

```bash
npm install elementa-icons
# or
yarn add elementa-icons

import { MyIcon } from 'elementa-icons';

function MyComponent() {
  return <MyIcon color="#007BFF" size="24px" />;
}
```

## 🛠️ Customization
Elementa Icons are designed to be highly customizable. You can modify the following properties:

- **color:** The fill color of the icon.
- **size:** The width and height of the icon.
- **strokeWidth:** The thickness of the icon's stroke.

Example:
```TypeScript
<MyIcon color="#FF0000" size="32px" strokeWidth="2" />
```

# ➕ Contributing
We welcome contributions! Please see our [CONTRIBUTING.md](https://github.com/deriva-inc/elementa-icons/blob/master/CONTRIBUTING) for guidelines on how to add new icons or improve existing ones.

# 📜 License
This project is licensed under the MIT License - see the [LICENSE](https://github.com/deriva-inc/elementa-icons/blob/master/LICENSE) file for details.

# 🛣️ Future Roadmap
- Vue support.
- Solid support.
- Svelte support.
- Figma plugin.
- Figma community file for all icons.

# Explore More from deriva
1. [tallileo - track, save, share, invest. one app for all](https://tallileo.com)
2. [khelo - community driven badminton app for grassroot players](https://khelo.app)
3. [claro - personal okr and productivity app](https://claro.deriva.xyz)
4. [WhySoSerious - camping videos](https://wss.deriva.xyz)

<p align="center">
Crafted with ❤️ by <a href="https://www.deriva.xyz/">Deriva Technologies Pvt. Ltd.</a>
</p>