MingCute Icon

MingCute is a set of simple and exquisite open-source icon library. Whether you're a designer or a developer, it's perfect for use in web and mobile.Every icon is designed within a 24 x 24 grid, giving outline and filled styles, 2px stroke. Support for SVG,PNG and webfont.

Usage

Website

Head on to the website of MingCute. Click the icons, you can adjust the color size, and then download the icons in SVG or PNG format.

Installation

Install npm package:

npm install mingcute_icon --save

Import CSS styles into the project entry file:

// main.js
import 'mingcute_icon/font/Mingcute.css'

Overwrite the initial color of the icon in the global style file:

// index.css
[class^='mgc_']::before,
[class*=' mgc_']::before {
  color: inherit !important;
}

Webfont

Copy the font files from /fonts and import the mingcute.css file. Add icon with class name, class name rule: mgc_{name}_{style}

<span class="mgc_search_line"></span>
<span class="mgc_search_fill"></span>

React

Import icons as standard React components through @mingcute/react package. 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>
  );
}

For more details, see the documentation.

Vue

Import icons as standard Vue components through @mingcute/vue package. All icons accept size and color props.

<template>
  <div>
    {/* Default: 24px size and currentColor */}
    <MingcuteFill />

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

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

<script setup>
import { MingcuteFill, Home1Line, SearchLine } from '@mingcute/vue';
</script>

For more details, see the documentation.

Figma Plug

MingCute Icons Figma plugin

MGC Design Resources

• MGC UI - Design system and UI Kit for Figma
• MGC Icon System - 15,000 vector icons across nine styles
• MGC Weather icons - 120 graceful weather icons
• MGC Animation icons - 120+ lively and smooth animated icons

Preview

License

MingCute icon is available under Apache-2.0 License. Feel free to use the set in both personal and commercial projects. Attribution is much appreciated but not required. The only thing we ask is that these icons are not for sale.