{"id":51397,"date":"2023-12-07T05:30:34","date_gmt":"2023-12-07T13:30:34","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=51397"},"modified":"2024-01-18T07:13:21","modified_gmt":"2024-01-18T15:13:21","slug":"app-icon-design","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/","title":{"rendered":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design-1024x512.png\" alt=\"App icon design\" class=\"wp-image-51398\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>One of the most critical choices any app development company will make is the design of the app icon. Good icons are inviting and will increase interaction, while a bad design can slow down adoption and make users less likely to use it. Their first impression will be your app\u2019s icon \u2013 it&#8217;s what they&#8217;ll first see from whatever store they first download your newly-released product, and it&#8217;s what they\u2019ll look at every time they launch it.&nbsp;<\/p>\n\n\n\n<p>Getting the right depiction is not just nice to have; it&#8217;s essential if you want your app to be successful. Fortunately, when it comes to crafting icons, there are plenty of places and companies from which to draw inspiration. In this article, we&#8217;ll talk about what five top tech companies are doing for app icon design &#8211; and what you can learn from these amazing designers.<\/p>\n\n\n\n<p><strong>Key takeaways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>App icon design needs to meet a combination of criteria, including aesthetics, functionality, brand representation, and platform-specific considerations.<\/li>\n\n\n\n<li>When considering designing your own icons, consider tips by top companies, such as Apple&#8217;s emphasis on simplicity or Microsoft&#8217;s Fluent Design System balancing innovation with legacy.<\/li>\n<\/ul>\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<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-app-icon-design\">What is App Icon Design?<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-app-icon-design-tips\/\">App icon<\/a> design involves creating the perfect icon for your app. It often encapsulates the app&#8217;s brand, purpose, and primary features, distilling these elements into a simple, memorable image. Consider color choice, shape, and scalability factors when designing an app icon.\u00a0<\/p>\n\n\n\n<p>Furthermore, designers must keep in mind platform-specific guidelines. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ios-vs-andoid-ui-design-for-mobile\/\" target=\"_blank\" rel=\"noreferrer noopener\">iOS, Android<\/a>, and other operating systems have unique design standards to ensure a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/app-design-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">coherent user experience<\/a>. We&#8217;ll discuss those in more detail when we look at what popular tech companies do for their app icons.\u00a0<\/p>\n\n\n\n<p>In essence, app icon design is a blend of aesthetics, functionality, and brand representation, all confined within a small visual space. Given its impression on users and the limited pixel space, getting the best app icon design is crucial.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-top-companies-say-about-app-icon-design\">What Top Companies Say about App Icon Design?<\/h2>\n\n\n\n<p>When it comes to design, there&#8217;s a lot to learn from the top tech companies as they often employ some of the highest-talent designers on the market. And their market leader position means they usually can set some of the trends. Here&#8217;s what Apple, Microsoft, IBM, Atlassian, and Google are doing for app design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-apple\">1. Apple<\/h3>\n\n\n\n<p>Many people regard Apple as the leader in design. From iconic devices to amazing apps, countless companies look to them for inspiration. Like many platform developers, <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/app-icons\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Apple lists their best practices online<\/a>. In terms of icon design, here are the three key takeaways from the brand.<\/p>\n\n\n\n<p><strong>First, simple is better.<\/strong> Think about all the memorable icons you&#8217;ve seen. Let\u2019s take Facebook or Twitter&#8217;s old logo. These are simply a bird and an &#8220;f,&#8221; respectively. Now, think about Apple&#8217;s designs. Apple Music, for example, is nothing but a couple of notes. Each of these icons embraces simplicity. Remember, these graphical depictions tend to be pretty small on user devices. Crafting intricate details gets lost quickly. Great app icon design is bold and recognizable \u2013 it&#8217;s simple and easy to spot in a sea of apps. Think about how you can make your icon design process result in something simple!<\/p>\n\n\n\n<p><strong>Next, remove text, if possible<\/strong>, or at least keep it to a minimum. Only include text if it is a vital part of your brand. Too many people want to include a company name or a tagline, but that&#8217;s often hard to read, especially on smaller devices. Keep your app icon graphical, if possible.<\/p>\n\n\n\n<p>Finally, <strong>consider your platform<\/strong> and create alternate app icons if necessary. What looks good on iOS with the rounded corners may not look as good on Android with the circular design. By considering (and tailoring your app icon, too) the platform, you&#8217;ll create a unique but unified experience, no matter where people use your app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-microsoft\">2. Microsoft<\/h3>\n\n\n\n<p>Microsoft&#8217;s Fluent Design System encapsulates the future of user interface and experience design, all while ensuring a profound connection with the company&#8217;s historical roots. Regarding app icon design through Fluent, there&#8217;s an evident synthesis of past, present, and future \u2013 something that designers of modern apps should consider!<\/p>\n\n\n\n<p>Fluent-based icons go beyond mere aesthetics. While they embrace depth, light, motion, and materiality for a modern and interactive user experience, there&#8217;s a foundational respect for Microsoft&#8217;s legacy. The challenge lies in striking a balance: how does one innovate while respecting and recalling the iconic imagery from earlier software generations? Microsoft wanted to create a facelift for their products while keeping much of that history. Here are a couple of rules they applied:&nbsp;<\/p>\n\n\n\n<p><strong>Going beyond monochrome. <\/strong>Microsoft&#8217;s answer is layered and dynamic icons that nod to the past. These icons maintain familiarity, ensuring long-standing users feel at home while drawing new users with their contemporary look. Color palettes resonate with both legacy themes and modern design paradigms. The textures and materials are current and modern but reminiscent of a tactile, real-world experience.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/u8u1wY7WRbl-mS7mg2zdDc-bt_i06GaP8fDyVdPlO4Lii5sMatM_pj9MywjLOi-oPgw-4yihmfFtN6dsjixXT-yWOgbMjuDUWJ9dsvRcTE6zaRro6bhcbm4r-jKu7tiNcGgwhub6Dye87t6SLivZ8Ew\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><strong>Balancing legacy with innovation<\/strong>. If your company is not entirely new, there&#8217;s much to learn from what Microsoft did with Fluent. In the design process for your app icon, nodding to your company&#8217;s history while simultaneously conveying your company&#8217;s fresh, new app is vital. By looking at what Microsoft did with Fluent, you can see how to balance that rich history while conveying the bold future you want for your app and company.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-ibm\">3. IBM<\/h3>\n\n\n\n<p>People may not think of IBM when they think of apps, but they have developed a compelling design system called the IBM Design Language. Designers should consider a few things that IBM has noted, as these concepts serve as guidelines for our app icons.&nbsp;<\/p>\n\n\n\n<p>Central to their icon design philosophy is the categorization into four distinct groups: &#8220;stroke&#8221; and &#8220;fill&#8221; icons, hero brands, third-party logos, and the unique IBM Plex app icons. This concept hints at something very critical for app icon design \u2013 space. Is your icon a stroke icon? A fill one? How are you using the app icon&#8217;s available space, or are you using negative space? These are essential considerations.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/RnvChI0FFjyqN4Mex2a6VjPo2h5PBKYracO49tS6xjWuWdM4w3W5ioH91dan7344LHfcixdDA8AhXP72T-lN4Ifz8QUgd555DZx4rgCWHNRHFQU7ri9se29sRwd7wqd6IT-mEe-U7tP9v52ndgAFqRk\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>Additionally, IBM <strong>applies the same grid for all icons<\/strong>. Designers craft every IBM icon on a pixel-based grid measuring 32px x 32px for uniformity. This serves as a foundational guideline, ensuring each piece of artwork snaps perfectly into place. However, designers are encouraged to make fine-tuning adjustments during creation to achieve the desired shape.<\/p>\n\n\n\n<p>IBM also <strong>maintains icon consistency by creating icon groups<\/strong>. This is vital if you have more than one app because it lets people subtly know that your company is behind all of them. It is not just IBM that does this, of course \u2013 so do Apple and Microsoft. You can often tell which company is behind an app just by looking at the icon!<\/p>\n\n\n\n<p>If you&#8217;re a designer, it&#8217;s worth flipping through the IBM Design Language, as it has many fantastic pointers to achieve the perfect design.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-atlassian\">4. Atlassian<\/h3>\n\n\n\n<p>As is often the case with any visual art form, various designers and companies have different perspectives. Atlassian emphasizes some things the previous companies have not mentioned \u2013 accessibility and avoiding inundating users.<\/p>\n\n\n\n<p>In today&#8217;s modern world, accessibility is not a nice to have. It&#8217;s a must. <strong>Ensure your app&#8217;s icon is accessible<\/strong>. This means it should adhere to WCAG contrast ratios and there should be no text with unfamiliar icons. You want people to immediately grasp what your icon and app are about, regardless of their abilities.&nbsp;<\/p>\n\n\n\n<p>Additionally, Atlassian also encourages people to avoid going overboard with icons. Keep them simple and clean to minimize &#8220;icon fatigue.&#8221; People look at dozens of app icons daily, and if yours is too visually cluttered or intricate, they will tune out from your app rather than lean into it.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/FPsTh8h7n9rjf3xKNGBJoyqgnDtjF67AylE8zALFiKYVCkSUHV0w9UZjvNc22j6eIYAfLVb-UlHve5x7bSfxw_RX2JlX4vn4c-yZDxOcXQzJbFLEK-LmZpjMyGWOdlaKNc5c5lEFfKK0UAprTBoFRO8\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-google\">5. Google<\/h3>\n\n\n\n<p>Like all the companies above, Google also significantly emphasizes its icons through Material \u2013 Google&#8217;s app icon design system. While Material has numerous paradigms, three that designers should consider stand out.<\/p>\n\n\n\n<p><strong>First, think about color<\/strong>. The Material guidelines specify which colors to use for active and inactive icons. Additionally, you should differentiate between active and focused versus just active. Designers often leave out the focused state, especially for apps with touch capabilities.&nbsp;<\/p>\n\n\n\n<p>Next, make <strong>complex icons legible<\/strong>. As the companies above note, these must be readable, and Google is no exception to this policy. If you need to adjust icons to ensure they are legible and clear, do so, even if they are system icons.<\/p>\n\n\n\n<p>Finally, <strong>Google&#8217;s system icons with Material are bold, symmetrical, and minimal.<\/strong> They convey just the amount of information necessary for the user to determine what the action behind the icon does. This design principle is worth considering with your app icon design.<\/p>\n\n\n\n<p>For example, the icons below show just enough information to convey their meaning without being overly complex.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-us.googleusercontent.com\/u63FpQqTOT2WMfz9sOzLNn7R7c0XSww9wk3ZfV6FN-H1h6a6tNxBYiumsPw21a3pThVFDD1LgjWWl7LtwJ77yC_cBSPzNKr7jmIDcvvhbUPB8kT7OeXoRm0QsR2ajadn9cnnEh-VHpt7xnRWTmKJMvI\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-use-uxpin-to-prototype-your-app-icons\">Use UXPin to Prototype Your App Icons<\/h2>\n\n\n\n<p>UXPin is the leading solution for crafting user interfaces and prototyping apps. It is also one of the best ways to prototype your app icons and see how users will react to them before finalizing every single little detail across multiple platforms. As you can likely see from the examples above, companies put tremendous thought into app icons to ensure they convey the right message and feel for an app.<\/p>\n\n\n\n<p>If you&#8217;re in the design phase for your app, <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">try UXPin for free<\/a> and prototype your perfect app icon!<\/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>One of the most critical choices any app development company will make is the design of the app icon. Good icons are inviting and will increase interaction, while a bad design can slow down adoption and make users less likely to use it. Their first impression will be your app\u2019s icon \u2013 it&#8217;s what they&#8217;ll<\/p>\n","protected":false},"author":3,"featured_media":51398,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-51397","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-ui-design"],"yoast_title":"","yoast_metadesc":"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.","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>App Icon Design \u2013 5 Amazing Ideas from Tech Companies | UXPin<\/title>\n<meta name=\"description\" content=\"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.\" \/>\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\/app-icon-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"App Icon Design \u2013 5 Amazing Ideas from Tech Companies\" \/>\n<meta property=\"og:description\" content=\"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-07T13:30:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-18T15:13:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.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=\"8 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\\\/app-icon-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"App Icon Design \u2013 5 Amazing Ideas from Tech Companies\",\"datePublished\":\"2023-12-07T13:30:34+00:00\",\"dateModified\":\"2024-01-18T15:13:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/\"},\"wordCount\":1600,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/App-icon-design.png\",\"articleSection\":[\"Blog\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/\",\"name\":\"App Icon Design \u2013 5 Amazing Ideas from Tech Companies | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/App-icon-design.png\",\"datePublished\":\"2023-12-07T13:30:34+00:00\",\"dateModified\":\"2024-01-18T15:13:21+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/App-icon-design.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/App-icon-design.png\",\"width\":1200,\"height\":600,\"caption\":\"App icon design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/app-icon-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"App Icon Design \u2013 5 Amazing Ideas from Tech Companies\"}]},{\"@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":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies | UXPin","description":"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.","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\/app-icon-design\/","og_locale":"en_US","og_type":"article","og_title":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies","og_description":"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/","og_site_name":"Studio by UXPin","article_published_time":"2023-12-07T13:30:34+00:00","article_modified_time":"2024-01-18T15:13:21+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies","datePublished":"2023-12-07T13:30:34+00:00","dateModified":"2024-01-18T15:13:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/"},"wordCount":1600,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png","articleSection":["Blog","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/","name":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png","datePublished":"2023-12-07T13:30:34+00:00","dateModified":"2024-01-18T15:13:21+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Read our guide on designing desktop and mobile app icons. Discover the benefits of designing an icon by yourself and find out how to do it.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2023\/12\/App-icon-design.png","width":1200,"height":600,"caption":"App icon design"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/app-icon-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"App Icon Design \u2013 5 Amazing Ideas from Tech Companies"}]},{"@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\/51397","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=51397"}],"version-history":[{"count":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51397\/revisions"}],"predecessor-version":[{"id":51404,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/51397\/revisions\/51404"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/51398"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=51397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=51397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=51397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}