CINXE.COM

<!DOCTYPE html><html class=no-touch lang=en-US xmlns=http://www.w3.org/1999/xhtml><head><link rel=stylesheet href=https://matthewcarlstrom.com/wp-content/cache/minify/ba505.default.include.699fb2.css media=all><style>img.lazy{min-height:1px}</style><link href=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js as=script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel=profile href=https://gmpg.org/xfn/11><link rel=pingback href=https://matthewcarlstrom.com/xmlrpc.php><meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'><style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style><title>Vector icons and why they saved you, designers.</title><meta name="description" content="Vector icons have changed the production strategies of web and mobile apps. What used to be limiting and laborious is now quick and responsive"><link rel=canonical href=https://matthewcarlstrom.com/vector-icons/ ><meta property="og:locale" content="en_US"><meta property="og:type" content="article"><meta property="og:title" content="Vector icons and why they saved you, designers."><meta property="og:description" content="Vector icons have changed the production strategies of web and mobile apps. What used to be limiting and laborious is now quick and responsive"><meta property="og:url" content="https://matthewcarlstrom.com/vector-icons/"><meta property="og:site_name" content="Matthew Carlstrom Product Design"><meta property="article:publisher" content="https://www.facebook.com/matthew.carlstrom"><meta property="article:published_time" content="2016-12-05T18:36:28+00:00"><meta property="article:modified_time" content="2024-01-07T03:27:07+00:00"><meta property="og:image" content="https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg"><meta property="og:image:width" content="2000"><meta property="og:image:height" content="2714"><meta property="og:image:type" content="image/jpeg"><meta name="author" content="matyas"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@matyasjanos"><meta name="twitter:site" content="@matyasjanos"><meta name="twitter:label1" content="Written by"><meta name="twitter:data1" content="matyas"><meta name="twitter:label2" content="Est. reading time"><meta name="twitter:data2" content="4 minutes"> <script type=application/ld+json class=yoast-schema-graph>{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://matthewcarlstrom.com/vector-icons/#article","isPartOf":{"@id":"https://matthewcarlstrom.com/vector-icons/"},"author":{"name":"matyas","@id":"https://matthewcarlstrom.com/#/schema/person/4162c9ac78253fc1df527e1418b50fc9"},"headline":"Vector Icons, how we got here","datePublished":"2016-12-05T18:36:28+00:00","dateModified":"2024-01-07T03:27:07+00:00","mainEntityOfPage":{"@id":"https://matthewcarlstrom.com/vector-icons/"},"wordCount":702,"publisher":{"@id":"https://matthewcarlstrom.com/#organization"},"image":{"@id":"https://matthewcarlstrom.com/vector-icons/#primaryimage"},"thumbnailUrl":"https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg","articleSection":["Design","UI/UX"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https://matthewcarlstrom.com/vector-icons/","url":"https://matthewcarlstrom.com/vector-icons/","name":"Vector icons and why they saved you, designers.","isPartOf":{"@id":"https://matthewcarlstrom.com/#website"},"primaryImageOfPage":{"@id":"https://matthewcarlstrom.com/vector-icons/#primaryimage"},"image":{"@id":"https://matthewcarlstrom.com/vector-icons/#primaryimage"},"thumbnailUrl":"https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg","datePublished":"2016-12-05T18:36:28+00:00","dateModified":"2024-01-07T03:27:07+00:00","description":"Vector icons have changed the production strategies of web and mobile apps. What used to be limiting and laborious is now quick and responsive","breadcrumb":{"@id":"https://matthewcarlstrom.com/vector-icons/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://matthewcarlstrom.com/vector-icons/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/vector-icons/#primaryimage","url":"https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg","width":2000,"height":2714,"caption":"© 2016. CSuite Technologies Inc."},{"@type":"BreadcrumbList","@id":"https://matthewcarlstrom.com/vector-icons/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://matthewcarlstrom.com/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://matthewcarlstrom.com/blog/"},{"@type":"ListItem","position":3,"name":"Vector Icons, how we got here"}]},{"@type":"WebSite","@id":"https://matthewcarlstrom.com/#website","url":"https://matthewcarlstrom.com/","name":"Matthew Carlstrom Product Design","description":"Design for Digital Products","publisher":{"@id":"https://matthewcarlstrom.com/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://matthewcarlstrom.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://matthewcarlstrom.com/#organization","name":"Matthew Carlstrom UI/UX/Design","url":"https://matthewcarlstrom.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/#/schema/logo/image/","url":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","contentUrl":"https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt-copy@4x-100.jpg","width":248,"height":106,"caption":"Matthew Carlstrom UI/UX/Design"},"image":{"@id":"https://matthewcarlstrom.com/#/schema/logo/image/"},"sameAs":["https://www.facebook.com/matthew.carlstrom","https://x.com/matyasjanos","https://www.instagram.com/matyasjanos/","https://tr.linkedin.com/in/matthew-carlstrom-80a5351","https://pinterest.com/matthewcarlstrom/"]},{"@type":"Person","@id":"https://matthewcarlstrom.com/#/schema/person/4162c9ac78253fc1df527e1418b50fc9","name":"matyas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://matthewcarlstrom.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/32fb7140dc12bf7b8fd5beda7ef0bb5a?s=96&d=blank&r=g","contentUrl":"https://secure.gravatar.com/avatar/32fb7140dc12bf7b8fd5beda7ef0bb5a?s=96&d=blank&r=g","caption":"matyas"},"description":"I am product designer and UI/UX designer with a web developer's technical skill and a visual designer's illustrative flair. I have years of experience in digital product and app design, with proven experience in UI and UX development from a design and production perspective.","sameAs":["https://www.matthewcarlstrom.com","https://www.linkedin.com/in/matthew-john-carlstrom-80a5351/","https://pinterest.com/matthewcarlstrom/","https://x.com/@matyasjanos","https://www.youtube.com/user/matyasjanos/videos"]}]}</script> <link rel=dns-prefetch href=//www.googletagmanager.com><link rel=dns-prefetch href=//fonts.googleapis.com><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Feed" href=https://matthewcarlstrom.com/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Comments Feed" href=https://matthewcarlstrom.com/comments/feed/ ><link rel=alternate type=application/rss+xml title="Matthew Carlstrom Product Design » Vector Icons, how we got here Comments Feed" href=https://matthewcarlstrom.com/vector-icons/feed/ ><style id=classic-theme-styles-inline-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>/*<![CDATA[*/: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=uncodefont-google-css href='//fonts.googleapis.com/css?family=Nunito+Sans%3A200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CMontserrat%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2Cregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CCabin%3Aregular%2Citalic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%7CMerriweather%3A300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic&subset=vietnamese%2Clatin%2Clatin-ext%2Ccyrillic%2Ccyrillic-ext&ver=2.9.1.7' type=text/css media=all><style id=uncode-style-inline-css>@media (min-width: 960px) { .limit-width { max-width: 1200px; margin: auto;}} .menu-primary ul.menu-smart > li > a, .menu-primary ul.menu-smart li.dropdown > a, .menu-primary ul.menu-smart li.mega-menu > a, .vmenu-container ul.menu-smart > li > a, .vmenu-container ul.menu-smart li.dropdown > a { text-transform: uppercase; } #changer-back-color { transition: background-color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } #changer-back-color > div { transition: opacity 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; } body.bg-changer-init.disable-hover .main-wrapper .style-light, body.bg-changer-init.disable-hover .main-wrapper .style-light h1, body.bg-changer-init.disable-hover .main-wrapper .style-light h2, body.bg-changer-init.disable-hover .main-wrapper .style-light h3, body.bg-changer-init.disable-hover .main-wrapper .style-light h4, body.bg-changer-init.disable-hover .main-wrapper .style-light h5, body.bg-changer-init.disable-hover .main-wrapper .style-light h6, body.bg-changer-init.disable-hover .main-wrapper .style-light a, body.bg-changer-init.disable-hover .main-wrapper .style-dark, body.bg-changer-init.disable-hover .main-wrapper .style-dark h1, body.bg-changer-init.disable-hover .main-wrapper .style-dark h2, body.bg-changer-init.disable-hover .main-wrapper .style-dark h3, body.bg-changer-init.disable-hover .main-wrapper .style-dark h4, body.bg-changer-init.disable-hover .main-wrapper .style-dark h5, body.bg-changer-init.disable-hover .main-wrapper .style-dark h6, body.bg-changer-init.disable-hover .main-wrapper .style-dark a { transition: color 1000ms cubic-bezier(0.25, 1, 0.5, 1) !important; }</style><style id=uncode-custom-style-inline-css>@font-face { font-display:swap;}.share-button.share-inline .social.top li.social-linkedin,.share-button.share-inline .social.top li.social-xing,.share-button.share-inline .social.top li.social-facebook,.share-button.share-inline .social.top li.social-pinterest{display:none !important;} .portfolio-header .background-inner { filter:blur(8px); -webkit-filter:blur(8px); transform:scale(1.1);}</style> <script id=uncode-init-js-extra>var SiteParameters = {"days":"days","hours":"hours","minutes":"minutes","seconds":"seconds","constant_scroll":"on","scroll_speed":"2.5","parallax_factor":"0.2","loading":"Loading\u2026","slide_name":"slide","slide_footer":"footer","ajax_url":"https:\/\/matthewcarlstrom.com\/wp-admin\/admin-ajax.php","nonce_adaptive_images":"c8ed492db5","nonce_srcset_async":"cac174728f","enable_debug":"","block_mobile_videos":"","is_frontend_editor":"","main_width":["1200","px"],"mobile_parallax_allowed":"","listen_for_screen_update":"1","wireframes_plugin_active":"","sticky_elements":"off","resize_quality":"90","register_metadata":"","bg_changer_time":"1000","update_wc_fragments":"1","optimize_shortpixel_image":"","menu_mobile_offcanvas_gap":"45","custom_cursor_selector":"[href], .trigger-overlay, .owl-next, .owl-prev, .owl-dot, input[type=\"submit\"], input[type=\"checkbox\"], button[type=\"submit\"], a[class^=\"ilightbox\"], .ilightbox-thumbnail, .ilightbox-prev, .ilightbox-next, .overlay-close, .unmodal-close, .qty-inset > span, .share-button li, .uncode-post-titles .tmb.tmb-click-area, .btn-link, .tmb-click-row .t-inside, .lg-outer button, .lg-thumb img, a[data-lbox], .uncode-close-offcanvas-overlay, .uncode-nav-next, .uncode-nav-prev, .uncode-nav-index","mobile_parallax_animation":"","lbox_enhanced":"","native_media_player":"1","vimeoPlayerParams":"?autoplay=0","ajax_filter_key_search":"key","ajax_filter_key_unfilter":"unfilter","index_pagination_disable_scroll":"","index_pagination_scroll_to":"","uncode_wc_popup_cart_qty":"","disable_hover_hack":"","uncode_nocookie":"","menuHideOnClick":"1","smoothScroll":"","smoothScrollDisableHover":"","smoothScrollQuery":"960","uncode_force_onepage_dots":"","uncode_smooth_scroll_safe":"","uncode_lb_add_galleries":", .gallery","uncode_lb_add_items":", .gallery .gallery-item a"};</script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/init.min.js id=uncode-init-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id=jquery-core-js></script> <script src="https://matthewcarlstrom.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id=jquery-migrate-js></script> <script src="https://www.googletagmanager.com/gtag/js?id=G-LML7MQXSDH" id=google_gtagjs-js async></script> <script id=google_gtagjs-js-after>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag("set","linker",{"domains":["matthewcarlstrom.com"]}); gtag("js", new Date()); gtag("set", "developer_id.dZTNiMT", true); gtag("config", "G-LML7MQXSDH", {"googlesitekit_post_type":"post"});</script> <script></script><link rel=https://api.w.org/ href=https://matthewcarlstrom.com/wp-json/ ><link rel=alternate title=JSON type=application/json href=https://matthewcarlstrom.com/wp-json/wp/v2/posts/420><link rel=alternate title="oEmbed (JSON)" type=application/json+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fvector-icons%2F"><link rel=alternate title="oEmbed (XML)" type=text/xml+oembed href="https://matthewcarlstrom.com/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fmatthewcarlstrom.com%2Fvector-icons%2F&format=xml"><meta name="generator" content="Site Kit by Google 1.146.0"><script src=//use.typekit.com/xou4kyp.js></script> <script>try{Typekit.load();}catch(e){}</script> <style>.broken_link, a.broken_link { text-decoration: line-through; }</style><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-32x32.png sizes=32x32><link rel=icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-192x192.png sizes=192x192><link rel=apple-touch-icon href=https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-180x180.png><meta name="msapplication-TileImage" content="https://matthewcarlstrom.com/wp-content/uploads/cropped-Artboard-13-270x270.png"> <noscript><style>.wpb_animate_when_almost_visible { opacity: 1; }</style></noscript></head><body data-rsssl=1 class="post-template-default single single-post postid-420 single-format-standard style-color-lxmt-bg hormenu-position-left hmenu hmenu-position-right header-full-width main-center-align textual-accent-color menu-mobile-default mobile-parallax-not-allowed ilb-no-bounce unreg qw-body-scroll-disabled menu-sticky-fix no-qty-fx wpb-js-composer js-comp-ver-7.8 vc_responsive" data-border=0><div id=vh_layout_help></div><div class=body-borders data-border=0><div class="top-border body-border-shadow"></div><div class="right-border body-border-shadow"></div><div class="bottom-border body-border-shadow"></div><div class="left-border body-border-shadow"></div><div class="top-border style-light-bg"></div><div class="right-border style-light-bg"></div><div class="bottom-border style-light-bg"></div><div class="left-border style-light-bg"></div></div><div class=box-wrapper><div class=box-container> <script id=initBox>UNCODE.initBox();</script> <div class="menu-wrapper menu-sticky"><header id=masthead class="navbar menu-primary menu-light submenu-light menu-transparent menu-add-padding style-light-original menu-absolute menu-with-logo"><div class="menu-container menu-hide style-color-xsdn-bg menu-borders"><div class="row-menu limit-width"><div class=row-menu-inner><div id=logo-container-mobile class="col-lg-0 logo-container middle"><div id=main-logo class="navbar-header style-light"> <a href=https://matthewcarlstrom.com/ class=navbar-brand data-minheight=20 aria-label="Matthew Carlstrom Product Design"><div class="logo-image main-logo logo-light" data-maxheight=18 style="height: 18px;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3_alt.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div><div class="logo-image main-logo logo-dark" data-maxheight=18 style="height: 18px;display:none;"><img decoding=async src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/mc_logo_block_3.svg alt="Matthew Carlstrom Design" width=1 height=1 class="img-responsive lazy"></div></a></div><div class=mmb-container><div class=mobile-additional-icons></div><div class="mobile-menu-button mobile-menu-button-light lines-button"><span class=lines><span></span></span></div></div></div><div class="col-lg-12 main-menu-container middle"><div class="menu-horizontal "><div class=menu-horizontal-inner><div class="nav navbar-nav navbar-main navbar-nav-last"><ul id=menu-main-menu class="menu-primary-inner menu-smart sm"><li id=menu-item-5287 class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5287 menu-item-link"><a title=Work href=https://matthewcarlstrom.com/#my-work>Work<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-15 class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-15 menu-item-link"><a title=Blog href=https://matthewcarlstrom.com/blog/ >Blog<i class="fa fa-angle-right fa-dropdown"></i></a></li> <li id=menu-item-4826 class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4826 menu-item-link"><a title=About href=https://matthewcarlstrom.com/about/ >About<i class="fa fa-angle-right fa-dropdown"></i></a></li></ul></div><div class="uncode-close-offcanvas-mobile lines-button close navbar-mobile-el"><span class=lines></span></div><div class="desktop-hidden menu-accordion-secondary"></div></div></div></div></div></div></div></header></div> <script id=fixMenuHeight>UNCODE.fixMenuHeight();</script> <div class=main-wrapper><div class=main-container><div class=page-wrapper><div class=sections-container><div id=page-header><div class="header-wrapper header-uncode-block"><div data-parent=true class="vc_row portfolio-header row-container with-parallax" id=row-unique-0><div class="row-background background-element"><div class=background-wrapper><div class="background-inner lazy" style="background-repeat: no-repeat;background-position: center center;background-size: cover;" data-bg=url(https://matthewcarlstrom.com/wp-content/uploads/glyph_icon_grid-1.jpg)></div><div class="block-bg-overlay style-color-jevc-bg" style="opacity: 0.5;"></div></div></div><div class="row single-top-padding no-bottom-padding single-h-padding limit-width row-parent row-header" data-minheight=320><div class="wpb_row row-inner"><div class="wpb_column pos-middle pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-dark" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class="vc_custom_heading_wrap "><div class="heading-text el-text" ><h1 class="fontsize-356422" ><span>Vector Icons, how we got here</span></h1></div><div class=clear></div></div></div></div></div></div></div><script id=script-row-unique-0 data-row=script-row-unique-0 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-0"));</script></div></div></div><div class="header-scrolldown style-dark"><i class="fa fa-angle-down"></i></div></div></div><script>UNCODE.initHeader();</script><article id=post-420 class="page-body style-light-bg post-420 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-uiux"><div class=post-wrapper><div class=post-body><div class=row-container><div class="row row-parent un-sidebar-layout col-std-gutter double-top-padding no-bottom-padding limit-width"><div class=row-inner><div class=col-lg-9><div class="post-content style-light double-bottom-padding"><h2>Vector Icons, how we got here</h2><p>Icon design ain’t the same as it was back in your grandfather’s day. Actually, your grandfather probably never designed icons, and if he did for some reason, he probably did it with pen and ink, or a protractor or some other such manual contraption. So I admit it. Referring to your grandfather was just a cheap device to underscore the fact that devices and platform technology is changing fast, and design techniques are constantly under pressure to evolve to keep up. But back the point I am trying to make: icon design and production has changed quit a bit since the advent of web and mobile apps. And it has done so for the better.</p><h2>How it was</h2><p>Several short years ago, iOS used to have only two screen densities. Android had about four. High density displays and Retina displays had yet to appear on computers and laptops. So when designing icons for digital products, designers would labor away in Photoshop or some other popular pixel-based design tool. They would output sets of icons for all these different devices and screen densities. For Android they had to support LDPI, MDPI, HDPI, and XHDPI. If you are interested in learning more about Android screen densities you can find out all you want <a href=https://developer.android.com/guide/practices/screens_support.html>here</a>. On iOS, they had to consider they 1x and 2x resolution, and add the silly filename suffix @2x where appropriate. Designers quickly learned that they couldn’t possibly handcraft these icons individually for each size and still hit their deadlines. They had to find all sorts of tricks to make sure that the output of one icon would scale nicely without artifacting to all the different screen densities.</p><h2>How they compensated</h2><p>They solved this by mastering Photoshop’s, or Illustrator’s vector drawing tools. These are powerful tools, and they were great for allowing designers to realize all that they could envision. But the downside to this was that oftentimes the smaller-sized icons would look muddy, blurry and hard to read compared to icons from higher-densities. So designers were left with the option of designing for the lowest common resolution, or designing for the top resolution, and devil may care for the lower screen densities. Or, god forbid, create custom-drawn duplicate icons for each size. In addition, the asset wrangling of duplicate assets at all the sizes across all screen densities was a complete pain in the ass.</p><h2>How it is now</h2><p>In a short time, screen density has only increased. Android now supports LDPI, MDPI, HDPI, and XHDPI, XXHPI and XXXHDPI. (The last size sounds a little naughty, but it’s not. It just means its screen has 4x pixels more than an MDPI screen.) While iOS is up to 1x, 2x, and 3x. As Android and iOS devices’ screens continue to increase in size and density, designers’ busy work doesn’t seem to be anywhere near an end. However, while the devices that designers must target have increased, techniques and technology have improved to make their work flow easier. One of the most important aspect of this has been the use of vectors and glyphs as deliverable assets. Coupled with the death of <a href=https://en.wikipedia.org/wiki/Skeuomorph>skeuomorphic</a> design, which now lets designers create a more descriptive visual language rather than a realistic tactile one, icons are lighter, simpler and most importantly, more meaningful. This allows designers to create a simple mark, without the burden of skeuomorphic realism, as vector icons. This is important because vector icons do not have any artifacting at any size. It also cuts down all duplicate assets for each screen density. Whew, that is a relief! And the efficiency does not stop there. These vectors can be incorporated into a font file, aka glyph. This allows developers a little more flexibility when integrating assets into an app. It allows the designer a much simpler workflow. And most importantly, it allow a simpler and cleaner icon system to be delivered to the user, with much better readability across all screen densities.</p><p><img fetchpriority=high decoding=async class="alignnone wp-image-5038 size-large lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20840%20606'%3E%3C/svg%3E" data-src=https://matthewcarlstrom.com/wp-content/uploads/icon-design-970x700.png alt="Icon Design Glyph icons" width=840 height=606></p><p><span style="color: #999999;">Icons property of CSuite Technologies Inc. </span><span style="color: #999999;">© 2016. CSuite Technologies Inc.</span></p><p>To see more of these vector icons please check out my <a href=https://matthewcarlstrom.com/portfolio/custom-icon-design/ >Glyph icon</a> page.</p></div><div class="post-footer post-footer-light style-light no-top-padding double-bottom-padding"><div class=post-share><div class="detail-container margin-auto"><div class="share-button share-buttons share-inline only-icon"></div></div></div></div></div><div class="col-lg-3 col-widgets-sidebar "><div class="uncol style-light"><div class=uncoltable><div class="uncell double-bottom-padding"><div class=uncont><aside id=search-2 class="widget widget_search widget-container collapse-init sidebar-widgets"><form action=https://matthewcarlstrom.com/ method=get><div class=search-container-inner> <input type=search class="search-field form-fluid no-livesearch" placeholder=Search… value name=s title="Search for:"> <i class="fa fa-search3"></i></div></form></aside><aside id=recent-posts-2 class="widget widget_recent_entries widget-container collapse-init sidebar-widgets"><h3 class="widget-title">Recent Posts</h3><ul> <li> <a href=https://matthewcarlstrom.com/my-life-in-a-bush-of-tetris/ >My Life in a Bush of Tetris</a> </li> <li> <a href=https://matthewcarlstrom.com/some-samples-of-recent-ui-ux-visual-design-work/ >Some Samples of Recent UI/UX & Visual Design Work</a> </li> <li> <a href=https://matthewcarlstrom.com/the-coronapocalypse-file-this-under-uh-oh/ >Coronapocalypse – Storms’ a brewin</a> </li> <li> <a href=https://matthewcarlstrom.com/pixel-pusher/ >I used to be a pusher… of pixels</a> </li> <li> <a href=https://matthewcarlstrom.com/books/ >Books as design</a> </li></ul></aside><aside id=categories-2 class="widget widget_categories widget-container collapse-init sidebar-widgets"><h3 class="widget-title">Categories</h3><ul> <li class="cat-item cat-item-11"><a href=https://matthewcarlstrom.com/category/design/ >Design</a> </li> <li class="cat-item cat-item-13"><a href=https://matthewcarlstrom.com/category/uiux/ >UI/UX</a> </li> <li class="cat-item cat-item-15"><a href=https://matthewcarlstrom.com/category/photography/ >Photography</a> </li> <li class="cat-item cat-item-10"><a href=https://matthewcarlstrom.com/category/animation/ >Animation</a> </li> <li class="cat-item cat-item-12"><a href=https://matthewcarlstrom.com/category/retro/ >Retro</a> </li> <li class="cat-item cat-item-17"><a href=https://matthewcarlstrom.com/category/istanbul-portraits/ >Istanbul portraits</a> </li> <li class="cat-item cat-item-84"><a href=https://matthewcarlstrom.com/category/snafu/ >Snafu</a> </li></ul></aside></div></div></div></div></div></div></div></div></div><div class="row-container row-navigation row-navigation-light"><div class="row row-parent style-light limit-width"><nav class=post-navigation><ul class=navigation><li class=page-prev><span class=btn-container><a class="btn btn-link text-default-color btn-icon-left" href=https://matthewcarlstrom.com/istanbul-tattoo/ rel=prev><i class="fa fa-angle-left"></i><span>Prev</span></a></span></li><li class=page-next><span class=btn-container><a class="btn btn-link text-default-color btn-icon-right" href=https://matthewcarlstrom.com/books/ rel=next><span>Next</span><i class="fa fa-angle-right"></i></a></span></li></ul></nav></div></div></div></article></div></div><footer id=colophon class=site-footer><div data-parent=true class="vc_row style-color-919101-bg row-container" id=row-unique-1><div class="row limit-width row-parent"><div class="wpb_row row-inner"><div class="wpb_column pos-top pos-center align_left column_parent col-lg-12 single-internal-gutter"><div class="uncol style-dark" ><div class=uncoltable><div class="uncell no-block-padding" ><div class=uncont ><div class=uncode_text_column ><p><a href=mailto:designer@matthewcarlstrom.com target=_top rel="noopener noreferrer">designer@matthewcarlstrom.com</a></p></div><div class=uncode_text_column ><p><a href=https://matthewcarlstrom.com/my-resume/ target=_blank rel="noopener noreferrer">Resume</a></p></div><div class=uncode-vc-social><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://www.linkedin.com/in/matthew-john-carlstrom-80a5351/ target=_blank><i class="fa fa-linkedin"></i></a></div><div class="social-icon icon-box icon-box-top icon-inline" ><a href=https://x.com/matyasjanos target=_blank><i class="fa fa-twitter-x-fa"></i></a></div></div></div></div></div></div></div><script id=script-row-unique-1 data-row=script-row-unique-1 class=vc_controls>UNCODE.initRow(document.getElementById("row-unique-1"));</script></div></div></div><div class="row-container style-color-130326-bg footer-last"><div class="row row-parent style-dark limit-width no-top-padding no-h-padding no-bottom-padding"><div class="site-info uncell col-lg-6 pos-middle text-left">© 2025 Matthew Carlstrom Product Design. All rights reserved</div></div></div></footer></div></div></div></div> <script type=text/html id=wpb-modifications>window.wpbCustomElement = 1;</script><script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/plugins.min.js id=uncode-plugins-js></script> <script src=https://matthewcarlstrom.com/wp-content/themes/uncode/library/js/app.min.js id=uncode-app-js></script> <script></script><script>window.w3tc_lazyload=1,window.lazyLoadOptions={elements_selector:".lazy",callback_loaded:function(t){var e;try{e=new CustomEvent("w3tc_lazyload_loaded",{detail:{e:t}})}catch(a){(e=document.createEvent("CustomEvent")).initCustomEvent("w3tc_lazyload_loaded",!1,!1,{e:t})}window.dispatchEvent(e)}}</script><script async src=https://matthewcarlstrom.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js></script></body></html>