Material Design icons by Google

Overview

Material design icons

Material design icons is the official icon set from Google. The icons are designed under the material design guidelines.

4.0.0 Update

Restructured repository, updated assets.

3.0.1 Update

  • Changed license in package.json.
  • Added missing device symbol sprites.

3.0.0 Update

License change to Apache 2.0!

Getting Started

Read the developer guide on how to use the material design icons in your project.

Using a font

The font folder contains pre-generated font files that can be included in a project. This is especially convenient for the web; however, it is generally better to link to the web font hosted on Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">

Read more in the font portion of our full developer guide.

License

We have made these icons available for you to incorporate into your products under the Apache License Version 2.0. Feel free to remix and re-share these icons and documentation in your products. We'd love attribution in your app's about screen, but it's not required. The only thing we ask is that you not re-sell these icons.

Comments
  • Create an icon font

    Create an icon font

    An icon font is being worked on at the moment and we're hoping to ship it sometime soon :) This issue is mostly a placeholder to remind us to include it.

    enhancement FAQ 
    opened by addyosmani 130
  • Are the new themes of icons available on Google Fonts?

    Are the new themes of icons available on Google Fonts?

    Recently four new themes of icons are available: outlined, rounded, two tone, and sharp. Are these available on Google fonts? If not is there a timeline on when they will be added? Thanks.

    enhancement 
    opened by steventango 82
  • Unable to Install from npm (extract not completing)

    Unable to Install from npm (extract not completing)

    I am unable to install material-design-icons from npm.

    When trying to install with npm version 3.10.3 (windows 10 machine), the extraction step:

    \ extract:material-design-icons: sill doParallel extract 1

    does not complete even after appr. 10min. The progress slash eventually stops spinning completely.

    Your insights are most appreciated.

    npm related 
    opened by tomwanzek 70
  • Material Icons - Vertical Align Doesn't work well alongside text

    Material Icons - Vertical Align Doesn't work well alongside text

    Hi,

    Material icons doesn't seems to vertical align themselves when placed alongside any text.

    Issue:

    image

    image

    image

    I am using this code:

    <p><i class="material-icons">&#xE8B5;</i> Open 7 Days</p>
    

    Let me know if I am doing anything wrong.

    I am using Bootstrap v 3.3.5.

    opened by msvayani 57
  • Missing social icons (G+, FB, Twitter, etc.)

    Missing social icons (G+, FB, Twitter, etc.)

    These icons do appear to exist somewhere, e.g. https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png

    They're also listed as Google-made icons on https://materialdesignicons.com/, e.g. https://materialdesignicons.com/icon/facebook-box

    However, they are nowhere to be found in this repo.

    FAQ 3rd-party logos 
    opened by asadovsky 52
  • Self-Hosted Material Icon Not Showing On Both Chrome and IE

    Self-Hosted Material Icon Not Showing On Both Chrome and IE

    I referred to this link http://google.github.io/material-design-icons/#getting-icons

    @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); }

    @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype'); }

    I replaced the url with the location of the material design icons folder but it won't show up. Using the link to the Google Web Font, it works perfectly I used the svg version and it works perfectly too.

    bug help wanted 
    opened by jig9 45
  • icon font only release

    icon font only release

    Installing material-design-icons via bower, npm, jspm etc pulls down the svgs and other artefacts, which is pretty big (26.9MB). Can there be a release that includes just the icon fonts themselves?

    Its possible to reference the google web font url but that creates an external dependancy.

    enhancement 
    opened by akash1810 39
  • Naming icons for what they represent – not what they are used for

    Naming icons for what they represent – not what they are used for

    I often find myself searching for icons on the material icons page and being unable to find the icon I am looking for, simply because of inconsistent or strange naming.

    I think the biggest problem stems from the fact that some icons are named according to what they are used for, not what they actually represent. And this can make them really a pain to find.

    To name a few examples,

    image image image

    Three icons for the same thing. Why not just "clock"?

    image

    How about "bag" or "shopping bag"? I knew this icon existed and spent 10 minutes looking for it because searching for "bag" didn't yield any results.

    image

    Why not "wrench" or "tool"?

    Etcetera, there are many more examples like these.

    opened by adamreisnz 20
  • Website Broken when LastPass extension installed

    Website Broken when LastPass extension installed

    When using Google Chrome Version 61.0.3163.14 (Official Build) dev (64-bit) your searchable icon website will say label names but not render icons. In IE it's fine, as well as icons on my site.

    bug 
    opened by miguel-orange 20
  • MD Icons not working on IE 11

    MD Icons not working on IE 11

    I'm using MaterialDesign icons on my application, however, it isn't working on IE 11 (version 11.576.14393.0).

    In my HTML code, I have the following element:

    <i class="material-icons">&#xE853;</i>

    However, I also tried the normal icon name such as:

    <i class="material-icons">account_circle</i>

    It's working on other browsers, and all the .css features are from the boilerplate that I got on Material Design's page.

    Nothing is appearing to me on my page.

    I tried to set the following styles:

    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    ms-font-feature-settings:'liga'
    

    However, nothing is working.

    opened by danvc 20
  • Get the list of the whole available icon names

    Get the list of the whole available icon names

    Is there a way to get a list (JS) of the whole available material-design-icons icons preferably grouped by category ?

    Can I get this list using the NPM package ?

    Thanks.

    opened by canercandan 20
  • Icons do not display correctly with the default font size in Safari (ios)

    Icons do not display correctly with the default font size in Safari (ios)

    I have to adjust font size to get correct render in safari

    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex' }}>
        <span className="material-symbols-rounded" style={{ fontSize: 23 }}>
          lunch_dining
        </span>
        <span className="material-symbols-rounded" style={{ fontSize: 24 }}>
          lunch_dining
        </span>
        <span className="material-symbols-rounded" style={{ fontSize: 25 }}>
          lunch_dining
        </span>
      </div>
      <div style={{ display: 'flex' }}>
        <span className="material-symbols-rounded">home</span>
        <span className="material-symbols-rounded">favorite</span>
        <span className="material-symbols-rounded">grade</span>
      </div>
    </div>
    

    Expected result (chrome desktop & android):

    image

    Result in safari (ios 16.2):

    telegram-cloud-photo-size-2-5307736721045175859-y

    opened by Zombobot1 0
  • Icon request: Nonbinary gender icon

    Icon request: Nonbinary gender icon

        We need a non-binary icon as well. 
    

    https://icon-sets.iconify.design/mdi/gender-non-binary/

    Originally posted by @loolooii in https://github.com/google/material-design-icons/issues/242#issuecomment-1369792891

    opened by tphinney 0
  • Icon Request :- Calibration, Calibrated, Calibration Warning and Calibration Levels

    Icon Request :- Calibration, Calibrated, Calibration Warning and Calibration Levels

    So when taking any measurement the system should be calibrated, and this can give a confidence in the measurement, so the water you drink can be checked with a system that's had a three point, two point or single point test; then in operation the readings from the sensor may indicate that the process of calibration is required;

    So I want device to show is it calibrated hence i trust reading, then when I do the calibration am I doing single, double or triple point process, then as time goes by the re-calibration should be done so I get warning\critical and then a danger so asking for seven icons:-

    Calibration:- As a category I guess also with bar so not-calibrated used on new devices Calibration Levels :- three point, two point or single point Confidence in Calibration:- Good, warning, error

    icon request 
    opened by ben700 0
  • Icon requests: phonelink warning & phonelink unknown

    Icon requests: phonelink warning & phonelink unknown

    Need more flexibility/matching styles to go with mobile_friendly, phonelink_erase, and the other phonelink icons like phonelink_setup and phonelink_lock. I would like the new icons to show a warning and an unknown if possible. Perhaps something like these:

    image

    Thanks in advance!!

    icon request 
    opened by brookedeliveroo 0
