No matter if you started your webproject just the other day or if it's established for quite some time - Every now and then there might be the time when you're looking for a new set of Emoji or Icons. Thing is: Where do you find them? Well, you could use Google (all the data crawling ) or you could have a look at the list below.
But remember: Best practice is to include the little graphics as an SVG file. Chris Coyier wrote several articles about why you should to do this over on CSS-Tricks.
Enough talking, now let's start this list with
Emoji-Sets
What would a modern website be without a good looking Emoji set? We don't wanna know.
The default Emoticon set shipped with WoltLab Suite does not appeal to everyone, though. So here's a short unordered list of some emoji sets available for free so you can change the emoticons to your liking.
Twemoji
Twemoji is the Emoji set by Twitter. It's free and open source and usually one of the first to adapt new Emoji. The graphics are licensed under the CC-BY 4.0 which has a pretty good guide on best practices for attribution.
Formats: SVG and PNG
currently Unicode 13.0 compliant
Noto Emoji
Noto Emoji is an Emoji set created by Google and it is part of the Noto Font Family. Like Twemoji the Noto Emoji set is available for free. Emoji fonts are under the SIL Open Font License, version 1.1. Tools and most image resources are under the Apache license, version 2.0. Flag images are in the public domain or otherwise exempt from copyright.
Formats: TTF (Font), SVG and PNG
currently Unicode 12.1 compliant
JoyPixels
Formerly known as EmojiOne.
The original EmojiOne emoji are the ones that ship with WoltLab Suite - the old license made that possible. The new license model is a bit more complicated. It's either free for personal use or premium for all other purposes - the price for the emoji set alone ranges from $99 - $1299. If you like to pay that is up to you. Anyway, some of these emoji do look cool.
Formats:
free version: PNG and Fonts: TTC, TTF
premium version: PNG, SVG, Iconjar and Fonts: Webfonts (SVG/ WOFF2 etc.)
currently Unicode 12.1 compliant
OpenMoji
OpenMoji is - as the name suggests - an open source emoji set - licensed under CC-By-4.0. The set is created by 57 students and 3 professors of the HfG Schwäbisch Gmünd and 10 external contributors - so, yes, this is made in Germany.
This set comes with special interest categories beyond the standard unicode - so you'll get a Trump emoji and who doesn't want that? Nobody? Really?
Formats: PNG and SVG - both colored and black - and TTF (Font)
currently Unicode 12.1 compliant
Icon Sets
Icons transcend languages. They’re signposts that light the way for an easy, delightful user experience.
And I couldn't have said that any better.
So, as you might already know: WoltLab Suite ships with Font Awesome 4.7 using an Iconfont (not the SVG icons that are available from GitHub). And for accessibilty reasons icon fonts are not the best choice, to say the least. Also, if for some reason the font doesn't load it also looks really ugly and in some cases the meaning of a button gets lost completely - but that's not the point of this article. Speaking of which: FontAwesome is available in version 5(.x - depending on free or pro version).
Font Awesome
Font Awesome is available as a free and a paid pro version and has currently 1,588 free icons and 7,842 pro icons; version 5.13. The latest version comes with icons for Covid-19 awareness (free and pro). The pro icons are available in different weights: solid, regular and light. There are also brand icons and duotone icons. Free icons are only available in solid weight.
Formats:
graphics: PNG, SVG
fonts: TTF, OTF, EOT, WOFF, WOFF 2
Google Material Icons
Google Material Icons are the icons that - as the name suggests - Google uses for it's material styled icons on Android and some of their websites. The icons are available in different styles: filled, outlined, rounded, sharp and two-tone. The set is available unter Apache license version 2.0.
Formats:
graphic: png, svg
font: TTF, EOT, WOFF, WOFF2 - you could also use it from Google Fonts <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Get the Material Icons From GitHub
Get the Material Icons Font From GitHub
Bootstrap Icons
This icon set is a rather new one - currently they're still in Alpha, version 1.0.0-alpha3. These icons are open source, licensed under MIT License (MIT). There's only one format supported (currently?): SVG.
Format: SVG
Get the Bootstrap Icons from GitHub
Iconfu
If you're around the "WoltLab Scene" (nobody calls it that anymore) for a bit longer you might remember Incors (or their website iconexperience.com). Their first icon set, the X Collection, was shipped with WoltLab Suite 1 (or WoltLab Community Framework, WCF, as it was called back then). The company still exists and after they crated several different icon collections they started Iconfu. That's a free and paid service allowing you to customize icon sets. The free version allows you to customize the colors of Google's Material icons. The paid plans allow you to customize the icon collections by Incors - one collection is available from € 139, all collections are available from € 349 - taxes might add to the price. If you already bought from Incors before you might get some discount, so be sure to contact them before buying.
These icon collections are available: Paper Icons (former G Collection - inspired from Google's icons), Omni Icons (former O Collection, inspired from older Office Icons), Mono Icons (former M Collection, inspired from Microsoft's old Metro icons) and the Line Icons (former I Collection, inspired from iOS 7 icons).
Formats: PNG, SVG, ICO, Windows Phone App Icons, Mac Icons, IOS Icons, Android Icons
Conclusion
No matter if you're looking for free or premium icon resources - the list above will most likely help you to improve your website with some shiny icons and emoji. But remember: Always set you alt-attribute and ARIA correctly so you don't hurt accessibility.
And if you have been: Thank you for reading.