{"id":14290,"date":"2022-08-03T03:14:00","date_gmt":"2022-08-03T10:14:00","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=14290"},"modified":"2022-10-12T07:52:05","modified_gmt":"2022-10-12T14:52:05","slug":"use-material-design-icons","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/","title":{"rendered":"Material Design Icons \u2013 Building Blocks of Web and App Design"},"content":{"rendered":"\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/6mKoyYCq3f3sJUhhGHbr0XjbvmWhi3l4CAennaktLYXNyWtzwkDjl_L74zfR7NX0d4Lsh9vmaa-Ul_WV8ixo6mcjmE1l-XTAQkXe7juuWEIrm2AACwRDPk5dpcUlatixotWCczoEFhKZXTmib3DQMQs\" alt=\"\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a> is one of the most popular design systems. If you own an Android device, you use Material Design daily. Many companies use the <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/material-design-rules\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design System<\/a> as a foundation for building mobile and web applications.<\/p>\n\n\n\n<p>The system&#8217;s comprehensive component library and resources, including Material Icons (now <a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Symbols<\/a>), give organizations and startups the building blocks to scale products infinitely without designing from scratch.<\/p>\n\n\n\n<p>This article explores Material Symbols and other Material resources you can use for your next product development project.<\/p>\n\n\n\n<div class=\"wp-block-yoast-seo-table-of-contents yoast-table-of-contents\"><h2>Table of contents<\/h2><ul><li><a href=\"#h-what-is-material-design\" data-level=\"2\">What is Material Design?<\/a><ul><li><a href=\"#h-material-symbols-launch\" data-level=\"3\">Material Symbols Launch<\/a><\/li><li><a href=\"#h-material-icons-set\" data-level=\"3\">Material Icons Set<\/a><\/li><\/ul><\/li><li><a href=\"#h-material-symbols-what-s-new\" data-level=\"2\">Material Symbols &#8211; What&#8217;s New?<\/a><ul><li><a href=\"#h-three-styles\" data-level=\"3\">Three Styles<\/a><\/li><li><a href=\"#h-build-your-own-material-icons\" data-level=\"3\">Build Your Own Material Icons<\/a><\/li><\/ul><\/li><li><a href=\"#h-how-to-use-google-s-material-icons-symbols\" data-level=\"2\">How to Use Google&#8217;s Material Icons &amp; Symbols<\/a><ul><li><a href=\"#h-downloading-svg-or-png\" data-level=\"3\">Downloading SVG or PNG<\/a><\/li><li><a href=\"#h-css-cdn\" data-level=\"3\">CSS\/CDN<\/a><\/li><li><a href=\"#h-operating-systems-frameworks\" data-level=\"3\">Operating Systems &amp; Frameworks<\/a><\/li><li><a href=\"#h-designer-usage\" data-level=\"3\">Designer Usage<\/a><\/li><\/ul><\/li><li><a href=\"#h-using-material-icons-and-symbols-with-typography\" data-level=\"2\">Using Material Icons and Symbols With Typography<\/a><ul><li><a href=\"#h-weights\" data-level=\"3\">Weights<\/a><\/li><li><a href=\"#h-sizing-alignment\" data-level=\"3\">Sizing &amp; Alignment<\/a><\/li><li><a href=\"#h-material-icons-accessibility\" data-level=\"3\">Material Icons Accessibility<\/a><\/li><\/ul><\/li><li><a href=\"#h-designing-with-material-design-s-icons-in-uxpin\" data-level=\"2\">Designing with Material Design&#8217;s Icons in UXPin<\/a><ul><li><a href=\"#h-step-one-click-the-icon-element\" data-level=\"3\">Step One &#8211; Click the icon element<\/a><\/li><li><a href=\"#h-step-two-draw-an-icon-on-the-canvas\" data-level=\"3\">Step Two &#8211; Draw an icon on the canvas<\/a><\/li><li><a href=\"#h-step-three-icon-properties-panel\" data-level=\"3\">Step Three &#8211; Icon properties panel<\/a><\/li><li><a href=\"#h-step-four-select-an-icon\" data-level=\"3\">Step Four &#8211; Select an icon<\/a><\/li><li><a href=\"#h-step-five-adjust-icon-properties\" data-level=\"3\">Step Five &#8211; Adjust icon properties<\/a><\/li><li><a href=\"#h-step-6-add-interactions\" data-level=\"3\">Step 6 &#8211; Add interactions<\/a><\/li><\/ul><\/li><li><a href=\"#h-improve-prototyping-and-testing-with-uxpin\" data-level=\"2\">Improve Prototyping and Testing With UXPin<\/a><\/li><\/ul><\/div>\n\n\n\n<p>Material Design UI and Icons come standard with every UXPin plan. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to build beautiful apps with UXPin and Material Design today!<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-material-design\">What is Material Design?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/an-introduction-to-interactions-with-material-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Material Design<\/a> is a design library developed by Google, including UI components, icons, typography, and more. Every Material component includes guidelines for implementation, usage, anatomy, behavior, and more to help designers and engineers achieve the best results while delivering high-quality user experiences.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"300\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components.png\" alt=\"design system atomic library components\" class=\"wp-image-35010\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/design-system-atomic-library-components-700x280.png 700w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Google launched the first version of Material Design at the 2014 <a href=\"https:\/\/io.google\/2022\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google I\/O Conference<\/a>. In May 2021, Google released Material Design 3, including notable features like <a href=\"https:\/\/m3.material.io\/styles\/color\/dynamic-color\/overview\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Dynamic Color<\/a>, foldable device components, and design tokens.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-material-symbols-launch\">Material Symbols Launch<\/h3>\n\n\n\n<p>One of Material Design&#8217;s most exciting recent updates was the <a href=\"https:\/\/www.material.io\/blog\/introducing-symbols\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">launch of Material Symbols<\/a>\u2013a customizable icon set with over 2,000 open-source icons in five styles. You can still find all your favorite Material Icons, but now you have more flexibility and customization to meet your product and brand&#8217;s requirements.<\/p>\n\n\n\n<p><a href=\"https:\/\/fonts.google.com\/icons?icon.set=Material+Icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Icons<\/a> are still available but don&#8217;t offer the same customization as Symbols. You can only adjust the size and density versus the four variable options with symbols.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-material-icons-set\">Material Icons Set<\/h3>\n\n\n\n<p>Google has kept the old Material Icons, albeit fewer than the Symbols catalog. Icons are available in five styles, Outlined, Filled, Founded, Sharp, and Two-tone.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-material-symbols-what-s-new\">Material Symbols &#8211; What&#8217;s New?<\/h2>\n\n\n\n<p>Material Icons has moved under Google Fonts, offering a variable icon set in three styles, Outlined, Rounded, and Sharp. Designers also have the option to customize the icon set with four variables or axes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Fill:<\/strong> Fill or unfilled appearance<\/li><li><strong>Weight:<\/strong> Defines the symbol&#8217;s stroke from 100 to 700 weight<\/li><li><strong>Grade:<\/strong> Granular adjustments to the symbol&#8217;s thickness to convey emphasis<\/li><li><strong>Optical size:<\/strong> Size icons to 20, 24, 40, or 48 pixels<\/li><\/ul>\n\n\n\n<p>The variable methodology allows engineers to store multiple variations in a single font (or icon) rather than several files. By reducing the file size and number of files, engineers enjoy better performance and fewer assets to manage.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-three-styles\">Three Styles<\/h3>\n\n\n\n<p>Google also introduced three new styles to match a brand&#8217;s identity and UI design.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Outlined:<\/strong> Clean and light. Designers can adjust the icon weight to complement the product&#8217;s fonts.<\/li><li><strong>Rounded:<\/strong> The curved aesthetic works well with rounded logos and heavier fonts.<\/li><li><strong>Sharp:<\/strong> Designed to match UIs with straight edges and 90-degree corner styling.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Zrzut-ekranu-2022-08-3-o-16.52.26-1024x649.png\" alt=\"material-design-icons-types\" class=\"wp-image-36143\" width=\"650\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Zrzut-ekranu-2022-08-3-o-16.52.26-1024x649.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Zrzut-ekranu-2022-08-3-o-16.52.26-474x300.png 474w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Zrzut-ekranu-2022-08-3-o-16.52.26-768x487.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Zrzut-ekranu-2022-08-3-o-16.52.26.png 1266w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-build-your-own-material-icons\">Build Your Own Material Icons<\/h3>\n\n\n\n<p>If you can&#8217;t find the icon you need in Material Symbols&#8217; vast catalog, Google includes <a href=\"https:\/\/m3.material.io\/styles\/icons\/designing-icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">guidelines for designing custom icons<\/a>, including:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Design principles:<\/strong> best practices to create clear iconography that&#8217;s meaningful and helpful to users.<\/li><li><strong>Icon sizes and layout:<\/strong> how to set up the grid size and layout for designing icons using a <a href=\"https:\/\/www.uxpin.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">design tool<\/a>.<\/li><li><strong>Grid and keyline shapes:<\/strong> techniques for creating consistent a consistent icon set.<\/li><li><strong>Icon metrics:<\/strong> icon design anatomy including corners, weight, stroke, and complexity.<\/li><\/ul>\n\n\n\n<p>Following these helpful guidelines, you can utilize Material&#8217;s comprehensive icon set while including a few relevant to your brand.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-use-google-s-material-icons-symbols\">How to Use Google&#8217;s Material Icons &amp; Symbols<\/h2>\n\n\n\n<p>There are several ways designers and engineers can use <a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Material Icons and Symbols<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-downloading-svg-or-png\">Downloading SVG or PNG<\/h3>\n\n\n\n<p>You can download Icons and Symbols in SVG or PNG format. We recommend using SVG for its performance and customization benefits. PNG files are much larger and more complicated for designers and engineers to edit and resize.<\/p>\n\n\n\n<p>Google allows you to customize your Icons and Symbols before downloading, so you have a finalized asset to use in your project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-cdn\">CSS\/CDN<\/h3>\n\n\n\n<p>Material Symbols provides a CSS file for website installations similar to what you use for Google Fonts. The problem with this method is that it requires your website to make additional requests, which can severely affect performance.<\/p>\n\n\n\n<p>If you&#8217;re planning to use more than one Material Symbol, it&#8217;s better to use another method for installation.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-operating-systems-frameworks\">Operating Systems &amp; Frameworks<\/h3>\n\n\n\n<p>Material Icons and Symbols offer downloads for Android and iOS to install as project assets, with code snippets for implementation. Material Design includes instructions for <a href=\"https:\/\/flutter.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Flutter<\/a> (a Google-developed programming language) and <a href=\"https:\/\/material.angular.io\/components\/icon\/overview\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Angular<\/a>. React instructions are available in <a href=\"https:\/\/mui.com\/material-ui\/material-icons\/#main-content\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MUI&#8217;s documentation<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-designer-usage\">Designer Usage<\/h3>\n\n\n\n<p>Most design tools offer plugins or extensions for Material Icons. If you&#8217;re using UXPin, the complete Material Icons set comes standard with every plan.<\/p>\n\n\n\n<p>You can also <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/elements\/#importing-and-editing-icons\" target=\"_blank\" rel=\"noreferrer noopener\">import your own SVG icons<\/a>, edit them in UXPin and save them to your Design System to share with other team members.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-using-material-icons-and-symbols-with-typography\">Using Material Icons and Symbols With Typography<\/h2>\n\n\n\n<p><a href=\"https:\/\/m3.material.io\/styles\/icons\/applying-icons\" target=\"_blank\" rel=\"noreferrer noopener\">Google&#8217;s Material 3 documentation<\/a> offers tips and best practices for pairing icons with typography.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-weights\">Weights<\/h3>\n\n\n\n<p>Never use different weights for your icons and text. Google makes it easy to pair these assets with Material Symbols&#8217; Weight customization variable. Ensure you always match the font weight with the icon weight to achieve a clean and consistent aesthetic.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/qyJG7_l5uIzsfol0v4hPdIOSrLdHjI8zTtXnZBRyZlquKJSo8k4NDjO_Q5iY9WEBY8EqTqzrKw3CEbMzYl2ggyG9o1v3wqSqmOUB59J1WCWi0fxUxG47kxtiTgceGcoZ5OY3No2PDwkl256lyDBFMw\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>Correct font weight.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/4yqA-hBp7VhaZvvzMvcPKqFulfyPFEUtJYPWk2lRWi7HfRJoT9wufsDgSdSvCaZtbZmvVaMQ5DMZoRf4JjElCph0jvl18E4w4aukpg630Ildks5bL4nGnHQQzqEi7BKfEmmLxRwgpVo_cFJpYjohHQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<p>Incorrect font weight.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-sizing-alignment\">Sizing &amp; Alignment<\/h3>\n\n\n\n<p>Always match the icon size and alignment with the text. Users must be able to read both and recognize they&#8217;re related. Google recommends designers <em>&#8220;shift down the baseline of symbols to approximately 11.5% of the type size.&#8221; <\/em>This technique will keep icons and text uniform and aligned.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/CNKyGruQaTM-fucf1Wux8gqHLV6nQ9psBYrrkaasuuhhmhe5OJy5iV0fiWdkvblYDDI5l2unztzhNQi--CK8xaefnE62NPYIWjKmwI2uANjMwO8ZHhCTwVsOIK_Zp2SaZ3QoMYGFFuv0_o3IRzWaGA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-material-icons-accessibility\">Material Icons Accessibility<\/h3>\n\n\n\n<p><a href=\"https:\/\/m3.material.io\/styles\/icons\/applying-icons#7d4474f4-7aa2-4f3a-9f2f-c70dd4480dcd\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google provides brief but helpful advice to designers about icon accessibility<\/a>. Designers must always use meaningful, descriptive labels with icons, especially for navigation. Icons <em>without<\/em> text labels can appear ambiguous and confusing to users. Designers must also include alt text for screen readers and other assistive technologies.<\/p>\n\n\n\n<p>Target size is also a crucial factor for icons. People with large fingers or hand disabilities might accidentally hit the wrong icon button, causing confusion and frustration.<\/p>\n\n\n\n<p>Google recommends designers use a minimum target size of 48 pixels. If you&#8217;re using a 20-pixel icon, provide enough padding to make the total target area 48 pixels.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/ONgXh60RgskQ7UARfZeTvNF7ZA79pmHjalyBK86b37rAl2-v9sxo-C2In6zYX62FrAyE5f0t6YVHopyfGbKNQ9Uhe2t8lHvDwbxJSIMC-ENxq_AYJkEujFYbAumPyKnYSdeKJde1hLwoJ8bPrNxxcA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-designing-with-material-design-s-icons-in-uxpin\">Designing with Material Design&#8217;s Icons in UXPin<\/h2>\n\n\n\n<p>With several icon sets, including Material Icons, preinstalled with UXPin, designers don&#8217;t have to install plugins or upload external files. Here&#8217;s how easy it is to add icons to your project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-one-click-the-icon-element\">Step One &#8211; Click the icon element<\/h3>\n\n\n\n<p>Click the icon element in the <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#quick-tools\" target=\"_blank\" rel=\"noreferrer noopener\">Quick Tools panel<\/a> to the left of the canvas. Alternatively, you can use the keyboard shortcut OPTION+I (on Mac) or ALT+I (on PC).<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/ZvTDpaVeuOJ9wd1C-pi3CGQSJLaUIb9dMKSYt1UdNTLD9HZZr2Q7o_lrumo9dLEeuiL0JvKEUrZW-s9wS7AvPOrZx-l7mf77hfPDdmDwqbw9l-YnyMJgtCmb1RjscMBaoCKwMF5Z_yVkQlEGIeqHCA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-two-draw-an-icon-on-the-canvas\">Step Two &#8211; Draw an icon on the canvas<\/h3>\n\n\n\n<p>Click and drag a square where you&#8217;d like the icon to appear on the canvas. Hold down SHIFT to maintain an equal width and height.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/q24xonFE1Fhzu_cwhIhrcwfSvu1sIPSz0ydCXiy0coHQbRTvP2bJe8aqKMfNqUeMidgZQ8xSxWDeYFzoOsw2mETSOPhohulf5rJnZLyVreCxnOycHhhfbvjrGq_zG32bBdNO8Eqrnq2sqzzdBd5jRQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-three-icon-properties-panel\">Step Three &#8211; Icon properties panel<\/h3>\n\n\n\n<p>Once you draw an icon, an icon properties panel will appear on the right <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interface\/#properties-panel\">Properties Panel<\/a>. You can select Material Icons or one of the other sets, including Fonts Awesome, Retina Icons, and a UXPin set, to name a few.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/Zm0RtP_eJCLPUfKDNlmASU_2B2L3y6ZCP7BamYEmbAIY3dxmYuEWPKn7e6DGq0PTQqcpTSSmD2_Cod-dqGSRGRNtP5r0Y6YySgzj_pDQrpFhpXNFOWwiQiYhBPCgsmB1xPBaUacI5uCpwdL6ZrjuuA\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-four-select-an-icon\">Step Four &#8211; Select an icon<\/h3>\n\n\n\n<p>Scroll through the available Material Icons to find what you need. Click on any icon in the properties panel (while you have the icon selected on the canvas) to make your selection.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/IXL_I3HioQVthjJKRaJsW_Iz3dyBKUk8_lg3HkNZVxrcVj_QRpjWgRU4sz_3lEKgRiCWgVSXSCOg8KrsJfNnTH5nzfwX5ZkSZkJ6SPcMqlTlCVn0ecUEnN-Hx8kHueehQrz99flBz9pCWpqZKGdlHQ\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-five-adjust-icon-properties\">Step Five &#8211; Adjust icon properties<\/h3>\n\n\n\n<p>Once you have chosen an icon, you can style it using the Properties Panel above the <em>Icon<\/em> section. Below the Color Picker is a dropdown with available design systems, including Material Design, so designers don&#8217;t have to copy\/paste HEX codes from elsewhere.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/aBcJHESy6utwWQHEJuBJzsAzuwod3J0B1sRB4lWG6XO4YVX7ncxbGZVAOkC28zOnuq5QCznf6J8JVdYKlD4Onpu4EgK8ZstU-PJ-kvyxFPsBBnqC2HZ2_7PQVhdQUJ8BZv-lyVnp3jeboCsvodb5xw\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-step-6-add-interactions\">Step 6 &#8211; Add interactions<\/h3>\n\n\n\n<p>At the top of the Properties Panel, you&#8217;ll find <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/interactions\/\">Interactions<\/a>. Add interactions, animations, transitions, etc., to make your icons interactive. For example, we might want this user icon to open a personalized profile page.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/5jkWRY74N7UxtgHHVPn-1iG5teNGCuWP3RrRs77QdysWYzV5x2K4ZcsKKsmmCD-fJ1-1vk-a2U0g2QFQA497O2U1IJ_zpI7saUIhWK05n5L61PduuOxEBRf6wZG_wNVpBuxza783QpipYCx2RfOq7w\" alt=\"\" width=\"650\"\/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Check out UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/examples#section-interactive-ui-patterns\" target=\"_blank\" rel=\"noreferrer noopener\">Interactive UI Patterns<\/a> and <a href=\"https:\/\/www.uxpin.com\/examples#section-app-examples\" target=\"_blank\" rel=\"noreferrer noopener\">App Examples<\/a> to see how UXPin&#8217;s features work and what&#8217;s possible with code-based design.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-improve-prototyping-and-testing-with-uxpin\">Improve Prototyping and Testing With UXPin<\/h2>\n\n\n\n<p>Material Icons are just one convenience of working in UXPin. Our goal is to help designers build prototypes quicker and with greater functionality and fidelity as image-based design tools.<\/p>\n\n\n\n<p>Using one of UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-system-libraries\/#built-in-design-libraries\" target=\"_blank\" rel=\"noreferrer noopener\">built-in design libraries<\/a>, designers can drag and drop elements to build interactive prototypes in minutes. We&#8217;ve included five popular design libraries to accommodate every type of project, from websites to web and mobile applications for enterprise and B2C products.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"750\" height=\"501\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-autolayout.png\" alt=\"uxpin autolayout\" class=\"wp-image-35003\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-autolayout.png 750w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2022\/04\/uxpin-autolayout-449x300.png 449w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><\/figure>\n\n\n\n<p>Every UXPin plan includes Material Design, iOS, Bootstrap, Foundation, and User Flows, with each library&#8217;s interactive elements, colors, text styles, and icons.<\/p>\n\n\n\n<p>UXPin&#8217;s <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Systems<\/a> feature allows designers to build a design system from scratch, automatically categorizing the library into Colors, Assets, Typography, and Components. You can also set up <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#setting-permissions\" target=\"_blank\" rel=\"noreferrer noopener\">permissions<\/a> and include <a href=\"https:\/\/www.uxpin.com\/docs\/design-systems\/design-systems\/#adding-descriptions\" target=\"_blank\" rel=\"noreferrer noopener\">documentation<\/a> for designers and engineers to follow.<\/p>\n\n\n\n<p>Build better prototypes that accurately replicate the final product experience using UXPin&#8217;s code-based design tool. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a> to discover the possibilities of designing with UXPin.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Material Design is one of the most popular design systems. If you own an Android device, you use Material Design daily. Many companies use the Material Design System as a foundation for building mobile and web applications. The system&#8217;s comprehensive component library and resources, including Material Icons (now Material Symbols), give organizations and startups the<\/p>\n","protected":false},"author":3,"featured_media":36145,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,442,199,210,205,15,11,4,19,7],"tags":[],"class_list":["post-14290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-component-driven-prototyping","category-design-systems","category-desktop-app","category-mobile-design","category-responsive-web-design","category-tutorials","category-ui-design","category-uxpin","category-web-design"],"yoast_title":"How to Use Material Design Icons? Step-by-Step Tutorial","yoast_metadesc":"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design's icons and see how to use them properly.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use Material Design Icons? Step-by-Step Tutorial<\/title>\n<meta name=\"description\" content=\"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design&#039;s icons and see how to use them properly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Design Icons \u2013 Building Blocks of Web and App Design\" \/>\n<meta property=\"og:description\" content=\"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design&#039;s icons and see how to use them properly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-03T10:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-12T14:52:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Material Design Icons \u2013 Building Blocks of Web and App Design\",\"datePublished\":\"2022-08-03T10:14:00+00:00\",\"dateModified\":\"2022-10-12T14:52:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/\"},\"wordCount\":1642,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/Material-Design-Icons.png\",\"articleSection\":[\"Blog\",\"Component-Driven Prototyping\",\"Design Systems\",\"Desktop App\",\"Mobile Design\",\"Responsive Web Design\",\"Tutorials\",\"UI Design\",\"UXPin\",\"Web Design\"],\"inLanguage\":\"en-US\",\"accessibilityFeature\":[\"tableOfContents\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/\",\"name\":\"How to Use Material Design Icons? Step-by-Step Tutorial\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/Material-Design-Icons.png\",\"datePublished\":\"2022-08-03T10:14:00+00:00\",\"dateModified\":\"2022-10-12T14:52:05+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design's icons and see how to use them properly.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/Material-Design-Icons.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2016\\\/06\\\/Material-Design-Icons.png\",\"width\":1200,\"height\":600,\"caption\":\"Material Design Icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/use-material-design-icons\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material Design Icons \u2013 Building Blocks of Web and App Design\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use Material Design Icons? Step-by-Step Tutorial","description":"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design's icons and see how to use them properly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/","og_locale":"en_US","og_type":"article","og_title":"Material Design Icons \u2013 Building Blocks of Web and App Design","og_description":"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design's icons and see how to use them properly.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/","og_site_name":"Studio by UXPin","article_published_time":"2022-08-03T10:14:00+00:00","article_modified_time":"2022-10-12T14:52:05+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Material Design Icons \u2013 Building Blocks of Web and App Design","datePublished":"2022-08-03T10:14:00+00:00","dateModified":"2022-10-12T14:52:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/"},"wordCount":1642,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png","articleSection":["Blog","Component-Driven Prototyping","Design Systems","Desktop App","Mobile Design","Responsive Web Design","Tutorials","UI Design","UXPin","Web Design"],"inLanguage":"en-US","accessibilityFeature":["tableOfContents"]},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/","name":"How to Use Material Design Icons? Step-by-Step Tutorial","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png","datePublished":"2022-08-03T10:14:00+00:00","dateModified":"2022-10-12T14:52:05+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Google\u2019s Material Design informs influenced many sites and apps. Learn about Material Design's icons and see how to use them properly.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2016\/06\/Material-Design-Icons.png","width":1200,"height":600,"caption":"Material Design Icons"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/use-material-design-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Material Design Icons \u2013 Building Blocks of Web and App Design"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=14290"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14290\/revisions"}],"predecessor-version":[{"id":37053,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/14290\/revisions\/37053"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/36145"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=14290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=14290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=14290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}