A rather geeky/technical weblog, est. 2001, by Bramus
A simple, consistent open-source icon set designed to be used in a wide variety of digital products.
The folks at Mono have released an update to their Icon Set, now totalling 177 icons in total.
Available as SVGs (recommended) but can also be included as an icon font.
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
— Benjamin Mayo (@bzamayo) June 4, 2019
Introducing SF Symbols WWDC2019 Session 206 (video + slides) →
SF Symbols →
For use with Ionic, but can also be used outside of it. Makes correct use of Unicode’s Private Use Area.
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.
In Defence of the Floppy Disk Save Symbol →
(via Cameron Moll)
This tool lets you combine iconic webfonts for your own project. With fontello you can:
- shrink glyph collections, minimizing font size
- merge symbols from several fonts into a single file
- access large sets of professional-grade open source icons
First, select the icons you like. Then update glyph codes (optional), and download your webfont bundle.
Source available on GitHub
Create your own SVG drawings (such as Twitter/Facebook/etc. logos), upload them to IcoMoon and voilà: you have a custom webfont you can use.
If you want to have more control, you can do it manually if you like.
Fico is a font with 52 simple, commonly used icons and glyphs, served on the web via
@font-face.