Releases(4.0.0)
  • 4.0.0(Aug 31, 2020)

  • 3.0.2(Aug 19, 2020)

  • 3.0.1(Sep 2, 2016)

  • 3.0.0(Aug 25, 2016)

  • 2.2.3(Mar 19, 2016)

  • 2.2.2(Mar 17, 2016)

  • 2.2.1(Mar 10, 2016)

  • 2.2.0(Feb 9, 2016)

  • v2.1.3(Dec 31, 2015)

    You can now require('material-design-icons') to get access to its path on your machine. This is useful, for instance, if you'd like to host our assets from your dev server:

    yourDevServer.map(
      YOUR_STATIC_PREFIX + '/material-design-icons',
      require('material-design-icons').STATIC_PATH,
    );
    
    Source code(tar.gz)
    Source code(zip)
  • 2.1.1(Nov 23, 2015)

  • 2.1(Nov 17, 2015)

  • 2.0.0(May 28, 2015)

  • 1.0.2b(May 13, 2015)

  • 1.0.1(Nov 12, 2014)

    We're excited about the enthusiastic response to our initial release of the material design icons, and happy to bring a small bug fix release to you today.

    What's new in this release?

    • License changed to CC-BY
    • Icon bug fixes and updates
    • Add fully optimized production SVGs
    • CSS sprite bug fixes

    Details

    License

    We originally licensed these icons under CC-BY-SA because we wanted to make them available to you to incorporate into your apps, but we didn't want someone to be able to package them up and resell them as an icon set. We heard your concerns about the scope of the share alike obligation. Our primary goal here is to make it easy for you to use the icons, so we've changed the license to CC-BY.

    And we know it's not always feasible to put a copyright notice on every screen that features icons. So for this icon set, it's fine by us to put the attribution on your app's "about" page, or somewhere similar.

    Bug fixes

    We've fixed some bugs in the art of a few icons, fixed the names of a few more, and added an icon or two.

    Optimized SVGs

    We're now including both "design" SVGs and "production" SVGs. The production SVGs have been fully optimized for size and stripped of any extraneous paths. The design SVGs are kept more readable and include extra paths as an aid to designers dropping SVGs into mocks.

    CSS sprite fixes

    We've improved the CSS sprites so that they play more nicely together when more than one is used on one page.

    You can find more details in our previous release notes or in the project README.

    Enjoy!

    Source code(tar.gz)
    Source code(zip)
    material-design-icons-1.0.1.zip(57.39 MB)
  • 1.0.0(Oct 17, 2014)

    Today, Google Design are open-sourcing 750 glyphs as part of the Material Design system icons pack. The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. They're equally useful when building for the web, Android or iOS.

    Read on for the release notes, view a live preview of the icons or download the icon pack now.

    What's included in the release?

    • SVG versions of all icons in both 24px and 48px flavours
    • SVG and CSS sprites of all icons
    • 1x, 2x icons targeted at the Web (PNG)
    • 1x, 2x, 3x icons targeted at iOS (PNG)
    • Hi-dpi versions of all icons (hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi) (PNG)

    Preview

    Icons are included for actions:

    1

    Devices:

    2

    Common images:

    3

    and many other icon categories app developers use today.

    Getting Started

    You have a few options for getting the icons.

    Download the Zip

    Grab the latest release as a zip archive (~57MB).

    Bower

    Install the icons using the Bower package manager.

    $ bower install material-design-icons
    

    npm

    You can also find all the icons on npm.

    $ npm install material-design-icons
    

    For more information on usage, see the project README.

    With special thanks to Josh Estelle, Alastair Tse and the Material Design team for their contributions to this project

    Source code(tar.gz)
    Source code(zip)
    material-design-icons-1.0.0.zip(56.51 MB)
  • 1.0.0-pre(Oct 17, 2014)

