Announcing Ionicons v4!

Today I’m excited to announce the 4th release of our open source icon pack, Ionicons, a hand-crafted set of premium icons for use across web, iOS, Android, and desktop apps.

Ionicons v4 is one of the first major icon libraries to be distributed as web components, with drastically reduced sizes, brand new icon forms reflecting the latest iOS and Material Design styles, and a continuous focus on ease of use.

Apps ❤️ Icons

Icons play a crucial role as a shared visual component and language used across nearly all apps. Limited screen real estate on mobile devices has made the use of icons a great way for apps to convey information while saving valuable space.

This was the driving force behind designing and open sourcing the first version of Ionicons. Our goal was to give Ionic developers an easy way to quickly build apps without worrying about where to find great looking icons for their interface. With Ionic, you get a collection of nearly 700 icons right out-of-the-box, across iOS and Android.

Since the original release, we’ve been thrilled to see developers adopt Ionicons in nearly every kind of app you could imagine. And with each successive version, our goal has been to make the icons and the experience using them even better than the last. With v4, we’ve taken some big leaps forward, and we think you’re really going to love it. Let’s dive in a bit…

New Design

All previous versions of Ionicons were intentionally inspired by and based on iOS 8+ / Android MD iconography. The goal is for the icons to provide a sense of comfort and familiarity to users on those platforms, by reflecting the stylistic forms they are used to. Ionicons are non-intrusive so as to not take away from the core experience but familiar enough to provide clarity.

With Ionicons v4, we’ve redesigned the iOS icons to better reflect Apple’s updated icon design guidelines, and gave MD icons a nice fine-tuning as well (MD icons are set for another update with MD2’s recent changes):

We also gave the Ionicons website a much needed UI/UX refresh – with better search, icon identification, and embedded usage docs!

Moving Away From Font Icons

When we originally released Ionicons, we went the route of making an icon font. At the time, this made a lot of sense: Icon fonts are vector-based, scalable to any physical size without pixelation, able to be styled with CSS, and come from a single resource (which means fewer HTTP requests).

While icon fonts are still a valid option in some cases, they also have a cost that can flip their advantage into a disadvantage: all of the icons are bundled in one file. And in previous versions of Ionicons, we were packing nearly 700 icons into one large file!

Why is this a big problem? Large font files have a negative impact on a webpage or app’s Time to First Paint, which makes for a subpar user experience and has been known to lower PWA Lighthouse scores. On top of that, adding any custom icons to a font icon is far from easy.

SVGs FTW!

With Ionicons v4, we’ve made the leap to SVGs. All of the benefits of font icons (vector-based and styling with CSS) can be achieved just as easily with SVGs, but without all the baggage.

SVGs have been widely supported for many years, and are easy for designers to create themselves. The challenge has been, and continues to be, requesting external SVG files and still allowing them to be styled with CSS. The traditional <img> can work, but developers lose out on being able to change the color of the icon with simple CSS. If only there was a way to build our own <img> element to do exactly what we want it to do…

Bringing it Together with Web Components

With the next generation of Ionicons, we’re now able to use web components to take advantage of the good parts from both font icons and external SVGs. The ion-icon web component, or more specifically Custom Element, is able to lazy-load only the external SVGs being actively viewed by the user. By using web-standards rather than one specific framework, Ionicons is able to be used across all the frameworks, or no framework at all.

Instead of always downloading the entire icon pack, Ionic apps will now only load the very specific icons the app requires. Think of the component as basically an <img> built specifically for external SVG files, but with some added flare to improve performance.

For example, for browsers that support IntersectionObserver, only the SVGs which are in the viewable area are downloaded. When using the ion-icon component with an Ionic Framework app, it’s able to dynamically decide if the icon should use the iOS or Material Design variant. By using web components, we’re able to wrap up all this logic so it’s very easy to use. It just works.

For more information on how Ionicons works and it’s API, please see our new Ionicons Usage docs.

What’s the catch?

We know what you’re thinking: “Not all browsers support Web Components.”

Luckily, this isn’t really problem! Apps can safely use Ionicons without worrying about browser support. Since ion-icon is built with Stencil, all of this is handled for you and only requests the polyfills when needed. In fact, in today’s web landscape very few users will even require polyfills at all, which means very little amount of code is required for the custom element for a majority of users. Please test it out for yourself on IE11 and above.

Try it out

We’re thrilled about this new foundation for the project, which will allow us to keep improving on and adding new icons in the future. If you have any icons you’d like to see added, please create an issue here.

In the meantime, check out the new Ionicons.com, start playing with the new icons, and let us know what you think!