README.md

July 30, 2026 · View on GitHub

@mingcute/react

Typed, tree-shakeable Mingcute icons for React

Overview

@mingcute/react provides typed React components for the public Mingcute Core Regular and Core Filled styles.

Canonical icon geometry comes from @mingcute/icons. The adapter focuses on React rendering, accessibility, prop precedence, refs, framework lifecycle behavior, and stable SVG resource identifiers.

Highlights

3,326 styled definitions: 1,663 icons in Core Regular and Core Filled.
Typed React components: generated declarations and framework-native props.
Tree-shakeable imports: style entry points and direct icon subpaths.
Accessible defaults: unlabeled icons remain decorative.
Scoped SVG resources: repeated icons avoid gradient, mask, and clip-path collisions.
Shared geometry: the adapter does not duplicate the icon catalogue.

Mingcute icons used in product interfaces

Installation

Compatibility: React 18 or 19.

# npm
npm install @mingcute/react

# pnpm
pnpm add @mingcute/react

# Yarn
yarn add @mingcute/react

# Bun
bun add @mingcute/react

Quick Start

import { Home1Regular } from '@mingcute/react/core-regular';

export function NavigationIcon() {
  return <Home1Regular size={24} color="currentColor" title="Home" />;
}

Imports

Style entry points

import {
  Home1Regular,
  Search2Regular,
} from '@mingcute/react/core-regular';

Direct icon imports

import Home1Regular from '@mingcute/react/core-regular/home-1';

The package root exports the shared Icon utility and public types. It does not re-export the complete icon catalogue.

API Reference

Prop	Type	Default	Purpose
`size`	`number \| string`	`24`	Sets both width and height unless either is provided
`width`	React SVG value	`size`	Overrides the rendered width
`height`	React SVG value	`size`	Overrides the rendered height
`color`	`string`	`currentColor`	Sets inherited SVG paint
`title`	`string`	none	Adds an accessible `<title>`
`titleId`	`string`	generated	Overrides the generated title association ID
`ref`	`Ref<SVGSVGElement>`	none	Accesses the rendered SVG element
Other props	`SVGProps<SVGSVGElement>`	none	Forwards SVG, event, class, style, and ARIA props

Explicit width or height values take precedence over size.

Accessibility

Icons without a title or explicit accessible name are hidden from assistive technology.

Meaningful icons

Provide a title or platform-appropriate accessibility label when an icon communicates meaning by itself.

Decorative icons

Keep icons decorative when nearby text already labels the action.

Icon-only controls

Put the accessible name on the interactive control and keep the icon itself decorative.

Server Rendering

Components use React.useId() to scope titles, gradients, masks, clip paths, and patterns.

For reliable hydration, render the same component tree with the same package version on the server and client. Do not rewrite generated resource IDs.

Available Styles

Import subpath	Style	Icons
`core-regular`	Core Regular	1,663
`core-filled`	Core Filled	1,663
Total	All public styles	3,326

Additional Core, Cute, and Sharp styles are available in Mingcute Pro.

Production Guidance

The package is ESM-only and side-effect free.
Prefer direct icon subpaths in shared libraries and bundle-sensitive entry points.
Keep framework and Mingcute package versions aligned across server and client environments where applicable.
Use framework components or standalone SVG when gradients, masks, patterns, or original colors must be preserved exactly.
Style icons with color, className, or style.

Integration with Definitions

@mingcute/icons owns icon names, normalized geometry, SVG resources, layers, and metadata.

@mingcute/react owns:

React component rendering;
prop and attribute handling;
accessibility behavior;
resource ID scoping; and
framework-specific refs and lifecycle behavior.

This separation prevents duplicate icon data and keeps every framework adapter visually consistent.

pnpm --filter @mingcute/react check

License

Licensed under the Apache License 2.0.