Owner
Google
Google ❤️ Open Source
Google
[] Android Library that implements Snackbars from Google's Material Design documentation.

DEPRECATED This lib is deprecated in favor of Google's Design Support Library which includes a Snackbar and is no longer being developed. Thanks for a

null 1.5k Dec 16, 2022
Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library.

Material Design Dimens Default colors and dimens per Material Design guidelines and Android Design guidelines inside one library. Dimens Pattern: R.di

Dmitry Malkovich 1.4k Jan 3, 2023
Animations for Android L drawer, back, dismiss and check icons

Material Menu Morphing Android menu, back, dismiss and check buttons Have full control of the animation: Including in your project compile 'com.balysv

Balys Valentukevicius 2.5k Jan 3, 2023
ToggleIconView is a collection library of animated two-stage toggle icons for Android.

ToggleIconView ToggleIconView is a collection library of animated two-stage toggle icons for Android. Installation JitPack repository // Project level

Özgür Görgülü 6 Sep 10, 2022
An Android library aimed to get the beautiful CardViews that Google shows at its official design specifications

MaterialList Discontinued This library will not receive any updates, as I do not have the time or knowledge to improve it. If anyone forks it and want

null 1.6k Nov 29, 2022
A library to bring fully animated Material Design components to pre-Lolipop Android.

