Material design matters to UX/UI designers. The 10 best free material design icons in 2018 for app interface design. Best design inspirations and resources.
This pack fits any Android app. These system icons symbolize common actions, files, devices, and directories.Our Material Filled icon pack follows the material guidelines from Google, including the latest icon themes (filled, outlined, rounded, two-tone, and sharp versions for each icon). All themes are pixel-perfect at 24Ã24 pixels.Material icon pack succeeds the previous icon pack for. In accordance with material design icon guidelines, for active icons we recommend using either black at 54% opacity or white at 100% opacity when displaying these on light or dark backgrounds, respectively. If an icon is disabled or inactive, using black at 26% or white at 30% for light and dark backgrounds, respectively.
Material Design, a full platform design language, provides standards for designers to create websites and apps with a consistent look and feel. From the overall interface to the tiny details, Google proved itâs digital perfection. Icons play a big role in Material Design. Material Design turns icons into meaningful signs that are the shortcuts that replace 1- 4 words. Iâd like to share the 10 best free material design icon resources for your inspiration. Just pick the right ones and integrate them into your design.
1. Google Material Design Icons - Google Material Icons
Format: PNG, SVG
Price: Free
Usage pattern: Web, Android, and iOS projects
Whatâs special:
Material Design Icons Windows 10
Google Material Design Icons provide over 900 excellent icons. They are available in a variety of sizes and densities and as a web font. Material icons are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects.
Download here: https://material.io/icons/
2. Material Icons from Icons8 - Material Design Social Icons
Format: PNG, SVG (in any format)
Price: Mostly free (some features of the icons are paid)
Usage pattern: Apps for the Web, Mac, and Windows
Whatâs special:
You have access to 4,400 material design icons in any format, size and color in 20 seconds. There are social media icons like Facebook, Twitter, Youtube, and all kinds of arrows. It also has basic ones like phone, home, and settings. If you are up for something more unorthodox, this is the right place for you.
Download here:https://icons8.com/material-icons/
3. Material Design Icons
Format: PNG, SVG, XAML
Price: Free
Usage pattern: All systems
Whatâs special:
This icon resource library is very rich and contains varied types with nearly 4000 free icon resources. This huge free resource platform is a collection of numerous UX/UI designers sharing their own design results. You can see the name of the icon and its designer when you hover over it.
Download here: https://materialdesignicons.com/
4. Materialpalette
Format: PNG, SVG
Price: Free
Usage pattern: iOS & Android
Whatâs special:
This library provides typical free material design icons. The page provides a search box to quickly search icons making it, easier to find and get what you really need. It also offers a palette and color picker.
Download here: https://www.materialpalette.com/icons
5. Materializecss
Format: PNG, SVG
Price: Free
Usage pattern: All system
Whatâs special:
The site offers 932 Google material design icons in total. The icons can be used in prototype design for UX/UI designers and used directly by developers to develop apps.
Download here: http://materializecss.com/icons.html
6. Material Icons Design from Flaticon
Format: Vector icon (SVG & EPS), PNG, PSD and Iconfont
Price: Free
Usage pattern: All systems
Whatâs special:
Material Design Icons Windows 10
This site offers a comprehensive arrey of Google material design icons. They are divided into 9 pages for better display. They are applicable to Google Material Design and Monochrome. You can select the icons to view more information and make operations like edit, share, or add to favorites.
Download here: https://www.flaticon.com/packs/material-design
7. Webalys
Format: .Sketch, .AI, .SVG, .PDF, .EPS, .Iconjar files.
Price: Free pack - 350 icons
Essential pack - $87 for 1650 icons
Ultimate pack - $127 for 40000 icons
Usage pattern: All system
Whatâs special:
It says âthe World's Biggest Material Design Icons Packâ, and touts itself as the only icons pack that include all icons in solid and line style, for designing applications and websites. Itâs legible and consistent. The Nova icons follow the Google Material Design Guidelines to ensure consistency, readability and clarity even at small sizes. You can import the 8,000 icons into the Iconjar application in one click.
Download here: http://www.webalys.com/nova/
8. Material UI
Format: SVG, PNG
Price: Free
Usage pattern: All system
Whatâs special:
This icon library supports single download. Each icon has four modes: Black, grey, white, SVG. There is a variety of sizes you can choose from. All the icon information can be viewed in detail. You can also copy the SVG code.
Download here: https://www.materialui.co/icons
9. Material Design Icon Template PSD
Format: PSD
Price: Free
Usage pattern: All system
Whatâs special:
Itâs an ultimate template of icons designed in Material style. It includes guideline grid, material shapes for the creation of an awesome icon. It also provides android screens so you and your customers could see the icons live and scaled in all resolutions.
Download hereï¼https://www.uplabs.com/posts/material-design-icon-template-psd
10. Material Design Icons By Brad Williams
Format: SVG, PNG
Price: Free
Usage pattern: All systems
Whatâs special:
These icons are is provided by designer Brad Williams; this resource contains more than 1000 Material Design icons that can be used on WordPress pages and blogs. In addition, icons can be inserted using shortcodes or HTML tags. The icon resource can be used in 3 different ways: shortcode, HTML and TinyMCE.
Download hereï¼https://con.wordpress.org/plugins/material-design-...
I have provided what I consider to be the 10 best material design icon resources from my side. Since most of them are free of charge, you can try one or all them out. We all know that icons affect user experience. So, how do you use them effectively? How do you integrate them into your projects? How so you ensure that the icons match with the overall Material Design interface?
You need to practice. Practice makes perfect. We all know that prototyping is of great importance. When you use the right prototyping tool, you can build an app with a good-looking interface and excellent interactions quickly and effortlessly. Here I take Mockplus as an example. I will show you how to quickly use those icons in design with this tool.
Powerful input icon resources in Mockplus
Mockplus comes with more than 300 components and over 2,000 vector icons itself. With a simple drag and drop, you can build interface design. In its properties panel, you can set icons for visibility, color, transparency, etc. You can also convert them into pictures for more applications with a single click.
Easily make use of the above material icons resources in Mockplus
You can also import all the above icon resources into the Mockplus component library. You can also share them with your team members to improve component reusability and reduce workload.
How to use the above icon resources in Mockplus? Here we go.
1) Create a component library
Open Mockplus and create a new project. Select the component library icon on the left panel, click '+' to create a new component library and name it as âmaterial design iconsâ. You can also add descriptions or change thumbnails.
Material Design Icons Windows 102) Import material icons
Select the library 'material design icons', and click âimport imageâ on the drop-down menu of the '+' icon, or right-click on the library can also find the import image options. Then with one click, you can import the icons in Mockplus with a batch of 100 icons at a time. Mockplus currently supports PNG and JPE format icon resources.
3) Share you component library
Now you can see that the icons are already in your component library. How do you share these icon resources? Click the management button next to the '+' icon to enter the component library management interface. Here you can synchronize, edit, export, and delete the component. Click âshare toâ then add the accounts of your team members in order to share it with them.
More free material design icons resources:1. Material Design
This repository contains all the planning for current and work-in-progress Material Design Icons. It also contains converted icons from Google's official icon set. Not that SVG icons are not compressed in GitHub. You will need to manually edit the CSS file to remove the version query string.
Download hereï¼https://github.com/Templarian/MaterialDesign
2. Material Design Blog
This is a free master set of beautiful Material Design icons by Jurre Houtkamp. It contains colorful, bold, well-crafted, Material Design style icons from Amsterdam based designer Jurre Houtkamp. Itâs available in .icns, .ico and .png file type.
Download hereï¼http://materialdesignblog.com/free-master-set-of-m...
3. Material Design Powerpoint & Keynote icons
Powerpoint & Keynote is still used in the business world. To make things less miserable, this designer converted 425 material design icons into native ppt & key editable shapes! You can change scale and color freely.
Download here:https://dribbble.com/shots/1932096-Material-Design...
4. Material Design Icons
750 free open-source glyphs from Google.
Download here: https://www.producthunt.com/posts/material-design-...
Material Design Icons Windows 95. Material-design-icons
Material design by Google. It includes all versions.
Material Design Icons Windows 7
Download here: https://cdnjs.com/libraries/material-design-icons
6. Google Material Design icons
617 vector icons that you can freely add to your collections.
Download here: https://www.iconfinder.com/iconsets/google-materia...
Related readings:
Get Started for FREE
Get Started for FREE
Comprehensive and easy to use Material Design theme and control library for the Windows desktop.
Material Design
To load the source project you will need Visual Studio 2017. Don't worry if you have an earlier version, you can still use the compiled assemblies from NuGet (
Install-Package MaterialDesignThemes ). There are two demo projects in the solution, restore the necessary NuGet packages and correct the programming syntax that is not compatible with C# versions lower than C# 7.0 (currently used in Visual Studio 2017 ). Then, you should be able to fire both of these projects up. One is a 'pure' Material Design project, the other illustrates how to combine with Dragablz & MahApps.
Material Design Icon Pack
Contributors
This project exists thanks to all the people who contribute.
Backers
Thank you to all our backers! ? [Become a backer]
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Comments are closed.
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
December 2020
Categories |