Emoticons

• Define a consistent set of emoticons for your UI, focusing on common faces and expressions to avoid visual clutter.
• Use skin tone and gender-neutral variants where possible, and provide accessibility-friendly text labels for screen readers.
• Place emoticons in predictable clusters (e.g., mood, activity) and offer search or filtering to speed discovery.
• Avoid mixing emoji-style color rendering with text-based emoticons to reduce rendering inconsistencies across platforms.
• Test contrast and legibility on both light and dark modes, and provide scalable SVG fallbacks when possible.

Emoticons are compact symbols used to convey emotion or tone. They are often used alongside text in interfaces, chat, and feedback widgets to shorten communication and add personality. Historically, emoticons emerged from plain-text arrangements, later evolving into richer pictographs in some ecosystems. In UI, they live best when they complement words rather than replace them.

Common pitfalls include overloading interfaces with too many variants, which can confuse users. Consider audience and context, and curate a balanced set. For best results, align emoticon usage with the brand voice and provide accessible alternatives. For broader browsing and related symbol vocabularies, see Geometric shapes, Arrows, Currency symbols, and Box drawing.