A modern, lightweight React icon library with beautiful SVG icons

Built with React • Optimized for Production

Live Demo • Browse Icons • Documentation • Contributing

✨ 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

npm install mx-icons

🚀 Quick Start

import { NoteTextLinear } from "mx-icons";

function App() {
  return (
    <div>
      <NoteTextLinear />

      <NoteTextLinear size={24} color="#292D32" />
    </div>
  );
}

🎨 Props & Customization

All icon components accept the following props:

| 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 |

Run Preview Locally

# Clone the repository
git clone https://github.com/ig-imanish/mx-icons.git
cd mx-icons

# Install dependencies
npm install

# Start the preview app
npm run dev

Open http://localhost:5173 in your browser.

🤝 Contributing

We welcome contributions! Here's how you can help make MX Icons even better:

Ways to Contribute

• 🐛 Report Bugs - Open an issue
• 💡 Request Icons - Tell us which icons you need
• 🎨 Add New Icons - Follow our contribution guidelines
• 📖 Improve Docs - Help make the documentation better
• ⭐ Star the Repo - Show your support!
• 🐦 Share - Tweet about MX Icons

Quick Start for Contributors

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-icon
3. Make your changes
4. Test locally: npm run dev
5. Submit a pull request

For detailed 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

🔗 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

Made with ❤️ by the open-source community

If you find this project useful, please consider giving it a ⭐ on GitHub!