Announcing Ionicons 5

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 👀

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.

Additionally, each icon now comes in three distinct weight variants — outline, fill, and sharp — allowing developers to more closely mirror the icon changes in iOS 13 with their new SF Symbols.

Distinctly Ionic 👋

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.

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:

<ion-icon name="layers-outline"></ion-icon> <!--outline variant-->
<ion-icon name="layers"></ion-icon> <!--fill variant-->
<ion-icon name="layers-sharp"></ion-icon> <!--sharp variant-->

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 — a sweet spot in the middle — with the goal of making Ionic apps distinct and beautiful out-of-the-box, all while feeling at home on every platform.

Ch-Ch-Changes! 💃

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.

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 — 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:

<ion-icon ios="camera-outline" md="camera-sharp"></ion-icon>

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.

Harmony with Material 🤝

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 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 variant.

Goodbye to Font Icons ✌️

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.

Ionicons in the Wild 🦌

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.

Ionicons Next 🚏

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.

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!

Updating to Ionicons 5 ⚡️

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, as some icons have been removed or renamed.

If you're not using Ionic Framework, updating is as simple as including a script tag.

Thanks 🙇‍♂️

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, Brandy Carney, Adam Bradley, and everyone else on the Ionic team who helped to build this huge set of icons. ❤️