{"id":15490,"date":"2024-08-27T04:07:17","date_gmt":"2024-08-27T11:07:17","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=15490"},"modified":"2024-08-27T04:07:24","modified_gmt":"2024-08-27T11:07:24","slug":"design-system-icons-techniques","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/","title":{"rendered":"Design a System of Icons With These Techniques"},"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\/2024\/07\/Design-System-of-Icons-1024x512.webp\" alt=\"Design System of Icons\" class=\"wp-image-54267\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons-1024x512.webp 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons-600x300.webp 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons-768x384.webp 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp 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>Little icons have a big job. With limited real estate, they must convey meaning to people who expect to be informed about function or status. Maybe that\u2019s why thousands of icons sets exist, many for free. But there\u2019s nothing quite like making your own.<\/p>\n\n\n\n<p>Project-specific icons help the project to stand apart and convey meaning unique to its functions. For example, most apps or dashboards let you create new records. But fewer systems will let you assign one record to another. That may require a creative symbol that people will come to recognize as they learn your product.<\/p>\n\n\n\n<p>Their role in <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-design-system-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">design systems<\/a> leaves little room for ambiguity: meaning must remain clear in a variety of surrounding contexts, while fitting into the system\u2019s overall aesthetic.<\/p>\n\n\n\n<p>Unify your design and development team with a single source of truth \u2013 coded components shared across UI design and engineering. Bring your design system to the final level of maturity and speed up the entire product development process. <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin Merge<\/a>.<\/p>\n\n\n\n<section class=\"discover-merge\">\n    <div class=\"discover-merge__container\">\n        <div class=\"discover-merge__left\">\n            <p class=\"discover-merge__heading\">Reach a new level of prototyping<\/p>\n            <p class=\"discover-merge__text\">Design with interactive components coming from your team&#8217;s design system.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-merge.png\" class=\"discover-merge__image\" alt=\"\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}\n\n.discover-merge__container {\n    display: flex;\n    max-width: 690px;\n    height: 200px;\n    padding: 20px;\n    padding-left: 24px;\n    border-radius: 4px;\n    background-color: black;\n    box-shadow: 10px 10px #9999ff;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.discover-merge__left {\n    width: 50%;\n}\n\n.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}\n\n.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}\n\n.discover-merge__button {\n    width: 174px;\n    height: 44px;\n    margin: 10px 0px;\n    border: none;\n    border-radius: 2px;\n    background: white;\n    color: black;\n    font-size: 16px;\n    text-align: center;\n}\n\n.discover-merge__button:hover {\n    cursor: pointer;\n}\n\n.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}\n\n@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }\n\n    .discover-merge__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\">What are Icons in Design System?<\/h2>\n\n\n\n<p>Icons in a design system are visual symbols that represent ideas, objects, or actions. They are a fundamental <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">element<\/a> of <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-user-interface\/\" target=\"_blank\" rel=\"noreferrer noopener\">user interface<\/a> that helps products have a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/brand-consistency\/\">unique look and feel<\/a>. Plus, they indicate that an element is clickable. They can provide visual cues where to click or tap to perform actions like saving, editing, sharing, or navigating within the interface.<\/p>\n\n\n\n<p>Examples of icons in design system include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>navigational icons<\/strong> \u2013 aid navigating through the interface, such as menus, home, arrows.<\/li>\n\n\n\n<li><strong>action icons<\/strong> \u2013 help users perform some task like arrow for adding an item.<\/li>\n\n\n\n<li><strong>media icons<\/strong> \u2013 indicate that users can manage media like play button or speed up button.<\/li>\n\n\n\n<li><strong>utility icons <\/strong>\u2013 represent settings, configurations, and other customization mechanisms.<\/li>\n\n\n\n<li><strong>status icons <\/strong>\u2013 show <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-error\/\" target=\"_blank\" rel=\"noreferrer noopener\">errors<\/a>, loading, or approval.<\/li>\n\n\n\n<li><strong>communication icons <\/strong>\u2013 such as chat bubble, phone or envelope.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Why Icons are Part of Design System?<\/h2>\n\n\n\n<p>Iconography is more than tiny pictures. Together they form an entire family, not unlike a set of typefaces, that reinforce a brand.<\/p>\n\n\n\n<p>They also prevent extra work. When you need an icon, just grab one from the project\u2019s style library, or use the library as inspiration. To that end writing (and drawing) guidelines for new icons is important.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Make guidelines for icons.<\/strong> Part of your design system should include parameters on what your team can and can\u2019t do with icons.<\/li>\n\n\n\n<li><strong>Practice style.<\/strong> One of the best ways to develop a visual language is to apply it to new ideas. As you invent icons, make sure they fit the same look \u2014 but don\u2019t be afraid to modify that look early in your work.<\/li>\n\n\n\n<li><strong>Test each iteration.<\/strong> Do your icons make sense? Can people figure out what they mean? Getting stylish while retaining clear meaning requires showing your work to users.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Where to get ideas for icons<\/h2>\n\n\n\n<p>Where do icons come from? Your imagination is just the beginning. Seeking inspiration from outside sources can be critical to success.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Look up synonyms<\/strong> for the word or concept you want to represent.<\/li>\n\n\n\n<li><strong>Look for styles beyond the obvious.<\/strong> What inspiration might you find from, say, Polynesian symbols or Mandarin letterforms?<\/li>\n\n\n\n<li><strong>Doodle shapes at random,<\/strong> avoiding backgrounds like circles or squares.<\/li>\n\n\n\n<li><strong>Use the brand.<\/strong> Does your project\u2019s logo have an eye-catching characteristic you can use? How about the project\u2019s typography?<\/li>\n\n\n\n<li><strong>Create negative space.<\/strong> How can the interactions of three or four regular geometric shapes overlap to create new and interesting forms?<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Base complex forms on the same shapes<\/h2>\n\n\n\n<p>Recognizability is the most important aspect of an icon. If people don\u2019t know it at a glance, they may waste precious time deciphering it \u2014 or look elsewhere for a shape they associate with the function at hand.<\/p>\n\n\n\n<p>With that in mind we start by defining icons\u2019 silhouettes. But don\u2019t just start drawing lines.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use the same geometry.<\/strong> Here we make shapes based entirely on small circles and rectangles. When you base icons on the same general elements, they look like they belong to the same family<\/li>\n\n\n\n<li><strong>Use the same angles, e.g. 90\u00b0, 45\u00b0, 30\u00b0.<\/strong> Doing so will make them more legible and more consistent.<\/li>\n\n\n\n<li><strong>Same line weight throughout.<\/strong> Here, basing glyphs on the same few shapes will help keep your icons looking similar without looking derivative.<\/li>\n\n\n\n<li><strong>Stick to symmetry \u2014 or the same asymmetry.<\/strong> Tilting your icons is a great way to make them stand out from other sets. But if you do so, tilt them all at the same angle to reinforce that they\u2019re part of the same family. Otherwise stick to good ol\u2019 right angles.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"600\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icons-based-on-shapes.png\" alt=\"Icons based on shapes\" class=\"wp-image-15491\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icons-based-on-shapes.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icons-based-on-shapes-350x300.png 350w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>This example may stick to its base shapes a little too closely for practical design work, but demonstrates how simple geometry can create complex forms that look like they belong together.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Make a consistent color palette<\/h2>\n\n\n\n<p>Like using geometry to make icons look like a set, if you plan to use color, then you should use the same color palette. But which colors?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Seek inspiration from your photos.<\/strong> If you have final art for your project, make the icons look harmonious by sampling colors from that art.<\/li>\n\n\n\n<li><strong>Borrow from <a href=\"https:\/\/getmdl.io\/customize\/\">Google\u2019s MDL palette<\/a>.<\/strong> They\u2019ve done a great job of selecting bright colors that stand out against a variety of backgrounds, yet rarely clash among themselves.<\/li>\n\n\n\n<li><strong>Make sure the colors work well together.<\/strong> Speaking of clashes, test every combination of your preferred colors to keep them from looking awkward when adjacent to each other.<\/li>\n\n\n\n<li><strong>Use one color per icon.<\/strong> The contemporary \u201cflat\u201d look works best without shading, shadows, gradients, or other details that detract from their silhouettes.<\/li>\n\n\n\n<li><strong>Use values.<\/strong> If you must use multiple colors, try to use different shades of the same hues.<\/li>\n\n\n\n<li><strong>Consider meaning.<\/strong> Should colors imply function? It\u2019s up to you, but remember that many people associate color with actions, like red for \u201cdelete,\u201d green for \u201ccreate,\u201d and faded (usually less opaque) for \u201cdisabled.\u201d<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"495\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icon-colors.png\" alt=\"Color schemes for icons\" class=\"wp-image-15492\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icon-colors.png 700w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2017\/03\/icon-colors-424x300.png 424w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>How much color is too much? How much is too little? Determine your color palette based on one factor: attention. If your icons need to grab people\u2019s eyes, then make \u2019em bright. Otherwise aim for consistency.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Remember that symbols have preconceived meanings<\/h2>\n\n\n\n<p>People often associate certain \u201cuniversal\u201d icons with certain functions. The trash can, for example, means \u201cdelete.\u201d Hamburger icons, though, aren\u2019t universally understood \u2026 yet.<\/p>\n\n\n\n<p>Using microcopy with icons is a good idea. Rely on shapes for quick identification, and text for folks who don\u2019t get it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Designing a system<\/h2>\n\n\n\n<p>Icons must do a lot with a little. In spite of running small, people expect to \u201cget it\u201d at first glance. That\u2019s why silhouettes, consistency, color, and meaning all work together for a great, on-brand icon set.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Little icons have a big job. With limited real estate, they must convey meaning to people who expect to be informed about function or status. Maybe that\u2019s why thousands of icons sets exist, many for free. But there\u2019s nothing quite like making your own. Project-specific icons help the project to stand apart and convey meaning<\/p>\n","protected":false},"author":3,"featured_media":54267,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,199,4],"tags":[],"class_list":["post-15490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-design-systems","category-ui-design"],"yoast_title":"","yoast_metadesc":"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.","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>Design a System of Icons With These Techniques | UXPin<\/title>\n<meta name=\"description\" content=\"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.\" \/>\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\/design-system-icons-techniques\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design a System of Icons With These Techniques\" \/>\n<meta property=\"og:description\" content=\"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-27T11:07:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-27T11:07:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp\" \/>\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\/webp\" \/>\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=\"6 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\\\/design-system-icons-techniques\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Design a System of Icons With These Techniques\",\"datePublished\":\"2024-08-27T11:07:17+00:00\",\"dateModified\":\"2024-08-27T11:07:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\"},\"wordCount\":1117,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Design-System-of-Icons.webp\",\"articleSection\":[\"Blog\",\"Design Systems\",\"UI Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\",\"name\":\"Design a System of Icons With These Techniques | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Design-System-of-Icons.webp\",\"datePublished\":\"2024-08-27T11:07:17+00:00\",\"dateModified\":\"2024-08-27T11:07:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Design-System-of-Icons.webp\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/07\\\/Design-System-of-Icons.webp\",\"width\":1200,\"height\":600,\"caption\":\"Design System of Icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design a System of Icons With These Techniques\"}]},{\"@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":"Design a System of Icons With These Techniques | UXPin","description":"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.","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\/design-system-icons-techniques\/","og_locale":"en_US","og_type":"article","og_title":"Design a System of Icons With These Techniques","og_description":"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/","og_site_name":"Studio by UXPin","article_published_time":"2024-08-27T11:07:17+00:00","article_modified_time":"2024-08-27T11:07:24+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp","type":"image\/webp"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Design a System of Icons With These Techniques","datePublished":"2024-08-27T11:07:17+00:00","dateModified":"2024-08-27T11:07:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/"},"wordCount":1117,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp","articleSection":["Blog","Design Systems","UI Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/","name":"Design a System of Icons With These Techniques | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp","datePublished":"2024-08-27T11:07:17+00:00","dateModified":"2024-08-27T11:07:24+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"How do you make an icon family? Following your own conventions creates a framework that keeps your visual design together.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/07\/Design-System-of-Icons.webp","width":1200,"height":600,"caption":"Design System of Icons"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Design a System of Icons With These Techniques"}]},{"@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\/15490","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=15490"}],"version-history":[{"count":3,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15490\/revisions"}],"predecessor-version":[{"id":54270,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15490\/revisions\/54270"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54267"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=15490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=15490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=15490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}