The Top 4 Emoji and Icon Sets for Your WoltLab Suite

Pen drawing

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 =O ) 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. :D

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 Website Screenshot

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

Go to Twemoji Website

Noto Emoji

Noto Emoji Website Screenshot

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

Go to Noto Emoji on GitHub

JoyPixels

JoyPixes Website Screenshot

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

Go to JoyPixels Website

OpenMoji

OpenMoji Website Screenshot

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

Go to OpenMoji Website

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. :shrug:

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

Go to Font Awesome Website

Google Material Icons

Google Material Icons Screenshot

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">

Go to Material Icons Website

Get the Material Icons From GitHub

Get the Material Icons Font From GitHub

Bootstrap Icons

Bootstrap Icons Website Screenshot

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

Go to Bootstrap Icons Website

Get the Bootstrap Icons from GitHub

Iconfu

Iconfu Website Screenshot


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

Go to Iconfu Website

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.