{"id":3107,"date":"2020-02-06T12:30:05","date_gmt":"2020-02-06T12:30:05","guid":{"rendered":"https:\/\/ionicframework.com\/blog\/?p=3107"},"modified":"2020-10-15T22:16:21","modified_gmt":"2020-10-15T22:16:21","slug":"announcing-ionicons-5","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/announcing-ionicons-5","title":{"rendered":"Announcing Ionicons 5"},"content":{"rendered":"

Today, I’m excited to announce version 5 of Ionicons<\/a>, a hand-crafted set of premium open source icons for use across web, iOS, Android, and desktop apps.<\/p>\n

Ionicons 5 builds on our previous Web Component icon foundation<\/a>, bringing over 1200 icons and a totally new design approach.<\/p>\n

Over 1200 icons \ud83d\udc40<\/h2>\n

Ionicons 5 brings a massive number of new icons, including new objects, brands, and actions. Every single icon has been lovingly redesigned to better reflect the latest mobile platform icon styles.<\/p>\n


\n\"ionicons

Additionally, each icon now comes in three distinct weight variants \u2014 outline<\/code>, fill<\/code>, and sharp<\/code> \u2014 allowing developers to more closely mirror the icon changes in iOS 13 with their new SF Symbols<\/a>.<\/p>\n

Distinctly Ionic \ud83d\udc4b<\/h2>\n

Icon styles across iOS and Android have changed quite a bit since the original Ionicons project was released. Initially dramatically different, both mobile platforms’ icons have become much more similar in recent years.<\/p>\n

Visual variations like round, sharp, outline, and fill have become common options offered on top of existing systems in an effort to help developers and designers create more custom UI’s. Here’s an example:<\/p>\n

\"layers

<ion-icon name="layers-outline"><\/ion-icon> <!--outline variant-->\n<ion-icon name="layers"><\/ion-icon> <!--fill variant-->\n<ion-icon name="layers-sharp"><\/ion-icon> <!--sharp variant-->\n<\/code><\/pre>\n
With this in mind, we didn’t want Ionicons 5 to just adopt one platform or the other. Building an icon set that drew inspiration from both platforms was a happy medium. We see this latest set of icons as a system inspired by the best of both platforms \u2014 a sweet spot in the middle \u2014 with the goal of making Ionic apps distinct and beautiful out-of-the-box, all while feeling at home on every platform.<\/p>\n
Ch-Ch-Changes! \ud83d\udc83<\/h3>\n
Over time, we started hearing Ionic developers express confusion because they’d pick a specific icon for iOS, not realizing (often times right before shipping) that a completely different looking icon was getting loaded on Android. It was challenging to have to design multi-platform experiences around two icons at once, which in many cases was completely unnecessary.<\/p>\n
While a key feature of Ionicons had always been providing iOS and MD styled icons, it started to make less sense for Ionic Framework to “automagically” swap those icons in and out for each platform given how similar they are becoming. At the end of the day, we’d rather not make assumptions about what icons you want on iOS or Android \u2014 we’d rather give you full control over which icons you explicitly set for each platform. So, in Ionic 5 (coming soon!), we let you do just that, like so:<\/p>\n
<ion-icon ios="camera-outline" md="camera-sharp"><\/ion-icon>\n<\/code><\/pre>\n
At the same time, there are still a few platform-specific UI conventions we’ve identified where a specific icon should always be used (like nav back icon, or menu icon, etc). Ionic 5 will continue to handle automatically switching icons for those scenarios.<\/p>\n
Harmony with Material \ud83e\udd1d<\/h2>\n
We know many developers prefer to use Material Design styles across both iOS and Android. We’ve made Ionicons 5 compatible with the official Material Design icons<\/a> so you can easily use the two side by side. With this change, we’ve dropped our customized Material design implementation. However, a similar look can still be achieved by using Ionicons’ sharp<\/code> variant.<\/p>\n
Goodbye to Font Icons \u270c\ufe0f<\/h2>\n
Ionicons 5 is now distributed as a set of SVG icons instead of a font icon, for much better performance and less complexity. The last release blog dug into this change’s technical details<\/a>.<\/p>\n
Ionicons in the Wild \ud83e\udd8c<\/h2>\n
Ionicons continues to stand alone as a highly popular open-source icon project. Adoption around the world has been growing steadily and recently passed 1.2M monthly installs. Today Ionicons is used across a wide variety of technologies, such as WordPress, Native iOS\/Android, and more.<\/p>\n
\"ionicons
Ionicons Next \ud83d\ude8f<\/h2>\n
What’s next for Ionicons? While we’re thrilled with this version’s icon pack and believe it’s a solid foundation for building the icon library moving forward, we know there will be icons we want to add down the road, and ones that the community wants us to add. Yes, we know there are quite a few outstanding GitHub issues to tend to, and we plan on addressing them soon.<\/p>\n
We will continue to update Ionicon’s icon offerings in the Ionic style based on demand, and continue to release those when finished. In the meantime, explore the new pack yourself on the Ionicons website<\/a>!<\/p>\n
Updating to Ionicons 5 \u26a1\ufe0f<\/h2>\n
If you’re using Ionic Framework, simply update to Ionic v5 (coming soon!), as they are packaged in by default. After updating, take a look at the Changelog<\/a>, as some icons have been removed or renamed.<\/p>\n
If you’re not using Ionic Framework, updating is as simple as including a script tag<\/a>.<\/p>\n
Thanks \ud83d\ude47\u200d\u2642\ufe0f<\/h2>\n
Thanks to everyone in the Ionic Community who helps make this project better, year after year. I’m humbled by the positive reception and the fact that Ionicons is so widely used. Lastly, thanks to Kevin Ports<\/a>, Brandy Carney<\/a>, Adam Bradley<\/a>, and everyone else on the Ionic team who helped to build this huge set of icons. \u2764\ufe0f<\/p>\n","protected":false},"excerpt":{"rendered":"
Today, I’m excited to announce version 5 of Ionicons, a hand-crafted set of premium open source icons for use across web, iOS, Android, and desktop apps. Ionicons 5 builds on our previous Web Component icon foundation, bringing over 1200 icons and a totally new design approach. Over 1200 icons \ud83d\udc40 Ionicons 5 brings a massive […]<\/p>\n","protected":false},"author":14,"featured_media":3137,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[120],"tags":[97,96,82],"class_list":["post-3107","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-announcements","tag-icons","tag-ionicons","tag-web-components"],"acf":[],"yoast_head":"\nAnnouncing Ionicons 5 - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Announcing Ionicons 5\" \/>\n<meta property=\"og:description\" content=\"Today, I’m excited to announce version 5 of Ionicons, a hand-crafted set of premium open source icons for use across web, iOS, Android, and desktop apps. Ionicons 5 builds on our previous Web Component icon foundation, bringing over 1200 icons and a totally new design approach. Over 1200 icons \ud83d\udc40 Ionicons 5 brings a massive […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-06T12:30:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-15T22:16:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"880\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ben Sperry\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@benjsperry\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ben Sperry\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\"},\"author\":{\"name\":\"Ben Sperry\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\"},\"headline\":\"Announcing Ionicons 5\",\"datePublished\":\"2020-02-06T12:30:05+00:00\",\"dateModified\":\"2020-10-15T22:16:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\"},\"wordCount\":808,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png\",\"keywords\":[\"icons\",\"ionicons\",\"web components\"],\"articleSection\":[\"Announcements\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\",\"url\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\",\"name\":\"Announcing Ionicons 5 - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png\",\"datePublished\":\"2020-02-06T12:30:05+00:00\",\"dateModified\":\"2020-10-15T22:16:21+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/announcing-ionicons-5\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png\",\"width\":1600,\"height\":880,\"caption\":\"ionicons feature image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/announcing-ionicons-5#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Announcing Ionicons 5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31\",\"name\":\"Ben Sperry\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg\",\"caption\":\"Ben Sperry\"},\"sameAs\":[\"http:\/\/bensperry.com\",\"https:\/\/x.com\/benjsperry\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/benjsperry\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Announcing Ionicons 5 - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/announcing-ionicons-5","og_locale":"en_US","og_type":"article","og_title":"Announcing Ionicons 5","og_description":"Today, I’m excited to announce version 5 of Ionicons, a hand-crafted set of premium open source icons for use across web, iOS, Android, and desktop apps. Ionicons 5 builds on our previous Web Component icon foundation, bringing over 1200 icons and a totally new design approach. Over 1200 icons \ud83d\udc40 Ionicons 5 brings a massive […]","og_url":"https:\/\/ionic.io\/blog\/announcing-ionicons-5","og_site_name":"Ionic Blog","article_published_time":"2020-02-06T12:30:05+00:00","article_modified_time":"2020-10-15T22:16:21+00:00","og_image":[{"width":1600,"height":880,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","type":"image\/png"}],"author":"Ben Sperry","twitter_card":"summary_large_image","twitter_creator":"@benjsperry","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Ben Sperry","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5"},"author":{"name":"Ben Sperry","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31"},"headline":"Announcing Ionicons 5","datePublished":"2020-02-06T12:30:05+00:00","dateModified":"2020-10-15T22:16:21+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5"},"wordCount":808,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","keywords":["icons","ionicons","web components"],"articleSection":["Announcements"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/announcing-ionicons-5#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5","url":"https:\/\/ionic.io\/blog\/announcing-ionicons-5","name":"Announcing Ionicons 5 - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","datePublished":"2020-02-06T12:30:05+00:00","dateModified":"2020-10-15T22:16:21+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/announcing-ionicons-5"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","width":1600,"height":880,"caption":"ionicons feature image"},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/announcing-ionicons-5#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Announcing Ionicons 5"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/d97c8812906d724fe9f7e3b90e915e31","name":"Ben Sperry","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/ben-profile-150x150.jpg","caption":"Ben Sperry"},"sameAs":["http:\/\/bensperry.com","https:\/\/x.com\/benjsperry"],"url":"https:\/\/ionic.io\/blog\/author\/benjsperry"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/01\/ionicons-header-img.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=3107"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/3107\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/3137"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=3107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=3107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=3107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}