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.

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.

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;
}

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>

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.

MingCute Icons Figma plugin

• 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

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.