Icon centered ?

[martinezguillaume]

Yo ! I'm using this lib to render icon component and I find that the icons are not vertically centered. Maybe I'm using it wrong, but even if I render just the Icon component and put his background color to see better, the icon is clearly not centered.

import { Ionicon } from '@expo/vector-icons'

<Ionicon
  color='white'
  name='close'
  style={ { backgroundColor: 'red' } }
/>

I tried to put alignItems: 'center' and justifyContent: 'center' to style without success...

If I put paddingTop: 2 to style, the icon is centered

[ZackTRobertson]

Wrap the icon component in a parent view and then set that view's justifyContent style property to "center". (or alignItems if you make the flexDirection "row")

<View style={{justiftyContent:"center", alignItems:"center"}}>
   <Icon>
</View>

[leonchabbey]

Same issue with Ionicons, I fixed it by reducing its height by 1. For example:

const { name, size, color, style } = props;

<Ionicons name={name} size={size} color={color} style={{ height: size - 1, ...style }} />

[basbase]

Thanks @leonchabbey , I got my icons centered by setting both width and height to size: <Ionicons name={name} size={size} color={color} style={{ height: size, width: size, ...style }} />

[martinezguillaume]

@basbase solution is good. And if you want to center the icon inside (because sometimes icons are not centered), you can add textAlign: 'center' to style icon

[sinewave440hz]

Well, I actually got the most sensible behaviour in my case by wrapping my icon in a view and setting the height on the view. This is the only way that allowed me to set arbitrary vertical spacing on a centered icon! (This was with an Entypo 'arrow-right' icon, if that is important...)

[mahmoudmahdi24]

@martinezguillaume your solution solved the issue for me 👍 <Icon size={100} style={{ textAlign: 'center' }} name={Platform.OS === "android" ? "md-checkmark-circle-outline" : "ios-checkmark-circle-outline"} color="green" />

[rafael2412]

You can put <Ionicons name={name} size={24} style={{alignSelf:'center'}}/> and it going to align it self to the center

[shruthibadri]

I think the right way to do this is to use containerStyle rather than style. containerStyle ={{ flex: 1, justifyContent: 'center', alignSelf:'center'}}

[kushan2]

{{textAlign:'center', justifyContent:'center',width:50,paddingRight:0}}

[philipbel]

@basbase solution is good. And if you want to center the icon inside (because sometimes icons are not centered), you can add textAlign: 'center' to style icon

This is the only solution that provided pixel perfect alignment for me. Some of the other snippets here are off by 1 pixel.

It would be nice if this could make it into the official documentation.

[basbase]

This is the only solution that provided pixel perfect alignment for me. Some of the other snippets here are off by 1 pixel.

I've found that Android sometimes cuts off the bottom 2-3 pixels of an icon. I fixed it by also setting the lineHeight to the same size. Full code would then become:

<Ionicons 
  name={name} 
  size={size} 
  color={color} 
  style={{ 
    height: size, 
    width: size, 
    lineHeight: size, 
    textAlign: 'center',
     ...style
  }} 
/>

[jainkuniya]

Setting paddingEnd: 0, to the icon style worked for me.

[tuanngocptn]

I solve this problem with this code

const {size} = props;

<View style={{height:size, width:size}}>
   <Icon size={size}/>
</View>

[staghouse]

I have a more complex issue. I need the Icon centered AND wrapped inside of a Text because the Text area has a larger hit zone for an onPress event and View does not have that event at all and frankly, the Button component is lacking any uniform meaning and value:

<Text style={styles.buttonText} onPress={onFavoritePress}>
    <View style={styles.iconView}>
        <Icon style={styles.icon} name="star" />
    </View>
</Text>

I've tried all the solutions above and using just the icon as a pressable area is not acceptable for me.

[martinezguillaume]

@staghouse take a look at the new Pressable component https://reactnative.dev/docs/pressable The props hitSlop is what you are looking for

[staghouse]

@martinezguillaume Thank you ~ Perfect!

[madcoda]

Wrap the icon component in a parent view and then set that view's justifyContent style property to "center". (or alignItems if you make the flexDirection "row")

<View style={{justiftyContent:"center", alignItems:"center"}}>
   <Icon>
</View>

@ZackTRobertson bro you have a typo in your code "justiftyContent" should be "justifyContent", people copying your code will be banging their heads on the table wondering what went wrong for hours 😷

