The IPS Community Suite ships with a collection of our iconic emoticons, and from version 4.1 onwards, they are retina-compatible (meaning high-resolution versions are used on displays that support them). It's also possible to add new emoticons, either individually or as new sets, to customize your community.
Emoticons are used either by clicking the emoticon button in the editor and clicking the emoticon you'd like to use, or by typing the short code, which is then converted to the emoticon on the fly.
Managing existing emoticons
To manage your site's emoticons, navigate to Customization -> Editor -> Emoticons in the AdminCP. The screen you'll see will show you the currently-installed emoticons:
Underneath each emoticon is the code that users can type to use the emoticon; you can change this by editing the value and pressing enter (old posts will continue to show the emoticon correctly).
To the right of the textbox is an HD indicator to let you know whether the emoticon has a high-res version. Users don't need to worry about this - they will automatically see the high-res version when compatible with their screen.
An emoticon can be deleted by clicking the X in the corner. However, deleting an emoticon will remove the image from the server, meaning old posts that used it will show a broken image to the user.
You can reorder emoticons simply by dragging and dropping them. You can also move them between sets in the same way.
Finally, you can rename the emoticon set by clicking the icon in the title bar. By default, there's only one set (named Default), but if you have several, the name helps to identify them when the user browses the emoticon list in the editor.
Adding new emoticons
To add new emoticons to your site, click the Add Emoticons button in the header. You'll see the following:
Simply drag and drop your emoticon images to the upload field to attach them. You can also choose whether to create a new group or add them to an existing group.
Once you click Save and the emoticons have finished uploading, you'll be returned to the overview screen. Emoticon codes will have been added for each emoticon based on the filename, but you can edit these now if you wish.
To add HD versions of your emoticons, a special naming format is used. Simply add @2x to the end of the filename, making sure the rest of filename matches that of the 'low res' version. For example, if you're uploading an emoticon named smile.png, the high-res version should be named email@example.com. The software will automatically combine these two images into one emoticon for you.