{"id":807,"date":"2015-11-27T13:34:43","date_gmt":"2015-11-27T10:34:43","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=807"},"modified":"2023-08-17T14:10:51","modified_gmt":"2023-08-17T14:10:51","slug":"iconic-simplicity-the-vital-role-of-icons","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/","title":{"rendered":"Iconic Simplicity. The Vital Role of Icons"},"content":{"rendered":"<p><span style=\"color: #333333;\">They are small but vital for the efficiency rate of any application or website. They look simple but take loads of time and effort to feel that way. They follow you on any step of interaction with a product although users rarely \u2013 say never \u2013 think how important they are for the success and speed of this interaction. They have the power to do anything with a user: help, support, engage, encourage, clarify, simplify or vice versa confuse, annoy, disorient, and so on and so forth. They are iconic in the effective user interface. They are icons.<\/span><\/p>\n<p><span style=\"color: #333333;\">The vital role of icons is not a secret for web and app designers now, it is mentioned in numerous articles and <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/design-books-set-ux-ui-hci-improving-with-experts\/\" target=\"_blank\" rel=\"noopener noreferrer\">books on design<\/a>, presented in workshops and webinars, shown in numerous case studies. We decided to add our two cents to this bulk of knowledge about icons, as this theme seems constantly on demand.<\/span><\/p>\n<h2><span style=\"color: #333333;\">The essence of an icon<\/span><\/h2>\n<p><span style=\"color: #333333;\">Basically, an app or desktop icon is an <a href=\"https:\/\/blog.tubikstudio.com\/web-design-basic-types-of-images-web-content\/\">image<\/a> that, having a kind of symbolic and metaphoric potential, becomes the element of navigation in the process of interaction. In a deeper explanation, an icon is a visual symbol representing some action, thing, person, real or virtual.<\/span><\/p>\n<p><span style=\"color: #333333;\"> In many cases, icons are able to stand up for the text, and this ability makes them so popular in the world of modern design. If you replace the stretch of copy with an icon, it saves the place for other elements of interaction on the <a href=\"https:\/\/blog.tubikstudio.com\/mobile-ui-design-15-basic-types-of-screens\/\">app screen<\/a> or <a href=\"https:\/\/blog.tubikstudio.com\/types-of-web-pages\/\">web page<\/a>, therefore, making it more functional without being overloaded. Also, it makes the interaction faster as in most cases people need less time to see and understand the icon than to read and understand the piece of text. Moreover, the icons efficiently move the limits as they enable people who have the problems with copy perception and recognition, such as those who suffer from dyslexia or close problems, to interact with the product. And finally, icons can successfully combine the functions of <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigation<\/a> and explanation with being the aesthetic element of the visual representation of the product, supporting the general style, and having their own character.<\/span><\/p>\n<p><span style=\"color: #333333;\">Being so multifunctional and comprehensive, icons of the apps and websites can be:<\/span><\/p>\n<ul>\n<li><span style=\"color: #333333;\"><strong>interactive<\/strong>, i.e. directly representing <a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">buttons<\/a>, controls, and any other elements of interaction<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>clarifying<\/strong>, i.e. visually explaining some functions, categories, actions, not being the direct element of interaction themselves<\/span><\/li>\n<li><span style=\"color: #333333;\"><strong>decorating and entertaining<\/strong>, i.e. having lower functionality and higher aesthetic potential, providing a decorative addition to general style, for example featuring some seasonal celebrations, etc.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8096\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/tubik-studio-ui-concept.png\" alt=\"tubik studio ui concept\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/tubik-studio-ui-concept.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/tubik-studio-ui-concept-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/tubik-studio-ui-concept-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/09\/tubik-studio-ui-concept-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The example of interactive icons:\u00a0Veggie App Concept\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-10529\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/product_design_tubik-studio-1.png\" alt=\"product design tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/product_design_tubik-studio-1.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/product_design_tubik-studio-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/product_design_tubik-studio-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/03\/product_design_tubik-studio-1-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The example of clarifying\u00a0icons: <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-passfold-designing-ui\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Passfold project<\/a>\u00a0<\/em><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9059\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/easter-icons-tubik-studio.jpg\" alt=\"easter icons tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/easter-icons-tubik-studio.jpg 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/easter-icons-tubik-studio-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/easter-icons-tubik-studio-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/07\/easter-icons-tubik-studio-150x113.jpg 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>The example of decorative\u00a0icons:\u00a0<a href=\"https:\/\/blog.tubikstudio.com\/case-study-animation\/\">Easter and spring-themed icons\u00a0<\/a><\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"color: #333333;\">The Features of Icons<\/span><\/h2>\n<p><span style=\"color: #333333;\">Some basic features of efficient icons include being:<\/span><\/p>\n<h3><span style=\"color: #333333;\">meaningful<\/span><\/h3>\n<p><span style=\"color: #333333;\">As has been mentioned above, an icon is a graphic element that has high symbolic potential. It means that in creating the icon, first of all, a designer should define what is its role and meaning as a separate element and as part of the general layout. Talking about more earthy things for a kind of metaphor, the best chefs always say that everything that is put on the plate should be edible. According to the latest trends, we support the same idea when it comes to icons as well as the other elements of layout: everything that is put on the screen should be functional. Therefore, any icon used in the interface should have its meaning and function. Without it, an icon is just a kind of empty stub, making the layout of the screen or web page dirty with unnecessary elements.<\/span><\/p>\n<h3><span style=\"color: #333333;\">clear<\/span><\/h3>\n<p><span style=\"color: #333333;\"> Behind the clarity here we mean making the icon understandable. That is one more feature supporting icons being meaningful. In fact, what is the point of being meaningful if nobody except the creator understands this meaning? For the icon, lack of clarity is the death knell. Instead of speeding up and easing the process of interaction, such an icon will confuse the user and bring out a poor user experience.<\/span><\/p>\n<h3><span style=\"color: #333333;\">simple<\/span><\/h3>\n<p><span style=\"color: #333333;\"> The simplicity of icons is still a kind of debatable issue. Actually, designers agree that icons should be simple but still argue about where is the level of simplicity needed. Anyway, here in the studio we support the idea that an icon should be as simple as it is required for its particular aim and function and the designer working on it should stand on the foundation of following the existing guides for icons design and omitting any unnecessary details that can overload the image. However, at the same time, it&#8217;s important to remember the general style and other elements of the visual representation of the whole app or website concept. Successful consideration and a combination of these factors will result in efficient icons.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8221\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubik-studio-st-valentine-icons.jpg\" alt=\"tubik-studio-st-valentine-icons\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubik-studio-st-valentine-icons.jpg 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubik-studio-st-valentine-icons-300x225.jpg 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubik-studio-st-valentine-icons-768x576.jpg 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/07\/tubik-studio-st-valentine-icons-150x113.jpg 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Valentine&#8217;s Day icon set\u00a0<\/em><\/span><\/p>\n<h3><span style=\"color: #333333;\">recognizable and unique<\/span><\/h3>\n<p><span style=\"color: #333333;\"> To make the icon recognizable, the designer needs to become <a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/user-research-empathy-is-the-best-ux-policy\/\" target=\"_blank\" rel=\"noopener noreferrer\">a researcher<\/a> before starting with the task. Taking the time for exploration and analysis of the existing icons and thorough investigation of the competition can create the significant basis of making the icon easily remembered and catchy. If a designer finds a way to make the icon recognizable not losing its main meaning, it will become the first step in attracting the user in conditions of active competition as well as will provide a positive feature for user experience as the user won&#8217;t be annoyed losing the time on looking for the necessary icons which aren&#8217;t recognizable at once.<\/span><\/p>\n<p><span style=\"color: #333333;\">The feature of uniqueness mentioned here doesn&#8217;t mean the creation of absolutely unique stuff every time you need the icon, but thinking on some even slight flavor of uniqueness via small changes or details can make the icon more recognizable both in the AppStore or PlayMarket and on the screen of user&#8217;s device.<\/span><\/p>\n<h3><span style=\"color: #333333;\">aesthetic and attractive<\/span><\/h3>\n<p><span style=\"color: #333333;\"> For sure, remembering that icon is a visual representation of the meaning, it&#8217;s important to take the graphic and aesthetic side of the issues into account. Visual appeal is the first step to encourage the user to get into the meaning you represent behind the icon and at the same time, it is the important element making the product regarded as attractive, beautiful, and stylish. Following the principles of<a href=\"https:\/\/blog.tubikstudio.com\/color-theory-brief-guide-for-designers\/\"> color theory<\/a>, proportions and other features making the result of <a href=\"https:\/\/blog.tubikstudio.com\/modern-graphic-design-directions-and-purpose\/\">graphic design<\/a> successful is always very helpful in the creation of a great appearance for the icon meaning.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9594\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icon-logo-tubik-studio-1-1.png\" alt=\"icon-logo-tubik-studio saily\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icon-logo-tubik-studio-1-1.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icon-logo-tubik-studio-1-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icon-logo-tubik-studio-1-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/12\/icon-logo-tubik-studio-1-1-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em><a style=\"color: #333333;\" href=\"https:\/\/blog.tubikstudio.com\/case-study-saily-design-logo\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Saily ghost icon version<\/a>\u00a0<\/em><\/span><\/p>\n<h3><span style=\"color: #333333;\">flexible<\/span><\/h3>\n<p><span style=\"color: #333333;\"> As nowadays more and more various sizes and resolutions get into the game, flexibility and scalability are included in the list of key features making icons efficient. A good icon should be seen, readable and recognizable in different sizes and environments, therefore, it is one more process that should be thoroughly considered while creating icons.<\/span><\/p>\n<h3><span style=\"color: #333333;\">consistent<\/span><\/h3>\n<p><span style=\"color: #333333;\"> Icons, as well as the other elements of layout, have to feel <a href=\"https:\/\/blog.tubikstudio.com\/design-consistency\/\">consistent<\/a> as they often become the most powerful conventions and signifiers. For instance, if there are several icons in the app \u2013 as it usually happens \u2013 they should follow the same style, concept and correspond to the general design\u00a0solution for\u00a0the app, supporting the harmony of visual representation and interaction instead of breaking it with non-consistent elements.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1169\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/media-icons-tubik-studio-1.png\" alt=\"media icons tubik studio\" width=\"800\" height=\"600\" srcset=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/media-icons-tubik-studio-1.png 800w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/media-icons-tubik-studio-1-300x225.png 300w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/media-icons-tubik-studio-1-768x576.png 768w, https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/media-icons-tubik-studio-1-150x113.png 150w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>IT Office Icons Set\u00a0<\/em><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #333333;\">Creating icons for various design projects in Tubik, we try to keep the principles mentioned above carefully combining them with every piece of unique design we work on. Except for creating handcrafted icons for projects, we have also presented several packs of icons on Dribbble, Behance, Creative Market, and Envato.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9496\" src=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2015\/11\/tubik-studio-animation-icons-1.gif\" alt=\"tubik studio animation icons\" width=\"800\" height=\"600\" \/><\/p>\n<p><span style=\"color: #333333;\"><em>Multimedia Icons Presentation<\/em><\/span><\/p>\n<p><span style=\"color: #333333;\">In our next posts, we are going to tell you about the process of designing icons in more detail, from rough sketching to polishing the digital version.<\/span><\/p>\n<h2>Recommended reading<\/h2>\n<p>Here is a bunch of articles for further exploration of the topic of icons and other important interactive elements:<\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/how-to-make-your-app-icon-stand-out-design-tips\/\">How to Make Your App Icon Stand Out<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/small-stars-of-big-design-interactive-ui-elements\/\">Small Stars of Big Design: Interactive UI Elements<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/visual-perception-icons-vs-copy-in-ui\/\">Visual Perception: Icons VS Copy in UI<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/case-study-huawei-icon-design\/\">Case Study: HUAWEI. Icon Design for EMUI 10<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/uiux-design-glossary-navigation-elements\/\" target=\"_blank\" rel=\"noopener noreferrer\">UI\/UX Design Glossary. Navigation Elements<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/small-elements-big-impact-types-and-functions-of-ui-icons\/\">Small Elements, Big Impact: Types and Functions of UI Icons<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/web-design-basic-types-of-images-web-content\/\">Web Design. 5 Basic Types of Images for Web Content<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/how-to-design-search\/\">How to Design Effective Search in User Interfaces<\/a><\/p>\n<p><a href=\"https:\/\/blog.tubikstudio.com\/ui-design-basic-types-of-buttons-in-user-interfaces\/\">Basic Types of Buttons in User Interfaces<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.<\/p>\n","protected":false},"author":3,"featured_media":9780,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,7,9],"tags":[237,482,248,488,256,491,261,502,264,515,319,533,20,323,100,331,104,332,114,437,133,447,147,457,151,463,212,465,233,469,235,479],"coauthors":[],"class_list":["post-807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-illustration","category-processes_and_tools","category-ui_ux","tag-icons","tag-user-experience","tag-illustration","tag-user-experience-designers","tag-interaction-design","tag-user-interface","tag-interface-design","tag-ux","tag-interface-navigation","tag-uxui","tag-mobile-app","tag-web-design","tag-app-design","tag-mobile-design-article","tag-design","tag-mobile-ui","tag-design-best-practices","tag-mobile-user-interface","tag-design-education","tag-tips","tag-design-inspiration","tag-tubik-studio","tag-design-studio","tag-ui","tag-design-tips","tag-ui-design-article","tag-graphic-design","tag-ui-design-examples","tag-human-computer-interaction","tag-ui-design-tips","tag-icon-design","tag-usability"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Iconic Simplicity. The Vital Role of Icons<\/title>\n<meta name=\"description\" content=\"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Iconic Simplicity. The Vital Role of Icons\" \/>\n<meta property=\"og:description\" content=\"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2015-11-27T10:34:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-17T14:10:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"1042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/\",\"name\":\"Iconic Simplicity. The Vital Role of Icons\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg\",\"datePublished\":\"2015-11-27T10:34:43+00:00\",\"dateModified\":\"2023-08-17T14:10:51+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg\",\"width\":1500,\"height\":1042,\"caption\":\"tubikstudio icons design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Iconic Simplicity. The Vital Role of Icons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Iconic Simplicity. The Vital Role of Icons","description":"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.","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:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/","og_locale":"en_US","og_type":"article","og_title":"Iconic Simplicity. The Vital Role of Icons","og_description":"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.","og_url":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2015-11-27T10:34:43+00:00","article_modified_time":"2023-08-17T14:10:51+00:00","og_image":[{"width":1500,"height":1042,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/","url":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/","name":"Iconic Simplicity. The Vital Role of Icons","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg","datePublished":"2015-11-27T10:34:43+00:00","dateModified":"2023-08-17T14:10:51+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article on basic principles and the most important features of icon design for applications and websites, supported with examples by Tubik designers.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2016\/04\/tubik-studio-icons-design.jpg","width":1500,"height":1042,"caption":"tubikstudio icons design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/iconic-simplicity-the-vital-role-of-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Iconic Simplicity. The Vital Role of Icons"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=807"}],"version-history":[{"count":4,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/807\/revisions"}],"predecessor-version":[{"id":14772,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/807\/revisions\/14772"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/9780"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=807"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}