Mingcute Pro

Mingcute Pro is a comprehensive, carefully designed icon system with 20,152 styled icon definitions across the Core, Cute, and Sharp families.

Icons are available as:

• Framework components
• Standalone SVG files
• WOFF2 icon fonts
• Framework-neutral icon definitions

@mingcute/cli activates your Mingcute Pro entitlement and configures secure access to the private Pro package registry.

When you log in, the CLI:

1. validates your Mingcute Pro or eligible MGC All-Access license;
2. activates the current device;
3. creates a scoped, revocable registry token; and
4. configures your npm-compatible package manager to access Mingcute Pro packages.

Your license is checked when Pro packages are downloaded or updated. Installed icons do not make license or network requests while your application runs.

Quick Start

You need:

• Node.js 18.18 or newer
• An active license from Mingcute

1. Log in and configure package access

npx @mingcute/cli

Enter your license key in the masked prompt.

For security, license keys can only be entered through the interactive prompt. The key is used to validate your entitlement and is never written to disk or added to .npmrc.

2. Install the package for your framework

For example, to use Mingcute Pro with React:

npm install @mingcute/react-pro

3. Import an icon

import { Home1Duotone } from '@mingcute/react-pro/core-duotone';

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

Replace @mingcute/react-pro with the package for your framework when needed.

How Access Works

The CLI separates your license key from the credentials used to download packages:

• Your license key validates your Mingcute Pro entitlement.
• Your device activation identifies the device using your entitlement.
• Your registry token provides scoped, revocable access to private packages.
• Your npm configuration tells your package manager where to download @mingcute packages.

The license key is not saved after login. Future package installations use the registry token stored in your selected npm configuration.

CLI Commands

Use the CLI without installing it globally:

npx @mingcute/cli <command>

| Command | Purpose | | -------------------------------- | ------------------------------------------------------------------ | | npx @mingcute/cli login | Log in, activate the current device, and configure package access | | npx @mingcute/cli status | Check registry access and local npm configuration | | npx @mingcute/cli whoami | Show the account and entitlement associated with the current token | | npx @mingcute/cli refresh | Replace the current registry token | | npx @mingcute/cli logout | Revoke the token and remove managed configuration | | npx @mingcute/cli check | Diagnose authentication and npm configuration problems | | npx @mingcute/cli configure-ci | Print secure CI registry configuration | | npx @mingcute/cli --help | Show available commands and options |

Running the following command without a subcommand starts the interactive login flow:

npx @mingcute/cli

Global installation

A global installation provides the shorter mingcute command:

npm install --global @mingcute/cli
mingcute --help

npx runs Mingcute without a global install. Use npx @mingcute/cli <command>, such as npx @mingcute/cli status. If global installation fails with EACCES, continue with npx; do not use sudo.

Packages

Mingcute Pro packages are distributed through the private Mingcute registry.

Install only the package required by your project.

| Target | Package | Purpose | | ------------------ | ------------------------------ | ------------------------------------------ | | React | @mingcute/react-pro | Typed React SVG components | | Vue | @mingcute/vue-pro | Typed Vue 3 SVG components | | React Native | @mingcute/react-native-pro | Native components using react-native-svg | | Svelte | @mingcute/svelte-pro | Svelte 5 components | | SolidJS | @mingcute/solid-pro | SolidJS components | | Vanilla JavaScript | @mingcute/vanilla-pro | SVG strings and DOM helpers | | Web Components | @mingcute/web-components-pro | Explicitly registered custom elements | | SVG | @mingcute/svg-pro | Optimized standalone SVG files | | Font | @mingcute/font-pro | WOFF2 fonts, CSS classes, and metadata | | Icon definitions | @mingcute/icons-pro | Framework-neutral definitions and renderer |

Framework packages use @mingcute/icons-pro for shared icon geometry instead of bundling duplicate definitions. It is installed automatically when required.

Package-manager examples

# npm
npm install @mingcute/react-pro

# pnpm
pnpm add @mingcute/react-pro

# Yarn
yarn add @mingcute/react-pro

# Bun
bun add @mingcute/react-pro

Icon Families and Styles

Mingcute Pro contains 20,152 styled icon definitions across 12 importable family and style combinations.

