Ionic 6 custom tab bar

Hi !

I tried to customize the color of the tab bar icon, but I can’t figure out how to change the color of the inactive tabs icon.

I don’t think I’m the first one to have this problem, so I’m pretty hopeful that someone has a solution. :innocent:

Thx !!!

The ion-tab-button component supports a variety of CSS custom properties.

--color is likely the property that you are looking for. It will change the foreground color of the button, including the text and icon.

ion-tab-button {
  --color: blue;
1 Like


I forgot to remove the color attribute, that’s why it didn’t work :see_no_evil: