19

Icon Assets for iOS10 - my new nightmare and confusing official documentation

over 2 years ago from , Designer at Bisilque

Hello people!

So, I'm a Visual Designer. I already worked as UX Designer, but now I'm focused on style guide search and I'm preparing assets and useful material to agile developers work, so they start using the iOS UIKit.

We're working on a iOS app. I want to export, from my hi-fi sketch files, the icons assets for developers, but then I noticed there's no great official documentation.

We (designers team) started by the iOS10 GUI sketch files from Facebook. It's such a great and complete library well organised and ready to mockup/prototype. While we were studying the interface, we also noticed this:

Then, I couldn't find any central and official documentation about the icons assets sizes to export. As I was searching, I found there was a Matrix icons (old link) where, in previous iOS versions, I suppose it had a table of icon sizes for assets. Now it just redirects to Design Guidelines.

In official documentation, I just found in API Reference to Tab bar icons:

"If the image is too large to fit on the tab bar, it is clipped to fit. The size of a tab bar image is typically 60 x 60 pixels."

I want to export the real assets requirements, because I did the pixel perfect on icons and I don't want them to be stretched. So, I suppose the tabbar icons assets should be 30pt x 30pt, as it will export to 30px (@1x), 60px (@2x) and 90px (@3x).

Searching more about this, I found this official link where it says Navigation bar icons have about 44px by 44px and Tab bar icons have about 50px by 50px.

Comparing to the iOS10 GUI sketch files from Facebook (I suppose I should trust because it seems a ready to export file), the tabbar icons has maximum 30pt, but (image below) its represented symbols has 25pt, and the toolbar and navigation icons has 29pt (e.g. share system icon) but its represented sketch symbols (image below), it has max. 22pt.

To toolbars and navigation bars, I just found the this official link about icons assets sizes, as I told you, but not conclusive. Then I found this unofficial documentation for iOS7 saying toolbar icons is 22pt and this other unofficial doc saying toolbar icons is 20pt.

I'm truly confused. I don't want to continuously export several assets to try and refit assets. So, my questions are:

  1. Is somewhere any updated official documentation with the real icon sizes to iOS10?

  2. To implement icons by iOS UIKit, I have to give the system icons (share, delete, back icons) or the developers can declare it by default?

Sorry for long question. It's a technical doubt, but my design work depends on it. Thanks!

11 comments

  • iterati designiterati design, over 2 years ago

    I think you're coming from the Material Design world where everything is outlined and specified how it should look and behave – that is in theory, though, because the reality of implementation in Android with MD is more painful.

    iOS is quiet different in that regard and more freeform, at least that's what I learned over the years. What I do is use the size that suits me best, from 24 to 32pt (I'm the x2/4/8 guy) – if you don't have labels you could use a slightly larger icon.

    Just test, preview on the device and discuss it with devs.

    2 points
  • Aaron SagrayAaron Sagray, over 2 years ago

    https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/

    It says "about" because the sizes are a proportional guideline. There are max sizes, as you can see above. Auto layout will position them for you.

    I tend to just design the icons roughly close the "ideal" point size, and test them. Some might need tweaks to maintain proportions with the other icons in the tab bar.

    1 point
    • Maricato FabioMaricato Fabio, over 2 years ago (edited over 2 years ago )

      Hello!

      So, I refer that link in this post. As you say, to @2x Toolbar icons it says "About 44px by 44px" and Tab bar icons have "About 50px by 50px", so is it suppose to draw assets in a exact square 22pt and 25pt respectively?

      If the Share and Delete icons have 29pt size, it happens because they are system icons and not custom icons, is that? So, for custom icons, there's always this limitation of 22pt and 25pt?

      When you test the icons size, have you always to check with the developers if the result is correct?

      0 points
      • Aaron SagrayAaron Sagray, over 2 years ago

        The share and delete icons are the exact reason why it is based around proportionality. Imagine you had 3 icons that were visually weighted well in a 25pt square. Then you add a fourth rectangular icon. You might want to make it 25pt tall, where it will be 32pt wide, so the visual weight remains similar.

        Yes, you will always need to check them, because Autolayout and asset management is a complicated, tricky beast. If you google how to make a simple tab app, you can learn to do it yourself with little setup code.

        0 points
        • Maricato FabioMaricato Fabio, over 2 years ago

          Ok, I didn't know about the Autolayout feature. So, I can leave with the dimensions that seems perceptively right and it automatically center and adjust.

          Thanks a lot! :)

          0 points
  • Xer Lee, over 2 years ago (edited over 2 years ago )

    I think, the icon size is not assets size, you can use the slice to make your assets bigger. If your icon size is 26pt, you can export the assets for 44 or 32pt.

    0 points
  • Dan BerkoDan Berko, over 2 years ago

    This has been a real issue of mine with Apple and their design guidelines for iOS. After designing for both operating systems, I really wish that Apple would curate their design guidelines the same way that Google is maintaining theirs.

    Also, is there a good reason that iOS icons wouldn't be offered in a font? Another thing I don't understand.

    0 points
  • Vera Howe, over 1 year ago

    you can find out how to promote your app on our website, where through the purchase of feedback our specialists will help you in promoting the application

    0 points
  • Suganth SSuganth S, over 2 years ago

    Maybe this can help. He regularly updates and it's good. http://ivomynttinen.com/blog/ios-design-guidelines

    0 points
    • Maricato Fabio, over 2 years ago

      Hey!

      It's a nice article but it doesn't refer this specific issue. It just refers spacings and bar sizes, it doesn't refer the icon assets sizes :(

      Thanks anyway :)

      1 point