Monoicons React

A comprehensive collection of beautiful SVG icons as React components with full TypeScript support. Monoicons React provides over 900+ carefully crafted icons that are perfect for modern web applications.

✨ Features

• 🎨 900+ Beautiful Icons - Carefully designed SVG icons for every use case
• ⚛️ React Components - Each icon is a properly typed React component
• 📦 TypeScript Support - Full TypeScript support with proper type definitions
• 🎯 Customizable - Easy to customize size, color, and stroke width
• 🚀 Tree Shaking - Only import what you need for optimal bundle size
• 📱 Responsive - Icons scale perfectly on all screen sizes
• 🔧 Easy to Use - Simple and intuitive API
• ♿ Accessible - Built with accessibility in mind

📦 Installation

npm install monoicons-react

or

yarn add monoicons-react

or

pnpm add monoicons-react

🚀 Quick Start

import React from "react";
import { ActivityIcon, CheckCircleIcon, HomeIcon } from "monoicons-react";

function App() {
  return (
    <div>
      <ActivityIcon />
      <CheckCircleIcon size={32} color="#2ecc71" />
      <HomeIcon size={24} color="currentColor" strokeWidth={1.5} />
    </div>
  );
}

export default App;

📖 Usage Examples

Basic Usage

import { ActivityIcon } from "monoicons-react";

function MyComponent() {
  return <ActivityIcon />;
}

Custom Size and Color

import { CheckCircleIcon } from "monoicons-react";

function SuccessMessage() {
  return (
    <div>
      <CheckCircleIcon size={48} color="#2ecc71" strokeWidth={2} />
      <span>Success!</span>
    </div>
  );
}

With Event Handlers and Refs

import React, { useRef } from "react";
import { BookmarkIcon } from "monoicons-react";

function BookmarkButton() {
  const iconRef = useRef<SVGSVGElement>(null);

  const handleClick = () => {
    console.log("Icon clicked!");
    // Access the SVG element
    if (iconRef.current) {
      iconRef.current.style.transform = "scale(1.2)";
    }
  };

  return (
    <BookmarkIcon
      ref={iconRef}
      size={24}
      color="currentColor"
      onClick={handleClick}
      className="bookmark-btn"
      style={{ cursor: "pointer" }}
    />
  );
}

Using with CSS Classes

import { SettingsIcon } from "monoicons-react";

function SettingsButton() {
  return <SettingsIcon className="settings-icon" size={20} />;
}

.settings-icon {
  color: #666;
  transition: color 0.2s ease;
}

.settings-icon:hover {
  color: #007acc;
}

TypeScript Usage

import React from "react";
import { IconProps } from "monoicons-react";

interface ButtonProps {
  icon: React.ComponentType<IconProps>;
  label: string;
  variant?: "primary" | "secondary";
}

function IconButton({ icon: Icon, label, variant = "primary" }: ButtonProps) {
  const iconColor = variant === "primary" ? "#007acc" : "#666";

  return (
    <button className={`btn btn-${variant}`}>
      <Icon size={20} color={iconColor} />
      <span>{label}</span>
    </button>
  );
}

// Usage
import { Save02Icon, TrashIcon } from "monoicons-react";

function ActionButtons() {
  return (
    <div>
      <IconButton icon={Save02Icon} label="Save" variant="primary" />
      <IconButton icon={TrashIcon} label="Delete" variant="secondary" />
    </div>
  );
}

🎨 Available Icons

Monoicons React includes icons in the following categories:

• Activity & Status - Activity, check marks, alerts, notifications
• Navigation - Arrows, chevrons, menu, breadcrumbs
• Files & Folders - Documents, folders, downloads, uploads
• Communication - Mail, messages, phone, chat
• Media - Play, pause, stop, video, audio controls
• Commerce - Shopping cart, payment, currency, receipts
• Social - Share, like, bookmark, social networks
• System - Settings, preferences, system controls
• Weather - Sun, moon, clouds, temperature
• Transportation - Vehicles, maps, directions
• And many more...

Popular Icons

// Activity & Status
import {
  ActivityIcon,
  CheckCircleIcon,
  AlertTriangleIcon,
  CheckIcon,
  XCircleIcon,
} from "monoicons-react";

// Navigation
import {
  HomeIcon,
  SearchIcon,
  MenuIcon,
  ArrowLeftIcon,
  ChevronDownIcon,
} from "monoicons-react";

// Files & Data
import {
  File06Icon,
  FolderIcon,
  DownloadIcon,
  Upload01Icon,
  Save02Icon,
} from "monoicons-react";

