{"id":803,"date":"2020-08-27T07:07:00","date_gmt":"2020-08-27T07:07:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=803"},"modified":"2025-02-25T15:20:34","modified_gmt":"2025-02-25T15:20:34","slug":"material-inspired-icons","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/material-inspired-icons","title":{"rendered":"220+ Material Inspired Icons for Great UX"},"content":{"rendered":"\n<p class=\"graf graf--p\">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 summarising it, making it exciting and drawing the user\u2019s attention to the most important parts of your web projects.<\/p>\n\n\n\n<p class=\"graf graf--p\">They save space in toolbars and palettes and there is<strong class=\"markup--strong markup--p-strong\"> no need to translate<\/strong> icons for international users.<\/p>\n\n\n\n<p class=\"graf graf--p\">While working on different samples and apps at <a class=\"markup--anchor markup--p-anchor\" href=\"https:\/\/infragistics.com\" target=\"_blank\" rel=\"noopener noreferrer\">Infragistics<\/a> our design team has always found Google\u2019s <strong class=\"markup--strong markup--p-strong\">material icons<\/strong> great for user interface design, but <strong class=\"markup--strong markup--p-strong\">kind of limited\u200a<\/strong>\u2014\u200aespecially in areas like <strong class=\"markup--strong markup--p-strong\">Finance<\/strong> and <strong class=\"markup--strong markup--p-strong\">Health<\/strong>. So, after some discussions we decided to <strong class=\"markup--strong markup--p-strong\">extend the official Material Design Icon set<\/strong> provided by Google with an unofficial subset of <strong class=\"markup--strong markup--p-strong\">5 categories<\/strong> of icons that will be valuable not only for us but for the great people that use our products.<\/p>\n\n\n\n<p class=\"graf graf--p\">Being a product designer working from home for a couple of months due to a <strong class=\"markup--strong markup--p-strong\">worldwide pandemic<\/strong> and taking care of a family at the same time is no easy task. Especially when you have a <strong class=\"markup--strong markup--p-strong\">curious 6-year-old boy<\/strong> who wants to know more about your work and why it is more important than playing Monopoly or football for example.<\/p>\n\n\n\n<p class=\"graf graf--p\">I saw this as an <strong class=\"markup--strong markup--p-strong\">opportunity to spend the time together<\/strong> and since my son really likes to draw, I decided to achieve this by enjoying some collaborative hours during the next days in <strong class=\"markup--strong markup--p-strong\">sketching ideas<\/strong> for the five categories our design team has decided to start with.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7215.blog-sketches-tb.png\" alt=\"Sketches my 6-year-old son did for some of the material inspired icons\" title=\"Sketches my 6-year-old son did for some of the material inspired icons\"\/><\/figure>\n\n\n\n<p>We sat together with&nbsp;<strong>pencils in our hands<\/strong>&nbsp;and I tried to explain some design concepts. We thought about proper&nbsp;<strong>metaphors<\/strong>&nbsp;and&nbsp;<strong>real-world objects<\/strong>, 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&nbsp;<strong>material inspired icons<\/strong>&nbsp;that I designed.<\/p>\n\n\n\n<p>My son often had questions and tried to implement what he heard in his sketches.&nbsp;<strong>Don\u2019t ask me how I explained the meaning of some of the icons like fertilization and contraception since one\u2019s understanding of an icon is based mostly on previous experience.<\/strong>&nbsp;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&nbsp;<strong>develop and validate my ideas<\/strong>&nbsp;even further. I now think if you can make icons memorable for a 6-year-old then you\u2019ve done a great job.<\/p>\n\n\n\n<p>Valuable and productive time it was!<\/p>\n\n\n\n<p>The&nbsp;<a href=\"https:\/\/web.archive.org\/web\/20241211024745\/https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/material_icons_extended.html\">IgniteUI for Angular material inspired icon set<\/a>&nbsp;contains more than 220 icons for various situations you may encounter in your designs. We are launching all these icons distributed in 5 categories:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"finance\">Finance<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"301\" src=\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image-1024x301.png\" alt=\"\" class=\"wp-image-1812\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image-1024x301.png 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image-300x88.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image-768x225.png 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image-480x141.png 480w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2020\/08\/image.png 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The extended set with finance icons covers general needs related to banking, cash, savings, shopping and e-commerce.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"health\">Health<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/5875.health-material-icons-tb.png\" alt=\" \"\/><\/figure>\n\n\n\n<p>The set with health icons covers different topics as dental care, medicine symbols, medical facilities and institutions, health related issues.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"logos\">Logos<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8508.logos-material-icons-tb.png\" alt=\" \"\/><\/figure>\n\n\n\n<p>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 \u2014 all fitting well within the Material Design language.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"programming\">Programming<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8508.programming-material-icons-tb.png\" alt=\" \"\/><\/figure>\n\n\n\n<p>If you\u2019re looking for programming related material icons like git commit, git compare, git merge, repository, inspect code, console and more \u2014 this is where you\u2019ll find them.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"social-media\">Social Media<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8508.social-media-material-icons-tb.png\" alt=\" \"\/><\/figure>\n\n\n\n<p>We couldn\u2019t get away without having all the social media material inspired icons for Facebook, TikTok, Instagram, YouTube, LinkedIn, etc.<\/p>\n\n\n\n<p>Each icon is available as an&nbsp;<strong>SVG file<\/strong>&nbsp;because of the wide support across modern browsers and in addition we\u2019ve exported the icons as&nbsp;<strong>JavaScript objects<\/strong>&nbsp;so you can import them in your&nbsp;<strong>Angular\/React\/Vue<\/strong>&nbsp;app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 summarising it, making it exciting and drawing the user\u2019s attention to the most important parts of your web projects. <\/p>\n","protected":false},"author":121,"featured_media":2386,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,7],"tags":[],"class_list":["post-803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ux","category-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/121"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=803"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/803\/revisions"}],"predecessor-version":[{"id":2195,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/803\/revisions\/2195"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2386"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}