Mecellem Icons

Enterprise Icon Library for React

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

Documentation · Icon Categories · Examples · Contributing

About

Mecellem Icons is the official icon library developed by NewMind AI to support Mecellem Dynamics' 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 watch our video 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

npm install @newmindai/mecellem-icons

# Yarnz
yarn add @newmindai/mecellem-icons

# pnpm
pnpm add @newmindai/mecellem-icons

# Bun
bun add @newmindai/mecellem-icons

Requirements: React 19.0.0 or higher

Quick Start

1. Import Styles

Add the icon styles to your application entry point:

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

2. Use Icons

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

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>

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" />

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

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" />

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"
/>

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

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)

// 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:

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:

// 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 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 [email protected]. All security vulnerabilities will be promptly addressed.

License

This project is licensed under the Apache License 2.0 - see the 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 | Complete React component library with 56+ components |