In addition to SwiftUI Apple also introduced SF Symbols at WWDC. Think of it as the Glyphicons that ship with Bootstrap, but then for iOS/iPadOS/tvOS apps.
SF Symbols provides a set of over 1,500 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.
This was long overdue.
Each icon comes in comes in nine weights (from ultralight to black) and three sizes (small, medium, and large), which make them usable in just about any context they appear in: regular text, buttons, menus, … it’s all covered.
As outlined in WWDC2019 Session 206 – featuring @inferis who worked on it – they’re very easy to use them. Creating your own also is a breeze. Nice work, Tom!
One lesser detail about these though, is that some icons are only allowed to be used for referring to one of Apple’s apps. This seems logical for stuff like Face ID (which has a very specific icon), but is very limiting for apps such as Mail that have a very generic icon (e.g. the enveloppe):
Every phone icon in the SF Symbols set is reserved to exclusively mean Apple’s Phone app. All envelopes are for Apple Mail only. Seems dumb. pic.twitter.com/lTt75HRQq9
With Windows 8.1, Microsoft’s operating system now also supports color emoji. But they did it in a very different way than Apple and Google. Instead of using PNG images, they introduced a support for layered vector glyphs!
Reminds of that neat trick where one would layer webfonts/icofonts on top of eachother, all in a different color (e.g. Forecast Font).
Best thing above all about the technology: it’s backwards compatible.
grunticon takes a folder of SVG files (typically, icons that you’ve drawn in an application like Adobe Illustrator), and outputs them to CSS in 3 formats: svg data urls, png data urls, and a third fallback CSS file with references to regular png images, which are also automatically generated and placed in a folder.
Just add grunt.loadNpmTasks('grunt-grunticon'); to your Gruntfile.js gruntfile along with a few config params and you’re good to go.
Those who believe that the floppy cannot represent saving a document because nobody uses real floppy disks anymore miss an important point: while symbols initially piggyback on the meaning we assigned to a material object in order to stand in for something more abstract, once a symbol is used often enough, the symbol itself is enough to carry meaning, and the material object is no longer important.