The working Twemoji Browser
LOCAL PREVIEWActivate this specimen to load its real styles. No saved preferences change.
Design system sections
06 / TWEMOJI
Embedded emoji search, category filters, SVG copy, downloads, and attribution.
Agent Instructions / emoji
You are using Twemoji on kirupa.com. Reuse the pinned catalog and browser in tools/twemoji_browser.htm; do not fork its search data or substitute a different emoji version. Keep search, multi-category filters, Copy SVG, and SVG/PNG downloads working. Twemoji artwork is invariant: theme only its surrounding UI. Preserve CC-BY 4.0 graphics attribution and MIT code notices. Give meaningful images purposeful alt text and hide decorative duplicates. Surface network and clipboard failures rather than showing false success. Keep embedded theme state local and do not write site preferences. Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.
The embedded tool is generated directly from the standalone Twemoji Browser and uses tools/cleanedUpTwemoji.js, not a second emoji dataset or hand-maintained fork. The embed omits the shared head include that starts live presence tracking; the standalone utility is unchanged. The pinned catalog is Twemoji v17.0.3 / Emoji 17. Search accepts names, multiple keywords, emoji, and Unicode code points; categories can be combined.
Twemoji artwork is fixed-color. The local preview controls adapt only the browser's surrounding surface and typography, not the emoji drawing. The standalone utility keeps its existing appearance. SVG and PNG assets come from the tool's existing CDN endpoints, so offline or blocked requests must remain visible failures.
Twemoji graphics are CC-BY 4.0; its code is MIT. Keep the attribution to Twemoji contributors and the license links when publishing derived graphics. Copy SVG copies markup, while the asset links retrieve the actual SVG or PNG.
- Do choose an emoji that carries meaning, not five decorative emojis standing in for a heading.
- Do keep useful alt text; hide an emoji from assistive technology if adjacent text already says the same thing.
- Do not recolor Twemoji to imitate a site theme or remove attribution.
