Features

| | | |---|---| | 2000+ SVG Icons | Brands, UI, files, weather, nature, transport, Git, code, DevOps, data, security, AI, file-type/MIME & more | | Tree-shakeable | Import only what you need — unused icons are never bundled | | Fully Customizable | Control color, size, stroke width, background & styles via props | | Dual Format | Ships as both ESM and CommonJS | | TypeScript Ready | Full .d.ts declarations included | | Zero Config | Works out of the box with Vite, CRA, Next.js, and more |

Installation

npm install msr-icons
# or
yarn add msr-icons
# or
pnpm add msr-icons

Peer dependency: React 17+

Quick Start

Generic Icon wrapper

The easiest way to use any icon by name:

import { Icon } from 'msr-icons';

export default function App() {
  return (
    <Icon name="Facebook" size={32} color="#286bc2" />
  );
}

Direct named imports (recommended for bundled apps)

import { Facebook, Github, Twitter } from 'msr-icons';

export default function App() {
  return (
    <div>
      <Facebook fillColor="#286bc2" onClick={() => alert('Facebook')} />
      <Github fillColor="#000" />
      <Twitter isColored />
    </div>
  );
}

List all available icon names

import { iconNames } from 'msr-icons';

console.log(iconNames); // ['Facebook', 'Github', 'Twitter', ...]

Props

All icons share a common set of props via the BaseIcon wrapper:

| Prop | Type | Default | Description | |------|------|---------|-------------| | fillColor | string | varies | SVG fill or stroke color | | isColored | boolean | true | Use the icon's brand color | | size | number | 24 | Width and height in pixels | | onClick | function | — | Click event handler | | onHover | function | — | Mouse-enter event handler | | backgroundColor | string | — | Background color of the SVG container | | style | object | — | Inline styles merged onto the container | | className | string | '' | CSS class name(s) | | strokeWidth | string\|number | '1.5' | SVG stroke thickness | | mode | 'stroke'\|'fill' | 'fill' | Render mode for dual-mode icons |

Usage examples

// Custom color
<Facebook fillColor="#286bc2" />

// Brand color
<Instagram isColored />

// With interaction
<Twitter
  fillColor="#1DA1F2"
  onClick={() => console.log('clicked')}
  onHover={() => console.log('hovered')}
/>

// With full styling
<Github
  fillColor="#000"
  backgroundColor="rgba(0,0,0,0.05)"
  style={{ padding: '8px', borderRadius: '50%' }}
  className="icon-btn"
/>

Icon Categories

Facebook, Twitter, Instagram, LinkedIn, YouTube, TikTok, Snapchat, Pinterest, Reddit, Discord, Slack, WhatsApp, Telegram, GitHub, GitLab, Figma, Notion, Trello, Jira, Confluence, Google, Apple, Microsoft, Amazon, AWS, Azure, GCP, Docker, Kubernetes, Vercel, Netlify, Heroku, OpenAI, Claude, Gemini, HuggingFace, MongoDB, PostgreSQL, Redis, Elasticsearch, RabbitMQ, Solana, Ethereum, Bitcoin, MetaMask, and more.

Settings, Search, Menu, Hamburger, Close, ArrowUp/Down/Left/Right, ChevronUp/Down, Trash, Edit, EditBox, Download, Upload, Send, Bell, Alert, Check, CheckCircle, Info, Warning, Chart, BarChart, PieChart, Toggle, Input, Grid, List, Theme, Sun, Moon, Accessibility, Drag, Filter, Sort, Share, Copy, Paste, Undo, Redo, ZoomIn, ZoomOut, Fullscreen, and more.

File, Folder, FolderOpen, CSV, JSON, XML, YAML, TOML, Markdown, PDF, DOC, Excel, PowerPoint, Config, DB, RAR, ZIP, SVG, WEBP, GIF, JSFile, NodeJSFile, PythonFile, HTMLFile, Git, and more.

Sun, Cloud, Rain, Snow, Storm, Wind, Fog, Tornado, Rainbow, Humidity, Temperature, and more.

Car, Bus, Train, Plane, Bicycle, Motorcycle, Ship, Rocket, Ambulance, Taxi, and more.

Pizza, Burger, Sushi, Coffee, Tea, Cake, Apple, Salad, and more.

Heart, Pill, Stethoscope, Syringe, Bandage, Hospital, DNA, Brain, and more.

Soccer, Basketball, Tennis, Baseball, Swimming, Running, Gym, Trophy, and more.

Tree, Flower, Leaf, Mountain, Ocean, Fire, Water, Earth, and more.

Book, Graduation, Pencil, Ruler, Microscope, Calculator, Blackboard, and more.

Note, Headphones, Guitar, Piano, Microphone, Speaker, Vinyl, and more.

House, Door, Window, Sofa, Bed, Kitchen, Bath, Garage, and more.

Module Formats

| Format | File | Use case | |--------|------|----------| | ESM | dist/index.js | Modern bundlers (Vite, webpack 5, Rollup) | | CJS | dist/index.cjs | Node.js, older bundlers | | Types | dist/index.d.ts | TypeScript projects |

The exports field in package.json handles format resolution automatically — no config needed.

Project Structure

src/
├── icons/
│   ├── BaseIcon.jsx          # Shared SVG wrapper (all icons use this)
│   ├── brands.jsx            # Brand & platform icons
│   ├── brands_additions.jsx  # Additional brand icons
│   ├── ui.jsx                # UI controls & navigation
│   ├── ui_additions.jsx      # Additional UI icons
│   ├── files.jsx             # File type & format icons
│   ├── files_additions.jsx   # Additional file icons
│   ├── weather.jsx           # Weather & climate icons
│   ├── transport.jsx         # Vehicle & travel icons
│   ├── food.jsx              # Food & beverage icons
│   ├── medical.jsx           # Health & medical icons
│   ├── sports.jsx            # Sports & fitness icons
│   ├── nature.jsx            # Nature & environment icons
│   ├── education.jsx         # Education & learning icons
│   ├── music.jsx             # Music & audio icons
│   └── home.jsx              # Home & household icons
├── Icon.jsx                  # Generic <Icon name="..." /> wrapper
├── icon.css                  # Base icon styles
├── index.ts                  # Library entry point
└── index.js                  # Legacy JS entry

License

MIT © Michael Scharff