{"id":8684,"date":"2019-06-19T15:27:01","date_gmt":"2019-06-19T13:27:01","guid":{"rendered":"https:\/\/www.vexels.com\/blog\/?p=8684"},"modified":"2020-02-26T05:56:34","modified_gmt":"2020-02-26T04:56:34","slug":"how-to-use-icons-for-better-user-interface-on-your-app-or-website","status":"publish","type":"post","link":"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/","title":{"rendered":"How to Use Icons for Better User Interface on Your App or Website"},"content":{"rendered":"[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_link_target=”_self” column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]When it comes to developing an online platform design is a key consideration. And this includes all of the different factors of the site, not just the overall design or feel of the site. Even small design choices such as icons can have a big impact on usability, user behaviour and even something as untrackable as the <\/span>feel<\/span><\/i> of the site. <\/span><\/p>\n

With that in mind, here are some of the pros and cons of carefully considering your icon use in both app and website design. <\/span>[\/vc_column_text][vc_column_text]\n

What are Icons? <\/b><\/h3>\n

Icons are, in simple terms, an image which is used to communicate something to users. <\/span><\/p>\n

The form of an icon can take many different shapes, all with a unique message encoded into it. Ideally, they are easy to remember and universally recognisable. Of course, in ancient times the use of icons was the basis of all languages. So our movement towards this more visual form of communication is perhaps not that much of a surprise.<\/span><\/p>\n

The use of icons in modern web and app design is almost second-nature, as certain icons have become standardised. However, if you are considering the use of icons in your next project and how to apply them, then it is important to consider a few important factors. Especially in terms of the usability and UX side of icon use. <\/span>[\/vc_column_text]

\"Icons<\/a><\/div><\/div>[vc_column_text]\n

Icons for Usability <\/b><\/h3>\n

The most common implementation of icons on a website or app is for usability factors. It is surprising how much harder a site can be to navigate without recognised icons in place, an issue which is only exasperated further with apps. The overall use of icons can have a number of important benefits for the overall UX of your site or app. <\/span>[\/vc_column_text][nectar_icon_list color=”Accent-Color” direction=”vertical” icon_size=”small” icon_style=”border”][nectar_icon_list_item icon_type=”icon” title=”List Item” id=”1582692972500-6″ tab_id=”1582692972502-0″ icon_fontawesome=”fa fa-check” header=”Summarizing Content” text=”One of the key uses of icons is the ability to sum up a piece of content. Rather than place saying the words \u201ccall us\u201d, you can input a simple phone icon in its place. The use of this in your design can help to simplify and push users for better conversion rates. When you use icons in an app, it can also help to save space – which can be especially important on apps where users will not be using bigger screens.”] [\/nectar_icon_list_item][nectar_icon_list_item icon_type=”icon” title=”List Item” id=”1582692972612-5″ tab_id=”1582692972614-10″ icon_fontawesome=”fa fa-check” header=”Attention Drawing” text=”If you want to draw particular attention to a space on your website or app, especially to drive conversions, then an icon is the ideal way to do so. Images also help to draw our attention and keep it; as too much text can be boring for users (causing high bounce rates). If a picture is worth a thousand words, then, icons must be worth a good four-hundred-and-fifty.<\/p>\n

For example, on mobile having the house symbol to indicate the home page is a recognisable method of site navigation. If you replaced this, for whatever reason, then you have to prepare for the possibility that users may find your site hard to navigate. Which may draw their attention for the wrong reasons. Keep it attention-grabbing, but also keep it recognizable and you will have succeeded in the perfect use of icons for your project.”] [\/nectar_icon_list_item][nectar_icon_list_item icon_type=”icon” title=”List Item” id=”1582692972664-6″ tab_id=”1582692972666-1″ icon_fontawesome=”fa fa-check” header=”Readability” text=”Icons can help to improve the readability and the overall design of your project. Implementing text on your site or app is fine, but it doesn\u2019t necessarily make for good user experience. Especially on mobile, numerous long-winded calls to action or similar can simply reduce the overall readability of the page. It can also make it more difficult to use. As, depending on the device, text links and the like can be difficult to click through and also tend to look outdated.<\/p>\n

Implementing icons in favour of text can help to improve the overall readability. Pertinent text can remain, but anything that can be replaced by icons is then transformed into something a little bit more”][\/nectar_icon_list_item][nectar_icon_list_item icon_type=”icon” title=”List Item” id=”1582692972704-1″ tab_id=”1582692972705-7″ icon_fontawesome=”fa fa-check” header=”Familiarity” text=”Sometimes, the simplest consideration you need to make when it comes to icons and your site\/app usability is the familiarity factor. Will your user recognise the icon for its intended purpose?<\/p>\n

Think of the save button in Microsoft Word. Here is an icon which many of the platform users below a certain age will not really understand. A floppy disk, to them, might as well be an ancient artifact uncovered in a pyramid. And yet, the familiarity of the icon cannot be denied. Therefore, it\u2019s use as a familiar icon is almost universal as a save function. It is for this reason that you want to ensure as many of the icons as possible also have the same effect on your own project.”][\/nectar_icon_list_item][\/nectar_icon_list][vc_column_text]\n

Global Recognition Factor <\/b><\/h3>\n

The true value in icons is, of course, the recognition factor. Iconography is a global language; whether you realize you can speak that language or not. <\/span><\/p>\n

At the moment, there are global standards for symbols that pertain to hazards, chemicals, traffic, etc. But, the syntax of regular symbols\u2013even the emoji\u2013has become part of the global vernacular. The reason for this is largely thanks to the internet. With a global source of conversation and transfer of information, we have unexpectedly developed a language independent of country borders. <\/span><\/p>\n

Adapting your site or app in this way, then, can help you attract a more global audience.<\/span>[\/vc_column_text][vc_column_text]\n

Changes to Google Search<\/b><\/h3>\n

Recently, Google has updated the way in which they present search results on mobile devices. For example, here is the Vexels site in mobile Google search: <\/span>[\/vc_column_text]

\"\"<\/div><\/div>[vc_column_text]As you can see, there is now a small favicon next to the Vexels URL. This is a custom site icon and the more recognisable it is for your website, the better your appearance will be on Google Search results. It doesn\u2019t necessarily have to be a custom icon either, as plenty of brands opt for unbranded icons in this instance, but it can be a nice addition to your sites overall appearance. <\/span><\/p>\n

Final Thoughts<\/b><\/h3>\n

The use of icons in your web and app design is surprisingly a big factor to consider, though you may find that you use them almost intuitively. And if you\u2019re in search of some good icons to use in your next project, then look no further than here at Vexels. The <\/span>icon library<\/span><\/a> is full to bursting with great imagery to apply to your next project! <\/span><\/p>\n

About the Author:<\/strong> <\/span>Zack Halliwell is a freelance writer in the business and marketing niche. He covers topics including<\/span> mobile app development<\/span>, social media marketing and freelancing. You can connect with him on Twitter @ZackHalliwell.<\/span><\/em>[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"

[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_link_target=”_self” column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]When it comes…<\/p>\n","protected":false},"author":4,"featured_media":8326,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[860,837],"tags":[904,903,902,905,675,657,681,656],"class_list":{"0":"post-8684","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-user-experience","8":"category-web-design","9":"tag-icons-for-software","10":"tag-icons-for-ui","11":"tag-icons-for-ux","12":"tag-software-developers","13":"tag-ui","14":"tag-user-experience","15":"tag-user-interface","16":"tag-ux"},"acf":[],"yoast_head":"\nHow to Use Icons for Better User Interface on Your App or Website - Vexels Blog<\/title>\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.vexels.com\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Icons for Better User Interface on Your App or Website - Vexels Blog\" \/>\n<meta property=\"og:description\" content=\"[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_link_target=”_self” column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]When it comes...\" \/>\n<meta property=\"og:url\" content=\"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Vexels Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-19T13:27:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-26T04:56:34+00:00\" \/>\n<meta property=\"og:image\" content=\"\" \/>\n\t<meta property=\"og:image:width\" content=\"1273\" \/>\n\t<meta property=\"og:image:height\" content=\"839\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"vexblog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"vexblog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Icons for Better User Interface on Your App or Website - Vexels Blog","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.vexels.com\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Icons for Better User Interface on Your App or Website - Vexels Blog","og_description":"[vc_row type=”in_container” full_screen_row_position=”middle” scene_position=”center” text_color=”dark” text_align=”left” overlay_strength=”0.3″ shape_divider_position=”bottom” bg_image_animation=”none”][vc_column column_padding=”no-extra-padding” column_padding_position=”all” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_link_target=”_self” column_shadow=”none” column_border_radius=”none” width=”1\/1″ tablet_width_inherit=”default” tablet_text_alignment=”default” phone_text_alignment=”default” column_border_width=”none” column_border_style=”solid” bg_image_animation=”none”][vc_column_text]When it comes...","og_url":"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/","og_site_name":"Vexels Blog","article_published_time":"2019-06-19T13:27:01+00:00","article_modified_time":"2020-02-26T04:56:34+00:00","og_image":[{"width":1273,"height":839,"url":":\/blog\/wp-content\/uploads\/2019\/05\/slider-logo-2dfg.png","type":"image\/png"}],"author":"vexblog","twitter_card":"summary_large_image","twitter_misc":{"Written by":"vexblog","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#article","isPartOf":{"@id":"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/"},"author":{"name":"vexblog","@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/a60ce14f13277acd1f9a3ae9fff71e60"},"headline":"How to Use Icons for Better User Interface on Your App or Website","datePublished":"2019-06-19T13:27:01+00:00","dateModified":"2020-02-26T04:56:34+00:00","mainEntityOfPage":{"@id":"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/"},"wordCount":1374,"image":{"@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/05\/slider-logo-2dfg.png","keywords":["icons for software","icons for ui","icons for ux","software developers","ui","user experience","user interface","ux"],"articleSection":["User Experience","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/","url":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/","name":"How to Use Icons for Better User Interface on Your App or Website - Vexels Blog","isPartOf":{"@id":"https:\/\/www.vexels.com\/blog\/#website"},"primaryImageOfPage":{"@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#primaryimage"},"image":{"@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2019\/05\/slider-logo-2dfg.png","datePublished":"2019-06-19T13:27:01+00:00","dateModified":"2020-02-26T04:56:34+00:00","author":{"@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/a60ce14f13277acd1f9a3ae9fff71e60"},"breadcrumb":{"@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":[":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2019\/05\/slider-logo-2dfg.png","contentUrl":"\/blog\/wp-content\/uploads\/2019\/05\/slider-logo-2dfg.png","width":1273,"height":839,"caption":"Logo Designs"},{"@type":"BreadcrumbList","@id":":\/blog\/how-to-use-icons-for-better-user-interface-on-your-app-or-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vexels.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Icons for Better User Interface on Your App or Website"}]},{"@type":"WebSite","@id":"https:\/\/www.vexels.com\/blog\/#website","url":"https:\/\/www.vexels.com\/blog\/","name":"Vexels Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vexels.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.vexels.com\/blog\/#\/schema\/person\/a60ce14f13277acd1f9a3ae9fff71e60","name":"vexblog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/35946552084c03d5e3e1645771ac6c5b638fe4542d7391a814e0ad93d0fd6708?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/35946552084c03d5e3e1645771ac6c5b638fe4542d7391a814e0ad93d0fd6708?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/35946552084c03d5e3e1645771ac6c5b638fe4542d7391a814e0ad93d0fd6708?s=96&d=identicon&r=g","caption":"vexblog"},"sameAs":["http:\/\/wp-json\/wp\/v2\/users\/me"],"url":"\/blog\/author\/vexblog\/"}]}},"_links":{"self":[{"href":"\/blog\/wp-json\/wp\/v2\/posts\/8684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/comments?post=8684"}],"version-history":[{"count":5,"href":"\/blog\/wp-json\/wp\/v2\/posts\/8684\/revisions"}],"predecessor-version":[{"id":10600,"href":"\/blog\/wp-json\/wp\/v2\/posts\/8684\/revisions\/10600"}],"wp:featuredmedia":[{"embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/media\/8326"}],"wp:attachment":[{"href":"\/blog\/wp-json\/wp\/v2\/media?parent=8684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/categories?post=8684"},{"taxonomy":"post_tag","embeddable":true,"href":"\/blog\/wp-json\/wp\/v2\/tags?post=8684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}