SF Symbols On iOS 12
Developers can use the free icon editor from Hotpot to produce consistent icons across iOS 13, iOS 12, and lower versions. This editor exports SF Symbols as raster images and allows editing of the icon size, icon color, background color, background stroke, and other properties. The editor generates 2x and 3x images that can be imported as assets into the Xcode Asset Catalog. The editor also addresses the second problem with SF Symbols by enabling users to browse SF Symbols online without the hassle of downloading the Mac app. For developers managing both iOS and Android apps, the Hotpot icon editor also integrates icons from Material Design, Framework7, and other sources.
Create iOS 12 IconsOverview
In the summer of 2019, Apple released a comprehensive set of 1,500 icons to help developers craft more consistent and polished apps. These icons are baked into iOS 13 and rendered through the SF Symbols icon font, making the integration of beautiful icons as easy as setting UIImage filenames. Defining icon stroke, color, and other customizations are as straightforward as setting font properties. Most importantly, developers no longer need individual icon files. The only required file is the icon font, which is automatically available in iOS 13. Given their flexibility and ease-of-use, icon fonts are far superior to the traditional approach of individual images.
Unfortunately, there are two challenges with SF Symbols. The critical one is the lack of support for apps on iOS 12 and below. During the early stages of iOS 13 adoption, many users will still run iOS 12 or lower, forcing developers to either produce raster images to mimic SF Symbols or risk maintaining inconsistent user interfaces between iOS 13 and older iOS versions. The second challenge is that SF Symbols is only available for browsing through this Mac app. Not all team members, however, may want to download the SF Symbols app simply for browsing and choosing icons. By contrast, Material Design and other icon fonts allow users to browse fonts online with nothing more than a browser.
The simple approach is to hire a designer to recreate the SF Symbol icons as raster or PDF images. Of course, this is cost and time prohibitive for many companies, especially because the need to support iOS 12 will fade after 12-18 months.
