How to invert react native vector icon buttons color?

Question

I am using Vector Icons as Icon.Button and I would like to have two Cancel and Accept Icons.

I am doing this:

<View style={{ flexDirection: "row", justifyContent: 'space-between'}}>
    <TouchableOpacity style={{borderColor: 'red'}}> 
        <Icon.Button backgroundColor={RED} name="ios-close-circle-outline" size={20} />
    </TouchableOpacity>
    <TouchableOpacity style={{borderColor: 'red'}}>
        <Icon.Button backgroundColor={GREEN} name="ios-checkmark-circle-outline" size={20} />
    </TouchableOpacity>
</View>

I am getting this:

I would like this:

How to invert react native vector icon buttons color? Thanks

Answer 1

Change backgroundColor to transparent, set the color property to the preferred color and bump the size.

Answer 2

If anybody is here because they would like to know how to invert colors using css, then you may simply use filter: invert(1);