5,380 questions
It doesn't work when the images are in the Shared Project library. So needs to be copied into the iOS project itself.
Xamarin forms TabPage Icon sizes
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(108.80000000000001, 99%, 20%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ES%3C/text%3E%3C/svg%3E)
SSB
111
Reputation points
Hi all,
How to set the size of icons in the TabBar?
Do I need to create resolution specific icons and if so what size do they need to be? Right now, the icons are coming up correctly sized on iPhone SE but too small on high res phones like iPhone 13:
<NavigationPage Title="Search" IconImageSource="{helpers:ImageResource Images.search.png}" BarTextColor="Black">
<x:Arguments>
<search:SearchPage Title="Search" IconImageSource="search.png" x:Name="theSearchPage"/>
</x:Arguments>
</NavigationPage>
Developer technologies .NET Xamarin
{count} votes
-
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(22.400000000000002, 3%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EWZ%3C/text%3E%3C/svg%3E)
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff2022-07-11T10:18:24.74+00:00 The size of the wide icons should be
31pt, tall icons should be28pt. I'm not sure what type your icon is, you can design icons according to your needs. Refer to this doc - Tab bars - Navigation and search - Components - Human Interface Guidelines - Design - Apple DeveloperThe iPhone SE will use the @2x images, iPhone 13 will use the @3x images. You could check if you set correctly. For more details, refer to the "Native resolutions (retina and high-DPI) " part in this doc - Images in Xamarin.Forms - Xamarin | Microsoft Learn.
-
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff
2022-07-15T10:03:33.523+00:00 May I know if you have got any chance to check my reply? Please feel free to share more detailed information about your icons, and it will be very helpful for us to better work out this issue.
Sign in to comment
1 answer
Sort by: Most helpful
-
SSB 111 Reputation points
2022-07-21T08:48:51.873+00:00 -
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff
2022-07-21T09:45:58.4+00:00 Thanks for your sharing.
Sign in to comment -