iOS UI Kit on Windows 10 - Icons for Back, Tab buttons, Other navigation buttons are not visible

[Sushant5EDD]

I'm using Adobe XD latest version on a Windows 10 PC.

I recently installed iOS UI Kits from the official Apple Designer resources.

When I open the .xd files from the package in Adobe Xd, the icons for Back, Information, Tab etc. are not visible and simple rectangles are displayed in their place. Please see attached images.

I tried going into object properties, but could not find much help there.

This happens on iOS 13 & iOS 14 Beta both versions, and on two different computers.

I'm very new to Adobe Xd, so I might be missing something here.

Is there a procedure to load the actual icons here?

[Sushant5EDD]

No help from the community?

Someone please help me out, I'm getting quite anxious.

[HARSHIKA_VERMA]

Hi Sushant,

Sorry for the delay in response. Would you mind checking if these icons are actually fonts in the UI kit which is used and please make sure you have the font installed on your mobile?

Let us know if that helps.

Thanks,

Harshika

[Sushant5EDD]

Thanks for responding, Harshika.

I have installed the SF family fonts on my Windows PC and have confirmed that the text appears correctly in the chosen SF font. Moreover, I do not see a 'Missing Fonts' warning which appeared before I had the fonts installed.

Here's how the 'Back' and 'Information' controls look:

Also check that the font for the 'Go Back' text is SF Pro Text.

I can externally find and load icons for this controls, but shouldn't it be included automatically,
especially when the same project when run on MacOS shows everything in place?

[Kenneth Kawamoto]

You need to have the latest SF Pro font from Apple installed

[Sushant5EDD]

Thanks for responding, Kenneth.

When I opened an Xd project on my Windows PC which was originally created on a Mac, I did see a warning about missing fonts. So I installed the SF & SF pro family fonts and the 'Missing Fonts' warning went away.

But still I'm seeing placeholder rectangles everywhere on standard iOS navigation controls.

I do not see a warning about 'missing icons' or something of the sort.

Is it something related to Apple's 'SF Symbols 2'?

I see that it can only be installed on MacOS.

Do you know a way where I can install in on Widows too?

[Kenneth Kawamoto]

You need the latest SF Pro. The file Apple provides <https://developer.apple.com/fonts/ > is a .pkg (macOS installer) in a .dmg (macOS disk image). I don't know how to extract font files form these for Windows, sorry - you need to do some Google search! 🙂