Change custom icon color


I have added custom icons for my tab menu, but I want to change the color of the icon tab links when active, inactive etc. How do I modify the colors for the tab icons?

I have used the code below in my app.scss file.

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1.5em;
        height: 1.5em;
    // custom icons
    &[class*="appname-trx"] {
        mask-image: url(../assets/img/trx.svg);
    &[class*="appname-ex"] {
        mask-image: url(../assets/img/boots.svg);
    &[class*="appname-ld"] {
        mask-image: url(../assets/img/trophy.svg);
    &[class*="appname-sc"] {
        mask-image: url(../assets/img/afl.svg);
    &[class*="appname-cx"] {
        mask-image: url(../assets/img/pork.svg);


Check out the tabs doc

At the bottom you can change the icon colors using the SASS variables:

For example IOS:



That doesnt show how to customize the tabs. I have the latest version and can not find the variables you state above in both app.scss and also /theme/variables.scss


You just add those variables into /theme/variables.scss to overwrite default variables. You don’t need to find the actually variable to change the colors.


Doesnt work. I also tried adding [color]=“isAndroid ? ‘secondary’ : ‘primary’” to < ion-tabs > and it works but I dont know where its getting its color from, if I change primary color in variables.scss doesnt work

<ion-tabs [selectedIndex]=“mySelectedIndex” [color]=“isAndroid ? ‘secondary’ : ‘primary’” >
<ion-tab [root]=“tab1Root” tabIcon=“appname-rx” >
<ion-tab [root]=“tab2Root” tabIcon=“appname-rx2”>
<ion-tab [root]=“tab3Root” tabIcon=“appname-rx3”>
<ion-tab [root]=“tab4Root” tabIcon=“appname-rx4”>


In my code above I have currentColor as the variable for background of my custom icons, where do I modify this, it seems that this is the variable that needs to be updated. When I change it to a hash color, #333 it changes the icon colors but then there is no active color present… so its only dynamic based on the currentColor variable


All you have to do is add these variables right after Shared Variables

// Shared Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass variables found in Ionic's source scss files.
// To view all the possible Ionic variables, see:
$tabs-ios-tab-icon-color: #333;
$tabs-ios-tab-icon-color-active: #cc3f44;

You can read this doc if you are still confused


I have already tried that, it doesnt work with custom SVG icons as I have included in my code above.


have you found the solution ?