Material Design Icons (~7,600 icons) as tree-shakeable React components with clean named imports.
npm install mdicons-react
# pnpm add mdicons-react · yarn add mdicons-react · bun add mdicons-reactRequires React 17+ (peer dependency).
import { Home, History, Delete } from "mdicons-react";
<Home size={20} className="text-blue-500" />;- Named imports from the package root (a generated barrel).
- Native props:
size,className,color, allSVGProps;fill="currentColor". - Tree-shakeable:
sideEffects: false+ pure-annotated exports → only imported icons ship.
-
Source —
@mdi/svg, the canonical MDI SVG set. -
npm run generate— reads every SVG and writessrc/index.ts: oneexport const Name = /*#__PURE__*/ createIcon("<path>")per icon, sharingsrc/createIcon.tsx. -
npm run build— tsup emits ESM + CJS +.d.tstodist/. -
Publish —
npm publish(runs generate + build viaprepublishOnly).
.github/workflows/update-icons.yml runs weekly: bumps @mdi/svg, regenerates, and opens a PR if
the icon set changed. Merge to ship.
Code Apache-2.0. MDI icon designs © Pictogrammers, Apache-2.0.