msr-icons

A lightweight, production-ready React SVG icon library with 2000+ pre-built icons across brands, UI, files, weather, transport, food, medical, sports, nature, education, music, home, a large developer/agent set (version control, code, DevOps, data, security, AI, devices, layout, and more), plus full-color file-type / MIME icons.

[![npm version](https://img.shields.io/npm/v/msr-icons?style=flat-square&color=cb3837)](https://www.npmjs.com/package/msr-icons) [![npm downloads](https://img.shields.io/npm/dm/msr-icons?style=flat-square&color=blue)](https://www.npmjs.com/package/msr-icons) [![license](https://img.shields.io/npm/l/msr-icons?style=flat-square&color=green)](./LICENSE) [![tree-shakeable](https://img.shields.io/badge/tree--shakeable-yes-brightgreen?style=flat-square)](https://bundlephobia.com/package/msr-icons) [![TypeScript](https://img.shields.io/badge/TypeScript-ready-blue?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
--- ## 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 ```bash 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: ```jsx import { Icon } from 'msr-icons'; export default function App() { return ( ); } ``` ### Direct named imports (recommended for bundled apps) ```jsx import { Facebook, Github, Twitter } from 'msr-icons'; export default function App() { return (
alert('Facebook')} />
); } ``` ### List all available icon names ```jsx 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 ```jsx // Custom color // Brand color // With interaction console.log('clicked')} onHover={() => console.log('hovered')} /> // With full styling ``` --- ## Icon Categories
Brands — social, tech, crypto, AI, cloud, and developer tools 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.
UI — controls, navigation, feedback, and layout 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.
Files & Formats — file types, folders, and code formats 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.
Weather — conditions and atmospheric icons Sun, Cloud, Rain, Snow, Storm, Wind, Fog, Tornado, Rainbow, Humidity, Temperature, and more.
Transport — vehicles and travel Car, Bus, Train, Plane, Bicycle, Motorcycle, Ship, Rocket, Ambulance, Taxi, and more.
Food — meals, beverages, and cuisine Pizza, Burger, Sushi, Coffee, Tea, Cake, Apple, Salad, and more.
Medical — health and healthcare Heart, Pill, Stethoscope, Syringe, Bandage, Hospital, DNA, Brain, and more.
Sports — sports and fitness Soccer, Basketball, Tennis, Baseball, Swimming, Running, Gym, Trophy, and more.
Nature — plants, animals, and environment Tree, Flower, Leaf, Mountain, Ocean, Fire, Water, Earth, and more.
Education — learning and academia Book, Graduation, Pencil, Ruler, Microscope, Calculator, Blackboard, and more.
Music — audio and instruments Note, Headphones, Guitar, Piano, Microphone, Speaker, Vinyl, and more.
Home — household and living 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 wrapper ├── icon.css # Base icon styles ├── index.ts # Library entry point └── index.js # Legacy JS entry ``` --- ## License [MIT](./LICENSE) © [Michael Scharff](https://github.com/Minka1902)