![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/apple-tinted-icons-expectation-vs-reality-858x1024.webp\"){kind=icon}
<\/figure>\n\n\n\nTinted Icons Pros<\/strong><\/p>\n\n\n\n Tinted Icons Cons<\/strong><\/p>\n\n\n\n Xcode 16 now requires three icon versions. Let\u2019s see how we can design them by following the Apple Human Interface Guidelines<\/a> and using Figma as a design tool. You can also use my Figma file<\/a> to design and export your icons.<\/p>\n\n\n\n My guess is that Apple automatically generates the dark and tinted icons for all published apps. They might use the same light icon for the dark version. For the tinted version, they might convert the icon to a grayscale image, apply a \u201cmultiply\u201d blend mode, and add a background layer with the color selected by the user. However, if you plan to update or submit a new app for iOS 18, App Store Connect will require you, as a developer, to provide the tinted and dark versions of your app icon.<\/p>\n\n\n\n Apple design team has changed all Apple apps to provide a dark and tinted versions:<\/p>\n\n\n\n They follow a couple of basic rules that they ask all developers and designers to follow as well when creating their icon versions:<\/p>\n\n\n\n Use the below grid to add your icon in the proper spot inside the squircle respecting the margins.<\/p>\n\n\n\n Optionally, if you consider a customized icon for the small version is needed, you can design the @2x and @3x versions as well. Otherwise, the App Store system will auto-generate these from the 1024×1024 px version.<\/p>\n\n\n\n You can use my Figma file<\/a>, which I used to design the icons for my Book Truck app<\/a> to design the icons of your app. Refer to the official Apple documentation on the Apple Human Interface Guidelines<\/a> and find some design inspiration on https:\/\/www.iosicongallery.com\/<\/a> or https:\/\/www.appiconbook.com\/<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Loved or hated, Apple introduced new ways to customize the Home Screen of iOS 18 at WWDC 2024. Users can now arrange apps and widgets in any open space on […]<\/p>\n","protected":false},"author":1,"featured_media":2802,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[35],"tags":[44,45,40,41],"class_list":["post-2801","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ios","tag-icons","tag-ios-18","tag-ios-design","tag-ui-design"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/ios18_dark_tinted_icons-scaled.webp","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pdrLSU-Jb","_links":{"self":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/comments?post=2801"}],"version-history":[{"count":2,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2801\/revisions"}],"predecessor-version":[{"id":2814,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/posts\/2801\/revisions\/2814"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/media\/2802"}],"wp:attachment":[{"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/media?parent=2801"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/categories?post=2801"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guillembruix.com\/store\/wp-json\/wp\/v2\/tags?post=2801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
What does this mean for app designers and developers?<\/h3>\n\n\n\n
![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/Xcode16_icons-1024x428.webp\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/Apple-app-icons-ios18-1024x759.webp\"){kind=icon}
<\/figure>\n\n\n\n\n
![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/hig1-1024x308.webp\")
![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/hig2-1024x317.webp\")
How can I design my app icon versions?<\/h3>\n\n\n\n
![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/icon-ios18-1-1024x723.webp\"){kind=icon}
![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/icon-ios18-2-1024x486.webp\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/icon-ios18-3-1024x724.webp\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/icon-ios18-4-1024x719.webp\"){kind=icon}
<\/figure>\n\n\n\n![\"\"](\"https:\/\/guillembruix.com\/store\/wp-content\/uploads\/2024\/07\/icon-ios18-5-1024x724.webp\"){kind=icon}
<\/figure>\n\n\n\n