What it does
Material Design Icons is Pictogrammers’ community icon collection, with SVG, webfont, JavaScript and React packages. It includes community contributions and converted icons from Google’s Material set.
Choose the delivery format before adding MDI to a project. The repository lists @mdi/svg for SVG files, @mdi/js for JavaScript icon data, @mdi/react for React and @mdi/font for the webfont. The webfont is convenient, but its own guide warns that loading the collection can hurt page or app performance.
For the font route, install @mdi/font and load its stylesheet. Use both the mdi base class and an icon name such as mdi-home on an element. The package includes a preview page, font files and stylesheets. Rotation, flipping and spinning have helper classes, although flip and rotation classes cannot be combined on the same element.
Decorative symbols next to explanatory text can be hidden from screen readers with aria-hidden. This avoids having the same information announced twice.
The collection permits commercial and open-source projects. Code uses MIT, while fonts and icons follow the stated Apache 2.0 and per-icon terms. Keep the notices that apply to the particular assets you distribute.
Strengths
- Offers SVG and code packages alongside the webfont.
- Provides ready-made rotation, flip and spin classes.
Watch out for
- The full webfont can add unnecessary weight to a small interface.
- Flip and rotation helper classes cannot share one element.
Best for
- Developers needing a broad Material-style symbol vocabulary.
- Projects choosing between vector files, components and icon fonts.
Sources
- Material Design Icons: Pictogrammers (Oct 27, 2026)
- Material Design: Package Overview (Oct 27, 2026)
- Pictogrammers: Getting Started with the Webfont (Oct 27, 2026)
- Pictogrammers Free License (Oct 27, 2026)