You can handle this completely with Flexbox as follows.

• For each Icon in Icons create a View with flexDirection: row.
• Nest IconsSelection in a View with flexDirection: column. Since this is the default for View, we do not need to make this explicit in our styles.

Here is a working version.

const IconsSelection = () =>
  Icons.map((icons) => (
      <View style={styles.inner}>
          <View style={styles.column}>
              <Image source={icons.uri} style={styles.image} resizeMode={"contain"} />
          </View>
          <View style={styles.column}>
            <Text style={styles.textFont}>{icons.name}</Text>
          </View>
      </View>
  ));


export default function App() {
  return (
   <View>
       <IconsSelection />
   </View>
  );
}

const styles = StyleSheet.create({
column: {
  margin: 20,
},
inner : {
  flexDirection: "row",
  marginRight: 20
},
  image: {
    width: 40,
    height: 40,
  },
  textFont: {
    fontSize: 12,
  },
});

I have used the expo images as an example. The above code yields to the following output.

Edit: In response to the comments. If you want to have two images next to each other followed by a row of the corresponding texts, then the easiest solution uses a FlatList with two columns as follows.

export default function App() {
  const [data, setData] = useState(Icons)
  return (
   <FlatList data={data} numColumns={2} keyExtractor={(item) => item.name} renderItem={({item}) => {
      return <View style={styles.inner}>      
              <Image source={item.uri} style={styles.image} resizeMode={"contain"} />
              <Text style={styles.textFont}>{item.name}</Text>
             </View>
      }}>
  </FlatList>
  );
}

The above yields to the following output.