Top 5 New Features Introduced in Ionic 5

Ionic, the open-source UI framework that leverages core web technologies for building awesome cross-platform mobile apps, has recently (in Feb. 2020) released its latest version – Framework 5, also called Magnesium.

It focuses mainly on improving user engagement and refining native mobile experience. This blog post throws light into the top 5 features of Ionic v5.

  1. iOS Design Updates

A main highlight of Ionic 5 is the design updates that are in line with the design changes introduced in iOS 13. Ionic has implemented changes on major UI components. 

Some of these include:

  • Segment – A single indicator to differentiate between checked and unchecked buttons.
  • Header – Collapsible header along with specific components. 
  • Swipe to Close Modal – Gesture to pull down a modal to close it.

Upgrades have also been made for Titles, Overlay Menu and Refresher. 

  1. Ionic Animations

An interesting feature of Ionic 5 is Ionic Animations – a new open-source, framework-independent utility that helps in the creation of performance-oriented animations.

It uses Web Animations API for building and running animations, as opposed to the traditional JavaScript-driven approach. Hence, a high performance is assured; 60fps for both desktop and mobile animations, while maintaining a low CPU usage and lesser energy consumption.

  1. Ionicons

Ionic 5 contains the updated version of Ionicons, the open-source icon library that now has over 1200 redesigned icons! Three unique variants are available for each icon – outline, fill, and sharp.

Ionicons v5 is made compatible to seamlessly work for both iOS and Android, without having to switch icons (except for platform-specific icons like menu, nav back, etc.) in and out between the two platforms.

  1. Ionic Colors

A new set of default colors is now provided in Ionic 5. These colors will get automatically updated in those apps not created using Ionic starters and having previous colors not overridden. 

But, the colors have to be manually updated for apps built using Angular or React starter. The new version also recommends a set of colors for using in dark mode.

  1. Easier Component Customization

Ionic 5 enables developers to easily customize components. Earlier, this was a difficult task due to lack of proper CSS variables (Sass variables were mainly used) and scoped element styles taking precedence over custom styles.

Now, v5 has more CSS variables and also supports Shadow Parts. Scoped components like Back Button, Card, Segment and Split Pane are changed to Shadow DOM. All this ensures a smooth customization process in Ionic.


Ionic 5 also includes redesigned starters and it offers complete support for Ivy, the renderer of Angular v9. All these features, which when combined with the services of a reputed Ionic app development company, can help build aesthetically beautiful mobile apps for your business.

how can we help you?

Contact us at the Scalans office number or you may  submit your inquiry online.

Scalans has been the lynch-pin between me and several development teams. There are always cultural differences when working internationally and remotely but their attention to detail and “get it done” attitude means their teams consistently deliver.

David Quinlan
Managing Director, Combined Media Ltd, UK

Talk to our experts