220+ Material Inspired Icons for Great User Experience
Icons have always been important in enhancing the user experience, not only for navigating easily through the information in your app or on your web site but also in increasing the readability of the content by summarizing it, making it exciting and drawing the user’s attention to the most important parts of your web projects. They save space in toolbars and palettes and there is no need to translate icons for international users.
While working on different samples and apps at Infragistics our design team has always found Google’s material icons great for user interface design, but kind of limited — especially in areas like Finance and Health. So, after some discussions we decided to extend the official Material Design Icon set provided by Google with an unofficial subset of 5 categories of icons that will be valuable not only for us but for the great people that use our products.
Being a product designer working from home for a couple of months due to a worldwide pandemic and taking care of a family at the same time is no easy task. Especially when you have a curious 6-year-old boy who wants to know more about your work and why it is more important than playing Monopoly or football for example.
I saw this as an opportunity to spend the time together and since my son really likes to draw, I decided to achieve this by enjoying some collaborative hours during the next days in sketching ideas for the five categories our design team has decided to start with.
We sat together with pencils in our hands and I tried to explain some design concepts. We thought about proper metaphors and real-world objects, wrote down some of the associations for possible symbols that we had in mind and then drew up some prototypes of what later would have become the new sets of material inspired icons that I designed.
My son often had questions and tried to implement what he heard in his sketches. Don’t ask me how I explained the meaning of some of the icons like fertilization and contraception since one’s understanding of an icon is based mostly on previous experience. I did not. Those symbols I kept for my eyes only. Respirator masks and viruses were far more easier to grasp (and to discuss without difficult questions) because of the challenging times we all face. The interaction with my son actually encouraged me to develop and validate my ideas even further. I now think if you can make icons memorable for a 6-year-old then you’ve done a great job.
What a valuable and productive time it was!
The Ignite UI for Angular material inspired icon set contains more than 220 icons for various situations you may encounter in your designs. We are launching all these icons distributed in 5 categories:
Finance
The extended set with finance icons covers general needs related to banking, cash, savings, shopping and e-commerce.
Health
The set with health icons covers different topics as dental care, medicine symbols, medical facilities and institutions, health related issues.
Logos
This set of icons consists of some of the most popular logos you may want to use in your designs like Apple Pay, Dropbox, Google Drive, PayPal, different browser logos, the most recent Microsoft product logos for Word, Excel, Outlook and more — all fitting well within the Material Design language.
Programming
If you’re looking for programming related material icons like git commit, git compare, git merge, repository, inspect code, console and more — this is where you’ll find them.
Social Media
We couldn’t get away without having all the social media material inspired icons for Facebook, TikTok, Instagram, YouTube, LinkedIn, etc.
Each icon is available as an SVG file because of the wide support across modern browsers and in addition we’ve exported the icons as JavaScript objects so you can import them in your Angular/React/Vue app.
The initial target for this set is to work with our Ignite UI for Angular UI framework by utilizing the igx-icon component and the Ignite UI for Angular Icon Service.
Now we are thinking about adding more icon categories in the future and making the icon sets available to as many platforms as we can. We are considering Construction, Food, Music and Sports but if you have any other suggestions for material icons that you feel will be a great addition please comment below.
Stay safe and try to find creative ways to get your kids involved in what you do. It’s quality time and will definitely lead to some memorable moments!
*this article first appeared on https://www.infragistics.com/community/blogs/b/infragistics/posts/220-material-inspired-icons-for-great-ux
