@mingcute/react

Implementation of the MingCute Icons library for React applications.

Browse all icons at MingCute.com →

MingCute Icons for React

A high-performance, tree-shakable React icon library generated from MingCute Icons. Built with TypeScript and optimized for modern frameworks like Next.js, Vite, and Remix.

Installation

# Using npm
npm install @mingcute/react

# Using yarn
yarn add @mingcute/react

# Using pnpm
pnpm add @mingcute/react

Usage

1. Basic Example

Import icons as standard React components. All icons accept size and color props.

import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/react';

function App() {
  return (
    <div className="container">
      {/* Default: 24px size and currentColor */}
      <MingcuteFill />

      {/* Custom size and color */}
      <Home1Line size={32} color="#007AFF" />

      {/* Inherits standard SVG props */}
      <SearchLine opacity={0.5} />
    </div>
  );
}

2. Styling with Tailwind CSS

Since the library spreads props to the underlying SVG, you can use Utility Classes directly.

import { UserLine } from '@mingcute/react';

export default function Profile() {
  return (
    <button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
      <UserLine className="w-5 h-5 animate-pulse" />
      <span>Profile</span>
    </button>
  );
}

Optimization (Deep Imports)

While the main entry point supports tree-shaking, you can bypass index files entirely for absolute minimum bundle sizes by importing individual icons.

// This ensures that only the code for MingcuteFill is processed
import MingcuteFill from '@mingcute/react/icons/MingcuteFill';

function MinimalPage() {
  return <MingcuteFill />;
}

Props

All components extend React.SVGProps<SVGSVGElement>.

Prop	Type	Default	Description
size	`number	string`	24
color	string	"currentColor"	Sets the color
className	string	-	Standard React className for styling
...props	SVGProps	-	Any valid SVG attribute (title, opacity, etc.)

License

Apache-2.0 License