Universal Icon Library

Monicon is an easy-to-use icon orchestration tool that makes adding icons to your projects simple. Access 200,000+ icons from popular sets like Material Design, Feather, and Font Awesome.

Get Started Explore Icons

🎨

200,000+ Icons

Access a vast collection of icons from popular icon sets including Material Design, Feather, Font Awesome, Lucide, and many more.

🚀

Framework Agnostic

Works seamlessly with React, Vue, Svelte, Next.js, Nuxt, React Native, and more. One configuration for all frameworks.

⚡

Type-Safe

Full TypeScript support with auto-generated types for all your icons, providing excellent developer experience.

📦

Tree-Shakeable

Only bundle the icons you actually use. Monicon generates individual icons as separate files for optimal bundle size.

🔧

Customizable

Load icons from multiple sources: online collections, local files, or custom JSON. Create your own plugin for any output format.

⚙️

Simple Configuration

Configure once in monicon.config.ts and integrate with your favorite bundler: Vite, Webpack, Rollup, esbuild, or Rspack.

How It Works

Define your configuration and select the icons you need. Monicon will automatically generate optimized icon components tailored to your framework.

monicon.config.ts

import type { MoniconConfig } from "@monicon/core";
import { react } from "@monicon/core/plugins";

export default {
  icons: ["mdi:home"],
  plugins: [
    react(),
  ],
} satisfies MoniconConfig;

import type { MoniconConfig } from "@monicon/core";import { react } from "@monicon/core/plugins";export default {  icons: ["mdi:home"],  plugins: [    react(),  ],} satisfies MoniconConfig;

Generated Files

home.tsx

Made by @senkanoktay