MDI (Material Design Icons) is a popular icon library.

It is very useful for both designers and developers: the library contains hundreds of free and ready-to-use icons, designers can use a Figma plugin and developers can use NPM packages like MDI font.

Even if you don’t want to see the whole library as part of your project, you can import icons as images.

These are some tips about MDI icons library that I want to note and share.

About the explorer

There is an explorer on the official website¹ that can be used to search icons (by name or by tags):

https://pictogrammers.com/library/mdi/

Tip: pay attention to library version when searching the icons

This explorer shows only one version of library, and there is no option to change it. If the library version in your project differs from the version on explorer, the information on explorer may be irrelevant to you because new versions of library can contain more icons than old.

If you don’t want to update library in your project and need to explore icons among the certain version that differs from the official site, there is another page on pictogrammers.github.io that shows icons of the specific version of library.

To get the certain version URL, you need to add the library version number to https://pictogrammers.github.io/@mdi/font/

For example: 2.0.46, 6.5.95, 7.1.96

Unfortunately, it doesn’t have a search, but you can use your browser’s built-in Find Tool.

The @mdi/font package version matches MDI library version.

About the communication

As for me, another positive side of using icon library is effectiveness of communication between designer and developer using icons’ codes. It is more accurate to say “Use pencil-circle-outline icon here” than just “Use pencil icon”. It can prevent appearing of duplicated icons in project as well.

Developer will have no need to ask “is it a different icon or the same that we used on the previous form?”, designer will be assured that developer will use the right icon.

Tip: synchronize icons library version between design and development.

There can be some misunderstandings between designers and developers. Icons may appear differently between versions (for example: check mdi-folder-lock, it changed between v6.5 and v7.1). It can be the reason of situations when the site looks a little different from the designer’s mockup.