// Communication
import {
  Mail01Icon,
  PhoneIcon,
  MessageCircle01Icon,
  Send01Icon,
} from "monoicons-react";

🔧 Props

All icon components accept the following props:

| Prop | Type | Default | Description | | ------------- | -------------------- | ---------------- | ------------------------------------------------------- | | size | number | 24 | Size of the icon in pixels (sets both width and height) | | color | string | "currentColor" | Color of the icon (any valid CSS color) | | strokeWidth | number | 2 | Stroke width for outlined icons | | className | string | undefined | CSS class name | | style | CSSProperties | undefined | Inline styles | | onClick | MouseEventHandler | undefined | Click event handler | | ref | Ref<SVGSVGElement> | undefined | React ref |

Plus all standard SVG element props (id, aria-label, etc.).

🎯 TypeScript Support

Monoicons React is built with TypeScript and provides full type safety:

import { IconProps, IconComponent } from "monoicons-react";

// Type for icon props
const iconProps: IconProps = {
  size: 24,
  color: "#007acc",
  strokeWidth: 2,
};

// Type for icon components
const MyIcon: IconComponent = ActivityIcon;

🌳 Tree Shaking

Monoicons React supports tree shaking out of the box. Only the icons you import will be included in your bundle:

// ✅ Only ActivityIcon will be bundled
import { ActivityIcon } from "monoicons-react";

// ❌ Don't do this - imports everything
import * as Icons from "monoicons-react";

♿ Accessibility

All icons include proper accessibility attributes:

// Add descriptive labels for screen readers
<ActivityIcon
  aria-label="Activity status"
  role="img"
/>

// Use with accessible button
<button aria-label="Save document">
  <Save02Icon />
</button>

🎨 Styling Examples

CSS Variables

:root {
  --icon-color: #333;
  --icon-hover-color: #007acc;
  --icon-size: 20px;
}

.icon {
  color: var(--icon-color);
  width: var(--icon-size);
  height: var(--icon-size);
  transition: color 0.2s ease;
}

.icon:hover {
  color: var(--icon-hover-color);
}

Styled Components

import styled from "styled-components";
import { ActivityIcon } from "monoicons-react";

const StyledIcon = styled(ActivityIcon)`
  color: #666;
  transition: all 0.2s ease;

  &:hover {
    color: #007acc;
    transform: scale(1.1);
  }
`;

Tailwind CSS

<ActivityIcon className="w-6 h-6 text-gray-600 hover:text-blue-600 transition-colors" />

🔄 Migrations

From other icon libraries

Monoicons React follows similar patterns to other popular icon libraries:

// Feather Icons
import { Activity } from "react-feather";
// Monoicons React
import { ActivityIcon } from "monoicons-react";

// Heroicons
import { CheckIcon } from "@heroicons/react/24/outline";
// Monoicons React
import { CheckIcon } from "monoicons-react";

// Lucide React
import { Home } from "lucide-react";
// Monoicons React
import { HomeIcon } from "monoicons-react";

📱 Examples

Loading Button

import { useState } from "react";
import { Loading01Icon, CheckIcon } from "monoicons-react";

function LoadingButton() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 2000));
    setLoading(false);
    setSuccess(true);
  };

  return (
    <button onClick={handleClick} disabled={loading}>
      {loading && <Loading01Icon className="animate-spin" size={16} />}
      {success && <CheckIcon size={16} color="#2ecc71" />}
      {!loading && !success && "Click me"}
    </button>
  );
}

Icon Navigation

import {
  HomeIcon,
  SearchIcon,
  User01Icon,
  Settings01Icon,
} from "monoicons-react";

function Navigation() {
  return (
    <nav className="flex space-x-4">
      <a href="/" className="nav-item">
        <HomeIcon size={20} />
        <span>Home</span>
      </a>
      <a href="/search" className="nav-item">
        <SearchIcon size={20} />
        <span>Search</span>
      </a>
      <a href="/profile" className="nav-item">
        <User01Icon size={20} />
        <span>Profile</span>
      </a>
      <a href="/settings" className="nav-item">
        <Settings01Icon size={20} />
        <span>Settings</span>
      </a>
    </nav>
  );
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Links

• GitHub Repository
• npm Package
• Documentation
• Issue Tracker

🙏 Acknowledgments

• Icons designed with ❤️ for the React community
• Inspired by modern design systems and icon libraries
• Built with TypeScript for better developer experience

Made with ❤️ by Jada Mohamed