npm package: @newmindai/mecellem-icons
Description: Mecellem Icon library
Latest version: 0.1.14

<div align="center">
  <img src="https://mecellem.com/assets/images/mecellem_icons.png" alt="Mecellem Icons Logo" />

  # Mecellem Icons

  **Enterprise Icon Library for React**

  765+ production-ready SVG icons optimized for modern web applications.
  Lightweight, customizable, and fully typed.

  [![npm version](https://img.shields.io/npm/v/@newmindai/mecellem-icons?style=flat-square&color=5C4EE5)](https://www.npmjs.com/package/@newmindai/mecellem-icons)
  [![npm downloads](https://img.shields.io/npm/dm/@newmindai/mecellem-icons?style=flat-square&color=5C4EE5)](https://www.npmjs.com/package/@newmindai/mecellem-icons)
  [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-5C4EE5.svg?style=flat-square)](https://opensource.org/licenses/Apache-2.0)
  [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
  [![React](https://img.shields.io/badge/React-19+-61DAFB?style=flat-square&logo=react&logoColor=black)](https://react.dev/)

  [Documentation](#quick-start) · [Icon Categories](#icon-categories) · [Examples](#usage-examples) · [Contributing](#contributing)
</div>

---

## About

Mecellem Icons is the official icon library developed by <a href="http://www.newmind.ai" target="_blank" rel="noopener noreferrer">NewMind AI</a> to support <a href="http://www.mecellem.com/" target="_blank" rel="noopener noreferrer">Mecellem Dynamics</a>' mission of delivering actionable insights with unmatched precision. Through custom designs and advanced visualization tools, Mecellem Dynamics empowers users to interpret complex information more swiftly and accurately.

Mecellem Icons provides a comprehensive collection of 765+ SVG icons optimized for React applications with full TypeScript support and minimal bundle size through tree-shaking. You can also <a href="https://www.youtube.com/watch?v=YKzBE8mh1C8" target="_blank" rel="noopener noreferrer">watch our video</a> to explore Mecellem Icons.

---

## Features

| Feature | Description |
|---------|-------------|
| 765+ Icons | Comprehensive icon set covering UI, business, files, social, and more |
| Lightweight | Factory pattern with tree-shakeable exports for minimal bundle size |
| TypeScript First | Complete type definitions with IntelliSense support |
| Customizable | Size, color, rotation, flip, and animation props |
| Accessible | Built-in title prop for screen reader support |
| Zero Dependencies | Only peer dependency is React |

---

## Installation

```bash
npm install @newmindai/mecellem-icons
```

<details>
<summary>Other package managers</summary>

```bash
# Yarnz
yarn add @newmindai/mecellem-icons

# pnpm
pnpm add @newmindai/mecellem-icons

# Bun
bun add @newmindai/mecellem-icons
```

</details>

**Requirements:** React 19.0.0 or higher

## Quick Start

### 1. Import Styles

Add the icon styles to your application entry point:

```tsx
// main.tsx or App.tsx
import '@newmindai/mecellem-icons/styles.css'
```

### 2. Use Icons

```tsx
import { SearchIcon, UserIcon, SettingsIcon } from '@newmindai/mecellem-icons'

export default function App() {
  return (
    <nav className="flex gap-4">
      <SearchIcon />
      <UserIcon size={20} />
      <SettingsIcon color="#5C4EE5" />
    </nav>
  )
}
```

---

## API Reference

### Icon Props

All icons accept the following props:

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `number \| string` | `24` | Icon size in pixels or CSS unit |
| `color` | `string` | `currentColor` | Icon color (any valid CSS color) |
| `title` | `string` | `-` | Accessible title for screen readers |
| `className` | `string` | `-` | Additional CSS classes |
| `style` | `CSSProperties` | `-` | Inline styles |
| `rotate` | `number` | `-` | Rotation in degrees |
| `flip` | `'horizontal' \| 'vertical' \| 'both'` | `-` | Flip direction |
| `spin` | `boolean` | `false` | Enable spinning animation |
| `spinDuration` | `number` | `1000` | Spin animation duration in milliseconds |

---

## Usage Examples

<details>
<summary>Basic Usage</summary>

```tsx
import { HomeIcon, BellIcon, HeartIcon } from '@newmindai/mecellem-icons'

// Default size (24px)
<HomeIcon />

// Custom size
<BellIcon size={32} />
<HeartIcon size="2rem" />

// Custom color
<HeartIcon color="#ef4444" />
<BellIcon color="var(--primary-color)" />

// Using currentColor (inherits from parent)
<span className="text-blue-500">
  <HomeIcon /> {/* Icon will be blue */}
</span>
```

</details>

<details>
<summary>Transformations</summary>

```tsx
import { ArrowRightIcon, ChevronDownIcon } from '@newmindai/mecellem-icons'

// Rotate
<ArrowRightIcon rotate={90} />   {/* Points down */}
<ArrowRightIcon rotate={180} />  {/* Points left */}
<ArrowRightIcon rotate={270} />  {/* Points up */}

// Flip
<ChevronDownIcon flip="horizontal" />
<ChevronDownIcon flip="vertical" />
<ChevronDownIcon flip="both" />

// Combine transformations
<ArrowRightIcon rotate={45} flip="horizontal" />
```

</details>

<details>
<summary>Animation</summary>

```tsx
import { LoaderIcon, RefreshIcon, SettingsIcon } from '@newmindai/mecellem-icons'

// Spinning loader (default 1 second)
<LoaderIcon spin />

// Custom spin duration
<RefreshIcon spin spinDuration={2000} />

// Slow spinning settings icon
<SettingsIcon spin spinDuration={3000} />
```

</details>

<details>
<summary>Accessibility</summary>

```tsx
import { SearchIcon, CloseIcon, MenuIcon } from '@newmindai/mecellem-icons'

// Interactive icons should have accessible titles
<button aria-label="Search">
  <SearchIcon title="Search" />
</button>

<button aria-label="Close dialog">
  <CloseIcon title="Close" />
</button>

// Decorative icons can be hidden from screen readers
<MenuIcon aria-hidden="true" />
```

</details>

<details>
<summary>Styling with Tailwind CSS</summary>

```tsx
import { StarIcon, HeartIcon } from '@newmindai/mecellem-icons'

// With Tailwind classes
<StarIcon className="text-yellow-500 hover:scale-110 transition-transform" />

// With inline styles
<HeartIcon style={{ filter: 'drop-shadow(0 0 4px red)' }} />

// Combined styling
<StarIcon
  size={28}
  color="#fbbf24"
  className="transition-all hover:rotate-12 cursor-pointer"
/>
```

</details>

<details>
<summary>With Mecellem UI Components</summary>

```tsx
import { Button, Input } from '@newmindai/mecellem-ui'
import { SearchIcon, SendIcon, PlusIcon } from '@newmindai/mecellem-icons'

// Button with icon
<Button leftIcon={<PlusIcon size={16} />}>
  Add Item
</Button>

<Button rightIcon={<SendIcon size={16} />}>
  Send Message
</Button>

// Input with icon
<Input
  placeholder="Search..."
  leftAddon={<SearchIcon size={18} />}
/>
```

</details>

---

## Icon Categories

### UI & Navigation

```
ArrowDownIcon       ArrowUpIcon         ArrowLeftIcon       ArrowRightIcon
ChevronDownIcon     ChevronUpIcon       ChevronLeftIcon     ChevronRightIcon
MenuIcon            CloseIcon           SearchIcon          FilterIcon
SortIcon            GridIcon            ListIcon            HomeIcon
SettingsIcon        MoreIcon            ExternalLinkIcon    LinkIcon
```

### Actions

```
AddIcon             EditIcon            DeleteIcon          CopyIcon
SaveIcon            DownloadIcon        UploadIcon          ShareIcon
PrintIcon           RefreshIcon         UndoIcon            RedoIcon
DragIcon            ExpandIcon          CollapseIcon        FullscreenIcon
```

### Status & Feedback

```
CheckIcon           CheckCircleIcon     CloseCircleIcon     InfoIcon
WarningIcon         ErrorIcon           LoaderIcon          SpinnerIcon
SuccessIcon         QuestionIcon        HelpIcon            AlertIcon
```

### Files & Documents

```
FileIcon            FolderIcon          PdfIcon             ExcelIcon
WordIcon            CsvIcon             ImageIcon           VideoIcon
AudioIcon           ZipIcon             CodeIcon            HtmlIcon
JsonIcon            XmlIcon             TextIcon            DocumentIcon
```

### Communication

```
EmailIcon           MessageIcon         PhoneIcon           ChatIcon
NotificationIcon    BellIcon            SendIcon            InboxIcon
CommentIcon         MentionIcon         ReplyIcon           ForwardIcon
```

### Users & Social

```
UserIcon            UsersIcon           ProfileIcon         TeamIcon
LinkedInIcon        TwitterIcon         FacebookIcon        GitHubIcon
InstagramIcon       YouTubeIcon         SlackIcon           DiscordIcon
```

### Business

```
ChartIcon           GraphIcon           ReportIcon          DashboardIcon
BriefcaseIcon       BuildingIcon        CalendarIcon        ClockIcon
DollarIcon          CreditCardIcon      ReceiptIcon         InvoiceIcon
```

### Technology

```
AiBrainIcon         BlockchainIcon      CloudIcon           DatabaseIcon
ServerIcon          ApiIcon             CodeBranchIcon      TerminalIcon
GitIcon             ContainerIcon       KubernetesIcon      SecurityIcon
```

> **Note:** This list shows a subset of the 765+ available icons. All icons follow the `{Name}Icon` naming convention.

---

## Bundle Size Optimization

Mecellem Icons uses a factory pattern to minimize bundle size:

- Only imported icons are included in your final bundle
- All icons share a single base component (~1KB)
- Each icon adds minimal overhead (~100-300 bytes)

```tsx
// Only SearchIcon is bundled (~1.1KB total)
import { SearchIcon } from '@newmindai/mecellem-icons'

// Multiple icons, minimal overhead (~1.5KB total)
import { SearchIcon, UserIcon, HomeIcon } from '@newmindai/mecellem-icons'
```

---

## TypeScript Support

Full type definitions are included:

```tsx
import { SearchIcon, type IconProps } from '@newmindai/mecellem-icons'

// Type-safe props
const iconConfig: IconProps = {
  size: 24,
  color: '#5C4EE5',
  spin: false,
  title: 'Search',
}

<SearchIcon {...iconConfig} />

// Extend for custom components
interface CustomIconButtonProps {
  icon: React.ComponentType<IconProps>
  onClick: () => void
}
```

---

## Integration with Mecellem UI

Mecellem Icons is included in `@newmindai/mecellem-ui` and re-exported for convenience. If you're using Mecellem UI, you don't need to install this package separately:

```tsx
// Import icons directly from mecellem-ui
import { Button, Card, SearchIcon, UserIcon } from '@newmindai/mecellem-ui'

<Button leftIcon={<SearchIcon />}>
  Search
</Button>
```

For standalone icon usage without the full UI library, install this package directly.

---

## Browser Support

| Chrome | Firefox | Safari | Edge |
|--------|---------|--------|------|
| Latest | Latest | Latest | Latest |

---

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

### Adding New Icons

1. Add SVG file to `icons/` directory
2. Run `npm run sync` to generate React component
3. Export from `src/index.ts`
4. Submit a Pull Request

---

## Security

If you discover a security vulnerability, please send an email to admin@newmind.ai. All security vulnerabilities will be promptly addressed.

---

## License

This project is licensed under the Apache License 2.0 - see the [LICENSE](LICENSE) file for details.

```
Copyright 2026 Newmind AI

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

---

## Related Packages

| Package | Description |
|---------|-------------|
| [@newmindai/mecellem-ui](https://www.npmjs.com/package/@newmindai/mecellem-ui) | Complete React component library with 56+ components |