---
visibility: public
---

# Material Design

**repo:** [sachin1092/awesome-material](https://github.com/sachin1092/awesome-material)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[android|Android]] · [[react|React]]

---

# Awesome Material Design [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)

A curated list of Google's [material design](http://www.google.com/design/spec) based libraries, resources and awesome things.

Icons, Fonts and Colors
==
  - [material-design-icons](https://github.com/google/material-design-icons) — Material Design [icons](/@harrisonqian/awesome/wiki/media/icons) by Google.
  - [material-design-iconic-font](https://github.com/zavoloklom/material-design-iconic-font) — Material Design Iconic Font and CSS toolkit.
  - [material-design-fonticons](https://github.com/designjockey/material-design-fonticons) — Material Design Fonticons is a font converted version of the Google Material Design Icon set.
  - [material-colors](https://github.com/shuhei/material-colors) — Colors of Google's Material Design made available to coders.
  - [material-color](https://github.com/mrmlnc/material-color) — The colour palette, based on Google's Material Design, for use in your project.
  - [LESS-Material-design-colors](https://github.com/tisign/LESS-Material-design-colors) — A .[less](/@harrisonqian/awesome/wiki/front-end-development/less) file with al the Google material design colors.
  - [sass-material-colors](https://github.com/minusfive/sass-material-colors) — An easy way to use Google's Material Design colors in your Sass/Scss project.
  - [Google-Material-Design-Font-Icon](https://github.com/Seb-L/Google-Material-Design-Font-Icon) — Font Icon based on Google Material Design Icon set.
  - [Material Design Icons](https://materialdesignicons.com/) — Community generated Material Design icon pack.
  - [Android Asset Studio](https://romannurik.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/AndroidAssetStudio/) — A web-based set of tools for generating graphics and other assets that would eventually be in an [Android](/@harrisonqian/awesome/wiki/platforms/android) application's res/ directory.

Animation
==
  - [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript)
    - [Waves](https://github.com/fians/Waves) — Click effect inspired by Google's Material Design.
    - [material-design-hamburger](https://github.com/swirlycheetah/material-design-hamburger) — [Android](/@harrisonqian/awesome/wiki/platforms/android)'s Material Design hamburger animation built in CSS.
    - [Material-Preloader](https://github.com/aarondo/Material-Preloader) — A [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) plugin that recreates the Material Design pre-loader (as seen on inbox).
    - [Google-material-design-[ripple](/@harrisonqian/awesome/wiki/decentralized-systems/ripple)-effect](https://github.com/ninox92/Google-material-design-ripple-effect) — [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) plugin recreates [ripple](/@harrisonqian/awesome/wiki/decentralized-systems/ripple) and focus effect.
  
Components
==
  - [SVG-Morpheus](https://github.com/alexk111/SVG-Morpheus) — [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) library enabling SVG [icons](/@harrisonqian/awesome/wiki/media/icons) to morph from one to the other. It implements Material Design's Delightful Details transitions.
  - [Material-Design-ColorPicker](https://github.com/Fraina/Material-Design-ColorPicker) — A Material Design Color Picker.
  - [material-design-color-palette](https://github.com/zavoloklom/material-design-color-palette) — Material Design Color Palette: LESS/CSS toolkit.
  - [md-timepicker](https://github.com/dotlouis/md-timepicker) — A [Polymer](/@harrisonqian/awesome/wiki/front-end-development/polymer) Timepicker element in Material Design.
  - [md-date-time](https://github.com/SimeonC/md-date-time) — A Date-Time picker based on Googles Material Design Spec.
  - [ng-material-floating-button](https://github.com/nobitagit/ng-material-floating-button) — Material design floating menu with action buttons implemented as an Angularjs directive.
  - [DevExtreme Reactive](https://devexpress.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/devextreme-reactive/react) - High-performance plugin-based [React](/@harrisonqian/awesome/wiki/front-end-development/react) components for Material Design.

CSS
==
  - [Surface](https://github.com/mildrenben/surface) — A lightweight, CSS only framework based on Material Design.
  - [material-ui](https://github.com/callemall/material-ui) — A CSS Framework and a Set of [React](/@harrisonqian/awesome/wiki/front-end-development/react) Components that Implement Google's Material Design.
  - [bootstrap-material-design](https://github.com/FezVrasta/bootstrap-material-design) — Material design theme for Bootstrap 3.
  - [materialize](https://github.com/Dogfalo/materialize) — Materialize, a CSS Framework based on Material Design.
  - [materialBootstrap](https://github.com/throrin19/materialBootstrap) — Twitter Bootstrap theme for Google material design.
  - [material-playground](https://github.com/ebidel/material-playground) — [Polymer](/@harrisonqian/awesome/wiki/front-end-development/polymer) material design playground.
  - [material-framework](https://github.com/nt1m/material-framework) — An easy to use material design based framework.
  - [mui](https://github.com/muicss/mui) — A lightweight CSS framework that follows Material Design guidelines.
  - [material-foundation](https://github.com/eucalyptuss/material-foundation) — A Material Design version of Foundation for Sites.
  - [Tronic247 Material](https://www.tronic247.com/material/) - A material design framework based on [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery) and CSS

JS
==
  - [AngularJS](https://github.com/angular/material) — Material design for AngularJS.
  - [Angular](https://github.com/angular/material2) — Material design for [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular).
  - [DevExtreme](https://js.devexpress.com) — 65+ responsive and feature-complete UI components with customizable Material Design compliant themes. Available for [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular), [React](/@harrisonqian/awesome/wiki/front-end-development/react), Vue and [jQuery](/@harrisonqian/awesome/wiki/front-end-development/jquery).
  - [ember-paper](https://github.com/miguelcobain/ember-paper) — The [Ember](/@harrisonqian/awesome/wiki/front-end-development/ember) approach to Material Design.
  - [material-design-lite](https://github.com/google/material-design-lite/) — Material Design Lite Components in HTML/CSS/JS.
  - [MUI](https://mui.com/) — The [React](/@harrisonqian/awesome/wiki/front-end-development/react) component library of Material Design
  - [react-material](https://github.com/BerkeleyTrue/react-material) — Material design components written with [React](/@harrisonqian/awesome/wiki/front-end-development/react).js and [React](/@harrisonqian/awesome/wiki/front-end-development/react) Style.

SASS
==
  - [quantum-colors](https://github.com/nkpfstr/quantum-colors) — Material Design color palette for your [Sass](/@harrisonqian/awesome/wiki/front-end-development/sass) projects.
  - [quantum-shadows](https://github.com/nkpfstr/quantum-shadows) — Material Design drop shadows for your [Sass](/@harrisonqian/awesome/wiki/front-end-development/sass) projects.
  - [google-material-design](https://github.com/axyz/google-material-design) — Small [SASS](/@harrisonqian/awesome/wiki/front-end-development/sass) library inspired by google material design guidelines.

WordPress
==
  - [MaterialPress](https://github.com/alexpatin/MaterialPress) — MaterialPress is a WordPress theme, influenced heavily by Google's Material Design philosophy.
  - [materialwp](https://github.com/braginteractive/materialwp) — Material Design WordPress Theme.
  
 WinForms
==
- [MaterialSkin](https://github.com/IgnaceMaes/MaterialSkin) — Theming .NET WinForms, C# or VB[.Net](/@harrisonqian/awesome/wiki/platforms/net), to Google's Material [Design Principles](/@harrisonqian/awesome/wiki/miscellaneous/design-principles).

XAML
==
 - [MaterialDesignInXamlToolkit](https://github.com/ButchersBoy/MaterialDesignInXamlToolkit) — Google's Material Design in XAML & WPF, for C# & VB[.Net](/@harrisonqian/awesome/wiki/platforms/net).

Other
==
  - [material_design_zh](https://github.com/1sters/material_design_zh) — Material Design Collaborative Chinese translation
  - [material-color-scheme](https://github.com/paradox41/material-color-scheme) — [Sublime Text](/@harrisonqian/awesome/wiki/editors/sublime-text) syntax theme based off the Material Design color palette.
  - [framaterial](https://github.com/Framaterial/framaterial) — A Framework to create Material Design projects.
  - [Material Design Templates](http://themeforest.net/tags/material%20design) — Various material design inspired themes and templates on ThemeForest.
  - [MaterialUp](http://www.materialup.com/) — Get your daily dose of Material design [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration)!
  - [Material Palette](http://www.materialpalette.com/) — Choose your favorite colors and generate your Material Design palette.
  - [Paper [Polymer](/@harrisonqian/awesome/wiki/front-end-development/polymer) Elements](https://elements.polymer-project.org/browse?package=paper-elements) — Paper elements are a set of visual elements that implement Google's Material Design.
  - [ScaffoldHub.io](https://scaffoldhub.io) — Generate full [Angular](/@harrisonqian/awesome/wiki/front-end-development/angular) Material applications with an online modeling tool!
  
# Other Awesome Lists
Other amazingly awesome lists can be found in the [awesome-awesomeness](https://github.com/bayandin/awesome-awesomeness) list.

## Contributing

Your contributions are always welcome! Please read the [contribution guidelines](contributing.md) first.