Material MaterialLibrary is an Open Source Android library that back-port Material Design components to pre-Lolipop Android. MaterialLibrary's origina

Rey Pham 6k Dec 21, 2022
The flexible, easy to use, all in one drawer library for your Android project. Now brand new with material 2 design.

MaterialDrawer ... the flexible, easy to use, all in one drawer library for your Android project. What's included ?? • Setup ??️ • Migration Guide ??

Mike Penz 11.6k Dec 27, 2022
A Material Design ViewPager easy to use library

MaterialViewPager Material Design ViewPager easy to use library Sample And have a look on a sample Youtube Video : Youtube Link Download In your modul

Florent CHAMPIGNY 8.2k Jan 1, 2023
Floating Action Button for Android based on Material Design specification

FloatingActionButton Yet another library for drawing Material Design promoted actions. Features Support for normal 56dp and mini 40dp buttons. Customi

Zendesk 6.4k Dec 26, 2022
EditText in Material Design

MaterialEditText NOTE: 2.0 is NOT BACKWARDS COMPATIBLE! See more on wiki or 中文看这里 AppCompat v21 makes it easy to use Material Design EditText in our a

Kai Zhu 6.1k Dec 30, 2022
Implementation of Ripple effect from Material Design for Android API 9+

RippleEffect ExpandableLayout provides an easy way to create a view called header with an expandable view. Both view are external layout to allow a ma

Robin Chutaux 4.9k Dec 30, 2022
Material Design implementation for Android 4.0+. Shadows, ripples, vectors, fonts, animations, widgets, rounded corners and more.

Carbon Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features. It's a custom implemen

null 3k Jan 9, 2023
Material Design ProgressBar with consistent appearance

MaterialProgressBar Material Design ProgressBar with consistent appearance on Android 4.0+. Why MaterialProgressBar? Consistent appearance on Android

Hai Zhang 2.2k Dec 21, 2022
Navigation Drawer Activity with material design style and simplified methods

MaterialNavigationDrawer Navigation Drawer Activity with material design style and simplified methods       It requires 10+ API and android support v7

Fabio Biola 1.6k Jan 5, 2023
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022
Custom Tabs with Material Design effects

MaterialTabs Custom Tabs with Material Design animations for pre-Lollipop devices       Download example apk It requires 14+ API and android support v

Fabio Biola 1.4k Dec 29, 2022
Android Sample Project with Material Design and Toolbar.

AndroidMaterialDesignToolbar -- PROJECT IS NOT SUPPORTED Android Sample Project with Material Design and Toolbar. Project use Appcompat library for ma

kemal selim tekinarslan 713 Nov 11, 2022
Custom drawer implementation for Material design apps.

material-drawer Custom drawer implementation for Material design apps. Demo A demo app is available on Google Play: Screenshots Fixed items Select pro

Jan Heinrich Reimer 600 Nov 18, 2022
Android drawer icon with material design animation

LDrawer Android drawer icon with material design animation Note Basically same as appcompat_v7 version 21, you can use appcompat_v7 compile 'com.andro

Hasan Keklik 1.4k Dec 25, 2022