[savv]

Many of the solutions here use justifyContent: 'center' to horizontally center the icon in a container. That is a start, but not enough. The icon itself is often not centered within its own bounds, like in this screenshot:

This is even after applying textAlign: 'center', onto the icon...

When I open Ionicons.ttf on my mac, it seems I can replicate the same issue:

I am very grateful for this library, and I use it a lot, but this bug has wasted so much of my time! It seems that some of the icons are not centered in an intuitive way, so there's no real solution other than manually adding some padding to the icon.

[zacdemi]

@savv Have you found a solution that works?

[savv]

@savv Have you found a solution that works?

I manually recenter with paddingLeft by adding pixels until it feels right.

[Albert-Gao]

Sadly speaking, just adjusting the paddingThis and paddingThat depends on which icon you are working on, there is no one way to solve it, every original icon is misaligned in its own way.

[HamidAliSE]

Looks like I've figured out something useful. First of all, in my opinion every icon is perfectly aligned in center.

When does it seem like it is not centered?

1. When you try to add border to icons.
2. When you try to change padding.
3. When you try to control height & width.

What are the different types of solutions?

1. Solution for Expo Vector Icons & React Native Vector Icons
2. Solution for Material Design supported libraries i.e. React Native Paper

Note: Solution will use basic algebraic expressions.

Case 01.

Type 01.

Suppose you assign border 'x' to icon. Then adjustments will be paddingTop: x [To adjust top of icon, padding is added to shift x units which is taken by border] paddingLeft: x [To adjust left of icon, padding is added to shift x units which is taken by border] width: size + (2 * x) [To adjust width of icon, width will be equal to original icon's size + left border size + right border size] height: size + (2 * x) [To adjust height of icon, height will be equal to original icon's size + top border size + bottom border size]

Type 02.

width: size + (2 * x) height: size + (2 * x) No paddings are given to such libraries because they have already managed it for us.

Case 02.

Type 01 & 02.

Suppose you assign padding 'x' to icon. Then adjustments will be width: size + (2 * x) height: size + (2 * x)

Case 03.

Type 01 & Type 02.

Whenever you try to control width & height of icon. The adjustments for perfectly centered align icon should be width === height === size

[tibbe]

4 years later and I'm still none the wiser about how to simply center an icon. This causes all my icons to be cut off at the bottom on Android (but not on iOS, so perhaps that's a hint). @oblador could we have an official comment on likely cause?

[frozencap]

Can we crowdfund @oblador to do this if it's possible? Thumbs up if you're willing to put in 50$

[seungwubaek]

Many of the solutions here use justifyContent: 'center' to horizontally center the icon in a container. That is a start, but not enough. The icon itself is often not centered within its own bounds, like in this screenshot:

This is even after applying textAlign: 'center', onto the icon...

When I open Ionicons.ttf on my mac, it seems I can replicate the same issue:

I am very grateful for this library, and I use it a lot, but this bug has wasted so much of my time! It seems that some of the icons are not centered in an intuitive way, so there's no real solution other than manually adding some padding to the icon.

@savv You saved me! I also found some shifted Ionicons from ttf. Ionicons are still not centered well even 2023. Thank you so much.

[D3M1S22]

Many of the solutions here use justifyContent: 'center' to horizontally center the icon in a container. That is a start, but not enough. The icon itself is often not centered within its own bounds, like in this screenshot: This is even after applying textAlign: 'center', onto the icon... When I open Ionicons.ttf on my mac, it seems I can replicate the same issue: I am very grateful for this library, and I use it a lot, but this bug has wasted so much of my time! It seems that some of the icons are not centered in an intuitive way, so there's no real solution other than manually adding some padding to the icon.

@savv You saved me! I also found some shifted Ionicons from ttf. Ionicons are still not centered well even 2023. Thank you so much.

do we know if the others Icons in the library have the same issues, like fontAwesome or so on ?

[uJordy]

I got the same issue with IonIcons, would be great if there could be a fix to center the icons themselves.

[D3M1S22]

I got the same issue with IonIcons, would be great if there could be a fix to center the icons themselves.

Actually found out that the icons itself are wrongly cut, so the only way is changing the icon one by one and make a pull request

[Etzix]

If you are using Expo with their Ionic Icons, then you are also affected. They use the same icons and since the icons themselves are not aligned properly you will have to add padding individually to each icon you use.