Mingcute Icons
Carefully Designed Icon Library
Overview
Mingcute Icons is the public, open-source distribution of the Mingcute Icon System.
It provides 1,663 icons in both Core Regular and Core Filled, for a total of 3,326 styled icon definitions, distributed across 10 production packages for:
- React
- Vue
- React Native
- Svelte
- SolidJS
- Vanilla JavaScript
- Web Components
- Standalone SVG
- WOFF2 icon fonts
- Framework-neutral definitions
Every renderer uses the same generated @mingcute/icons definitions. Icon geometry is compiled once rather than duplicated across framework packages, keeping rendering consistent and the repository easier to maintain.
Highlights
- 3,326 styled definitions: 1,663 icons in Core Regular and Core Filled.
- 10 production packages: framework components, SVG, fonts, and framework-neutral definitions.
- Consistent rendering: every package is generated from the same canonical artwork.
- Tree-shakeable imports: use style entry points for convenience or direct icon paths for smaller module graphs.
- Accessible behavior: components remain decorative unless given an accessible title or label.
- Typed packages: framework adapters include generated declarations and typed component props.
- High-fidelity SVG: gradients, masks, clipping paths, and self-contained patterns are preserved.
- No duplicated geometry: framework adapters consume
@mingcute/icons.
Design Foundation
Every Mingcute icon is drawn on a 24 × 24 grid with consistent visual proportions.
The public catalogue includes:
Core Regular is designed around a consistent 2 px stroke. Canonical vector artwork remains editable in the source files and scales through SVG without losing its intended proportions.
Use the Mingcute website to:
- search the icon catalogue;
- preview icons;
- adjust icon size and color; and
- download individual SVG or PNG assets.
Use the packages in this repository when icons need to be installed, versioned, tree-shaken, and rendered consistently in an application.
Quick Start
1. Install the package for your framework
For React:
npm install @mingcute/react
For another framework, replace @mingcute/react with the appropriate package listed below.
2. Import an icon
import { Home1Regular } from '@mingcute/react/core-regular';
export function HomeLink() {
return (
<a href="/">
<Home1Regular size={20} aria-hidden="true" />
<span>Home</span>
</a>
);
}
Packages
Install only the package required by your project.
| Target |
Package |
Installation |
Purpose |
| Icon definitions |
@mingcute/icons |
npm install @mingcute/icons |
Framework-neutral definitions and rendering helpers |
| React |
@mingcute/react |
npm install @mingcute/react |
Typed React SVG components |
| Vue |
@mingcute/vue |
npm install @mingcute/vue |
Typed Vue 3 SVG components |
| React Native |
@mingcute/react-native |
npm install @mingcute/react-native |
Native components using react-native-svg |
| Svelte |
@mingcute/svelte |
npm install @mingcute/svelte |
Svelte 5 icon components |
| SolidJS |
@mingcute/solid |
npm install @mingcute/solid |
SolidJS icon components |
| Vanilla JavaScript |
@mingcute/vanilla |
npm install @mingcute/vanilla |
SVG strings and DOM helpers |
| Web Components |
@mingcute/web-components |
npm install @mingcute/web-components |
Explicitly registered custom elements |
| SVG |
@mingcute/svg |
npm install @mingcute/svg |
Optimized standalone SVG files |
| Font |
@mingcute/font |
npm install @mingcute/font |
WOFF2 fonts, CSS classes, and metadata |
Framework packages use @mingcute/icons for shared icon geometry. The definitions package is installed automatically when required.
Package-manager examples
# npm
npm install @mingcute/react
# pnpm
pnpm add @mingcute/react
# Yarn
yarn add @mingcute/react
# Bun
bun add @mingcute/react
Available Styles
The public release contains 3,326 styled icon definitions across two importable 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.
Free and Pro
| Capability |
Mingcute Icons |
Mingcute Pro |
| Families and styles |
Core Regular and Core Filled |
12 Core, Cute, and Sharp style combinations |
| Styled definitions |
3,326 |
20,152 |
| Package names |
@mingcute/* |
@mingcute/*-pro |
| Distribution |
Public npm registry |
Private Mingcute registry |
| Access |
No account or CLI required |
Active Pro entitlement and CLI configuration |
| License |
Apache-2.0 |
Mingcute Pro Commercial License |
The public and Pro packages use the same framework conventions and import structure. This makes migration straightforward while keeping the source repositories and licensing boundaries separate.
Usage
React
import { Home1Regular } from '@mingcute/react/core-regular';
export function HomeIcon() {
return <Home1Regular size={24} title="Home" />;
}
Vue
<script setup lang="ts">
import { Home1Filled } from '@mingcute/vue/core-filled';
</script>
<template>
<Home1Filled :size="24" title="Home" />
</template>
React Native
import { Home1Regular } from '@mingcute/react-native/core-regular';
export function HomeIcon() {
return <Home1Regular size={24} color="#10161F" title="Home" />;
}
React Native requires react-native-svg 13 or newer.
Svelte
<script>
import { Home1Regular } from '@mingcute/svelte/core-regular';
</script>
<Home1Regular size={24} title="Home" />
SolidJS
import { Home1Regular } from '@mingcute/solid/core-regular';
export function HomeIcon() {
return <Home1Regular size={24} title="Home" />;
}
Vanilla JavaScript
import { createIcon } from '@mingcute/vanilla';
import { Home1Regular } from '@mingcute/vanilla/core-regular';
const navigation = document.querySelector('nav');
navigation?.append(
createIcon(Home1Regular, {
size: 24,
title: 'Home',
}),
);
Web Components
Register the component:
import { defineHome1Regular } from '@mingcute/web-components/core-regular/home-1';
defineHome1Regular();
Use the registered custom element:
<mingcute-home-1-regular
size="24"
title="Home"
></mingcute-home-1-regular>
Standalone SVG
import homeUrl from '@mingcute/svg/core-regular/home-1.svg';
Icon Font
Import the stylesheet:
import '@mingcute/font/core-regular.min.css';
Use the generated class:
<i class="mgc mgc-home-1-regular" aria-hidden="true"></i>
Framework-Neutral Definitions
import { renderIconSource } from '@mingcute/icons';
import { Home1Icon } from '@mingcute/icons/core-regular';
const svg = renderIconSource(Home1Icon);
Package Model
@mingcute/icons contains the framework-neutral icon definitions.
Framework packages provide small renderer-specific wrappers and install the shared definitions automatically:
@mingcute/icons
├── @mingcute/react
├── @mingcute/vue
├── @mingcute/react-native
├── @mingcute/svelte
├── @mingcute/solid
├── @mingcute/vanilla
└── @mingcute/web-components
This structure prevents icon geometry from being duplicated across framework packages.
The standalone SVG and font packages are generated from the same canonical artwork and validated independently.
Import Strategy
Style entry points
Use a style entry point for convenient named imports:
import {
Home1Regular,
Search2Regular,
} from '@mingcute/react/core-regular';
Direct icon imports
Use a direct icon path for the smallest module graph:
import Home1Regular from '@mingcute/react/core-regular/home-1';
Package roots expose shared utilities and types rather than the complete icon catalogue. This prevents accidental imports of every icon.
Mingcute JavaScript packages:
- are ESM-only;
- publish explicit export maps;
- support tree shaking; and
- declare side effects only where required.
JavaScript packages declare sideEffects: false.
@mingcute/font marks imported CSS as side-effectful so bundlers retain the stylesheet.
For predictable bundle sizes:
- use direct icon imports in shared libraries and performance-sensitive entry points;
- avoid namespace imports from style entry points;
- code-split icon-heavy features with their application routes;
- use your framework’s bundle analyzer to verify production output; and
- prefer SVG components over icon fonts when gradients, masks, patterns, or original colors must be preserved.
Accessibility
Framework components are decorative by default and remain hidden from assistive technology unless they receive an accessible title or label.
The examples below use these React imports:
import {
Home1Regular,
MenuRegular,
} from '@mingcute/react/core-regular';
Meaningful icons
Provide a title when an icon communicates meaning by itself:
<Home1Regular size={24} title="Home" />
Decorative icons
Keep decorative icons hidden from assistive technology:
<Home1Regular size={24} aria-hidden="true" />
Icons inside labelled controls
When visible text already labels a button or link, the icon should normally remain decorative:
<button type="button">
<Home1Regular size={20} aria-hidden="true" />
<span>Home</span>
</button>
Icon-only controls
Give the control an accessible name and keep the icon decorative:
<button type="button" aria-label="Open navigation">
<MenuRegular size={20} aria-hidden="true" />
</button>
Do not rely on an icon’s shape or color alone to communicate an action, status, or meaning.
Rendering
The compiler preserves supported SVG features, including:
- standard SVG geometry;
- gradients;
- masks;
- clipping paths; and
- self-contained image patterns.
Resource identifiers are scoped per rendered instance to prevent collisions when the same icon appears more than once on a page.
Icon fonts cannot reproduce every SVG feature. Use the SVG or framework packages when exact gradients, masks, patterns, or original colors are required.
Compatibility
| Package |
Supported runtime |
@mingcute/react |
React 18 or 19 |
@mingcute/vue |
Vue 3.5 or newer |
@mingcute/react-native |
React 18+, React Native 0.72+, and react-native-svg 13+ |
@mingcute/svelte |
Svelte 5.20 or newer |
@mingcute/solid |
SolidJS 1.9.x |
| Vanilla, Web Components, and SVG |
Modern ESM toolchains and standards-compliant SVG environments |
| Font |
Modern browsers with WOFF2 support |
Repository development requires:
- Node.js 22 or newer
- pnpm 9.15.0
Consumer applications do not need pnpm unless they are contributing to this repository.
Troubleshooting
An icon import cannot be resolved
Confirm:
- the package name;
- the style subpath;
- the component name; and
- the direct icon filename, when applicable.
Component exports use PascalCase with a style suffix:
Home1Regular
Direct icon filenames use kebab-case:
home-1
The production bundle is larger than expected
Use a direct icon import:
import Home1Regular from '@mingcute/react/core-regular/home-1';
Confirm that your bundler supports ESM tree shaking and avoid namespace imports of complete style entry points.
An icon is announced twice
Keep the icon decorative when nearby text already labels the action:
<button type="button">
<Home1Regular aria-hidden="true" />
<span>Home</span>
</button>
Only add a title or accessible label when the icon communicates meaning by itself.
Use the SVG or framework component package for maximum fidelity.
Icon fonts cannot reproduce every gradient, mask, pattern, or original-color asset.
Source and Generation
Canonical SVG artwork is stored using the following structure:
assets/svg/core/{regular,filled}/{category}/{icon}.svg
The source directories organize canonical artwork. Consumer packages flatten each style into stable package subpaths:
@mingcute/react/core-regular
@mingcute/svg/core-regular/home-1.svg
Because the style is already represented by the package subpath, generated files use concise names such as:
home-1.svg
The compiler:
- parses canonical SVG artwork;
- optimizes its structure;
- normalizes supported geometry and paint;
- validates rendering constraints; and
- passes the result to package-specific generators.
Generated package output should not be edited by hand.
Repository Structure
mingcute-icons/
├── assets/
│ └── svg/core/{regular,filled}/
├── packages/
│ ├── core/ private build contracts
│ ├── compiler/ private SVG compiler
│ ├── icons/ @mingcute/icons
│ ├── react/ @mingcute/react
│ ├── vue/ @mingcute/vue
│ ├── react-native/ @mingcute/react-native
│ ├── svelte/ @mingcute/svelte
│ ├── solid/ @mingcute/solid
│ ├── vanilla/ @mingcute/vanilla
│ ├── web-components/ @mingcute/web-components
│ ├── svg/ @mingcute/svg
│ └── font/ @mingcute/font
├── release.json coordinated public package version
└── pnpm-workspace.yaml
@mingcute/core and @mingcute/compiler are private workspace packages. They are never published and must not appear in consumer runtime dependency trees.
Development
Prerequisites
- Node.js 22 or newer
- pnpm 9.15.0
Install and validate
pnpm install --frozen-lockfile
pnpm build
pnpm check
pnpm release:check
pnpm pack:dry
pnpm release:check verifies:
- the public package set;
- coordinated versions;
- Apache licensing;
- repository metadata;
- style boundaries;
- package contents; and
- the absence of private Pro delivery infrastructure.
Contributing
- Use Node.js 22 or newer and pnpm 9.15.0.
- Change canonical source or the owning generator instead of editing generated package output.
- Add focused tests for changes to compilation, rendering, exports, types, or accessibility.
- Run
pnpm check and pnpm pack:dry before opening a pull request.
- Keep Pro artwork, commercial license material, registry configuration, credentials, and private delivery code out of this repository.
Bug reports should include:
- the affected package and version;
- framework and bundler versions;
- the exact import path;
- the expected result;
- the actual result; and
- a minimal reproduction.
Release Policy
All 10 public packages use the coordinated version defined in release.json.
A release is complete only when every package passes:
- build checks;
- tests;
- type validation;
- package metadata validation; and
- packed-artifact checks.
Avoid documenting a fixed release version in this README. The current version should be read from package metadata or release.json.
Figma Plugin and Resources
Install the Mingcute Icon Figma plugin to search and place icons directly in Figma.
Related resources:
Security and Support
Do not report suspected vulnerabilities in a public issue.
Contact the Mingcute team privately through the Mingcute website and include the affected versions and reproduction details.
For package usage or rendering defects, include:
- the package name and version;
MingCute Icons 是一个开源图标库，含 Core Regular 和 Core Filled 两种风格的 1,663 个图标（共 3,326 个定义），以 React、Vue、React Native、Svelte、SolidJS、原生 JS、Web 组件、SVG 和 WOFF2 字体等包的形式分发。