I’m working on a theme where I want to use emojis as icons in some places. The intended look is more or less like this: [Screenshot from 2023-06-30 17-52-59] I’d like to wrap this up as a component, essentially just adding a Twemoji sprite-sheet. So emojis can be picked for the sidebar menu and as category icons. I don’t want to override system icons entirely. This works in general, however I’d love to hear thoughts on two issues: The full set is +3000 icons. The file-size would be 8MB. I’ve found a limited sprite-sheet online that has 2MB. The full set actually didn’t work, the reduced one did. What are the limits I should aim at with an icon set? By default, the emojis have the Unicode hex value as id. So you’d need to use an emoji picker like Twemoji Cheatsheet to find your emoji and it’s hex value, and then enter that. E.g.: [Screenshot from 2023-06-30 17-54-48] Would someone know how to best automate changing the id’s to actual shortnames? So one could rather pick by typing “tw-books”?

The page you linked seems to use emojibase to get an ‘emoji map’ (with unicode, name, etc), maybe you can use something similar? :thinking: Relevant links: components/SearchBox.jsx main import { useEffect, useState } from "react"; import css from "./SearchBox.module.scss"; import Fuse from "fuse.js"; export default function SearchBox({ setAvailabeEmojis, emojis }) { const fuse = new Fuse(emojis, { threshold: 0.1, keys: ["label", "tags", "emoji", "hexcode", "emoticon"], }); const [query, setQuery] = useState(""); function handleSearch(query) { if (query == "") { setAvailabeEmojis(emojis); return; } let results = fuse.search(query); let flatResults = Object.keys(results).reduce(function (r, k) { return r.concat(results[k].item); This file has been truncated. show original Introduction | Emojibase A collection of lightweight, up-to-date, pre-generated, specification compliant, localized emoji By the way it looks great :smiley:

all i have to say right now is yes please :grin: love this :heart_eyes_cat:

Thank you Alexander! Seems like I needed a nudge here :slight_smile: So this works now :sparkles: I added the main set of emojis, without variants (like skin and gender). That’s a set of 1869 icons (out of 3689 svg files in the Twemoji assets folder). I used tw- as a prefix, plus the english shortcode to name icons. One might still need to use a reference site to find the right emoji as the names don’t include any tags. E.g. this icon doesn’t show up if you’d type golf in the icon-picker: [Screenshot from 2023-07-01 16-49-43] I’ll share the component in theme-components when I’m ready with the theme. If anyone wants to try it out already, the repository is GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse. · GitHub

How would I best setup a twemoji icons component?

Development

Lilly (Lillian ) June 30, 2023, 5:43pm 2

all i have to say right now is yes please love this

Topic		Replies	Views
Twemoji Icons Theme component	4	1075	July 20, 2023
New Emoji picker feedback Announcements new-feature	40	6593	July 25, 2017
Emoji selector and custom Emoji Feature emoji , rfc , spec	34	20545	February 2, 2015
Convert Unicode standard emojis to selected emoji set Feature	1	2417	July 14, 2015
Emojis update Announcements emoji	58	3469	November 30, 2025

How would I best setup a twemoji icons component?

Related topics