SVGoticons

SVGoticons is an easy to use emoticon pack that is packed as an SVG font. It is provided as several common font file formats to cover as many systems as possible. SVGoticons are primarly aimed at developers of desktop-, mobile- and web applications, like chats, microblogging services and discussion platforms or other applications with social aspects.

Usage

SVGoticons are easily embedded via a font file like *.ttf and can be used in additional element classes. To use SVGoticons, defined strings in a text (like a message or post) should be replaced by said element with a content that equals the symbol for the specific emoticon (See the SVGoticon reference sheet). In HTML5 and CSS3 based web applications, data-attributes and :before / :after pseudo selectors can also be used to keep the original strings when copying text (See the Demo).

Advantages

A big advantage in using SVGoticons is the performance. Instead of having to load tons of emoticon graphics for many conversations and chat log for every user that uses the service, it only has to load a small font file that holds every used emoticon. This way, you can possibly reduce a great percentage of your server load. That's especially a big benefit on webservers because they have to provide much less images.

You can also simply change the color of the SVGoticons. Because this project is packed as a font, you can change the color of any emoticon from the SVGoticons package as any other text. This way, you can change the color of them to match your application theme or dye them in different colors based on their actions and emotions. Or you could let your users the freedom to change the color of the provided emoticons by themselves.

Demo

Screenshots

Picture: © Alice Peters

Open in new tab  · X Close