| Import subpath | Family and style | Icons | | --------------- | ----------------------------------------------------- | ---------: | | core-regular | Core Regular, including Original and Mono brand icons | 1,859 | | core-filled | Core Filled | 1,663 | | core-duotone | Core Duotone | 1,663 | | core-light | Core Light | 1,663 | | core-twotone | Core Twotone | 1,663 | | cute-light | Cute Light | 1,663 | | cute-regular | Cute Regular | 1,663 | | cute-filled | Cute Filled | 1,663 | | cute-duotone | Cute Duotone | 1,663 | | sharp-light | Sharp Light | 1,663 | | sharp-regular | Sharp Regular | 1,663 | | sharp-filled | Sharp Filled | 1,663 | | Total | All family and style combinations | 20,152 |

Core Regular contains more icons because it also includes the Original and Mono brand collections.

Brand icons use collision-free component names and are exported from core-regular.

Usage

React

import { Home1Duotone } from '@mingcute/react-pro/core-duotone';

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

Vue

<script setup lang="ts">
import { Home1CuteRegular } from '@mingcute/vue-pro/cute-regular';
</script>

<template>
  <Home1CuteRegular :size="24" title="Home" />
</template>

React Native

import { Home1Duotone } from '@mingcute/react-native-pro/core-duotone';

export function HomeIcon() {
  return (
    <Home1Duotone
      size={24}
      primaryColor="#10161F"
      secondaryColor="#007AFF"
      title="Home"
    />
  );
}

React Native requires react-native-svg 13 or newer.

Svelte

<script>
  import { Home1SharpRegular } from '@mingcute/svelte-pro/sharp-regular';
</script>

<Home1SharpRegular size={24} title="Home" />

SolidJS

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

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

Vanilla JavaScript

import { createIcon } from '@mingcute/vanilla-pro';
import { Home1Regular } from '@mingcute/vanilla-pro/core-regular';

const navigation = document.querySelector('nav');

navigation?.append(
  createIcon(Home1Regular, {
    size: 24,
    title: 'Home',
  }),
);

Web Components

Register the component before using it:

import { defineHome1Regular } from '@mingcute/web-components-pro/core-regular/home-1';

defineHome1Regular();

Then use the custom element:

<mingcute-home-1-regular
  size="24"
  title="Home"
></mingcute-home-1-regular>

Standalone SVG

import homeUrl from '@mingcute/svg-pro/core-regular/home-1.svg';

Icon Font

Import the stylesheet:

import '@mingcute/font-pro/core-regular.min.css';

Then use the icon class:

<i class="mgc mgc-home-1-regular" aria-hidden="true"></i>

Framework-Neutral Definitions

import { renderIconSource } from '@mingcute/icons-pro';
import { Home1Icon } from '@mingcute/icons-pro/core-regular';

const svg = renderIconSource(Home1Icon);

Importing and Tree Shaking

Style imports

Use a style entry point when importing multiple icons from the same style:

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

This approach provides convenient named imports and works with supported tree-shaking toolchains.

Direct icon imports

Use a direct icon subpath when you want the smallest possible module graph:

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

Package roots expose utilities and types rather than the complete icon catalogue.

Mingcute Pro JavaScript packages:

• are ESM-only;
• publish explicit export maps; and
• support tree shaking.

npm Configuration

Login updates your user-level npm configuration by default.

Use a project-level or custom configuration when the token should only apply to a particular project or file.

# Configure the current project
npx @mingcute/cli login --project

# Inspect a custom npm configuration
npx @mingcute/cli status --npmrc ./config/npmrc

| Option | Purpose | | ------------------------ | --------------------------------------------------------- | | --project | Use .npmrc in the current project | | --user | Use the user-level npm configuration; this is the default | | --npmrc <path> | Use a specific npm configuration file | | --instance-name <name> | Set the device display name | | --token-name <name> | Set the registry token display name | | --help | Show the help screen | | -v, --version | Show the installed CLI version |

Use only one configuration target at a time:

• --project
• --user
• --npmrc <path>

For security, license keys cannot be supplied through command-line arguments. Enter them only through the masked interactive prompt.

Continuous Integration

Generate the recommended CI configuration on a trusted local device:

npx @mingcute/cli configure-ci

Store MINGCUTE_REGISTRY_TOKEN in your CI provider’s protected secret store.

Your CI configuration should:

1. keep the @mingcute registry mapping in the project configuration;
2. inject authentication during the trusted installation step;
3. read the token from MINGCUTE_REGISTRY_TOKEN; and
4. avoid committing authenticated .npmrc files or real registry tokens.

Interactive login is not intended for CI environments. CI should use a scoped registry token rather than a license key.

Compatibility

