CINXE.COM
How to achieve consistency in your designs with icons | Flaticon
<!doctype html> <!--[if lt IE 7]><html class="no-js ie ie6 lt-ie9 lt-ie8 lt-ie7" lang="en-US" prefix="og: https://ogp.me/ns#"> <![endif]--> <!--[if IE 7]><html class="no-js ie ie7 lt-ie9 lt-ie8" lang="en-US" prefix="og: https://ogp.me/ns#"> <![endif]--> <!--[if IE 8]><html class="no-js ie ie8 lt-ie9" lang="en-US" prefix="og: https://ogp.me/ns#"> <![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en-US" prefix="og: https://ogp.me/ns#"> <!--<![endif]--> <head> <meta charset="UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img/favicon/flaticon/favicon.ico" type="image/x-icon" /> <link rel="author" href="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/humans.txt" /> <link rel="pingback" href="https://www.flaticon.com/blog/xmlrpc.php" /> <!-- Global variables --> <script> AJAX_URL = "https://www.flaticon.com/blog/wp-admin/admin-ajax.php" ACCOUNTS_URL = "https://profile.freepik.com" FREEPIK_USER_URL = "https://www.freepik.com/user/" LANGUAGE = "en" LANGUAGE_NAME = "en" MEDIA_URL = "https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img" WP_MEDIA_URL = "https://www.freepik.com/blog/wp-content/uploads" SUPPORT_URL = "https://support.freepik.com/hc/es" SITE_URL = "https://www.flaticon.com/blog" HOME_URL = "https://www.flaticon.com/blog" API_REST_URL = "https://www.flaticon.com/blog/wp-json/" COOKIE_POLICY = "https://www.freepikcompany.com/cookie" LANGUAGE_STRINGS = {"This web uses cookies to improve your experience. %sMore information%s":"This web uses cookies to improve your experience. %sMore information%s","Your comment was sent succesfully, it is waiting for aproval.":"Your comment was sent succesfully, it is waiting for aproval."} </script> <link rel="alternate" hreflang="en" href="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" /> <link rel="alternate" hreflang="es" href="https://www.flaticon.com/blog/es/como-mantener-un-estilo-coherente-en-tus-creaciones-con-iconos/" /> <link rel="alternate" hreflang="x-default" href="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" /> <!-- Google Tag Manager for WordPress by gtm4wp.com --> <script data-cfasync="false" data-pagespeed-no-defer> var gtm4wp_datalayer_name = "dataLayer"; var dataLayer = dataLayer || []; </script> <!-- End Google Tag Manager for WordPress by gtm4wp.com --> <!-- Search Engine Optimization by Rank Math PRO - https://rankmath.com/ --> <title>How to achieve consistency in your designs with icons | Flaticon</title> <meta name="description" content="Consistency is one of the key elements for keeping your designs intact and professional."/> <meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/> <link rel="canonical" href="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="How to achieve consistency in your designs with icons | Flaticon" /> <meta property="og:description" content="Consistency is one of the key elements for keeping your designs intact and professional." /> <meta property="og:url" content="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" /> <meta property="og:site_name" content="Flaticon" /> <meta property="article:publisher" content="https://www.facebook.com/flaticon" /> <meta property="article:tag" content="consistency" /> <meta property="article:tag" content="design" /> <meta property="article:tag" content="design tips" /> <meta property="article:tag" content="flaticon" /> <meta property="article:tag" content="fonts" /> <meta property="article:tag" content="icons" /> <meta property="article:tag" content="visual consistency" /> <meta property="article:section" content="Tips and Trends" /> <meta property="og:updated_time" content="2023-02-10T10:07:11+00:00" /> <meta property="og:image" content="https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png" /> <meta property="og:image:secure_url" content="https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png" /> <meta property="og:image:width" content="880" /> <meta property="og:image:height" content="495" /> <meta property="og:image:alt" content="How to achieve consistency in your designs with icons" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2023-02-09T08:27:17+00:00" /> <meta property="article:modified_time" content="2023-02-10T10:07:11+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="How to achieve consistency in your designs with icons | Flaticon" /> <meta name="twitter:description" content="Consistency is one of the key elements for keeping your designs intact and professional." /> <meta name="twitter:site" content="@flaticon" /> <meta name="twitter:creator" content="@flaticon" /> <meta name="twitter:image" content="https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Bianka" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="1 minute" /> <script type="application/ld+json" class="rank-math-schema-pro">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.flaticon.com/blog/#organization","name":"Flaticon","sameAs":["https://www.facebook.com/flaticon","https://twitter.com/flaticon"],"logo":{"@type":"ImageObject","@id":"https://www.flaticon.com/blog/#logo","url":"https://mediablog.cdnpk.net/sites/5/2021/12/flaticonblog-logo.png","contentUrl":"https://mediablog.cdnpk.net/sites/5/2021/12/flaticonblog-logo.png","caption":"Flaticon","inLanguage":"en-US","width":"370","height":"68"}},{"@type":"WebSite","@id":"https://www.flaticon.com/blog/#website","url":"https://www.flaticon.com/blog","name":"Flaticon","publisher":{"@id":"https://www.flaticon.com/blog/#organization"},"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png","url":"https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png","width":"880","height":"495","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#breadcrumb","itemListElement":[{"@type":"ListItem","position":"1","item":{"@id":"https://www.flaticon.com/blog","name":"Home"}},{"@type":"ListItem","position":"2","item":{"@id":"https://www.flaticon.com/blog/category/tips-trends/","name":"Tips and Trends"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/","name":"How to achieve consistency in your designs with icons"}}]},{"@type":"WebPage","@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#webpage","url":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/","name":"How to achieve consistency in your designs with icons | Flaticon","datePublished":"2023-02-09T08:27:17+00:00","dateModified":"2023-02-10T10:07:11+00:00","isPartOf":{"@id":"https://www.flaticon.com/blog/#website"},"primaryImageOfPage":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#breadcrumb"}},{"@type":"Person","@id":"https://www.flaticon.com/blog/author/biankasimonidesova/","name":"Bianka","url":"https://www.flaticon.com/blog/author/biankasimonidesova/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/81710eb0269428f7aa8033fcde03058b?s=96&d=mm&r=g","url":"https://secure.gravatar.com/avatar/81710eb0269428f7aa8033fcde03058b?s=96&d=mm&r=g","caption":"Bianka","inLanguage":"en-US"},"worksFor":{"@id":"https://www.flaticon.com/blog/#organization"}},{"@type":"BlogPosting","headline":"How to achieve consistency in your designs with icons | Flaticon","datePublished":"2023-02-09T08:27:17+00:00","dateModified":"2023-02-10T10:07:11+00:00","articleSection":"Tips and Trends","author":{"@id":"https://www.flaticon.com/blog/author/biankasimonidesova/","name":"Bianka"},"publisher":{"@id":"https://www.flaticon.com/blog/#organization"},"description":"Consistency is one of the key elements for keeping your designs intact and professional.","name":"How to achieve consistency in your designs with icons | Flaticon","@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#richSnippet","isPartOf":{"@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#webpage"},"image":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/#webpage"}},{"@type":"@SiteNavigationElement","name":"Inspirational","url":"https://www.flaticon.com/blog/category/inspirational/","position":"1","cssSelector":"menu-item-24903"},{"@type":"@SiteNavigationElement","name":"Tips and Trends","url":"https://www.flaticon.com/blog/category/tips-trends/","position":"2","cssSelector":"menu-item-24904"},{"@type":"@SiteNavigationElement","name":"Product updates","url":"https://www.flaticon.com/blog/category/product/","position":"3","cssSelector":"menu-item-28466"},{"@type":"@SiteNavigationElement","name":"Outstanding Resources","url":"https://www.flaticon.com/blog/category/outstanding-resources/","position":"4","cssSelector":"menu-item-25203"}]}</script> <!-- /Rank Math WordPress SEO plugin --> <link rel='stylesheet' id='wp-block-library-css' href='https://www.flaticon.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.6.2' type='text/css' media='all' /> <style id='rank-math-toc-block-style-inline-css' type='text/css'> .wp-block-rank-math-toc-block nav ol{counter-reset:item}.wp-block-rank-math-toc-block nav ol li{display:block}.wp-block-rank-math-toc-block nav ol li:before{content:counters(item, ".") ". ";counter-increment:item} </style> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='wpml-blocks-css' href='https://www.flaticon.com/blog/wp-content/plugins/sitepress-multilingual-cms/dist/css/blocks/styles.css?ver=4.6.10' type='text/css' media='all' /> <link rel='stylesheet' id='freepikcompany-style-css' href='https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/css/style.css?ver=c0121896659fb12e9d4a4140f8210389' type='text/css' media='all' /> <link rel='stylesheet' id='fpkab_build_index_front-css' href='https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/build/front.css?ver=51a440c822bccb19e1ce' type='text/css' media='all' /> <script type="text/javascript" id="wpml-cookie-js-extra"> /* <![CDATA[ */ var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}}; var wpml_cookies = {"wp-wpml_current_language":{"value":"en","expires":1,"path":"\/"}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/plugins/sitepress-multilingual-cms/res/js/cookies/language-cookie.js?ver=4.6.10" id="wpml-cookie-js" defer="defer" data-wp-strategy="defer"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/js/global-script.js?ver=c79d65c880a4b010bdbf59a702df68b3" id="freepikcompany-global-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/vendor/oboyda/wp-seed-e/src/js/jquery-view.js?ver=1.0.0" id="_jquery_view-js"></script> <script type="text/javascript" id="fpkab_build_index_front-js-extra"> /* <![CDATA[ */ var fpkabIndexVars = {"ajaxurl":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/wp-admin\/admin-ajax.php","dataLayer":{"event":"ga4event","event_name":"page_view","page_location":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/how-to-achieve-consistency-in-your-designs-with-icons\/","page_code":200,"page_lang":"en","country":"","content_group":"blog","content_group2":"na","content_type":"post","author_name":"Bianka","user_id":"","user_type":"","page_path_es":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/es\/como-mantener-un-estilo-coherente-en-tus-creaciones-con-iconos\/"}}; /* ]]> */ </script> <script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/pack-ab/build/front.js?ver=51a440c822bccb19e1ce" id="fpkab_build_index_front-js"></script> <meta name="generator" content="WPML ver:4.6.10 stt:1,2;" /> <!-- Google Tag Manager for WordPress by gtm4wp.com --> <!-- GTM Container placement set to footer --> <script data-cfasync="false" data-pagespeed-no-defer type="text/javascript"> var dataLayer_content = {"pagePostType":"post","pagePostType2":"single-post","pageCategory":["tips-trends"],"pageAttributes":["consistency","design","design-tips","flaticon","fonts","icons","visual-consistency-2"],"pagePostAuthor":"Bianka","geoCountryCode":"(no geo data available)","geoCountryName":"(no geo data available)","geoRegionCode":"(no geo data available)","geoRegionName":"(no geo data available)","geoCity":"(no geo data available)","geoZipcode":"(no geo data available)","geoLatitude":"(no geo data available)","geoLongitude":"(no geo data available)","geoFullGeoData":{"success":false,"error":{"code":101,"type":"missing_access_key","info":"You have not supplied an API Access Key. [Required format: access_key=YOUR_ACCESS_KEY]"}}}; dataLayer.push( dataLayer_content ); </script> <script data-cfasync="false"> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PRQMDLG'); </script> <!-- End Google Tag Manager for WordPress by gtm4wp.com --><script type="text/javascript" src="//wordpress-pro-3928501.cdnpk.net/flaticon/?wordfence_syncAttackData=1732397714.4473" async></script> <script type="text/javascript"> if(typeof wpseedeVars === "undefined"){ var wpseedeVars = {"ajaxurl":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/wp-admin\/admin-ajax.php"}; } </script> <!-- Taboola Pixel Code --> <script type='text/javascript'> window._tfa = window._tfa || []; window._tfa.push({notify: 'event', name: 'page_view', id: 1198096}); !function (t, f, a, x) { if (!document.getElementById(x)) { t.async = 1;t.src = a;t.id=x;f.parentNode.insertBefore(t, f); } }(document.createElement('script'), document.getElementsByTagName('script')[0], '//cdn.taboola.com/libtrc/unip/1198096/tfa.js', 'tb_tfa_script'); </script> <!-- End Taboola Pixel Code --> <!-- DataLayer --> <script> document.addEventListener('DOMContentLoaded', function() { if ('function' === typeof window.gtm) { window.gtm(); } }); </script> <!-- End DataLayer --> <style type="text/css"> :root { --client-clr: #009D73; --client-clr--hover: #008B71; --client-btn: #00AF80; --client-btn--hover: #009D73; } </style> <script>!function(e){var n="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,n="https://s2.go-mpulse.net/boomerang/";if(window.BOOMR_API_key="R5JS7-M8GWC-DW7YC-BENQZ-YEA7H",function(){function e(){if(!o){var e=document.createElement("script");e.id="boomr-scr-as",e.src=window.BOOMR.url,e.async=!0,i.parentNode.appendChild(e),o=!0}}function t(e){o=!0;var n,t,a,r,d=document,O=window;if(window.BOOMR.snippetMethod=e?"if":"i",t=function(e,n){var t=d.createElement("script");t.id=n||"boomr-if-as",t.src=window.BOOMR.url,BOOMR_lstart=(new Date).getTime(),e=e||d.body,e.appendChild(t)},!window.addEventListener&&window.attachEvent&&navigator.userAgent.match(/MSIE [67]\./))return window.BOOMR.snippetMethod="s",void t(i.parentNode,"boomr-async");a=document.createElement("IFRAME"),a.src="about:blank",a.title="",a.role="presentation",a.loading="eager",r=(a.frameElement||a).style,r.width=0,r.height=0,r.border=0,r.display="none",i.parentNode.appendChild(a);try{O=a.contentWindow,d=O.document.open()}catch(_){n=document.domain,a.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",O=a.contentWindow,d=O.document.open()}if(n)d._boomrl=function(){this.domain=n,t()},d.write("<bo"+"dy onload='document._boomrl();'>");else if(O._boomrl=function(){t()},O.addEventListener)O.addEventListener("load",O._boomrl,!1);else if(O.attachEvent)O.attachEvent("onload",O._boomrl);d.close()}function a(e){window.BOOMR_onload=e&&e.timeStamp||(new Date).getTime()}if(!window.BOOMR||!window.BOOMR.version&&!window.BOOMR.snippetExecuted){window.BOOMR=window.BOOMR||{},window.BOOMR.snippetStart=(new Date).getTime(),window.BOOMR.snippetExecuted=!0,window.BOOMR.snippetVersion=12,window.BOOMR.url=n+"R5JS7-M8GWC-DW7YC-BENQZ-YEA7H";var i=document.currentScript||document.getElementsByTagName("script")[0],o=!1,r=document.createElement("link");if(r.relList&&"function"==typeof r.relList.supports&&r.relList.supports("preload")&&"as"in r)window.BOOMR.snippetMethod="p",r.href=window.BOOMR.url,r.rel="preload",r.as="script",r.addEventListener("load",e),r.addEventListener("error",function(){t(!0)}),setTimeout(function(){if(!o)t(!0)},3e3),BOOMR_lstart=(new Date).getTime(),i.parentNode.appendChild(r);else t(!1);if(window.addEventListener)window.addEventListener("load",a,!1);else if(window.attachEvent)window.attachEvent("onload",a)}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();!function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var n=""=="true"?1:0,t="",a="bdpnbevydn5wez2cjkiq-f-2ee68bef0-clientnsv4-s.akamaihd.net",i="false"=="true"?2:1,o={"ak.v":"39","ak.cp":"1587957","ak.ai":parseInt("1019318",10),"ak.ol":"0","ak.cr":2,"ak.ipv":4,"ak.proto":"http/1.1","ak.rid":"2d02f12","ak.r":41571,"ak.a2":n,"ak.m":"b","ak.n":"ff","ak.bpcip":"8.222.208.0","ak.cport":46582,"ak.gh":"184.27.123.15","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732397713","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==KIuMJQmS5zuy8ev2FCqCPb0oi42lwd2drnvTHEwOJqtt12/u4L/dcSsPN6iRsOU0uNG9mopRFuIlMgiPrtQvxoJX49kYWtX5RY0BSaO1SnFiFIW6jREahZm5MB960KRfuDXstdWuxtxQsyzB0wzybAX/k5ug0yMGJUgIkxNyxSpro+3BuutV2lSf6+CpliVSHD5f37IHIEB0j6cNfsUcWlpGX6zbBhIzXizpdp0viNdLStnBwjuQRal9g0cAx9VftwODnDNqNG/beUd9JLb4LnSkewILCwCktLXiGb80LUyu8hQ55BFntlkRrYzxx6oWsuERPBNMRLI1zp3/XaH15XFcjRDF6t6Esjym6Fk3vZDYi/Khp8n5br+9ZsJR7XmLHHwlUcy7khtPGInBD7R0SJOl0mMJcH+KexWtmJFb6yM=","ak.pv":"25","ak.dpoabenc":"","ak.tf":i};if(""!==t)o["ak.ruds"]=t;var r={i:!1,av:function(n){var t="http.initiator";if(n&&(!n[t]||"spa_hard"===n[t]))o["ak.feo"]=void 0!==e.aFeoApplied?1:0,BOOMR.addVar(o)},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.0rtt.ed","ak.r","ak.acc","ak.t","ak.tf"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={akVars:o,akDNSPreFetchDomain:a,init:function(){if(!r.i){var e=BOOMR.subscribe;e("before_beacon",r.av,null,null),e("onbeacon",r.rv,null,null),r.i=!0}return this},is_complete:function(){return!0}}}}()}(window);</script></head> <body class="flaticon post-template-default single single-post postid-28100 single-format-standard" data-cat-parent="tips-trends"> <header id="header" > <div class="preheader"> <div class="row mg-none pd-none full-height preheader-content"> <span class="hdr-logo mg-none" role="banner"> <a class="hdr-logo-link logo" href="https://www.flaticon.com/blog/" rel="home"> <img src="https://mediablog.cdnpk.net/sites/5/2023/12/flaticon-blog-nuevo.svg" alt="Flaticon"> </a> </span> <div class="show-menu"> <div class="header--inner"> <button class="button button--md button--icon button--icon--only button--state trigger__button" data-trigger="search"> <i class="icon icon--xl icon--mg-md icon--search state--inactive" aria-hidden="true"></i> <i class="icon icon--xl icon--mg-md icon--search state--active" aria-hidden="true"></i> </button> <button class="button button--md button--icon button--icon--only trigger__button button--state" data-trigger="nav-main"> <i class="icon icon--xl icon--mg-md icon--menuburger state--inactive"></i> <i class="icon icon--xl icon--mg-md icon--cross state--active"></i> </button> </div> </div> <div class="hide-menu"> <h6 class="hdr-go-to"> <a href="https://www.flaticon.com/" target="_blank" title="go to flaticon">go to flaticon <i class="icon icon--md icon--external-link"></i> </a> </h6> </div> </div> </div> <div class="header--inner"> <div class="header--inner-content"> <nav id="nav-main" class="nav nav-main hide-menu" role="navigation"> <ul> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24903 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/inspirational/">Inspirational</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-24904 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/tips-trends/">Tips and Trends</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-28466 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/product/">Product updates</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25203 inline-block"> <a target="" href="https://www.flaticon.com/blog/category/outstanding-resources/">Outstanding Resources</a> </li> <li class="inline-block v-alignc search-buton--holder hide-menu"> <button class="button button--inverted button--sm button--sm pd-none trigger__button" data-trigger="search"> <i class="icon icon--md icon--mg-sm icon--search" aria-hidden="true"></i> </button> </li> </ul> <h6 class="hdr-go-to"> <a href="https://www.flaticon.com/" target="_blank" title="go to flaticon">go to flaticon <i class="icon icon--md icon--external-link"></i> </a> </h6> </nav><!-- #nav --> </div> </div> <div id="search" class="trigger search--holder"> <div class="content-wrapper"> <form role="search" method="get" id="searchform" action="https://www.flaticon.com/blog"> <div class="searchform-content"> <input type="search" id="s" name="s" class="mg-none" placeholder="Search..."> <button class="button button--icon button--inverted button--xl button--icon--only trigger__close" type="button"> <i class="icon icon--md icon--mg-xl icon--cross"></i> </button> </div> </form> </div> </div> </header> <script> if (typeof gr !== 'undefined' && gr.updateUI) { gr.updateUI(); } </script> <main id="main"> <div id="content" role="main" class="content-wrapper"> <div class="wrapper "> <div id="share" class="share" data-share-url="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" data-share-title="How to achieve consistency in your designs with icons" data-share-tags="consistency,design,design tips,flaticon,fonts,icons,visual consistency" data-share-image="https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png" data-share-summary=""> <div class="share--icons"> <ul> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="facebook"> <i class="icon icon--sm icon--mg-lg icon--facebook"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="twitter"> <i class="icon icon--sm icon--mg-lg icon--twitter"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="linkedin"> <i class="icon icon--sm icon--mg-lg icon--linkedin"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="whatsapp"> <i class="icon icon--sm icon--mg-lg icon--whatsapp"></i> </button> </li> <li> <button class="button button--flat button--inverted button--lg pd-none" data-network="telegram"> <i class="icon icon--sm icon--mg-lg icon--telegram"></i> </button> </li> </ul> </div> </div> <script> var FP_BANNER_TAGS = ''; </script> <div class="row mg-none post--single"> <article class="post-type-post post--single--content col pd-none mg-none" id="post-28100"> <figure class="article-media"> <img src="https://mediablog.cdnpk.net/sites/5/2023/02/Cover_blog-12.png" width="880" height="495" loading="lazy"> </figure> <section class="article-content"> <h1 class="article-h1">How to achieve consistency in your designs with icons</h1> <div class="article-info"> <p class="blog-author mg-none"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/81710eb0269428f7aa8033fcde03058b?s=96&d=mm&r=g' alt='Bianka'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/biankasimonidesova/"> Bianka </a> </p> <div class="article-metas"> <time datetime="2023-02-09T08:27:17+00:00">February 9, 2023</time> </div> </div> <div class="article-body"> <p>Consistency is one of the key elements for keeping your designs intact and professional.</p> <p>When using icons, there are a few simple rules that you can stick to so your designs look nice and clean and in this post we will walk you through them.</p> <h2><strong>To mix is not to match</strong></h2> <p>Use icons that have the same look, so they are visually matching. Avoid combining flat and linear or solid shapes. They are not friends and will not look good together.</p> <p>To find consistent icons on Flaticon, <a href="https://www.flaticon.com/style/search?word=color" target="_blank" rel="noopener"><strong>Sort them by style</strong></a>. The sorting feature groups icons from the same style together so you can easily choose the one you like the most.</p> <p><img fetchpriority="high" decoding="async" class="alignnone wp-image-28182 size-medium_large" src="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-768x432.png" alt="" width="768" height="432" srcset="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-300x169.png 300w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-1024x576.png 1024w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-768x432.png 768w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-1536x864.png 1536w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-1280x720.png 1280w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3-640x360.png 640w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-3.png 1760w" sizes="(max-width: 768px) 100vw, 768px" /></p> <p>And by searching on the <strong>Author style page</strong>, you can get results of icons just from that style and ensure consistency in your design.</p> <p><img decoding="async" class="alignnone size-medium_large wp-image-28224" src="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-768x432.png" alt="" width="768" height="432" srcset="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-300x169.png 300w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-1024x576.png 1024w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-768x432.png 768w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-1536x864.png 1536w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-1280x720.png 1280w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17-640x360.png 640w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-17.png 1760w" sizes="(max-width: 768px) 100vw, 768px" /></p> <p>Some styles contain thousands of icons and will help you keep your design consistent.</p> <h2>Thick and thin</h2> <p>If you use outline icons, make sure the strokes are the <strong>same size</strong>. You can ensure this by using icons from the same style, or you can adjust the stroke size to be the same.</p> <p>Flaticon offers icons in editable SVG format, which you can change the stroke size of directly in our editor.</p> <p><img decoding="async" class="alignnone wp-image-28188 size-medium_large" src="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-768x432.png" alt="" width="768" height="432" srcset="https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-300x169.png 300w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-1024x576.png 1024w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-768x432.png 768w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-1536x864.png 1536w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-1280x720.png 1280w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4-640x360.png 640w, https://mediablog.cdnpk.net/sites/5/2023/02/Preview-for-blogpost-4.png 1760w" sizes="(max-width: 768px) 100vw, 768px" /></p> <p style="text-align: center"><strong><a href="https://www.flaticon.com/blog/svg-editable-stroke/" target="_blank" rel="noopener">Read more about how to work with strokes </a>→</strong></p> <h2><strong>Font the perfect match</strong></h2> <p>A great approach for accomplishing consistency in your design is to visually match icons with the typeface you are using. While there is no straightforward formula to achieve this, and you have to rely on your eyes and taste, it will make your design look like it’s done by a pro.</p> <h3>Tips for pairing icons with fonts:</h3> <p>If you’re using linear icons, try finding a font with the same (or almost the same) line width as the icons. It will create a nice, unified look.</p> <p><img loading="lazy" decoding="async" class="alignnone wp-image-28226 size-medium_large" src="https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-768x432.png" alt="" width="768" height="432" srcset="https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-300x169.png 300w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-1024x576.png 1024w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-768x432.png 768w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-1536x864.png 1536w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-1280x720.png 1280w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5-640x360.png 640w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-5.png 1760w" sizes="(max-width: 768px) 100vw, 768px" /></p> <p>Try visually pairing the icon style with your font. If you’re using a specific artistic style of icons, like hand-drawn, look for a similarly hand-drawn typeface to match it. Here are a few examples of nice font and icon matches.</p> <p><img loading="lazy" decoding="async" class="alignnone size-medium_large wp-image-28231" src="https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-768x432.png" alt="" width="768" height="432" srcset="https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-300x169.png 300w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-1024x576.png 1024w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-768x432.png 768w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-1536x864.png 1536w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-1280x720.png 1280w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7-640x360.png 640w, https://mediablog.cdnpk.net/sites/5/2023/02/MAILCOVER_PremiumFreebies_Freepik_BackToSchool2022_1280x1878_EN-7.png 1760w" sizes="(max-width: 768px) 100vw, 768px" /></p> <p><strong>Like the examples? Download the fonts and icons in the styles:</strong></p> <ul> <li><a href="https://www.freepik.com/font/estebak" target="_blank" rel="noopener">Estebak font→ + </a><a href="https://www.flaticon.com/search?author_id=313&style_id=1057&type=standard&word=" target="_blank" rel="noopener">Juicy Fish Sketchy icons→</a></li> <li><a href="https://www.freepik.com/font/joyful-magnolia" target="_blank" rel="noopener">Joyful Magnolia font→ +</a> <a href="https://www.flaticon.com/search?author_id=1&style_id=17&type=standard&word=" target="_blank" rel="noopener">Hand Drawn Black icons→</a></li> <li><a href="https://www.freepik.com/font/good-selection" target="_blank" rel="noopener">Good selection font→ +</a> <a href="https://www.flaticon.com/search?author_id=1&style_id=1335&type=standard" target="_blank" rel="noopener">Basic Hand Drawn Color icons→</a></li> <li><a href="https://www.freepik.com/font/retroyal" target="_blank" rel="noopener">Retroyal font→ + </a><a href="https://www.flaticon.com/search?author_id=1&style_id=15&type=standard" target="_blank" rel="noopener">Special linear color icons→</a></li> </ul> <p style="text-align: left"><strong><a class="notion-link-token notion-enable-hover" href="https://www.flaticon.com/blog/visual-consistency/" target="_blank" rel="noopener noreferrer" data-token-index="0"><span class="link-annotation-unknown-block-id--654840485">Check out more tips for making your UI designs consistent →</span></a></strong></p> </div> <div class="article-footer"> <div class="blog-author"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/81710eb0269428f7aa8033fcde03058b?s=96&d=mm&r=g' alt='Bianka'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/biankasimonidesova/"> Bianka </a> </div> </div> </section> <section class="related"> <p class="h3">Related posts</p> <div class="row row--post"> <article class="post col post-related post--inspirational post--post" id="post-28965"> <div class="post--inner"> <div class="row mg-none-i full-height"> <a href="https://www.flaticon.com/blog/icons-in-infographics/" class="post--img col mg-none pd-none full-width"> <figure> <img src="https://mediablog.cdnpk.net/sites/5/2023/09/Cover.png" alt="The purpose of icons in infographics" width="300" height="169" loading="lazy"> </figure> </a> <div class="post--content mg-none full-width"> <div> <a href="https://www.flaticon.com/blog/category/inspirational/" class="uppercase link--category">Inspirational</a> <p class="h2"><a href="https://www.flaticon.com/blog/icons-in-infographics/">The purpose of icons in infographics</a></p> </div> <p class="post-author overflow-ellipsis">By <a href="https://www.flaticon.com/blog/author/maxt/" class="semibold">Max Trewhitt</a> <time datetime="2023-09-20T15:33:38+00:00">September 20, 2023</time></p> </div> </div> </div> </article> <article class="post col post-related post--tips and trends post--post" id="post-28920"> <div class="post--inner"> <div class="row mg-none-i full-height"> <a href="https://www.flaticon.com/blog/clip-art/" class="post--img col mg-none pd-none full-width"> <figure> <img src="https://mediablog.cdnpk.net/sites/5/2023/07/COVERBLOG.png" alt="Clip Art: An introduction to a timeless design resource" width="300" height="169" loading="lazy"> </figure> </a> <div class="post--content mg-none full-width"> <div> <a href="https://www.flaticon.com/blog/category/tips-trends/" class="uppercase link--category">Tips and Trends</a> <p class="h2"><a href="https://www.flaticon.com/blog/clip-art/">Clip Art: An introduction to a timeless design resource</a></p> </div> <p class="post-author overflow-ellipsis">By <a href="https://www.flaticon.com/blog/author/maxt/" class="semibold">Max Trewhitt</a> <time datetime="2023-07-31T06:49:28+00:00">July 31, 2023</time></p> </div> </div> </div> </article> </div> </section> </article> </div> </div> </div> </main> <footer id="footer"> <div class="footer__top"> <div class="content-wrapper"> <div class="row"> <div class="col__xs--12 col__sm--6 col__md--4 footer__menu"> <h6>Do you have any question?</h6> <p>Contact us and we will be happy to assist you</p> <a href="https://support.freepik.com/hc/en-us" class="button button--md"> Contact Support </a> </div> <div class="col__xs--12 col__sm--3 col__md--4 footer__menu"> <h6>Help</h6> <ul> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25059"> <a target="" href="https://www.flaticon.com/blog/category/inspirational/">Inspirational</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-25061"> <a target="" href="https://www.flaticon.com/blog/category/tips-trends/">Tips and Trends</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25058"> <a target="" href="https://www.flaticon.com/blog/category/freebies/">Freebies</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25060"> <a target="" href="https://www.flaticon.com/blog/category/outstanding-resources/">Outstanding Resources</a> </li> <li class=" menu-item menu-item-type-taxonomy menu-item-object-category menu-item-25062"> <a target="" href="https://www.flaticon.com/blog/category/whats-cooking/">What's cooking</a> </li> </ul> <ul> <li style="margin-top: 5px;"> <!-- OneTrust Cookies Settings button start --> <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button> <!-- OneTrust Cookies Settings button end --> </li> <ul> </div> <div class="col__xs--12 col__sm--3 col__md--4 footer__menu"> <h6>Social media</h6> <ul class="footer__social"> <li class="pd-lv1 pd-y-none"> <a href="https://www.facebook.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--facebook"> <i class="icon icon--sm icon--mg-sm icon--facebook"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://twitter.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--twitter"> <i class="icon icon--sm icon--mg-sm icon--twitter"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.pinterest.com/flaticon" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--pinterest"> <i class="icon icon--sm icon--mg-sm icon--pinterest"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.instagram.com/flaticon/?hl=en" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--instagram"> <i class="icon icon--sm icon--mg-sm icon--instagram"></i> </a> </li> <li class="pd-lv1 pd-y-none"> <a href="https://www.youtube.com/channel/UC9wPXN2TIWoUamqONb7v8Pw" target="_blank" class="button button--sm button--flat button--icon button--icon--only button--youtube"> <i class="icon icon--sm icon--mg-sm icon--youtube"></i> </a> </li> </ul> </div> </div> </div> </div> <div class="footer__bottom"> <div class="content-wrapper"> <div class="row"> <div class="col mg-none"> <div class="row row--vertical-center mg-none-i"> <a class="logo link--text inline-block clearfix" href="https://www.freepikcompany.com/"> <img src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/media/img/logo/freepik-company.svg" width="191" class="block"> </a> <p class="mg-none"> © 2010-2024 Freepik Company S.L. All rights reserved.</p> </div> </div> <div class="col width-auto mg-none"> <div class="dropdown dropdown--top-right dropdown--inverted"> <select id="language" name="language" data-search="true"> <option value="https://www.flaticon.com/blog/how-to-achieve-consistency-in-your-designs-with-icons/" selected>English</option> <option value="https://www.flaticon.com/blog/es/como-mantener-un-estilo-coherente-en-tus-creaciones-con-iconos/" >Español</option> </select> </div> </div> </div> </div> </div><div class="footer__projects"> <div class="content-wrapper"> <div class="row"> <div class="col mg-none content"> <p>Freepik Company projects</p> <ul> <li class="inline-block"><a href="//www.freepik.com" class="link-inverted" target="_blank">Freepik</a></li> <li class="inline-block"><a href="//www.flaticon.com" class="link-inverted" target="_blank">Flaticon</a></li> <li class="inline-block"><a href="//www.slidesgo.com" class="link-inverted" target="_blank">Slidesgo</a></li> <li class="inline-block"><a href="//www.wepik.com" class="link-inverted" target="_blank">Wepik</a></li> <li class="inline-block"><a href="//www.videvo.net" class="link-inverted" target="_blank">Videvo</a></li> </ul> </div> </div> </div> </div> </footer> <!-- GTM Container placement set to footer --> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PRQMDLG" height="0" width="0" style="display:none;visibility:hidden" aria-hidden="true"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><script type="text/javascript" src="https://www.flaticon.com/blog/wp-content/themes/freepik-blog/dist/js/script.js?ver=1d704dda9d2cbaedf93416f24c776720" id="freepikcompany-script-js"></script> </body> </html>