CINXE.COM

<!doctype html>    <html class="no-js" lang="en-US" prefix="og: https://ogp.me/ns#">  <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" />  <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/svg-icons-in-web-design/" /> <link rel="alternate" hreflang="es" href="https://www.flaticon.com/blog/es/iconos-svg-en-diseno-web/" /> <link rel="alternate" hreflang="x-default" href="https://www.flaticon.com/blog/svg-icons-in-web-design/" />  <script data-cfasync="false" data-pagespeed-no-defer> var gtm4wp_datalayer_name = "dataLayer"; var dataLayer = dataLayer || []; </script>   <title>Benefits of using SVG icons in web design | Flaticon</title> <meta name="description" content="Discover the advantages of using SVG icons in web design and elevate your website's performance. Explore what SVG files are and the pros and cons associated."/> <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/svg-icons-in-web-design/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Benefits of using SVG icons in web design | Flaticon" /> <meta property="og:description" content="Discover the advantages of using SVG icons in web design and elevate your website's performance. Explore what SVG files are and the pros and cons associated." /> <meta property="og:url" content="https://www.flaticon.com/blog/svg-icons-in-web-design/" /> <meta property="og:site_name" content="Flaticon" /> <meta property="article:publisher" content="https://www.facebook.com/flaticon" /> <meta property="article:author" content="chalo" /> <meta property="article:tag" content="accessibility" /> <meta property="article:tag" content="Benefits of SVG" /> <meta property="article:tag" content="Editing SVG files" /> <meta property="article:tag" content="HTML and CSS implementation" /> <meta property="article:tag" content="interactive design" /> <meta property="article:tag" content="Pros and cons" /> <meta property="article:tag" content="Responsive web design" /> <meta property="article:tag" content="Scalable Vector Graphics" /> <meta property="article:tag" content="Search engine optimization (SEO)" /> <meta property="article:tag" content="SVG assets" /> <meta property="article:tag" content="SVG files" /> <meta property="article:tag" content="SVG in Flaticon" /> <meta property="article:tag" content="user experience" /> <meta property="article:tag" content="Web Design" /> <meta property="article:tag" content="Web performance" /> <meta property="article:section" content="Inspirational" /> <meta property="og:updated_time" content="2023-06-19T09:30:32+00:00" /> <meta property="og:image" content="https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png" /> <meta property="og:image:secure_url" content="https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png" /> <meta property="og:image:width" content="1280" /> <meta property="og:image:height" content="720" /> <meta property="og:image:alt" content="Cover SVG icons in web design" /> <meta property="og:image:type" content="image/png" /> <meta property="article:published_time" content="2023-06-16T07:00:20+00:00" /> <meta property="article:modified_time" content="2023-06-19T09:30:32+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Benefits of using SVG icons in web design | Flaticon" /> <meta name="twitter:description" content="Discover the advantages of using SVG icons in web design and elevate your website's performance. Explore what SVG files are and the pros and cons associated." /> <meta name="twitter:site" content="@flaticon" /> <meta name="twitter:creator" content="@flaticon" /> <meta name="twitter:image" content="https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Max Trewhitt" /> <meta name="twitter:label2" content="Time to read" /> <meta name="twitter:data2" content="6 minutes" /> <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/06/COVERBLOG.png","url":"https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png","width":"1280","height":"720","caption":"Cover SVG icons in web design","inLanguage":"en-US"},{"@type":"BreadcrumbList","@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#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/inspirational/","name":"Inspirational"}},{"@type":"ListItem","position":"3","item":{"@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/","name":"Benefits of using SVG icons in web design"}}]},{"@type":"WebPage","@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#webpage","url":"https://www.flaticon.com/blog/svg-icons-in-web-design/","name":"Benefits of using SVG icons in web design | Flaticon","datePublished":"2023-06-16T07:00:20+00:00","dateModified":"2023-06-19T09:30:32+00:00","isPartOf":{"@id":"https://www.flaticon.com/blog/#website"},"primaryImageOfPage":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png"},"inLanguage":"en-US","breadcrumb":{"@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#breadcrumb"}},{"@type":"Person","@id":"https://www.flaticon.com/blog/author/maxt/","name":"Max Trewhitt","url":"https://www.flaticon.com/blog/author/maxt/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g","url":"https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g","caption":"Max Trewhitt","inLanguage":"en-US"},"sameAs":["chalo"],"worksFor":{"@id":"https://www.flaticon.com/blog/#organization"}},{"@type":"BlogPosting","headline":"Benefits of using SVG icons in web design | Flaticon","keywords":"SVG","datePublished":"2023-06-16T07:00:20+00:00","dateModified":"2023-06-19T09:30:32+00:00","articleSection":"Inspirational, Tips and Trends","author":{"@id":"https://www.flaticon.com/blog/author/maxt/","name":"Max Trewhitt"},"publisher":{"@id":"https://www.flaticon.com/blog/#organization"},"description":"Discover the advantages of using SVG icons in web design and elevate your website's performance. Explore what SVG files are and the pros and cons associated.","name":"Benefits of using SVG icons in web design | Flaticon","@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#richSnippet","isPartOf":{"@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#webpage"},"image":{"@id":"https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://www.flaticon.com/blog/svg-icons-in-web-design/#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>  <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\/svg-icons-in-web-design\/","page_code":200,"page_lang":"en","country":"","content_group":"blog","content_group2":"na","content_type":"post","author_name":"Max Trewhitt","user_id":"","user_type":"","page_path_es":"https:\/\/wordpress-pro-3928501.cdnpk.net\/flaticon\/es\/iconos-svg-en-diseno-web\/"}}; /* ]]> */ </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;" />   <script data-cfasync="false" data-pagespeed-no-defer type="text/javascript"> var dataLayer_content = {"pagePostType":"post","pagePostType2":"single-post","pageCategory":["inspirational","tips-trends"],"pageAttributes":["accessibility","benefits-of-svg","editing-svg-files","html-and-css-implementation","interactive-design","pros-and-cons","responsive-web-design","scalable-vector-graphics","search-engine-optimization-seo","svg-assets","svg-files","svg-in-flaticon","user-experience","web-design","web-performance"],"pagePostAuthor":"Max Trewhitt","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> <script type="text/javascript" src="//wordpress-pro-3928501.cdnpk.net/flaticon/?wordfence_syncAttackData=1732399637.2139" 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>  <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>   <script> document.addEventListener('DOMContentLoaded', function() { if ('function' === typeof window.gtm) { window.gtm(); } }); </script>  <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="bdpnbevydn5rgz2ckika-f-624166970-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":"1c0556d5","ak.r":41571,"ak.a2":n,"ak.m":"b","ak.n":"ff","ak.bpcip":"8.222.208.0","ak.cport":46144,"ak.gh":"184.27.123.94","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.0rtt.ed":"","ak.csrc":"-","ak.acc":"reno","ak.t":"1732399636","ak.ak":"hOBiQwZUYzCg5VSAfCLimQ==YpN0ePmDPY36xaiqIPRYzqeGJpLxort4mYnnz6E0rB1jqTbK/KjBo8hSyaZFFrdUOQ1/B640weSHvCNL+irNKYakkPfAb+WBzZxYkxV1SFKAjwRhxPR7gAprr8Pr9Sz+PLOw1eHg7mpDPGgLupJFCQ4NmcxxJOy2JBvlQSSw7uYP0uIWciVf9wwe1L595KAvKPB1ogCR0lpgNQ3AP4PeBTZdz+XTdPmiZihdcyFCvfvj+gXa1i3UfZkGybByct5a+xXzVX2usEuojpO9OrTMbvHo1dx1l70szCoBQw8oSiluz3IONqCvTRewkJnCa/a9hQw8luKNyqFaoDOnqWIzK/uztrgFvuYzLzbDxEtfmF+X+4DGJT1clmj/YXtVoRf2vJiqcNXlPShL33yb67QPP8m93AAX5UeGqtOKxNipmUw=","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-28764 single-format-standard" data-cat-parent="inspirational" 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 current-post-ancestor current-menu-parent current-post-parent 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> </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/svg-icons-in-web-design/" data-share-title="Benefits of using SVG icons in web design" data-share-tags="accessibility,Benefits of SVG,Editing SVG files,HTML and CSS implementation,interactive design,Pros and cons,Responsive web design,Scalable Vector Graphics,Search engine optimization (SEO),SVG assets,SVG files,SVG in Flaticon,user experience,Web Design,Web performance" data-share-image="https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.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-28764"> <figure class="article-media"> <img src="https://mediablog.cdnpk.net/sites/5/2023/06/COVERBLOG.png" width="1280" height="720" loading="lazy"> </figure> <section class="article-content"> <h1 class="article-h1">Benefits of using SVG icons in web design</h1> <div class="article-info"> <p class="blog-author mg-none"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g' alt='Max Trewhitt'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/maxt/"> Max Trewhitt </a> </p> <div class="article-metas"> <ul class="post--categories"> <li><a href="https://www.flaticon.com/blog/category/inspirational/">Inspirational</a></li> <li><a href="https://www.flaticon.com/blog/category/tips-trends/">Tips and Trends</a></li> </ul><span>|</span> <time datetime="2023-06-16T07:00:20+00:00">June 16, 2023</time> </div> </div> <div class="article-body"> <p>Are you a web designer, graphic designer, or developer looking to enhance how your website looks? <a href="https://www.flaticon.com/icons" target="_blank" rel="noopener">SVG icons</a> might be the answer you are looking for! <b>From improving accessibility to enhancing overall aesthetics in design, there are many benefits that come with using SVG icons</b>.</p> <p>In this article, we will explore how incorporating SVG files into your designs can provide numerous advantages and unlock diverse possibilities within your work. We鈥檒l cover topics such as why these graphical elements can add an extra layer of customization, amplifying engagement among users on websites, and their ability to bring functionality to your development projects.</p> <p>Equipped with all of this knowledge and an appreciation for the differences between vector format files versus traditional bitmap images, let鈥檚 dive right in on a journey learning about all things related to the SVG format!</p> <h2>What are SVG icons?</h2> <p>Designers are constantly searching for new techniques to add more personality and interactivity to their sites. Enter SVG icons. But what exactly are they, and how do they work? SVG, or <b>Scalable Vector Graphics</b>, is an XML-based format used to display vector graphics on the web. XML, or eXtensible Markup Language, format is a flexible, text-based language used to organize and share data. It uses custom tags to describe the information’s structure, making it easy for humans and computers to read, helping different systems communicate effectively.</p> <p><b>Unlike traditional image formats such as JPG or GIF, SVG images are infinitely scalable without losing quality</b>. By using CSS to style these icons, designers have complete control over their appearance, making them an incredibly versatile tool. Plus, their small file size means they won’t slow down your site. In short, SVG icons are a game-changer for web design, providing new ways to add visual interest and interactivity to any site.</p> <p>But SVG icons aren’t just for looks; <b>they can enhance the user-friendly experience of a website by simplifying navigation and conveying important information visually</b>. By incorporating SVG icons into your web design, you can create a more intuitive and engaging user experience that will leave a lasting impression on your visitors.</p> <h2>Size matters</h2> <p><img fetchpriority="high" decoding="async" class="aligncenter wp-image-28768" src="https://mediablog.cdnpk.net/sites/5/2023/06/4.jpg" alt="SVG icons have therefore played an important role in this, not only due to their sharp resolution and compatibility across devices, but also because of their incredibly small file size." width="1024" height="576" /></p> <p>As the world progresses, web design has become more refined and intricate to ensure high functionality and usability. SVG icons have therefore played an important role in this, not only due to their sharp resolution and compatibility across devices, but also because of their incredibly small file size. <b>Their slender nature is all thanks to their vector DNA, whereby visuals are made up of mathematical equations instead of the use of heavy pixels</b>. This translates to faster loading times, saving both users and developers from unnecessary delays. Furthermore, the small file size means more room for other important assets. Savvy developers have embraced the power of SVG icons and recognize their ability to elevate user experiences to new heights. As more people aim to create user-friendly digital products, SVG icons have become an essential tool in the designer’s arsenal.</p> <h2>Customization</h2> <p>If you’re looking to edit SVG icons, you’ll want to have a basic understanding of CSS. This stands for “Cascading Style Sheets” and is used to add style and formatting to HTML documents. <b>By using CSS, you can change the color, size, and shape of your SVG icons to make them match your website’s style</b>. Additionally, designers can incorporate <a href="https://www.flaticon.com/animated-icons" target="_blank" rel="noopener">animation</a> to bring SVG icons to life and add an engaging element to a web page.</p> <p>In addition to their coding abilities, <b>designers will have the freedom to take their SVG icons into vector editing software such as Illustrator or Figma</b>, customizing them visually with no restraint. This just goes to show how versatile this format can be, as it speaks to both background developers and designers who may not speak computer language.</p> <p>The possibilities are endless when it comes to customizing SVG icons and the result is an intuitive and visually appealing experience for the user. Just remember to save your SVG file separately before making any changes so that you can always go back to the original if needed. Happy editing!</p> <h2>Five useful tips when using SVG icons<br /> <b style="font-size: 16px;"></b></h2> <p><img decoding="async" class="aligncenter wp-image-28770" src="https://mediablog.cdnpk.net/sites/5/2023/06/7331693.jpg" alt="Five useful tips when using SVG icons." width="1024" height="576" /></p> <ol> <li><b style="font-size: 16px;">Use a sprite file:</b> To reduce the number of HTTP requests, you should use a sprite file containing all your SVG icons. Using a sprite file reduces page load time and enhances website performance.</li> <li><b style="font-size: 16px;">Minify SVG code:</b> To further reduce the size of SVG icons, you should minify the SVG code. Minification removes all unnecessary white spaces, making the code smaller and faster to load.</li> <li><b style="font-size: 16px;">Use semantic naming:</b> To make it easier to use SVG icons, you should use semantic naming for each icon. Using semantic names makes it easier for developers to find and use the icons.</li> <li><b style="font-size: 16px;">Use fallback icons:</b> To ensure that your website remains accessible to users without SVG support, you should use fallback icons. Fallback icons are raster images that display in place of SVG icons for users without SVG support.</li> <li><b style="font-size: 16px;">Test compatibility:</b> Before using SVG icons on your website, you should test their compatibility with different browsers and devices. This testing ensures that your website remains accessible and functional across different platforms.</li> </ol> <h2>Pros and cons for using SVG assets</h2> <p>As with any design element, choosing between SVG and bitmap icons comes with its own set of advantages and disadvantages. <b>While SVG icons can be easily scaled up or down without losing any quality, bitmap image icons tend to be more detailed and have a higher resolution</b>. However, it is important to also consider the bigger picture when incorporating icons into your design. For example, SVG icons are generally smaller in file size and can decrease the load time for your website or application. Additionally, SVG icons can be manipulated using CSS and JavaScript, adding a layer of interactivity and customization that bitmap image icons may not offer. Ultimately, the decision between SVG and bitmap image icons depends on the specific needs and objectives of your design project.</p> <h2>SVG icons in Flaticon</h2> <p><img decoding="async" class="aligncenter wp-image-28766" src="https://mediablog.cdnpk.net/sites/5/2023/06/SlMqCz24-3.jpg" alt="All icons available on Flaticon will present you with various file formats for download." width="1024" height="576" /></p> <p>All icons available on Flaticon will present you with various file formats for download:</p> <h3>Free users</h3> <ul> <li><b>PNG:</b> Bitmap or pixel based format with limited editing capability.</li> </ul> <h3>Premium users</h3> <ul> <li><b>SVG/EPS (Vector):</b> Scalable vector graphics and vector files that can be edited via coding or vector design software.</li> <li><b>PSD:</b> Files can be opened and edited using Adobe Photoshop or any other raster-based software.</li> <li><b>CSS (BASE64):</b> Encoding schemes are commonly used when there is a need to encode binary data that needs to be stored and transferred over media that is designed to deal with textual data. This encoded scheme is helpful for web building development.</li> </ul> <p>When on the search for icons in <a href="http://flaticon.com" target="_blank" rel="noopener">Flaticon</a> and the SVG format appears, it means you have scalable vector graphics within your grasp! Once downloaded, you will be able to edit them in your favorite vector-based design software such as <a href="https://www.figma.com/community/plugin/1183020129233350982/Flaticon" target="_blank" rel="noopener">Figma</a> and Illustrator or in CSS. <b>However, premium users can also try editing icons using Flaticon鈥檚 very own </b><a href="https://www.flaticon.com/blog/svg-editable-stroke/" target="_blank" rel="noopener"><b>icon editor</b></a><b> for fast and effective relief</b>. And as you’d expect, you will be presented with various saving formats, including SVG!</p> <p>Designing websites is never straightforward, no matter how experienced you are. Yet, with this introduction to SVG icons, you will have learned the fundamental advantages of <b>saving file space</b>, enjoying the freedom of<b> customizing</b>, and benefiting from its ability to provide the<b> functionality to your web design projects</b>.</p> </div> <div class="article-footer"> <div class="blog-author"> <span class="avatar avatar--circle"> <img src='https://secure.gravatar.com/avatar/8ed444a315bd505a6fd56cf5a5283493?s=96&d=mm&r=g' alt='Max Trewhitt'> </span> <span>By </span><a href="https://www.flaticon.com/blog/author/maxt/"> Max Trewhitt </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 current-post-ancestor current-menu-parent current-post-parent 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;">  <button id="ot-sdk-btn" class="ot-sdk-show-settings">Cookie Settings</button>  </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/svg-icons-in-web-design/" selected>English</option> <option value="https://www.flaticon.com/blog/es/iconos-svg-en-diseno-web/" >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>   <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> <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>