---

✨ Features

- 🎨 Multiple Variants - Every icon comes in outline, solid, and mini (16px) versions
- ⚡ Lightweight & Fast - Tree-shakeable, only imports what you use
- 🔧 Fully Customizable - Control size, color, and all SVG attributes
- 📦 Zero Dependencies - Only React as a peer dependency (18.x or 19.x)
- 💅 Modern Design - Clean, professional icons optimized for light-mode interfaces
- 📱 Responsive - Built-in support for different sizes (24px standard, 16px mini)

📦 Installation

``bash
npm install mx-icons
`

🚀 Quick Start

`jsx
import { NoteTextLinear } from "mx-icons";

function App() {
return (


| Prop | Type | Default | Description |
| ----------- | ------------------ | ----------- | ------------------------------------------ |
| size | number \| string | 24 | Icon width and height (px or any CSS unit) |
| color | string | "#292D32" | Icon color (any CSS color) |
| className | string | "" | Additional CSS classes |

$3

`bash


Clone the repository

1. Fork the repository
2. Clone your fork: git clone https://github.com/YOUR_USERNAME/mx-icons.git
3. Install dependencies: npm install
4. Create a feature branch: git checkout -b feature/new-icon
5. Make your changes and test: npm run dev
6. Lint your code: npm run lint
7. Build the library: npm run build:lib
8. Commit with a clear message: git commit -m "feat(icons): add calendar icon"
9. Push to your fork: git push origin feature/new-icon
10. Submit a pull request

$3

`bash


Clone the repository

Icons should follow these guidelines:
- Format: Optimized SVG
- Size: 24x24px (standard) or 16x16px (mini)
- Variants: Provide Linear, Bold, and Mini versions
- Color: Use currentColor for easy customization
- Naming: PascalCase with variant suffix (e.g., CalendarLinear, CalendarBold)

Example icon component:

`jsx
import React from "react";
import Icon from "../../Icon";

export const CalendarLinear = (props) => (



);
`

$3

We follow Conventional Commits:

`
feat(icons): add calendar icon with all variants
fix(modal): resolve scrollbar display issue
docs(readme): update installation guide
``

$3

- Provide a clear description of your changes
- Include screenshots for visual changes
- Reference related issues (e.g., "Closes #123")
- Ensure all tests pass and linting is clean
- Update documentation if needed

For comprehensive guidelines, check out our CONTRIBUTING.md

📄 License

MIT License © 2025 MX Icons Contributors

Free to use in personal and commercial projects. See LICENSE for details.

📊 Project Stats

!Contributors
!Last Commit
!Issues
!Pull Requests

🔗 Links

- 📦 NPM Package: npmjs.com/package/mx-icons
- 🌐 Live Preview: ig-imanish.github.io/mx-icons
- 📚 Documentation: github.com/ig-imanish/mx-icons
- 🐛 Issues: github.com/ig-imanish/mx-icons/issues
- 💬 Discussions: github.com/ig-imanish/mx-icons/discussions

!Alt

Stargazers over time