Icons Moving on preview

I have designed a lower tab but when viewed in preview on my phone the icon and text miss-align. How can I stop this?

You could group the icons together but I would recommend using the tab bar component and you will not have this issue.