{"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":"2026-05-08T21:20:55","modified_gmt":"2026-05-09T04:20:55","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":"<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<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\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&#8217;s why thousands of icons sets exist, many for free. But there&#8217;s nothing quite like making your own.<\/p>\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<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&#8217;s overall aesthetic.<\/p>\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<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<p>            <a href=\"https:\/\/www.uxpin.com\/merge\" target=\"_blank\" rel=\"noopener\"><br \/>\n                <button class=\"discover-merge__button\">Discover UXPin Merge<\/button><br \/>\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<\/p><\/div>\n<\/section>\n<style>\n.discover-merge {\n    margin: 40px 8px;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__left {\n    width: 50%;\n}<\/p>\n<p>.discover-merge__left p {\n    margin: 10px 0px !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__heading {\n    font-weight: bold !important;\n    color: white !important;\n    font-size: 18px !important;\n}<\/p>\n<p>.discover-merge__text {\n    margin: 0 !important;\n    line-height: 22px !important;\n}<\/p>\n<p>.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}<\/p>\n<p>.discover-merge__button:hover {\n    cursor: pointer;\n}<\/p>\n<p>.discover-merge__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -19px;\n}<\/p>\n<p>@media (max-width: 760px) {\n    .discover-merge__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}<\/p>\n<p>@media (max-width: 500px) {\n    .discover-merge__container {\n        flex-direction: column;\n    }<\/p>\n<p>    .discover-merge__left {\n        width: 100%;\n        align-items: normal;\n    }\n}<\/p>\n<\/style>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n<h2 class=\"wp-block-heading\">What are Icons in Design System?<\/h2>\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<p>Examples of icons in design system include:<\/p>\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<li><strong>action icons<\/strong> \u2013 help users perform some task like arrow for adding an item.<\/li>\n<li><strong>media icons<\/strong> \u2013 indicate that users can manage media like play button or speed up button.<\/li>\n<li><strong>utility icons <\/strong>\u2013 represent settings, configurations, and other customization mechanisms.<\/li>\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<li><strong>communication icons <\/strong>\u2013 such as chat bubble, phone or envelope.<\/li>\n<\/ul>\n<h2 class=\"wp-block-heading\">Why Icons are Part of Design System?<\/h2>\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<p>They also prevent extra work. When you need an icon, just grab one from the project&#8217;s style library, or use the library as inspiration. To that end writing (and drawing) guidelines for new icons is important. This approach mirrors how development teams benefit from centralized component libraries\u2014when <a href=\"https:\/\/www.adalo.com\" target=\"_blank\" rel=\"noopener noreferrer\">platforms enable designers and developers to work from shared, reusable assets<\/a>, it accelerates the entire product development process.<\/p>\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&#8217;t do with icons.<\/li>\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&#8217;t be afraid to modify that look early in your work.<\/li>\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<h2 class=\"wp-block-heading\">Where to get ideas for icons<\/h2>\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<ul class=\"wp-block-list\">\n<li><strong>Look up synonyms<\/strong> for the word or concept you want to represent.<\/li>\n<li><strong>Look for styles beyond the obvious.<\/strong> What inspiration might you find from, say, Polynesian symbols or Mandarin letterforms?<\/li>\n<li><strong>Doodle shapes at random,<\/strong> avoiding backgrounds like circles or squares.<\/li>\n<li><strong>Use the brand.<\/strong> Does your project&#8217;s logo have an eye-catching characteristic you can use? How about the project&#8217;s typography?<\/li>\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<h2 class=\"wp-block-heading\">Base complex forms on the same shapes<\/h2>\n<p>Recognizability is the most important aspect of an icon. If people don&#8217;t 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<p>With that in mind we start by defining icons&#8217; silhouettes. But don&#8217;t just start drawing lines.<\/p>\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<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<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<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&#8217;re part of the same family. Otherwise stick to good ol&#8217; right angles.<\/li>\n<\/ul>\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<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<h2 class=\"wp-block-heading\">Make a consistent color palette<\/h2>\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<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<li><strong>Borrow from <a href=\"https:\/\/getmdl.io\/customize\/\">Google&#8217;s MDL palette<\/a>.<\/strong> They&#8217;ve done a great job of selecting bright colors that stand out against a variety of backgrounds, yet rarely clash among themselves.<\/li>\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<li><strong>Use one color per icon.<\/strong> The contemporary &#8220;flat&#8221; look works best without shading, shadows, gradients, or other details that detract from their silhouettes.<\/li>\n<li><strong>Use values.<\/strong> If you must use multiple colors, try to use different shades of the same hues.<\/li>\n<li><strong>Consider meaning.<\/strong> Should colors imply function? It&#8217;s up to you, but remember that many people associate color with actions, like red for &#8220;delete,&#8221; green for &#8220;create,&#8221; and faded (usually less opaque) for &#8220;disabled.&#8221;<\/li>\n<\/ul>\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<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&#8217;s eyes, then make &#8217;em bright. Otherwise aim for consistency.<\/p>\n<h2 class=\"wp-block-heading\">Remember that symbols have preconceived meanings<\/h2>\n<p>People often associate certain &#8220;universal&#8221; icons with certain functions. The trash can, for example, means &#8220;delete.&#8221; Hamburger icons, though, aren&#8217;t universally understood \u2026 yet.<\/p>\n<p>Using microcopy with icons is a good idea. Rely on shapes for quick identification, and text for folks who don&#8217;t get it.<\/p>\n<h2 class=\"wp-block-heading\">Designing a system<\/h2>\n<p>Icons must do a lot with a little. In spite of running small, people expect to &#8220;get it&#8221; at first glance. That&#8217;s 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&#8217;s why thousands of icons sets exist, many for free. But there&#8217;s 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.7 (Yoast SEO v27.8) - 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=\"2026-05-09T04:20:55+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\":\"2026-05-09T04:20:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/design-system-icons-techniques\\\/\"},\"wordCount\":1167,\"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\":\"2026-05-09T04:20:55+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":"2026-05-09T04:20:55+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":"2026-05-09T04:20:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/design-system-icons-techniques\/"},"wordCount":1167,"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":"2026-05-09T04:20:55+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":4,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15490\/revisions"}],"predecessor-version":[{"id":59599,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/15490\/revisions\/59599"}],"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}]}}