Open source, beautiful icons for React projects. Beautiful SVG components with multiple style variants - linear, bold, bulk, and more. Customizable, and ready for your app or design system.
Live Demo • Browse Icons • Documentation • Contributing
- 🎨 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)
npm install mx-iconsimport { NoteTextLinear } from "mx-icons";
function App() {
return (
<div>
<NoteTextLinear />
<NoteTextLinear size={24} color="#292D32" />
</div>
);
}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 |
# 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 devOpen http://localhost:5173 in your browser.
We welcome contributions from developers of all skill levels! Here's how you can help make MX Icons even better.
- 🐛 Report Bugs — Found an issue? Open a bug report
- 💡 Request Icons — Tell us which icons you need for your projects
- 🎨 Add New Icons — Contribute new icons following our design guidelines
- 📖 Improve Documentation — Help make our docs clearer and more comprehensive
- 🔧 Fix Issues — Browse open issues and submit fixes
- ⭐ Star the Repo — Show your support and help us grow!
- 🐦 Share — Spread the word about MX Icons
- Fork the repository
- Clone your fork:
git clone https://github.com/YOUR_USERNAME/mx-icons.git - Install dependencies:
npm install - Create a feature branch:
git checkout -b feature/new-icon - Make your changes and test:
npm run dev - Lint your code:
npm run lint - Build the library:
npm run build:lib - Commit with a clear message:
git commit -m "feat(icons): add calendar icon" - Push to your fork:
git push origin feature/new-icon - Submit a pull request
# Clone the repository
git clone https://github.com/ig-imanish/mx-icons.git
cd mx-icons
# Install dependencies
npm install
# Start development server
npm run dev
# Run linter
npm run lint
# Build library
npm run build:libIcons should follow these guidelines:
- Format: Optimized SVG
- Size: 24x24px (standard) or 16x16px (mini)
- Variants: Provide Linear, Bold, and Mini versions
- Color: Use
currentColorfor easy customization - Naming: PascalCase with variant suffix (e.g.,
CalendarLinear,CalendarBold)
Example icon component:
import React from "react";
import Icon from "../../Icon";
export const CalendarLinear = (props) => (
<Icon {...props}>
<path d="..." fill="none" stroke="currentColor" strokeWidth="1.5" />
</Icon>
);We follow Conventional Commits:
feat(icons): add calendar icon with all variants
fix(modal): resolve scrollbar display issue
docs(readme): update installation guide
- 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.
- 📦 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
MIT License © 2025 MX Icons Contributors
Free to use in personal and commercial projects. See LICENSE for details.
Made with ❤️ by the open-source community
If you find this project useful, please consider giving it a ⭐ on GitHub!
If you find this project useful, please consider giving it a ⭐ on GitHub!