Removing whitespace from top and bottom of icon in React Native

Question

I'm trying to include some icons from react-native-vector-icons in my project. Oftentimes I'm aligning the icon with e.g. an input so I want it to be the same height (or at least smaller) so I can center it in front of the input in a flex row without increasing the size of the row. However, the icons come out too small if I set their size to the font size of the input. If I increase the size of the icon, this stretches my flex box, but this is clearly unnecessary because the icon has a lot of whitespace at the top and bottom. Here's a sample screenshot:

Is there any way to trim this? The icon should be square. Here's the code that I currently have on that screen:

import React, {Component} from 'react';
import {View} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

export default class App extends Component {
  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white'}}>
        <Ionicons name='ios-checkmark' size={30} />
      </View>
    );
  }
}