ICON OOP carries roughly 1,700 open-source emoji from the Twemoji project, available as scalable SVG or transparent PNG at any size.
Twemoji was originally released by Twitter and is now maintained as a community fork. The artwork is licensed CC-BY 4.0, which permits commercial use but does require attribution. That makes it the one set on this site with a genuine ongoing obligation attached, so it is worth being clear about.
The attribution requirement
CC-BY 4.0 requires you to credit the source. In practice: a line in your footer, credits page or licence file naming Twemoji and linking to the CC-BY 4.0 licence. It does not have to sit next to every emoji. This site carries that credit in the footer of every page, which is a reasonable model to copy.
Why the same emoji looks different everywhere
Unicode standardises the meaning of an emoji, not the picture. Each platform ships its own emoji font: Apple Color Emoji on iOS and macOS, Noto Color Emoji on Android and most Linux, Segoe UI Emoji on Windows. Same codepoint, entirely different artwork.
Usually this is fine and even desirable, since users recognise their own platform's emoji. It stops being fine in three situations:
- The emoji is part of your design. A pricing tier marked with a rocket looks deliberate on one platform and clumsy on another.
- The interpretation shifts. Historically several emoji rendered with genuinely different expressions across platforms, and the same message read as friendly on one device and sarcastic on another. Vendors have converged a lot, but differences remain.
- You need it in an image. Open Graph images, PDFs, printed material and video have no emoji font to fall back on.
When to use image emoji instead of characters
| Situation | Use |
|---|---|
| User-generated content, chat, comments | Unicode characters |
| Emoji in your own UI copy or headings | Image files |
| Reaction pickers and custom reactions | Image files |
| Open Graph and social share images | Image files |
| Email templates | Image files, with alt text |
| PDFs, print, video overlays | Image files, SVG preferred |
The dividing line is control. Where users are writing, let their own emoji font do the work. Where you are designing, use files.
SVG or PNG for emoji
SVG for anything on the web. It scales to any size from one file, stays sharp on high-density displays, and is usually smaller than a large PNG despite emoji being detailed multi-path artwork.
PNG where SVG is not supported. That is a longer list than for plain icons: many email clients strip SVG entirely, several social platforms reject it on upload, and older document tooling will not place it. Export at two to three times your display size and let the browser or renderer scale it down. Use the SVG to PNG conversion for this.
One thing to note if you are optimising: emoji artwork is genuinely complex, dozens of paths, gradients, sometimes clip paths. An emoji SVG is often ten times the size of a UI icon. If you are shipping a picker with hundreds of them, lazy load and consider a sprite.
Emoji filenames and codepoints
Emoji files are named by their Unicode codepoint in hexadecimal, not by their description. The grinning face is 1f600.svg. That is why searching a raw emoji repository by name gets you nowhere.
Sequences make it more complicated. Many emoji are several codepoints joined by a zero-width joiner, so a single visible emoji becomes a filename such as 1f468-200d-1f4bb.svg. Skin tone modifiers and flags work the same way. This is exactly why you search visually in a tool rather than trying to construct the filename yourself.
Accessibility: the part people skip
An emoji character has a Unicode name that screen readers read aloud. An emoji image has nothing unless you give it something. Replacing characters with images without adding text equivalents removes information for screen reader users.
- Emoji carrying meaning: give it a real text equivalent.
<img src="1f525.svg" alt="Popular">is better thanalt="fire emoji", because the point is what it signals, not what it depicts. - Decorative emoji next to text that already says it: use
alt=""so it is skipped rather than announced redundantly. - Do not overuse them in body copy. A screen reader announcing "sparkles sparkles sparkles" mid-sentence is a genuinely poor experience, and it happens on a lot of marketing sites.
More patterns in accessible icons.
Emoji in titles and meta descriptions
A practical note, since it comes up constantly. Emoji in a page title or meta description do not improve rankings. Search engines frequently strip them from displayed results, and whether they survive varies by query, device and engine.
Where they can genuinely help is click-through rate on a results page, if they survive. Where they hurt is when they consume display width that a clearer description would have used better, or when they make a professional result look like spam. Test rather than assume, and never let an emoji replace a word that was doing real work.
Licence and attribution in practice
Twemoji graphics are CC-BY 4.0. You may use them commercially, modify them and redistribute them, provided you give appropriate credit, link to the licence, and indicate if you changed anything.
A compliant credit line looks like this:
Emoji artwork by <a href="https://github.com/jdecked/twemoji">Twemoji</a>,
licensed <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY 4.0</a>.Put it in your footer, an about page or a credits page. It needs to be findable, not prominent. This is the only set on ICON OOP with an attribution requirement; the icon libraries are CC0, MIT, ISC or Apache 2.0 and need none. The distinction is explained in icon licensing.