Brand and Logo Icons

Brand or logo icons are icons that represent a company and/or product logo. Some examples may include the Facebook logo, the VLC logo, the Square logo, etc.

As Material Design Icons has continued to rapidly grow, we've decided to take a step back and reaffirm our mission:

Material Design Icons is an icon library dedicated to providing high-quality icons that follow Material design principles.

Keeping that mission in mind, brand and logo icons are simply not Material. Additionally, we have had issues dealing with logos that don't work well in a single color, don't fit in a distinguishable way within a 24x24dp artboard, or are just very obscure logos to begin with. It is very easy to say that we do not feel that we have served this niche of icons well.

Moving forward, we are no longer accepting new brand or logo icons into the Material Design Icons library under any circumstance.

All brand icons currently available in the Material Design Icons library are deprecated and will be removed in our v8 release.

Pictogrammers, the group that brings you the Material Design Icons library, is busy building our own brand library.

Another option would be to check out Simple Icons. Simple Icons is a full icon library specifically designed for brand and logo icons. They offer their icon package on npm and provide SVG and JavaScript interfaces to include the icons into your project. Additionally, they have a CDN available if you do not wish to host the icons yourself.

Everything currently tagged as a brand icon.

If you use any brand icons slated to be removed, then yes. However, there is a SimpleIcons integration available through the Home Assistant Community Store which will allow you to use any brand icons in their library.

We expect to create a HACS implementation for the new Pictogrammers Brand Library in the future.

It really depends on if you are using brand or logo icons. If you are, we recommend opening an issue with the project that is integrating MDI to alert them to the upcoming changes.

Yes! Our react component takes raw SVG path data to render an icon. Simple Icons also returns the combined path data of their icons, so you can simply use @mdi/react like this:

import React from 'react';
import Icon from '@mdi/react';
import { mdiAccount } from '@mdi/js';
import google from 'simple-icons/icons/google';

function App() {
  return (
    <div>
      <Icon path={mdiAccount} />
      <Icon path={google.path} />
    </div>
  );
}