{"id":7782,"date":"2023-01-17T13:00:06","date_gmt":"2023-01-17T13:00:06","guid":{"rendered":"https:\/\/www.uxdesigninstitute.com\/blog\/?p=7782"},"modified":"2024-05-09T14:26:57","modified_gmt":"2024-05-09T14:26:57","slug":"7-principles-of-icon-design","status":"publish","type":"post","link":"https:\/\/www.uxdesigninstitute.com\/blog\/7-principles-of-icon-design\/","title":{"rendered":"7 principles of icon design all UI Designers should follow"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Icons are a small yet crucial part of any user interface. If you want to provide a first-class user experience, you need to master the art of icon design\u2014and that means knowing and following a certain set of principles.\u00a0<\/span><\/p>\n<p><b>So what are the golden rules of icon design?<\/b><span style=\"font-weight: 400;\"> The most important principles are:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#clarity-of-meaning\"><span style=\"font-weight: 400;\">Clarity of meaning<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#visual-clarity\"><span style=\"font-weight: 400;\">Visual clarity (or readability)<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#simplicity\"><span style=\"font-weight: 400;\">Simplicity<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#familiarity\"><span style=\"font-weight: 400;\">Familiarity<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#alignment-and-balance\"><span style=\"font-weight: 400;\">Alignment and balance<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#consistency-across-the-board\"><span style=\"font-weight: 400;\">Consistency across the board<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#personality-and-branding\"><span style=\"font-weight: 400;\">Personality and branding<\/span><\/a><\/li>\n<\/ol>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-ui-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/ui-design?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN UI DESIGN]<\/p>\n                    <span>Take our Professional Certificate in UI Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<p><span style=\"font-weight: 400;\">In this guide, you\u2019ll find a detailed explanation of these principles\u2014together with real-world examples to show you what good icon design looks like in action.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here\u2019s everything we cover (if you want to skip straight to the principles, just click ahead):<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-are-ui-icons-and-what-are-they-used-for\"><span style=\"font-weight: 400;\">What are UI icons and what are they used for?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#what-are-the-3-types-of-icons-used-in-UI-design\"><span style=\"font-weight: 400;\">What are the 3 types of icons used in UI design?<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#7-key-principles-of-icon-design\"><span style=\"font-weight: 400;\">7 key principles of icon design<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><a href=\"#how-to-get-started-with-icon-design\"><span style=\"font-weight: 400;\">How to get started with icon design<\/span><\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Let\u2019s jump in!<\/span><\/p>\n<div class=\"embed-yt ratio ratio-16x9\"><iframe loading=\"lazy\" title=\"What is UI Design?\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/YWzY_ZH0JyE?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<h2 id=\"what-are-ui-icons-and-what-are-they-used-for\"><strong>What are UI icons and what are they used for?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">In <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/what-is-ui-design\/\"><span style=\"font-weight: 400;\">user interface (UI) design<\/span><\/a><span style=\"font-weight: 400;\">, icons are small visual elements\u2014like symbols\u2014which are used to represent certain functions, features, or types of content within a user interface.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s consider the IKEA website. They use a variety of icons throughout to convey different actions the user can take. The heart icon in the top right represents the user\u2019s wishlist; if they click on it, they\u2019ll be taken to an overview of all the items they\u2019ve saved. The basket icon next to it represents the user\u2019s shopping bag. If they click on it, they can see all items they\u2019ve added to their cart and proceed to checkout.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7783\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.21.41.png\" alt=\"ikea homepage icons\" width=\"1272\" height=\"444\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">In the next screenshot, there\u2019s a shopping bag with a plus sign next to each individual item. This icon represents the \u2018add to shopping bag\u2019 function. There\u2019s also a simple heart icon which the user can click on to save an item to their wishlist.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7784\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.22.33.png\" alt=\"ikea icons\" width=\"1198\" height=\"936\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">Then, at the very bottom of the page, there\u2019s a range of familiar icons representing Facebook, Twitter, Pinterest, Instagram, and YouTube, as well as a variety of possible payment methods including VISA, Mastercard, and PayPal.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7785\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.23.04.png\" alt=\"footer icons\" width=\"1284\" height=\"380\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\">As with the IKEA example, icons are used to communicate with the user visually. They help the user to navigate a digital interface and complete different actions without the need for lengthy text descriptions. The idea is that icons are familiar and easily recognisable so the user can decipher, at a glance, what each icon means.\u00a0<\/span><\/p>\n<h2 id=\"what-are-the-3-types-of-icons-used-in-UI-design\"><strong>What are the 3 types of icons used in UI design?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Icons can fall into one of three categories:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Universal icons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Conflicting icons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Unique icons<\/span><\/li>\n<\/ol>\n<h3 id=\"universal-icons\"><strong>Universal icons<\/strong><\/h3>\n<p><b>Universal icons are those that are easily and instantly recognisable by most users<\/b><span style=\"font-weight: 400;\">. Consider the magnifying glass icon which typically represents the search function, the house icon which indicates the homepage\/home screen, or the triangle-in-circle icon which we\u2019ve come to recognise as a play button. No matter where you see these icons, you intuitively know what they mean.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7786\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.23.34.png\" alt=\"universal icons\" width=\"1086\" height=\"320\" title=\"\"><span style=\"font-weight: 400;\">\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/span><\/p>\n<h3 id=\"conflicting-icons\"><strong>Conflicting icons<\/strong><\/h3>\n<p><b>Conflicting icons are those that have different meanings depending on where they\u2019re used<\/b><span style=\"font-weight: 400;\">. For example, on the IKEA website, the heart icon is used to save an item to your wishlist. On Instagram, however, the heart icon represents the \u2018like\u2019 function. On other social media sites, the \u2018like\u2019 function is conveyed with a thumbs up icon. Elsewhere, a star icon might be used to \u2018favourite\u2019 something or add it to your wishlist. See how there is no universal meaning for these icons? <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7787\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.27.55.png\" alt=\"Conflicting icons\" width=\"860\" height=\"314\" title=\"\"><\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/p>\n<h3 id=\"unique-icons\"><strong>Unique icons<\/strong><\/h3>\n<p><b>Unique icons represent features and functions that are unique to a particular product or interface<\/b><span style=\"font-weight: 400;\">. These can be hard to recognise as they\u2019re not something the user encounters regularly. As such, they require the user to \u2018learn\u2019 them in the context of a specific app or website. For example, the GetYourGuide app uses a ticket icon to represent the user\u2019s bookings.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7788\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.29.10.png\" alt=\"unique icons\" width=\"1240\" height=\"226\" title=\"\"><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Airbnb also uses a range of unique icons to represent the different types of accommodation available. <\/span><span style=\"font-weight: 400;\"><br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7789\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.29.46.png\" alt=\"holiday icons\" width=\"1248\" height=\"198\" title=\"\"><\/span><\/p>\n<p><span style=\"font-weight: 400;\">In both examples, the icons are accompanied by text to help clarify their meaning. Otherwise, it would be very difficult for the user to understand what each icon stands for.\u00a0<\/span><\/p>\n<h2 id=\"7-key-principles-of-icon-design\"><strong>7 key principles of icon design all UI designers must follow<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Now we know what icons are and what they\u2019re used for, let\u2019s explore the practicalities of designing your own. You want to design icons which communicate effectively with the user, spark familiarity and recognition, and complement the overall design of the interface.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To achieve all of those things, there are certain principles you\u2019ll need to follow. The seven core principles of icon design are:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Clarity of meaning<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Visual clarity (or readability)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Simplicity<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Familiarity<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Alignment and balance<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Consistency across the board<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Personality and branding<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">These rules apply to both individual icon design and to the design of entire icon families (i.e. a set of icons which all belong to the same brand or product). So what do they each mean? Let\u2019s delve in.\u00a0<\/span><\/p>\n<h3 id=\"clarity-of-meaning\"><strong>1. Clarity of meaning<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The first golden rule of icon design is <\/span><b>clarity<\/b><span style=\"font-weight: 400;\">. When a user encounters an icon, they should be able to easily deduce what the icon means. As such, it\u2019s important to design your icons with your target users in mind.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The clarity principle is especially crucial if you\u2019re designing a unique icon which isn\u2019t universal. Think about what visual clues or symbols your users might associate with the action you\u2019re trying to convey. For example, if you wanted to design a \u2018library\u2019 icon for a study app, you might use the familiar image of a book. An owl, on the other hand, might be too obscure.\u00a0<\/span><\/p>\n<h3 id=\"visual-clarity\"><strong>2. Visual clarity (or readability)<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">The second icon design principle is <\/span><b>visual clarity<\/b><span style=\"font-weight: 400;\"> or <\/span><b>readability<\/b><span style=\"font-weight: 400;\">. Icons are small, so you want to make it as easy as possible for the user to see exactly what\u2019s going on. If you include too much fine detail or inadequate spacing, you risk your icons\u2014and their individual elements\u2014morphing into a blurry blob.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Just as you do with typography, colour, and most other aspects of UI design, create your icons for optimal legibility.\u00a0<\/span><\/p>\n<h3 id=\"simplicity\"><strong>3. Simplicity<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Closely related to visual clarity is the <\/span><b>simplicity<\/b><span style=\"font-weight: 400;\"> principle. As you\u2019re working with limited space, it\u2019s essential to convey the meaning of each icon simply and efficiently. You don\u2019t want the user to ponder over unnecessary detail or have to peer too closely to figure out what the icon is actually depicting. Convey it as succinctly as you can.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider these two examples of a lightbulb icon. The one on the left is fairly simple, while the one on the right includes more detail. Both convey the same thing, but the simpler version is arguably much easier to make sense of.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7790\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.30.42.png\" alt=\"simplicity in icons\" width=\"738\" height=\"338\" title=\"\"><\/p>\n<h3 id=\"familiarity\"><strong>4. Familiarity<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Our fourth principle of icon design is <\/span><b>familiarity<\/b><span style=\"font-weight: 400;\">. You don\u2019t need to reinvent the wheel; stick instead with what your users know.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Earlier in this post, we talked about the different types of icons: universal, conflicting, and unique. Wherever possible, design icons that are universal. Classic examples are the magnifying glass used to represent the \u2018search\u2019 function, the envelope icon used to represent a user\u2019s inbox, the house icon to represent the home screen, and the printer icon to convey printing functionality.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When designing such icons, there\u2019s no need to come up with something new. Users already understand what these icons mean, almost as second nature\u2014and that\u2019s the kind of intuitive usability you want to create.\u00a0<\/span><\/p>\n<section id=\"promotion\" class=\"promotion-content-raw inlinepromo inlinepromo_professional-certificate-in-content-designp-1 my-4\" style=\"\">\n\t<div class=\"w-container\">\n\t\t<div class=\"row align-items-center\">\n\t\t\t<div class=\"col-md-12 promotion-info\">\n                <a class=\"link-content\" href=\"https:\/\/www.uxdesigninstitute.com\/courses\/content-design?utm_source=blog&utm_medium=blog_panel_text&utm_campaign=blog_promo\" style=\"\">\n                    <p>[GET CERTIFIED IN CONTENT DESIGN]<\/p>\n                    <span>Take our Professional Certificate in Content Design course<\/span>\n                <\/a>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/section>\n\n<h3 id=\"alignment-and-balance\"><strong>5. Alignment and balance<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Now we\u2019re getting right down to the details. Icon design should be a precise and meticulous art, so make sure you strive for <\/span><b>alignment and balance<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Essentially, this means positioning each element of your icon so that it \u2018looks right\u2019 to the naked eye. Sometimes this requires central alignment and even spacing, but often it\u2019s a case of using your own judgement to achieve the right balance.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Consider these two icons taken from <\/span><a href=\"https:\/\/fonts.google.com\/icons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Google\u2019s icon library<\/span><\/a><span style=\"font-weight: 400;\">. The first, a circular icon, has the line and arrow aligned perfectly central. Imagine how irksome it would be if the arrow wasn\u2019t quite in the middle of the line it\u2019s pointing to!\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The second icon, however, has the plus symbol aligned to the right\u2014which works much better with the shape it\u2019s enclosed in (not quite a rectangle). When designing your own icons, use your designer\u2019s eye to ensure the right alignment and balance for each individual icon.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7791\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.31.33.png\" alt=\"alignment and balance examples\" width=\"716\" height=\"252\" title=\"\"><\/p>\n<h3 id=\"consistency-across-the-board\"><strong>6. Consistency across the board<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Our sixth principle of icon design, <\/span><b>consistency across the board<\/b><span style=\"font-weight: 400;\">, refers to the design of entire icon families. While each individual icon is conveying its own message, all icons used across a product should exist in harmony. This means they all need to adhere to the same set of rules.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">To create consistency, ensure that all icons carry the same visual weight (i.e. are the same height and width). And, if you\u2019re using colour, use a consistent colour scheme which aligns with the overall visual brand.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Let\u2019s once again return to our IKEA example. Each of the icons shown has a different shape, but you can see that they belong to the same icon family. This is thanks to the consistency principle.\u00a0<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7792\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.32.03.png\" alt=\"examples of consistency across icons\" width=\"1106\" height=\"256\" title=\"\"><\/p>\n<h3 id=\"personality-and-branding\"><strong>7. Personality and branding<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Last but not least: design your icons with <\/span><b>personality and branding <\/b><span style=\"font-weight: 400;\">in mind. As an integral part of a product\u2019s user interface, icons have an important role to play in capturing and aligning with the wider visual brand.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This is your chance to get creative. You can use colour and style to design icons which are visually unique (without compromising on those all-important qualities of simplicity, clarity, and familiarity). <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7793\" src=\"https:\/\/www.uxdesigninstitute.com\/blog\/wp-content\/uploads\/2023\/01\/Screenshot-2023-01-17-at-12.32.35.png\" alt=\"examples of personality and branding across icons\" width=\"1274\" height=\"242\" title=\"\"><\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here you can see some icons from the <\/span><a href=\"https:\/\/www.hollandandbarrett.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Holland &amp; Barrett<\/span><\/a><span style=\"font-weight: 400;\"> icon family. If you\u2019re familiar with Holland &amp; Barrett (if not, head over to their website) you can see how these icons have been designed in line with the overall brand.\u00a0<\/span><\/p>\n<h2 id=\"how-to-get-started-with-icon-design\"><strong>How to get started with icon design<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">Now you know the golden rules of icon design. So what next?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you\u2019re ready to design your own icons, you\u2019ll first need the appropriate tools. We recommend <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/figma-introduction-for-ui-designers\/\"><span style=\"font-weight: 400;\">starting with Figma<\/span><\/a><span style=\"font-weight: 400;\">, Adobe XD or Sketch, as these are some of the most popular industry platforms\u2014but you\u2019ll find a comprehensive list of <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/user-interface-ui-design-tools\/\"><span style=\"font-weight: 400;\">the best UI design tools here<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Once you\u2019re set up on your chosen tool, you can then experiment with designing your own icons or follow a tutorial for step-by-step guidance. Just type \u201cicon design tutorial for Sketch\/Figma\/Adobe XD\u201d into Google.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">And remember: Our 7 icon design principles are always on hand to guide you. Refer back to them throughout and you\u2019ll soon have a set of usable, user-friendly, and aesthetically pleasing icons of your own.<\/span><\/p>\n<h3 id=\"want-more-ui-design-tips\"><strong>Want more UI design tips?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Icon design is just one aspect of the UI designer\u2019s work. If you\u2019re brand new to UI design, consider a UI design course to learn all the fundamental theory and processes first. Our <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/best-ui-design-courses\/\"><span style=\"font-weight: 400;\">guide to the best UI design courses<\/span><\/a><span style=\"font-weight: 400;\"> will help you choose one.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Already working in UI and keen to level up your craft? Then you may enjoy this post: <\/span><a href=\"https:\/\/www.uxdesigninstitute.com\/blog\/become-a-better-ui-designer\/\"><span style=\"font-weight: 400;\">How to become a better UI designer\u20149 expert tips<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What are UI icons and what are they used for? What are the golden rules to follow when designing your own? Learn about the 7 key principles of icon design here.<\/p>\n","protected":false},"author":22,"featured_media":10053,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","footnotes":""},"categories":[278,279],"tags":[],"class_list":["post-7782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-ux-explained"],"_links":{"self":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/comments?post=7782"}],"version-history":[{"count":8,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7782\/revisions"}],"predecessor-version":[{"id":10333,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/posts\/7782\/revisions\/10333"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media\/10053"}],"wp:attachment":[{"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/media?parent=7782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/categories?post=7782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxdesigninstitute.com\/blog\/wp-json\/wp\/v2\/tags?post=7782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}