| Package | Supported runtime | | -------------------------------------------- | --------------------------------------------------------- | | @mingcute/cli | Node.js 18.18 or newer | | @mingcute/react-pro | React 18 or 19 | | @mingcute/vue-pro | Vue 3.5 or newer | | @mingcute/react-native-pro | React 18+, React Native 0.72+, and react-native-svg 13+ | | @mingcute/svelte-pro | Svelte 5.20 or newer | | @mingcute/solid-pro | SolidJS 1.9.x | | Vanilla Pro, Web Components Pro, and SVG Pro | Modern ESM toolchains | | Font Pro | Modern browsers with WOFF2 support |

The managed npm configuration works with npm, pnpm, Yarn configurations that honor npm registry settings, and Bun.

Accessibility

Icons should be exposed to assistive technology only when they communicate information that is not already available through surrounding text.

The examples below use these React imports:

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

Meaningful icons

Provide an accessible title when an icon communicates meaning on its own:

<Home1Regular size={24} title="Home" />

Decorative icons

Hide decorative icons from assistive technology:

<Home1Regular size={24} aria-hidden="true" />

Icons inside labelled controls

When an icon appears inside a button or link that already has an accessible label, the icon should usually be decorative:

<button type="button">
  <Home1Regular size={20} aria-hidden="true" />
  <span>Home</span>
</button>

For icon-only controls, provide an accessible name on the control itself:

<button type="button" aria-label="Open navigation">
  <MenuRegular size={20} aria-hidden="true" />
</button>

Do not rely on an icon’s visual appearance alone to communicate an action, status, or meaning.

Troubleshooting

mingcute is not found

The shorter mingcute command is only available after a successful global installation.

Use the complete npx command instead:

npx @mingcute/cli status

A Pro package returns 404 before login

Log in first:

npx @mingcute/cli

Then retry the installation using the same npm configuration target.

Check the active configuration with:

npx @mingcute/cli status

The registry returns 401 or 403

Run the diagnostic command:

npx @mingcute/cli check

Use refresh when the registry token has expired or been revoked:

npx @mingcute/cli refresh

Use login when your license entitlement must be validated or the device must be activated again:

npx @mingcute/cli login

The license is not recognized

Check the license-key characters and retry.

The masked prompt accepts standard Lemon Squeezy UUID-style license keys and limits the input length.

The device activation limit is reached

Deactivate an unused device through your customer account or contact Mingcute support.

Logging in again on the same machine reuses its saved device identity rather than creating a new device.

CI can install public packages but not Pro packages

Confirm that both of the following are available during the installation step:

• the @mingcute registry mapping;
• the MINGCUTE_REGISTRY_TOKEN environment variable.

Run the following command again to generate the expected configuration:

npx @mingcute/cli configure-ci

An icon import cannot be resolved

Confirm:

• the package name;
• the family and style subpath;
• the icon name; and
• the expected import format.

Component exports use PascalCase names with a style suffix:

Home1Regular

Direct icon filenames use kebab-case:

home-1

The wrong .npmrc file is being changed

Choose exactly one configuration target:

npx @mingcute/cli login --project

npx @mingcute/cli login --user

npx @mingcute/cli login --npmrc ./config/npmrc

Pass the same option when using status or check.

Configuration cannot be written

Check the ownership and permissions of the target file and its parent directory.

To reduce unsafe configuration changes, the CLI rejects symbolic-link targets and unsafe writes.

Security and Privacy

• License keys are masked and used only to validate your entitlement.
• License keys are never saved to disk or added to .npmrc.
• The saved device identifier is random, non-secret, and not derived from hardware information.
• Registry tokens are read-only, scoped, and revocable.
• Registry tokens are separate from license keys.
• Status, identity, refresh, and diagnostic commands never print raw tokens.
• Configuration updates use atomic, permission-restricted writes.
• Configuration updates reject symbolic-link targets.
• Logout attempts to revoke the token before removing local configuration.
• The published CLI contains no Pro icon assets.
• The published executable contains no source maps, source files, or private runtime dependencies.

These protections secure package authorization and delivery without adding runtime license checks to applications.

Licensed customers can inspect package files installed on their own devices.

Design Resources

• Mingcute Website
• MGC Icon System
• Mingcute Figma Plugin
• MGC UI Kit
• MGC Weather Icons
• MGC Animation Icons
• Mingcute MCP Server

Licensing

@mingcute/cli is licensed under Apache-2.0.

Mingcute Pro icon packages are distributed under the Mingcute Pro Commercial License.

For product support or security concerns, visit the Mingcute website or the Mingcute GitHub organization.